I had 12 months to prove a scanner could replace the tablet.
The app ran only on expensive tablets, so customers were ready to leave. I led design on the scanner workflow that replaced it, and rebuilt the design system underneath it.
Role
Design lead
Team
1 design, 1 PM, 5 eng
Surfaces
Zebra handheld, Tablet, Web
Before
1h 30m
Manual ordering by counting every item
After
20m
Count targeted items
Future
5m
Fully automated order
Afresh is the software that powers grocers.
No one knows how much of an item will sell on a given day. If the order writer guesses low, the shelf goes empty and the store loses a customer. If they guess high, you get shrink. The real number depends on volatile factors like weather, ads, promotions, local demand, and seasonality. Our AI/ML forecasting system recommends how much to order That recommendation prevents 200M+ lbs of food waste yearly.
Business problem
People problem
Afresh was exclusive to tablet devices which is expensive. You also could not scan on a tablet. The rest of the industry was already on handheld scanners and perspective customers preferred scanners.
Corporate customers wanted centralized AI ordering and not level control since stores were gaming the system in order to produce the recommendations they wanted. So the strategy was to shift labor away from stores to corporate.
An order guide can have tens of 100’s of items. Ordering makes an order writer decide item by item. A scanner is built to capture data fast and it is poor at displaying much of it. So the mental model had to change at the same time remove the bloat that was added over time.
Before
1h 30m
Manual ordering by counting every item
After
20m
Count targeted items
Future
5m
Fully automated order
The strategy
Capture
Scan the items running low or already gone. Count only the targeted items, not the whole department.
Generate
Afresh forecasts demand and turns the captured inventory into a recommended quantity per item.
Review
Corporate reviews the flagged items. The job becomes approving an order instead of writing one.
Notable designs
Since this scanner was a new modality, there hasn't been a mobile design system built with the scanner in mind. Design considerations had to be made for its small form factor, environment and conditions. A new design system had to be created to satisfy these requirements.
A new design system
When I joined, the design system was incomplete and lacked mobile considerations. Designers were creating custom components that quickly proliferated into inconsistent variations. Engineers had also hard-coded values over time.
Scanner workflow
End to end. Category structure, item card, count entry, unit switching, completion states, failure paths.
A new design system
When I joined, the design system was incomplete and lacked mobile considerations. Designers were creating custom components that quickly proliferated into inconsistent variations. The team urgently needed consistency to strengthen brand equity and accelerate both design and engineering velocity.
Strategy
Old tablet workflow
Store managers took inventory on all items + placed orders in same session
Bloated UI with 12+ data fields per item
1.5 hours average time
High cognitive load leading to errors, fatigue
New scanner goal
Inventory on AI-selected set of items only
Ordering handled centrally by corporate (still in scanner for some customers)
Single-task focus leading to speed + accuracy
Next