QuickBite: Food Delivery App UI Design
QuickBite is a food delivery app that was losing orders between “add to cart” and payment. I redesigned browse, deals, and checkout so promotions are visible, the cart is honest, and paying takes three short steps.
- Client
- QuickBite
- Role
- Mobile UI/UX designer
- Duration
- 6 weeks
- Platforms
- iOS · Android · Web
Checkout completion
+18%
Cart abandonment
−33%
QuickBite
Order. Don’t abandon.
+18%
Checkout completion
−33%
Cart abandonment
−41%
Payment-step errors
01 — The problem
What was broken
The old browse was a stacked feed of restaurants, banners, and surprise coupons. Users could not find cuisine quickly. Deals appeared as auto-rotating banners that people trained themselves to ignore.
Checkout asked for address, tip, promo, cutlery, and payment on one scrolling page. Errors appeared at submit. On a mid-range phone the CTA sat under the keyboard. Hungry users abandoned.
02 — Research
What I learned
Categories beat infinite feed
When people already know they want noodles or biryani, a cuisine-first entry is faster than a personalized mash of restaurants.
A deal that cannot apply should not shout
Showing expired or ineligible promos at checkout created distrust. Active Deals had to be cart-aware.
One decision per checkout screen
Address, then review + tip, then pay. Combining them felt efficient in Figma and failed on real devices.
03 — Process
How the work happened
- 01
Teardown and funnel
Compared browse → restaurant → cart → pay across three competitors. Timed the existing QuickBite checkout on a mid-range Android device. Mapped every field that blocked pay.
- 02
Information architecture
Promoted Categories and Active Deals to the home. Restaurant pages lead with dishes, not a long brand story. Cart shows modifiers before the user hits pay.
- 03
Visual and copy
Warm photography, large dish tiles, and short labels. Replaced “Apply code” mystery with “This deal applies to your cart” or silence.
- 04
Checkout prototype
Three steps, sticky pay button, inline validation. Tested with six users ordering a real meal flow. Cut two optional fields from step one.
04 — Solution
What shipped
Browse that starts with a craving
Home opens on categories and a small set of nearby restaurants. Active Deals is a horizontal strip of offers that still apply — not a slideshow of brand campaigns.
Restaurant pages built for adding
Dish cards show price, a dietary mark, and add. Customization is a sheet, not a new page. The cart badge updates immediately.
Checkout that stays above the keyboard
Step 1 address, step 2 review and tip, step 3 pay. Promo state is already resolved. The primary button never hides under the keyboard.
Scope delivered
- Category-first home for faster cuisine choice
- Cart-aware Active Deals instead of ignored banners
- Restaurant menus designed for add-to-cart speed
- Three-step checkout with sticky pay and inline errors
- Copy that tells you when a deal actually applies
05 — Outcome
The result
Cart-to-paid conversion improved and payment-step errors dropped after the three-step checkout. Deals that actually apply got used; the ignored banner carousel went away.
+18%
Checkout completion
−33%
Cart abandonment
−41%
Payment-step errors