The problem
Restaurant operators were drowning in raw spreadsheets and disconnected reports. Three issues compounded:
- Raw data tables lacking insights — numbers without context
- Information scattered across the system — no single place to look
- No design system — slow time to value on every new screen
Beyond the user pain, the business felt it too: a high support-team workload from custom report requests, users who couldn’t self-serve, and no consistent design language across the product.
Before
The old version
A wall of tables and filters that required deep familiarity with the data to be useful. Mobile barely supported.
Before
Mobile, in name only
The mobile experience inherited the desktop information density verbatim — operators couldn't realistically use it on the floor.
Goal
- Self-service dashboard with actionable insights for mobile and web
- Unified, intuitive interface for purchase management
- Scalable design system for speed
Research
Interviews + recordings
Conducted interviews with restaurant owners and managers. Some Clarity team members are active restaurant owners and former managers, giving us direct insight into real user needs. User recordings (Smart Look) revealed what worked and what was confusing.
Finding 1 — Role-specific needs
Three distinct personas surfaced, each looking at the data through a different lens:
- Restaurant owners — care about overall margin and supplier consolidation
- Restaurant managers — care about week-over-week operations and waste
- Purchase managers — day-to-day operations: pricing, delivery, compliance
Finding 2 — Cognitive load and appeal
- Big picture first, details on demand
- Visual charts, trends, and comparisons — not raw numbers
- Familiar restaurant context cues (food categories, supplier logos)
Research synthesis
Insights that drove the design
We translated interview themes into design principles: surface the headline first, defer details until asked for, lean on visual language over numbers.
Jobs to be done
- Quickly see where money goes and spot issues
- Focus negotiation on top suppliers and products when costs change
- Instantly track compliance with approved products
Solution
Centralized dashboard, overview at a glance
Desktop version optimized for focused deep work, and a mobile version designed to keep you informed while on the move.
Desktop for focused deep work; mobile for the floor
Solution
Detailed reports, insights in depth
Desktop version tailored for deep analysis and decision-making, with a mobile version for reviewing key report highlights on the go.
Design system
Build for scale
The widgets are built from a shared set of simple building blocks, so new cards can be created by reusing the same layouts, charts, and lists instead of designing each one again.
Validation
- Used real production data to ground the design in actual behavior
- Built a high-fidelity prototype to simulate the final experience
- Reviewed the flow with stakeholders and design partners
- Collected qualitative feedback and used it to refine the solution
Outcome
Four shifts that the new Clarity unlocked for restaurant operators:
📊
Actionable insights with visual dashboards
🧭
Centralized and organized information
🛎️
Self-service reports
🧩
Scalable design system based on PrimeVue
