MOBILE APP
2020

/YELLOWBITES

Mobile ordering UI for an in-house food brand. Conversion-focused checkout, brand-led visual layer, and a menu structure that scaled across 40+ SKUs without overwhelming a small screen.

CLIENT /
Yellowbites
ROLE /
Sole designer
TIMELINE /
3 months
TOOLS /
Figma · Principle · After Effects
Yellowbites Mobile App UI hero
[01] Overview

Project at
a glance.

Mobile-first E-commerce Brand-led UI Conversion design

Yellowbites had a strong brand and a weak ordering experience. The mobile app had to carry the brand's warmth onto a small screen while remaining usable for a 40+ SKU menu — and convert better than the web ordering flow that preceded it.

SKUs handled
40+
Screens designed
32
Cart abandonment
Improved vs web
02 THE PROBLEM

FOOD ORDERING ON A SMALL SCREEN, FOR 40+ SKUS.

Yellowbites needed a mobile ordering flow that could carry the brand's visual language onto a small screen without sacrificing usability. The brand was warm and playful; the UI couldn't sacrifice clarity for character.

[03] Research

How I got
to the answer.

A mix of methods, scaled to the size of the project. The goal: get to the underlying user need without overengineering the research phase.

METHOD 01

Existing user feedback

Analyzed 6 months of customer support tickets from the web ordering flow to identify recurring friction points.

METHOD 02

Competitive teardown

Studied UX patterns across Swiggy, Zomato, Uber Eats, and Domino's to identify what works in food ordering on mobile.

METHOD 03

Internal stakeholder interviews

Talked with operations, kitchen, and delivery staff to understand the downstream impact of each user choice.

METHOD 04

Heuristic audit

Walked through the existing web flow with a fresh eye, documenting every place a customer had to think twice.

Key insights

What the research surfaced — distilled to the three things that drove every design decision after.

01
Cart abandonment happened most at delivery-time selection, not payment. The UX needed to make timing decisions feel safer.
02
Customers browsed in one mode, ordered in another. Mixing them in one screen confused both intents.
03
The brand's warmth had to live in browse mode. Checkout needed to feel safe, clear, and quick — not playful.
04 APPROACH

TIGHT CHECKOUT, GENEROUS BROWSE.

Two modes for two intents. Browse mode used the brand's warmth — large imagery, friendly type, breathing room. Checkout mode tightened up — single column, clear next-step affordances, minimal distractions. The same components, two layouts.

Approach visual
Supporting visual
[05] Design Process

Four phases,
one outcome.

The same process on every project, scaled to the size of the brief. Predictable enough to plan against, flexible enough to fit the work.

PHASE 01

Discover

Support ticket analysis, competitive teardown, stakeholder interviews.

PHASE 02

Define

Two-mode framework: warm browse, tight checkout.

PHASE 03

Design

32 screens, component system, in-app motion specs.

PHASE 04

Handoff

Specs, prototype, and motion reference for development team.

Process detail
Process detail
06 OUTCOME

USED AS THE TEMPLATE FOR APP ROLLOUT.

The UI shipped as the visual reference for the app build. The component system stayed intact through development with minimal compromise. Cart abandonment dropped meaningfully against the earlier web-based ordering flow.

Final outcome
[07] Reflection

Mobile food ordering taught me that UX isn't just screens — it's the agreement between brand voice and user intent. The brand has to know when to speak and when to get out of the way.

Sushmanth · 2020
← Previous UX project
Analytics Platform
Next UX project →
GRK Real Estate Site
[X] Get in Touch

Let's build something
worth shipping.