1. Discovery & Research

🧑‍💼 Stakeholder & User Interviews

Interviewed 12+ stakeholders from operations, kitchen staff, compliance, and IT to surface primary friction points. Created proto-personas for:

• Kitchen Lead (daily menu updates)
• Inventory Ops (ingredient management)
• Nutritionist (label data & compliance)
• Admin (multi-location oversight)

🧪 Heuristic Audit + Accessibility Scan

Assessed current OS and identified 40+ usability issues. Top WCAG violations:

• Missing alt text and focus states
• Poor contrast ratios in cost tables
• No ARIA roles for screen readers
• Inconsistent keyboard navigation

🕵️‍♀️ Competitive Benchmarking

Benchmarked against industry leaders: 7Shifts, BlueCart, Nutritics, and NetSuite.

2. Information Architecture & Workflow Mapping

🔄 Module Re-Architecture

Grouped 15+ features into 5 functional categories:

• Dashboard
• Meals & Costing
• Users & Permissions
• Orders & Ingredients
• System Settings

🔑 Role-Based Access

Designed tailored dashboards for each persona.
E.g., Nutritionists access Label + Ingredient data only.
Ops Managers can bulk edit orders and costing but not label content.

🗺 Task Mapping

Mapped complete workflows for:

• “Create a new meal SKU and assign ingredients, costs, labels”
• “Update kitchen production schedule per location”
• “Create user account, assign role, set language preference”

3. Design System & Accessibility

🧱 Figma Design System

• 200+ components and variants: tables, modals, buttons, tags, alerts
• Typography: Inter, optimized for legibility and low-vision users
• Colors: Primary #227D73 (4.5:1+ contrast); secondary palette WCAG-verified
• Forms: Inline validation, clear error states, ARIA attributes

♿ Accessibility Enhancements

• Focus rings & tabbing order preserved in all flows
• Semantic HTML planned in dev spec (e.g., <nav>, <section>, <aria-label>)
• Table designs with screen reader support
• Button hit area: min. 44×44 px
• Color-blind–safe indicators for status states

4. UX/UI Execution & Prototyping

📲 UX Improvements by Feature

• Dashboard – role-based KPIs, alerts, fridge status, inventory at-a-glance
• Users – bulk management, edit permissions, assign to multiple kitchens
• Meals – new “meal builder” with auto-costing, label preview
• Costing View – formula-based cost rollups, editable cells with guardrails
• Orders List – real-time status, filters by machine/location/date
• Label Data – nutrition fact editor with WCAG support and export
• Settings – editable production days, multilingual settings, location toggles

🧪 Usability Testing

• 10 real UpMeals partners tested redesigned flows
• Success metrics:
  • 92% completion rate on creating new meals
  • 47% faster production day setup
  • 38% fewer errors in costing edits

5. Developer Handoff & QA

• Figma Dev Mode with annotated specs, tokens
• Shared Storybook components with dev
• Weekly QA check-ins with devs for WCAG testing
• Final pass with screen readers and keyboard-only navigation

📊 Outcomes

• 📈 +24% enterprise interest (post-pitch to Save-On-Foods and similar partners)
• ⏱ Reduced ops time by 40% for weekly menu updates
• ✅ WCAG 2.1 AA passed via third-party audit
• 🔒 Role-based access system enabled scaling to 30+ locations
• 🎯 MVP modules delivered 2 sprints ahead of plan