top of page
Balanced Eatery
A restaurant app for online ordering, including a custom menu per dietary preferences and restrictions.
Desktop + Mobile Application
UX Case Study
2020
The Project
With this project, I wanted to challenge myself in the area of ecommerce, users with special needs or preferences, and designing responsive and adaptive screens. I decided to create a restaurant's website focused on online ordering that is inclusive to users with dietary restrictions and looks great on both desktop and mobile.
My Role
UX / UI Designer
Project Type
Case Study
Date
2020
Tools Used
Adobe XD
Adobe Illustrator
The Process
RESEARCH
DEFINE
IDEATE
DESIGN
REFLECT
Competitive Analysis
User Research
Design Strategy
Define Problems
Product Requirements
Challenges
User Flows
Info Architecture
Low-Fi Wireframes
Hi-Fi Design
Prototyping
Future Considerations
What I Learned
Research
OTHER RESTAURANTS
I personally have had great experiences ordering online from the following restaurants, so I studied their user flows and interfaces to inspire my own design. Here are some of my research questions as I went through the process of ordering from each restaurant.
HOME PAGE
What are the navigation options?
What info is displayed / what's the CTA?
PRODUCT PAGE
What details are given about the food item?
What options are available for users to customize their order?
CHECKOUT
What are the input requirements here?
Where is the user directed afterwards?
MENU
How are menu items organized / info architecture?
Is there a way to sort or filter by dietary preferences?
CART
How can the user edit or add to what's here?
How is pricing per item and total price displayed?
ORDER HISTORY / ACCOUNT
What are the details included in order history?
Is there saved info about the user, and how do they edit?
Key Findings
Pure Juicery Bar has great customizable checkout modals
Starbucks' product page provides the user with a lot of nutrition info
Noodles' menu looks clean and users can enter dietary requirements
All use email/text notifications for order status
When adding an item to cart, every option possible is made available for the user to customize that item, and prices for upgrades are clear
For every item on the menu, the user can see calories, carbs, protein, etc. as well as allergen info., though specific ingredients are not listed.
The menu is well organized with a left navigation drawer and photos of each item on the right. They use an outsourced product for the user to enter dietary reqs.
I was expecting to find order status on these sites/apps, but updates are given to users via email or text - so no need to prioritize this feature.
Define
PRODUCT REQUIREMENTS
By studying the architecture and design of other restaurant sites and apps on the market, I was able to define the basic requirements for a restaurant website focused on online ordering. These requirements are based on industry standards for this type of digital product, as well as my idea to take it a step further by allowing users to curate their own menu based on their dietary needs and preferences.
Organized and Visual Menu
The restaurant menu needs to be simple and organized, with a navigation drawer for different types of items. Photos of each food item is ideal.
Detailed & Modifiable Cart
The cart needs to include all added food items, stating item name, price, quantity, modifications, and the ability to edit or remove the item. Users can either add more items or checkout here.
Detailed Product Page
When looking at a specific food item, users need see photo, description, ingredient list, nutrition/allergen info, labels for diet constraints, and price. Any options for customization need to be presented upon adding to order.
Informative Account Page
Users need to be able to see their Order History in their account. It is also ideal for the user to have saved preferences such as location, credit card info, etc. that they are able to edit.
Quick & Easy Checkout
A good amount of input is required from user at checkout, so it needs feel quick and easy. Primary inputs to place order include contact info, delivery or pick-up, and payment/tip.
Curate Personal Menu
Instead of searching through each item's ingredient list and nutrition info, I'd like for users to be able to curate their own personalized menu by specifying their dietary preferences or restrictions.
Ideate
USER FLOW
Users will be prompted on the home page to begin their order by choosing between two options. First is the "Order Now" CTA button, which takes them to the restaurant's regular menu. Second is the "Diet Filter" CTA button, which allows users to enter their dietary needs and then order from a personalized menu where they will see every menu item that either already fits their needs or has been customized to fit their needs. As shown below, both options follow a very similar and standard user flow for online ordering.
WIREFRAMES
After sketching my basic ideas, I went to Adobe XD to design 25+ low-fi wireframes for both desktop and mobile.
Desktop Wireframes
HOME PAGE
MODAL FOR CUSTOMIZATION
ACCOUNT
MENU
PRODUCT PAGE
CART
ORDER CONFIRMATION
DIET FILTER (to create customizable menu)
PERSONALIZED MENU
PRODUCT PAGE WITH DIET FILTER EDITS
Mobile Wireframes
HOME PAGE
SIDE MENU
CART
CHECKOUT - 3
ACCOUNT
MENU
PRODUCT PAGE
CHECKOUT - 1
PLACE ORDER
DIET FILTER
MENU DROPDOWN
MODAL FOR CUSTOMIZATION
CHECKOUT - 2
ORDER CONFIRMATION
Thanks for viewing my project!
bottom of page