Step 10 / 11

The product

What a user actually gets: the finished customer app, from set-up to ordering, live tracking and meal logging, and the restaurant web dashboard that receives the orders.

Restaurant web dashboard: Today’s Total Orders, Total Revenue, Avg Order Value and Peak Order Time cards above the Order Chart and Quick Actions
Customer app home screen: Hello Sara!, current weight 78 kg, weekly goal Lose 0.5 kg, achieve in 7 Days, today’s meals with 1,700 kcal left
Scroll

This is what we got 😍🔥

Three tilted iPhones: home screen (Hello Sara!, 420 kcal left), Order Successfully Delivered with Rate / Log Meal, and Today’s Overview with a calorie ring and Order meal
UI card: Restaurant card
UI card: Add address details
UI card: Height (Metric / Imperial)
UI card: Meal item
UI card: Age
UI card: Steps
UI card: Activity level
UI card: Order info

The final high-fidelity UI after the iterations: the components float in around the home, order-delivered and today’s-overview screens.

Home screen
Home screen: Hello Sara!, Deliver to Khalda street; tracker with Current weight 78 kg, Weekly goal Lose 0.5 kg, Achieve in 7 Days; Today’s meals 1,700 kcal left with Breakfast, Lunch, Dinner, Snack; search for restaurant, meal, cuisine; categories; Order again

Personalized Homepage

In the app’s home screen, users see a customized tracker card, showing their current weight, weekly goal, and a 7-day countdown, not too short that users feel discouraged, and not too long that they lose focus. This motivates users to stay on track as the day they measure progress approaches, helping them self-correct along the way.

What users said

Select a tag or a quote to light up the part of the screen it is about.

Delivery trackingNotification

Dynamic Island

Interactive element that updates users on their order status in real-time. It briefly expands to show key info like "Order Confirmed," "Out for Delivery," or "Arrived," allowing users to track their order without leaving the current screen.

I want to get notified about my order easily!

I want to contact the driver easily without needing to access the app!

Scroll to run the order. Tap the island to expand or collapse it.

iPhone with an expanded Dynamic Island: BurgerHouse — Healthy salad, 24,90 SAR, progress Preparing → On the Way → At the Address → Delivered, Kadir’s ETA 2 min, message and call buttons
The live island is rebuilt from this frame.
Dynamic Island

The UI components

Fourteen components

Onboarding pickers, the address flow, ordering, tracking and activity cards, laid out in the same five columns as the Figma collage. Hover to pause, select a card to see it full size.

UI component: Add address details
UI component: Add new address
UI component: Weight
UI component: Meal item
UI component: Gender
UI component: Meal plan
UI component: Activity level
UI component: Order info
UI component: Steps
UI component: Age
UI component: Health goal
UI component: Height
UI component: Restaurant card
UI component: Workout
‘SO’RA’ in huge bold letters filled with a peach-red-green-teal gradient App Top-down salad bowl cut-out (eggs, chicken, corn, cucumber, red cabbage, tomatoes)

Final screens · 1 Oct 2024 hand-off

Tap through the app

The 97 screens of the final hand-off, by flow. Pick a flow and tap the phone: right side for the next screen, left side to go back. Every screen is also in the rails below.

1 / 1

Keyboard: ← → on the phone, or Tab to the buttons.

All screens by flow · 96 screens + the empty splash frame · drag the rails

Setup / onboarding 24 screens

  1. 01Welcome to Sor’a — integrate with health app / Set up profile (bottom sheet over Home)
  2. 02Welcome sheet with health-app permission prompt
  3. 03Step 1/5 — What’s your gender?
  4. 04How old are you? (age wheel, default 28)
  5. 05What is your height? (Metric / Imperial ruler, default 165 cm)
  6. 06What is your Weight? (ruler, default 75 kg)
  7. 07Step 4/5 — Physical Activity Level
  8. 08My plan — No Meal Plan Yet? / Plan meals
  9. 09Need a personalized meal plan? — Create my free plan / I already have a plan
  10. 10My plan — No Meal Plan Yet? (expanded overview)
  11. 11Create my free plan — Step 1/6 What is your goal?
  12. 12Step 2/6 — Let’s define your weight loss journey:
  13. 13Step 3/6 — Do you follow any specific dietary preferences or restrictions?
  14. 14Step 4/6 — Which meals do you usually have?
  15. 15Step 4/6 — Add Meal (meal name, duration, meal icon)
  16. 16Step 5/6 — Tell us about your health:
  17. 17Step 6/6 — Select meals you enjoy the most:
  18. 18You’re all set up — 1700 Kcal, Goal Weight: 72 Kg
  19. 19I already have a plan — Daily Intake Setup
  20. 20Daily Intake Setup — Add Meal sheet
  21. 21Daily Intake Setup — added meals
  22. 22Calories Intake Setup — calories per meal
  23. 23Dietary Restrictions
  24. 24You’re all set up (own plan)

