Case studyUX/UI Design
GoodFood
A food delivery app designed around the two moments where people give up: picking a restaurant and paying.
- Year
- 2025
- Client
- GoodFood
- Services
- UX/UI Design
- Status
- Design complete
01Brief
What we were asked
A vibrant food delivery app design with full customer journey mapping, covering location selection through checkout optimization.
02Challenge
Why it was hard
GoodFood needed a mobile app design for their food delivery service that could compete with established platforms like DoorDash and Uber Eats while maintaining their unique brand personality. The app needed to handle the full ordering flow — location detection and selection, restaurant discovery and browsing, menu exploration with modifiers and customization, cart management across multiple restaurants, and a streamlined checkout with delivery tracking.
Our UX research phase identified that users abandon food delivery apps most frequently during two critical moments: restaurant selection (too many choices, poor filtering) and checkout (unexpected fees, confusing tip flows, slow payment processing). The engineering architecture needed to minimize friction at these exact points while supporting real-time data flows for restaurant availability, estimated delivery times, and order status updates.
03The Build
Scroll through the product
01Locate
Start where the user is
The journey opens with location, not a login wall: detect the address automatically or drop a pin, add delivery instructions, and save it. Everything downstream - restaurants, delivery times, fees - keys off this one screen.
02Browse
Restaurant pages that sell
Our research showed users abandon most often while choosing, so restaurant pages lead with the hook: a first-order discount, ratings and delivery time up top, and a bestselling carousel before the full menu asks for any scrolling commitment.
03Customize
The menu without the modal maze
Tapping a dish opens one sheet: photo, description, modifiers, quantity, and a single Add to order button with the live price. No nested screens between appetite and cart.
04The cart
Orders that stay organized
The cart groups items by restaurant with additions priced line by line, and the checkout button never leaves the screen. Zustand holds cart state locally while TanStack Query keeps menus and availability fresh.
05Pay
Checkout without surprises
The second abandonment hotspot is payment, so card entry is one screen with region and postal code inline - designed for Stripe with saved payment methods, tip calculation, and promo validation in the flow.
04Notes
The planned architecture
We began with comprehensive customer journey mapping to identify pain points and opportunities across the entire ordering experience, from app launch to order delivery. This research directly informed both the UX design and the technical architecture planning.
The suggested technical stack centers on React Native with Expo and Expo Router for cross-platform development. State management uses Zustand for local app state (cart contents, user preferences, active filters) paired with TanStack Query for server state (restaurant listings, menu data, order status) — this separation keeps the codebase clean and prevents the cache invalidation bugs that plague many food delivery apps.
Google Maps API integration handles location services — detecting the user's current position, allowing manual address entry with autocomplete, and calculating delivery radii for restaurant filtering. Restaurant pages use sticky menu headers for easy category navigation within long menus, solving the common complaint of losing your place while scrolling.
The checkout flow integrates Stripe for payment processing with saved payment methods, tip calculation, and promo code validation. The backend architecture uses Node.js with Fastify and PostgreSQL, designed to handle concurrent order streams and real-time status updates pushed to the client.
The design prioritizes speed of ordering — prominent deals on the home screen, smart search with combined keyword and filter capabilities, and a persistent cart indicator that follows the user through the entire browsing experience.
Suggested stack
05Outcome
Where it landed
- Deliverable
- Full Design
- Wireframes + customer journey map
- Screens
- 15+
- Complete ordering flow end to end
- Research
- CJM
- Customer journey mapping with pain points
- Prototype
- Interactive
- Clickable Figma prototype
06Craft
The work behind the work
The customer journey map that drove every screen decision - Home, Cart, Search, and Profile flows mapped node by node - alongside the onboarding and ordering flow boards, the home feed with its cuisine rails and deals, live courier tracking on the map, and the account creation screen.
Have a product like this in mind?
We plan, design, and ship - the whole story, start to finish.
Next project
PrecisionOS
Surgical Education Streaming App