This summer, our software engineering interns undertook the challenge of reimagining UDig’s Business Case Template. The transformation of business case management at UDig is a story of collaborative effort and innovative thinking. Let’s delve into the key aspects that drove the creation of this new web app: the UI, the database structure, and the technology stack.
UI: From Excel to an Intuitive Web App Experience
The genesis of this project revolved around converting a large Excel spreadsheet into a user-friendly interface. This undertaking began with breaking down the spreadsheet into various pages and it’s rows into forms.
The original mockups centered around a fixed left navigation bar with a flexible space on the right for forms. However, the project took an exciting turn when Rob Phillips, VP, Software Engineering, challenged the team to think about mobile compatibility. This triggered a rapid refactoring of the app’s design to ensure responsiveness across various devices, from mobile to laptop or larger resolutions. Collaborating with Jacqueline Arce, UX/UI Design Consultant, proved invaluable in taking the team’s designs to an industry-standard level of polish.
Through continuous feedback and iteration, the team was able to condense fields, add dropdown menus, and streamline navigation. The result is an intuitive user experience that transformed the Business Case Form’s user interaction completely.
Database: Understanding Users with PostgreSQL
The shift from an Excel-based system to a web app opened up new avenues for enhancing our understanding of potential clients. Building the web app atop a PostgreSQL database allows UDig to compartmentalize the data into seven tables: users, objectives, costs, benefits, qualitative benefits, assumptions, and summaries.
These tables, combined with Apollo GraphQL endpoints and Hasura for database management, enable UDig to gather valuable insights into industry trends. The rich data, including user experience metadata, will aid UDig in making more informed decisions, fostering relationships with clients, and navigating new markets.
Tech Stack: Leveraging Modern Technology for Performance
The project’s success can also be attributed to the choice of a robust tech stack. Utilizing TypeScript and React for the front-end development ensured scalability and maintainability. Tailwind CSS played a pivotal role in crafting responsive and visually appealing designs.
The combination of Hasura hosting a PostgreSQL database with GraphQL endpoints created a seamless data querying and manipulation experience. This integration significantly enhanced the overall performance and responsiveness of the application.
Conclusion: A Collaborative Triumph
The development of UDig’s new web app marks a practical and meaningful transition from a conventional Excel-based approach to a more accessible and intuitive platform. With attention to user experience, data management, and technology integration, this project reflects a thoughtful and collaborative effort towards improvement. It’s a step forward that aligns with UDig’s commitment to understanding clients better and efficiently managing business cases. It’s not just about using new technologies, but using them wisely to create real value.
Check out our new web app: https://www.udig.com/business-case-form/
