The Modern Restaurant
Embedded Files
August 2022 - October 2022
The Problem
The Goal
Busy adults who don’t have the time to browse through item selections for a long period of time.
Our restaurant web app will let users choose health conscious options that’s clutter free which will affect users who are conscious of the food they eat by letting users see exactly each ingredient on the menu item.
My Role
Responsibilities
UX designer leading the project from conception to completion.
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding The User
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. This user group confirmed initial assumptions about customers for the establishment, but research also revealed that the organization of the menu items was not the only a factor for the app. Other user problems included with general app navigation and payment method.
Pain Points
Information Architecture
Platforms for ordering through various apps have information that’s often cluttered and difficult to read.
2. Time
Working adults would rather not spend a lot of time on their phones. They want information that is front and center.
3. Convenience
Users would like to be able to make orders through the app directly.
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 will be well suited to user’s pain points. For the home screen I placed the menu button front and center.
Digital Wireframes
As the initial design process continued I made sure to incorporate feedback from user research. Easy navigation was a top priority in addressing the user needs when it comes accessing the necessary information.
Low Fidelity Prototype
The low fidelity prototype shows the user from when they first enter in the app to the check out screen. View the lo-fi prototype here.
Usability Study: Findings
Two usability studies were conducted. Findings from the first study helped guide the design to the mockup stage. The second study used a high fidelity prototype and revealed what aspects of the mockups need refining.
Round 1 Findings
Make it possible to add a confirm payment screen or a payment method screen
Add an “add to cart” button each menu item to remove an extra step
Make it easier for our users to find and edit their profile information
Round 2 Findings
Users would like more imagery under the category screen
Users would like to have some recommendations on things they might like
Refining The Design
Mockups
Before the usability study, the menu items were categorized into their own section, but after the usability studies I added the option to directly “add to cart” without having the user to select the item first.
The second usability study revealed that the app feels “empty” for our users. To make the app more inviting I added more imagery to each screen and additional features to the app such as the recommended section.
Additional Mockups
High Fidelity Prototype
The high fidelity prototype presented a cleaner user flow. View the hi-fi prototype here.
Accessibility Considerations
Used high contrasting colors and text against white backgrounds for the visually impaired.
2. A heavy emphasis on imagery and icons next to every item to make navigation easier.
Going Forward
Impact
The app really feels like the Modern Restaurant web app really thinks about the user’s needs.
Quote from peer feedback:
“This app was very easy to use! All the information is front and center without all the clutter that most websites have nowadays.”
What I learned
I learned that the first ideas are actually the beginning, but it’s actually the usability studies and feedback that influence my designs that meet user needs.
Page updated
Google Sites
Report abuse