Umang Varma
← All work

ClearView: one forecast that drives ordering and staffing.

  1. Audit22 frames mapped
  2. ResearchManager interviews
  3. DefineThe Connected Forecast
  4. DesignSix key frames
Product
QSS ClearView, restaurant management
Project
Design overhaul of an existing product
Users
Store and area managers

View the ClearView prototype ↗

1Problem

Managers run several stores and make two big weekly calls: what to order and who to roster. Both depend on the same sales forecast, but in ClearView they were separate tasks worked out by hand.

Inventory control was rigidQuantities were hard to adjust at the ingredient level, so orders drifted from what the menu would actually use.
Employee hours were hard to trackWithout a clear view of hours, forecasting and scheduling stayed guesswork.

How might we help a manager turn one forecast into a confident order and a fair roster, without taking the decision out of their hands?

2Process

  • 2.1Talk to managers45-minute interviews, from warm-up questions to how they plan a week. I record verbatim quotes beside my own observations, which is where the two pain points came from.
  • 2.2Audit what existsI mapped the first mockup: 22 frames across Dashboard, Inventory, Labour, Sales, Reports and Admin.
  • 2.3Find the storyI connected forecast, recipes, inventory and labour into one flow, then cut the work down to six frames that tell it.
  • 2.4Design AI as a collaboratorAI consolidates numbers and proposes changes. The manager reads the reasoning and decides.
Sales forecast→Recipe and servings→Inventory order+Labour schedule

3Solution

Change one thing and the rest follows. A forecast for a long weekend raises the ingredient order and the staffing hours together, and each suggestion shows where its numbers came from. Try it below: drag the forecast and watch both plans move.

Week 27 forecast · Fri 4 to Sun 6 JulyDraft
342
0 · quiet342 · forecast700 · busy
Order units
1,865
Inventory
Order cost
$1,505
Inventory
Extra hours
25.3h
Labour
Extra wage
$479
Labour
Suggested orderForecast × recipe
INGREDIENTPER SERVINGON HANDEXTRA NEEDEDPRESSURE ON STOCKCOST
Suggested staffingForecast ÷ $115 sales per labour hour
DAYSHAREEXTRA SALESEXTRA HOURSSUGGESTED COVER

AI drafted this plan. Nothing reaches purchasing or the roster until you approve it.

A working model of the ClearView flow, rebuilt from the Figma screens with the same numbers. At 342 extra servings it matches the designed Inventory and Labour panels.

4Design

The AI suggestion panel is the heart of the redesign. It went from a grey-box wireframe to a component used on Inventory, Recipes and Labour. Drag the line to compare.

Wireframe
What is driving the flag
Derived from week 27 forecast

Not sales history. These quantities come from the Fri 4 to Sun 6 July forecast. The burger-heavy holiday mix raises patties and buns and barely moves cheese.

Suggested order
+1,865 units
Add to orderAdjust
INGREDIENTEXTRASOURCEBeef patty 150g+212Forecast × recipeFries 180g portion+267Forecast × recipe
Final · ClearView styles
Rebuilt from the Figma frames using ClearView's own type and colour styles.

Anatomy of the AI panel

  1. Title and AI markSays what the panel explains, with an amber mark so AI content is never mistaken for system data.
  2. Source line"Derived from week 27 forecast" comes before any number, so the manager knows what it's based on.
  3. Plain-language reasoningTwo or three sentences on why, written the way a manager would explain it to a colleague.
  4. One suggested numberThe headline figure in the display counter style, so it reads at a glance.
  5. Accept or adjustA primary action and an equal way out. The manager always has the final call.
  6. Table with a source columnEvery line shows where it came from, such as "Forecast × recipe", so any number can be traced.

Design system

Type

IBM Plex Sans headings · Source Sans 3 body
  • H142 / 800
  • +1,865Display counter 32 / 800
  • H5 section title16 / 700
  • Body text for explanations15 / 400
  • Button14 / 700
  • TABLE HEADER11 / 700 · +1.1
  • CARD KICKER10 / 700 · +1

Colour

Warm neutrals, one blue, one amber for AI
Neutral 100
Neutral 300
Neutral 500
Neutral 700
Neutral 900
Accent 100
Active
Accent 500
AI

Amber is reserved for AI. Blue is for actions and status. Everything else stays neutral so data reads first.

5Why it works

  • 5.1Show the source first.Every AI panel opens with its inputs (forecast, recipe, labour target), so managers can trust it or challenge it.
  • 5.2Suggest, then ask.The plan stays a draft until the manager approves it, and any change sends it back to draft.
  • 5.3Show consequences before commit.Stock pressure and staffing update together, so a manager sees the cost of a busier weekend before anything is ordered.

Next: another round of manager interviews. Results will be added here.