Noodle Garden App
PROJECT OVERVIEW
THE PRODUCT
Noodle Garden is a local restaurant located in San Francisco. Noodle Garden aims serves noodles and other side dishes. It targets customers who want to get delicious and healthy food during busy hours in the busy city.
THE PROBLEM
Customers in the busy city need access to food efficiently, especially during busy working hours.
THE GOAL
Design an app for Noodle Garden that allows customers to conveniently order fresh and healthy dishes for both pickup and delivery.
MY ROLE
UX designer designing the app for Noodle Garden from conception to delivery.
RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
PROJECT DURATION
March 2021 to July 2021
UNDERSTANDING THE USER
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who need meals pickup or delivery as quickly as possible to their homes or workplaces.
This user group confirmed initial assumptions about Noodle Garden customers, but research also revealed that time was not the only factor users considered. Other user concerns included the healthy level of the meals, how easy it is to let the restaurant know their special order instructions, and how easy it is if they need to order big meals for a big group.
User Pain Points
TIME
Working adults are too busy to spend time on meal preparation
Information Architecture
Text-heavy menus in apps are often difficult to read and order from
Persona
Problem statement:
Audrey is an office assistant who needs easy access to food ordering options because she is ordering and picking up lunches on behalf of her office members on busy workdays.
User Journey Map
STARTING THE DESIGN
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the cart screen, I prioritized a quick and easy ordering process to help users save time and energy.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
The design addressed the user needs with both pickup and delivery options, and time estimation as accurate as possible.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a meal, so the prototype could be used in a usability study.
View a sample of the Noodle Garden low-fidelity prototype
Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Affinity Diagram for Findings
Round 1 findings
1. Users want to add special instructions easily.
2. Users want an edit option after the order has been placed.
Round 2 findings
Users want to place big group orders easily.
REFINING THE DESIGN
Mockups
Early designs allowed for tracking the order after the order had been placed,
but after the usability studies, I also added additional option to edit the order. I also revised the design so users see all the available options when they land on the confirmation screen.
The second usability study revealed user need for big group orders. To address this need, I added the group order option which is easy to navigate to.
UI Style Guide
Key Mockups
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for adding items from menu to cart and checkout. It also met user needs for a pickup or delivery option as well as edit option after the order has been placed.
View a sample of the Noodle Garden high-fidelity prototype
Accessibility Considerations
Used icons to help make navigation easier.
Used detailed imagery for menu items to help all users better understand.
GOING FORWARD
Takeaways
IMPACT
The app makes users feel like Noodle Garden really thinks about how to meet their needs.
One quote from user feedback:
“The app allows flexibly order meals, for either pickup or delivery, for either small or big orders. I would definitely use and recommend this app!”
WHAT I LEARNED
While designing the Noodle Garden app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and user feedback offers valuable influence for each iteration of the app’s designs.