Log in / sign up 10 screens

  1. Splash screenAn empty frame in Figma: the splash animation lives in a separate JSON file, so there is no screen to show.
    Splash screen (empty frame — animation lives in a separate JSON)
  2. 01Log in — Mobile number (empty)
  3. 02Log in — Mobile number (filled)
  4. 03OTP — Enter the verification code we just sent
  5. 04OTP — code from Messages filled
  6. 05OTP — filled, Continue
  7. 06Sign up — User name, Email, Mobile number
  8. 07Sign up OTP — empty
  9. 08Sign up OTP — filled
  10. 09Sign up OTP — filled, Continue

Home 14 screens

  1. 01Home empty state (latest version, placed outside the sections)
  2. 02Home empty state
  3. 03Home filled state
  4. 04Full home screen (scroll)
  5. 05Select category (fixed content)
  6. 06Breakfast meal — Calorie Intake summary (clicking a checked meal card)
  7. 07Generate meal (clicking a meal card)
  8. 08Restaurants — Order again (clicking view more)
  9. 09Filter by
  10. 10Filter by — Nutritional value (range sliders)
  11. 11Filter by — Nutritional value (50 kcal selected)
  12. 12Filter by — Dietary type
  13. 13Filter by — Price range (Budget / Mid-range / High-end)
  14. 14Sort by

Search 3 screens

  1. 01Search — empty state (new user)
  2. 02Search — last and popular searches
  3. 03Search — 'Burger' category results

My plan 3 screens

  1. 01Plan screen — Today’s Overview
  2. 02Plan screen — second variant
  3. 03Manage step tracking (clicking on Steps card)

Order flow · ordering & tracking 22 screens

  1. 01Restaurant Page — Best Burgers menu
  2. 02Restaurant Page — item added, cart bar shown
  3. 03Customize To Your Liking — Remove Ingredients default
  4. 04Customize — ingredient selected for removal
  5. 05Meal details — allergens listed
  6. 06Cart — Option 1
  7. 07Cart — Option 2, no promo code
  8. 08Cart — adding promo code
  9. 09Checkout — Cash on delivery
  10. 10Checkout — Pay with apple
  11. 11Choosing payment method (sheet)
  12. 12Adding new card (sheet)
  13. 13Delivery Address (sheet)
  14. 14Add new address — map
  15. 15Add address details
  16. 16Track Order — stage one
  17. 17Track Order — stage two, order accepted
  18. 18Track Order — stage three, preparing
  19. 19Track Order — stage four, captain assigned + on the way
  20. 20Track Order — stage five, order delivered
  21. 21Order Successfully Delivered (appears as soon as the captain delivers)
  22. 22Delivered to Home — order details

Order flow · log meal 20 screens

  1. 23Log Meal (canvas label '🗒️ Log meal- Dinner', screens show Lunch)
  2. 24Log meal — Lunch sheet
  3. 25Log meal — Lunch items selected
  4. 26Lunch Successfully Logged! — 583 Kcal, within range
  5. 27Lunch Successfully Logged! — 760 Kcal, a little over
  6. 28Insight — No Worries! (over intake)
  7. 29Lunch Successfully Logged! — 240 Kcal, a little under
  8. 30Insight — That’s Fine! (under intake)
  9. 31Log meal — Breakfast (empty, no calorie count yet)
  10. 32Log meal — Breakfast sheet
  11. 33Log meal — Breakfast items selected
  12. 34Breakfast Successfully Logged! — 583 Kcal
  13. 35Breakfast Successfully Logged! — 760 Kcal
  14. 36Breakfast Successfully Logged! — 240 Kcal
  15. 37Log meal — Dinner (all filled, user can still log)
  16. 38Log meal — Dinner sheet
  17. 39Log meal — Dinner items selected
  18. 40Dinner Successfully Logged! — 583 Kcal
  19. 41Dinner Successfully Logged! — 760 Kcal
  20. 42Dinner Successfully Logged! — 240 Kcal

