GrubMarket is a food tech company that handles complex operations across finance, inventory, compliance, and vendor relationships. Before building their internal ERP system, most processes were managed using Excel spreadsheets. This led to fragmented data, frequent errors, and a system that could not scale as the company expanded. To address these challenges, I designed GrubMarket Connect, a centralized ERP-style web application that brings together all essential business functions in a structured, easy-to-use interface.
Role
Product Designer, Visual Design, Interaction and Prototype
Tool Kit
Figma, Adobe XD, Adobe Illustrator and Adobe Photoshop
The Problem
Each department at GrubMarket was using its own spreadsheets to track information. This created inconsistencies and made collaboration difficult. Version control became a common issue, with different teams often working from outdated files. Manual inputs increased the chances of errors, and the lack of a centralized platform made reporting and decision-making slow and unreliable.
The company needed a solution that would unify its operations, reduce mistakes, and grow with its expanding team and business processes.
The Solution
GrubMarket Connect was built as a central hub to replace the scattered spreadsheet workflows that DBAs were using to manage daily tasks. Instead of handling multiple Excel files and manual updates, each DBA now works within a shared platform that brings everything together—from finance and inventory to food safety and vendor management.
Every module was shaped around the actual tasks each DBA was responsible for, just made cleaner and more reliable. Data input is structured, information is easier to track, and built-in validations help reduce common errors. The interface stays consistent across modules, so once a DBA gets used to one part of the system, the rest feels familiar too.
The design focused on keeping things lightweight and easy to navigate. No clutter, no extra steps—just the essentials, presented clearly. Moving from spreadsheets to a web-based system gave DBAs better visibility, improved collaboration across teams, and helped the company build a stronger foundation for growth.
The Process
Site Map
Components
Developing the Designs
1. Laying the Foundation The design process started by building out the core layout instead of wireframing. This made it easier to visualize the structure early on and define key content areas across modules. Establishing a clear screen hierarchy upfront helped set the direction for how information would flow within the app. 2. Designing with Clarity and Consistency As the layout took shape, visual elements like typography, spacing, and color were gradually introduced to guide user focus and improve readability. Along the way, reusable components—such as buttons, cards, form fields, and icons—were created to keep the interface consistent and speed up the workflow across multiple modules. 3. Prototyping and Polishing A clickable prototype was used to showcase flows and gather feedback. This helped refine user journeys and identify areas for improvement. Final mockups focused on alignment, responsiveness, and micro-interactions to ensure the designs were not just functional but also clean and intuitive before handoff to development.
1. Designing for spreadsheet users requires empathy Since most DBAs were used to working in Excel, the design needed to feel familiar but more structured. Too much change at once would slow adoption, so the focus was on improving clarity without overwhelming them.
2. Structure matters more when scaling up Defining the layout early made it easier to add new modules without constantly reworking the flow. A strong foundation kept the system flexible and easier to maintain.
3. Reusable components improve both speed and consistency Identifying repeatable UI patterns early on made the design process faster and reduced visual noise across modules. It also helped developers build more efficiently.
4. Collaboration is key to getting the details right Working closely with stakeholders and developers helped surface edge cases, adjust logic on the fly, and make better decisions throughout the process—not just at the end.
