Case Study
Smart Food Safe
A supplier compliance dashboard designed to simplify food-safety operations through centralized query management, certificate tracking, risk-based monitoring, and clearer operational visibility.
Problem
Supplier compliance information is often distributed across documents, conversations, and operational systems. Teams need a faster way to identify overdue actions, review supplier status, and understand risk without scanning dense data.
Design Goals
- Centralize supplier compliance and certificate information.
- Make risk and overdue actions visible at a glance.
- Reduce cognitive load through hierarchy, filters, status patterns, and actionable tables.
- Support faster, more confident operational decisions.
Process
Design process
- 01
Empathize
Stakeholder needs, operational pain points, user stories and journey mapping.
- 02
Define
Problem framing, workflow priorities and hypotheses for a compliance dashboard.
- 03
Ideate
Information architecture, dashboard hierarchy, filters and interaction concepts.
- 04
Design & Prototype
Low/high-fidelity layouts, component patterns and interactive Figma prototype.
- 05
Testing
Usability testing, iteration and validation of navigation, hierarchy and task clarity.
Key UX Outputs
Stakeholder insights · Problem framing · Information architecture · User flows · Wireframes · High-fidelity UI · Interactive prototype · Usability feedback
Design Decisions
Style guide
- Primary Blue#2563EBAction / navigation / focus
- Deep Navy#11192ENavigation / high-contrast surfaces
- Support Blue#60A5FASecondary emphasis / data visuals
- Success Green#16A34ACompliant / positive status
- Warning Amber#F59E0BAttention / pending status
- Error Red#EF4444Critical / overdue status
- Surface#F8FAFCPage and table surfaces
- White#FFFFFFCards / content surfaces
Approach
Design principles
Hierarchy
Use size, weight, spacing and contrast to make the next action or most important information obvious.
Consistency
Repeat components, states, spacing and interaction patterns so users can build familiarity.
Accessibility
Maintain strong text/background contrast and avoid relying on color alone to communicate status.
Feedback
Make changes, exceptions, success and confirmation visible at the moment they happen.
Content clarity
Prefer concise labels, meaningful status language and progressive disclosure over dense explanation.
See every screen, state and interaction behind the Smart Food Safe interface in the full Figma file.
Explore the full design in FigmaMore Work
