Case Study: Midtown Table - Food Delivery Mobile App UI
1. Project Overview
Midtown Table is a mobile application designed to provide users with a platform for discovering and ordering food from local restaurants for delivery. The app's user interface is crafted to offer a simple and intuitive experience, from browsing menus to completing an order.
2. The Goal
The objective of the Midtown Table project was to design a functional and aesthetically pleasing mobile app interface that facilitates a smooth food ordering process. The design aims to provide clear navigation, present restaurant and menu information effectively, and streamline the checkout and payment experience for the user.
3. Key Features
The app's design showcases several core features that define the user experience:
Restaurant and Menu Discovery: The home screen features a search bar and categorized sections, such as "Restaurants" and "Popular," allowing users to browse food options. The design includes dedicated pages for each restaurant, displaying its menu with photos, descriptions, and pricing.
Intuitive Ordering Flow: Users can add items to their cart directly from a restaurant's menu page. The app includes a dedicated "My Cart" screen where users can review their order, adjust quantities, and view the subtotal.
Checkout and Payment: The checkout flow is streamlined into a multi-step process. Users can add or select a delivery address, choose a payment method, and confirm their order. The design also includes options for promo codes and tipping.
User Profile and History: The app features a user profile section where a user can manage their account information, view their order history, and access saved addresses and payment methods.
Visual Elements: The design uses high-quality food photography and clear iconography to enhance the user's browsing experience and make menu choices more appealing.
4. Design Approach
The visual design of Midtown Table is clean, modern, and inviting, with a focus on usability.
Color Palette: The app uses a neutral color palette with white as the primary background color. A vibrant orange is used as an accent color for key interactive elements like buttons and highlights, creating a clear visual focus for user actions.
Typography: A sans-serif typeface is used throughout the app for its legibility and modern appearance. Different font weights and sizes are used to create a clear information hierarchy for titles, descriptions, and numerical data.
User Interface: The UI is designed with spacious layouts and card-based components to separate content blocks. This design choice makes the app easy to scan and navigate. The overall aesthetic is minimalist, directing the user's attention to the food and ordering process.
5. Project Timeline
The project was executed over a two-week period, with each phase dedicated to specific design objectives.
Week 1: Wireframing & Core UI Design
Phase 1: Creating the initial wireframes for the core user flows: home screen, restaurant listing, menu page, and cart.
Phase 2: Designing the main user interface components, including the color palette, typography, and foundational screen layouts.
Week 2: Prototyping & Finalization
Phase 3: Building the interactive prototype in Figma to demonstrate the user journey from browsing to checkout.
Phase 4: Finalizing all screen designs, ensuring consistency, and preparing the files.
