Drawing

70%

The first five minutes of a meal-plan app, done properly.

70% case study cover
What it is
Mobile app · Foundation
Year
2026
What we ran
Drawing · Building
Built with
React Native · React · Redux Toolkit · Encrypted storage · i18next · React Navigation

Start with the door

70% is a new personalised meal-plan delivery app, built through Walnut, our own software firm. Before menus and subscriptions, it needed the part every user touches first: a welcome that sells the idea, and a sign-up, log-in and recovery flow that is quick on a phone and secure underneath. This is that foundation.

A meal-plan app lives or dies in its first minute. If the welcome doesn't say what you get, or sign-up asks too much, nobody ever sees the menu. So the first milestone was the whole front door: two onboarding moments that sell the promise, personalised meals delivered daily, then phone-number sign-up, log in, and a password recovery flow with a one-time code.

Scope, stated plainly: this build covers onboarding and authentication. Menus, plans and ordering come next on the same foundation.

Seven screens, one straight line

Onboarding leads with the food, then the delivery. Log in is phone first, with Remember Me and a clear path to recovery. Verification is four boxes, a countdown before resend, and a code that submits itself the moment the fourth digit lands. Reset sends you straight back to log in.

Built to grow

  • Logic separate from layout. Every screen splits into a controller hook, a typed interface and a memoised view, so screens stay testable and layout can change without touching logic.
  • Encrypted session storage. The session and language persist on encrypted storage: Keychain on iOS, Keystore on Android. Nothing sensitive sits in plain text.
  • Arabic from day one. English and Arabic files, text direction handled per language, and icons that mirror in right-to-left, set up before there is much to translate.
  • One canvas, every phone. All sizes scale from the 393 × 852 design canvas, so the specs map one to one.

Next on the same foundation: the plan builder, the daily menu, ordering and delivery, and push notifications, with the API layer and notification service already stubbed in.

Screens shown are recreated from the app's source and assets. Typed names and numbers are examples.

Lead with the food: personalised meal plans that fit your goal, a tap away.
Lead with the food: personalised meal plans that fit your goal, a tap away.
Then the delivery: the healthy lifestyle at your doorstep.
Then the delivery: the healthy lifestyle at your doorstep.
Phone first, with a country code, as people in the Gulf expect.
Phone first, with a country code, as people in the Gulf expect.
Sign up: name, phone and password, with the hero photo carrying the brand.
Sign up: name, phone and password, with the hero photo carrying the brand.
Forgot password: one field, one button pinned to the thumb zone.
Forgot password: one field, one button pinned to the thumb zone.
A code that submits itself the moment the fourth digit lands.
A code that submits itself the moment the fourth digit lands.
Set a new password and the stack resets straight to log in. No back-button trap.
Set a new password and the stack resets straight to log in. No back-button trap.