Profile 1 screen

  1. 01Profile — Sara Ahmad

Restaurant version · web dashboard

The restaurant app

The restaurant version was designed as a web dashboard: a home overview of the day’s performance and an orders screen to review and act on each order.

Dashboard
Restaurant dashboard: Today stats (Total Orders, Total Revenue, Avg Order Value, Peak Order Time), Order Chart, Quick Actions, Orders, Customer base, Customer reviews

All 11 dashboard screens · drag

  1. DashboardDashboard
  2. DashboardDashboard expanded
  3. MenuMenus overview
  4. MenuBreakfast
  5. MenuBreakfast expanded
  6. OrdersOrder Details
  7. CampaignsCampaigns overview
  8. CampaignsAds
  9. CampaignsOffers
  10. PaymentsPayments
  11. Sales and ReportingSales and Reporting

Restaurant app · order scenarios

What happens to a new order

Each scenario row from the Pixel Box, step by step: adjust it, mark items out of stock, accept it with a ready time, or cancel it with a reason. Scroll to play the steps in the browser frame; select a step to jump to it.

  1. New Order Screen 1 step

    1. Orders › New: list of new order requests and the selected order with items, notes, totals, Cancel Order and Accept Order

  2. Adjust Order 4 steps

    1. New order selected, with the Adjust Order link
    2. Adjust Items pop-up with Out Of Stock checkboxes and quantity steppers; Confirm Adjustments disabled
    3. Adjust Items pop-up with the first item ticked Out Of Stock; Confirm Adjustments enabled
    4. Order with the out-of-stock item greyed and a toast: Order Successfully Adjusted, Customer has been informed, order pending update.

  3. Out Of Stock 4 steps

    1. New order selected
    2. Adjust Items pop-up without quantity steppers; Confirm Adjustments disabled
    3. Adjust Items pop-up with the first item ticked Out Of Stock; Confirm Adjustments enabled
    4. Order screen with the toast: Order Successfully Adjusted, Customer has been informed, order pending update.

  4. Accept Order + Adjust Time 5 steps

    1. Orders › New: list of new order requests and the selected order with items, notes, totals, Cancel Order and Accept Order
    2. Ready Time pop-up: Input Ready Time 30 min, chips 30 min / 45 min / 1 Hour; Confirm Ready Time disabled
    3. Ready Time pop-up with 30 min; Confirm Ready Time enabled
    4. Ready Time pop-up with the 45 min chip selected
    5. Orders screen with a green toast: Order successfully accepted, and has is now being prepared

  5. Cancel Order 3 steps

    1. Orders › New: list of new order requests and the selected order with items, notes, totals, Cancel Order and Accept Order
    2. Cancel Order pop-up with five cancellation reasons; Confirm Cancellation disabled

Restaurant app · Comps

Built from shared components

The merchant screens reuse one set of components: order card states, alerts and pop-ups. Two large notes on the board name the toasts for the customer’s answer to an adjustment.

Toaster that customer accepted, Order now pending

Toaster that customer didn’t accept, Order Canceled

Order Card states: default with notes; adjust with an Out Of Stock checkbox and a quantity stepper; out of stock, greyed with a red Out Of Stock label
Order Card
Alert/Notification components: Error and Successful messages, with and without the close icon, beside a toast-style reference
Alert/Notification · error and success, with and without close

On the Comps board

  • Order Card — variants: Default / Out Of Stock / Adjust
  • Alert/Notification — Times=true / Times=false ('Error: Error Message')
  • Alert/Notification — Times=true / Times=false ('Successful Message')
  • Pop Up — Adjust Items
  • Pop Up — Ready Time
  • two 20–24 px icon components (support, phone)
The whole Comps board: toaster notes, order card states, alert components, Adjust Items and Ready Time pop-ups
The whole Comps board · select to zoom

Archives · explored, then parked

Call Customer pop-up: Are you sure you want to call the customer? Cancel / Call Customer
Call Customer · “Are you sure you want to call the customer?”
Need Support? pop-up pop-up with a 3D illustration and a call-support button
Support · “Need Support?” pop-up
Grid of black iPhones laid flat in isometric view showing many So’rah screens: checkout, home, order delivered, restaurant menu, log meal, payment

Our solution, like So’rah, isn’t one-size-fits-all. Every interaction is optimized to simplify the complexity of nutrition and deliver results, pixel by pixel, goal by goal.