Case Study: Food Quality Application
1
2
3
4
5
1
Side Static Menu
2
Data Table with Side Menu
3
Step by Step Forms
4
Mobile Friendly Menu
5
Side Collapsible Menu for Tablet
Visualizing User Centric-Experience
Personas, User Interviews and Product Roadmap
When I met with stakeholders in Seattle, we collaborated closely to dive into the user-centered experience of the application. Together, we mapped out key usability pain points that impacted daily workflows, especially within food safety and traceability. Through these conversations, we identified critical gaps like the need for better Traceability tracking and streamlined Quality Assessment features. This collaborative approach helped ensure the product would meet both compliance standards and real-world user expectations across the food industry.
Identifying Problems & Finding Solutions
In the beginning of my journey in the food quality industry I conducted a lot of user interviews with customers and workers from industry. With the gathered information I started working on the customer journey and personas. My first steps were creating user flows, paper sketches, and balsamiq sketches. I worked in collaboration with product owners and stakeholders before starting high fidelity demos.
Flows & Balsamiq Sketches
In the beginning of my journey in the food quality industry I conducted a lot of user interviews with customers and workers from industry. With the gathered information I started working on the customer journey and personas. My first steps were creating user flows, paper sketches, and balsamiq sketches. I worked in collaboration with product owners and stakeholders before starting high fidelity demos.
High Fidelity Prototypes
Lab Application
Quality Assessment Application
Traceability Application
Design System
Color
Color is more than just design, it’s part of our identity. Consistently using our color palette helps reinforce the iFoodDS brand across every touchpoint. Whether you’re working on the application or the website, be sure to use the approved HEX spot colors listed below. Staying true to these standards ensures a unified and recognizable brand experience for our users.
Primary
Our primary color palette takes the lead role in defining the visual identity of iFoodDS web applications. These colors should always be your first choice when designing core elements, ensuring consistency, brand recognition, and a unified user experience across the platform.
Think of the primary palette as the foundation, everything else builds from there.
Secondary Colors
Our secondary color palette is here to support not overshadow our primary brand colors. It’s designed for moments when visual differentiation is needed, like in charts, graphs, alerts, or call-to-action buttons within the application.
While these colors add flexibility and clarity, moderation is key. Avoid using all secondary colors on a single page to maintain a clean, focused, and cohesive look that aligns with the iFoodDS brand.
Greyscale
Greyscale colors are used as accent backgrounds or focus points across the application.
Font Variants
To ensure a cohesive and professional brand identity, we’ve standardized our use of fonts across all company communications and materials. Consistency is key, it helps build recognition and trust. We’ve chosen to use Google Fonts as our primary typeface library for their accessibility, design versatility, and cross-platform reliability.
That said, if there’s ever a need to step outside the approved font selections, for creative or technical reasons, those exceptions must first be reviewed and approved by relevant stakeholders. This keeps everyone aligned while allowing flexibility when it truly matters.
