GoodFood

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.

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.