01
OTP over WhatsApp, not SMS
GainedCodes land in an app people keep open.
CostA hard dependency for anyone without it.
Case study 02 — Client work at Metafic
A grocery app where the total at checkout is the total you expected.
Shoppi: groceries ordered in a few taps, paid by saved card and tracked to the door. Designed end to end, in English and French.
105Screens: 54 English, 51 French
2Languages, one layout
12Top categories
3Tracking stages, store to door
The problem
01 — Why carts get left
People don’t leave a cart because they stopped wanting food. They leave when the total surprises them.
- The brief I set: make the weekly shop faster than the walk to the store, and the total at checkout the total you expected.
Fig. 01 — Reasons shoppers leave at checkout. Source: Baymard Institute
Who it’s for
02 — Three kinds of shop
Three kinds of shop, one basket.
The weekly stockerPlans ahead
Buys the same things every week, and resents rebuilding the basket.
The top-up shopperRan out of milk
Wants two or three things, fast. Search and the wait are the whole experience.
The bilingual householdEnglish and French
Lives in two languages, and expects the app to follow.
User flow
03 — Before a single screen
Home at the centre; every branch ends in the same cart.
- Sign-up and login, with retry loops for a wrong password or code.
- Categories, search with a “not found, search again” loop, and offers.
- Cart, payment, order placed, tracking; Buy Again and the account behind them.
Browse and basket
04 — The aisles
Walk the aisles with one thumb; the cart is always one tap away.
Up close
05 — Four decisions
Four parts carry the trust, so they got the most work.
A — The bill
Every fee on its own line
Item total, service and delivery, each with the saving struck through, before payment.
B — Add
The button becomes the quantity
Once an item is in, Add turns into a stepper, and a cart bar holds the count and total.
C — Sign-up
The code arrives where people already are
Name and mobile only; the screen says the OTP comes by WhatsApp before you tap.
D — Tracking
The delivery has a name
The rider, the store and your address as stops, with chat and call one tap away.
Checkout to door
06 — Pay, then wait
One screen to pay; the wait is designed like part of the product.
English and French
07 — Designed twice
Not translated at the end: every screen set again in French.
- French strings run longer, so buttons, tabs and labels had to hold them.
- Euros, Lyon addresses and French phone numbers, down to the error states.
Fig. 07 — The wrong-code state, English and French
Edge states
08 — When the shop says no
Every error says what went wrong, at the field, with one way on.
The system
09 — Colour and type
Fresh green does the selling; everything else stays quiet.
Typeface
Montserrat Regular to Bold, with the French accentsWeights
4 roles Body, labels, product names, pricesColour
- Leaf #6EB83A · actions, prices, savings
- Ink #1E2B39 · text
- Mist #E9EEF6 · header ground
- Carrot #F36727 · change, delete
- Lime #CADC52 · campaign accent
- White #FFFFFF · surface
Trade-offs
10 — Four calls
Four calls, and what each one cost.
02
The bill inside the cart
GainedNo late surprises; the saving sits beside the spend.
CostA longer cart that scrolls on small phones.
03
A sub-category rail, not nested menus
GainedOne screen for a whole aisle.
CostNarrower cards, so names truncate sooner.
04
A named rider
GainedThe wait feels accountable; problems go to chat.
CostNeeds reliable live location from operations.
What I’d do differently
11 — The second pass
What the second pass would fix.
French QAA string audit on every French frame: “Beverages” and one aisle’s “Add” slipped through.
One name per feeThe cart says Service Fee, the summary Handling Charge. A content glossary would have caught it.
ContrastWhite on the leaf green measures 2.45:1. Keep the green for fills; darken it for text and prices.
Real dataReal prices and a real Lyon map would surface layout problems earlier than 150 € everywhere.
Next — 03