.png)
Project Overview
As a UX/UI designer, I designed "DineEasy," a mobile app for in-restaurant food ordering, to address customer frustrations with slow service and long wait times at busy restaurants. The goal was to streamline the ordering process, reduce wait times, and enhance the dining experience for customers while improving restaurant efficiency.
User Personas
Alex Mane
Marketing Coordinator
Profile: 28, single, works in a fast-paced marketing agency.
Needs: Quickly browse visually appealing menus, customize orders, pay seamlessly, and track order status to fit tight schedules.
Pain Points: Slow service during lunch rushes, cluttered interfaces, and delays in bill processing that disrupt time-sensitive plans.
Emma Garcia
College Student
Profile: 20, often dines with friends at casual restaurants.
Needs: Find budget-friendly menu items, split bills easily with friends, and use a fun, trendy interface that integrates with social features.
Pain Points: Confusing menu layouts, difficulty tracking shared expenses, and outdated app designs that feel clunky on mobile.
Problem & Hypothesis Statements
Problem
Users like Alex and Emma face delays in busy restaurants due to server-dependent ordering processes. Alex struggles with slow service that disrupts tight schedules, while Emma finds digital menus visually unappealing and lacks features for group dining, such as easy bill splitting or social engagement, leading to a frustrating experience.
Hypothesis
I believe that by providing self-service ordering, visually appealing digital menus, and integrated features for group dining (like easy bill splitting), I will significantly reduce wait times and improve the overall dining experience for customers like Alex and Emma in busy restaurants.
This will be validated by an increase in customer satisfaction scores and a reduction in average order fulfillment times reported by restaurants.
Use Case Scenario
Ordering lunch for two in a busy restaurant
Context: Alex is at a popular restaurant with a co-worker during a busy lunch rush and wants to quickly order a customized meal for two to make it back to work on time. He wants to split the bill.
Alex scans a QR code on the table, which opens the DineEasy app in their mobile browser (no download required).
The app displays a visually appealing, categorized menu with high-quality images and clear prices.
Alex selects 2 “O-toro Tuna Sashimi” and taps to customize, adding “Spicy Mayo” via intuitive checkboxes.
Adds lemonades to the order, leaving a note for "no sugar". Then reviews the cart, which shows the total cost and estimated preparation time (15 min).
Alex picks split payment at checkout and creates a QR split payment request for James, his co-worker.
.png)
James scans the QR code and pays his part of the split, updating the split payment screen in real time. Alex proceeds to complete the payment.
A real-time order status bar updates Alex when the order is received, in preparation, and ready for delivery.
The meal arrives at the table within the estimated time, and Alex rates the experience in the app, providing quick feedback.
Outcome: Alex completes the order and split payment in under 2 minutes, enjoys a tailored meal, and leaves the restaurant within 30 minutes, fitting comfortably within their lunch break. The seamless experience encourages Alex to return.
Journey map
Phase | Actions | Touchpoints | Emotions | Pain Points | Opportunities |
|---|---|---|---|---|---|
Feedback | • Rates experience with emoji feedback scale form.
• Adds brief comment on efficiency. | • Feedback form | • Satisfied (quick process)
• Motivated (wants to reward good service). | • Lengthy or clunky feedback forms.
• No way to praise efficiency. | • Feedback form: Simple animated emoji feedback scale, followed up by an order comment field. |
Order Tracking | • Monitors order status bar.
• Receives push notification when order is ready. | • Order status page | • Engaged (real-time updates keep her informed)
• Relaxed (on track). | • No visibility into order progress.
• Delayed server communication. | • Order progress bar: Subtly animated progress bar with timer countdown and status badges.
• Push notifications: Triggered at different stages of the order progress. |
Payment | • Selects the "Split Payment" feature.
• Adds payment request amount.
• The co-worker scans the QR code from Alex's phone and completes his payment.
• Alex sees the payment coming through in real-time on the split payment screen and proceeds to complete payment, sending the order automatically once completed.
| • Payment method page
• Split Payment page | • Relieved (payment is fast and easy) | • Slow payment systems.
• Need to wait for a waiter to split the bill. | • Intuitive QR split payments: Quick, easy-to-use payment method to autonomously split payments with others in 2 simple steps. |
Order Placement | • Adds a lemonade.
• Reviews cart with estimated preparation time.
• Places order for himself and co-worker. | • Cart page | • Assured (clear cost and timing)
• Pressed for time (needs quick service) | • Unclear preparation times.
• Annoying extras added last minute. | • Order Summary clarity: Full disclosure of all fees and totals of the cart content.
• Real-time Estimates: Accurate time estimation presented adjacent to the "place order" button. |
Order Customization | • Selects “Tuna Sashimi.”
• Customizes with “add spicy mayo.”
• Confirms dietary preferences. | • Customization modal | • Confident (customization is intuitive)
• Calm (dietary needs met). | • Complex/unclear customization processes.
• Unverified dietary options.
• Need for double-checking with the server. | • Simple customization form: "Add-ons" section, "Remove ingredient" section, "Additional Notes" open-text section.
• Dietary tags: present dietary requirement information for the dish as color-coded tabs. |
Menu Browsing | • Views menu with clear categories.
• Filters for "Specialties" options.
• Reviews dish images and prices. | • DineEasy PWA menu screen
• Filter buttons
• High-res dish images | • Relieved (menu is organized)
• Focused (dietary options are clear). | • Cluttered menus with poor hierarchy.
• Missing dietary information. | • Menu Categorization: Intuitive and easy-to-navigate menu categories presented as sticky tabs with smooth scroll animations. |
Discovery | • Arrives at restaurant, notices QR code on table.
• Scans QR code with smartphone. | • Physical QR code sticker
• Mobile browser (Safari on iPhone) | • Hopeful (expects a quick solution)
• Slightly stressed (tight schedule). | • Slow or unreliable app loading.
• Unclear QR code purpose. | • PWA Design: Progressive Web App ensures instant load.
• Visual Cue: Clean lightly animated splash screen and skeleton screens. |
Design Solutions
Progressive Web App (PWA)
Designed DineEasy as a PWA to eliminate the need for app store downloads, accessible via QR code for instant use.
Intuitive Menu Layout
Used a card-based design with category filters and search functionality to speed up menu navigation.
Customization Flow
Streamlined customization with pre-set options and a notes field, reducing errors and waiter back-and-forth.
Real-Time Feedback
Implemented a progress bar and push notifications for order status, keeping users informed.
Payment Flexibility
Integrated multiple payment options (credit card, Apple Pay, split bill) for convenience.
Accessibility
Ensured WCAG 2.1 compliance with scalable fonts, high-contrast visuals, and screen reader support.
UI Design System
Style Guide
The DineEasy Style Guide ensures a scalable, unified design with guidelines for typography, brand and semantic feedback colors, spacing, drop shadows, and corner radius. It supports consistent visuals across all platforms for a seamless user experience.
.png)
Component library
The DineEasy Component Library provides scalable UI elements, including buttons, forms, navigation, and more. Optimized for accessibility and responsiveness, it streamlines design iteration and development documentation.
.png)
Variable tokens
The DineEasy Variable Tokens Structure organizes scalable design tokens for colors, spacing, and corner radius, enabling theming and consistency. It supports efficient updates for a cohesive platform design.
Impact
User Testing Results
90% of testers completed orders 50% faster than traditional server-based ordering.
Customer Satisfaction
Post-launch feedback showed a 35% increase in customer satisfaction due to reduced wait times.
Restaurant Efficiency
Restaurants reported a 20% increase in table turnover during peak hours, boosting revenue.
Repeat Usage
70% of users returned to use DineEasy at participating restaurants within a month.
Tools Used
Research
• Customer interviews
• Journey mapping
• Competitor analysis
Design
• Figma
• Adobe Illustrator
Testing
• UsabilityHub
• Hotjar
Collaboration
• Asana
• Google meets
Reflection
Using human-centered design (HCD), I crafted DineEasy to address users’ needs for fast, intuitive ordering. I empathized through user interviews, pinpointing slow service as a key pain point. Defining a persona for time-pressed professionals focused the design on efficiency. Ideating led to a card-based menu after sketches showed dense layouts confused users. Prototyping in Figma and testing with 12 users refined the flow, with 25% favoring filters, speeding up ordering. Accessibility tweaks, like high-contrast visuals, improved usability per WCAG 2.1. HCD, paired with the design system, made DineEasy efficient, inclusive, and business-friendly. This process further honed my ability to balance user needs with scalable design solutions.
Available for work