AURORE
A mobile app to help customers of a high-end French restaurant, Aurore, create and pay for orders through their devices. Delivery and pickup options are both paired with a tracking feature in order to provide an efficient system for customers and the restaurant.
Program: Figma
Duration
NOV 2022 - JAN 2023
Roles
Lead UX Designer and Researcher
Responsibilities
User and Market Research. Wireframing, Analysis and Iteration, and Rapid Prototyping
Brief Overview
Problem
Very few high-end restaurants create mobile apps and the ones that do, lack attention to their design, services, and accessibility. Food delivery services like Uber Eats or Doordash rarely include these types of restaurants for users to choose from.
Goal
Our fancy restaurant app will let users efficiently submit and have their orders delivered to their homes. This will benefit busy individuals by allowing them to create, pay and schedule delivery times without going to the restaurant.
Why Research At The Start?
My user research is essential to help understand their experience with other delivery service apps for high-end restaurants or others they’ve used before and learn more about their day-to-day life to understand what exceptions they have for future apps. After conducting brief Q&A's with a handful of participants, I was able to gather some of the more common pain points to keep in mind while creating Aurore's mobile app.
Pain Points
-
Most apps don’t include language accessibility for users that know English
-
Users can’t easily create new orders with items from a previous order they’ve made and are forced to redo it manually
-
The user is normally looking for deals from restaurants but has trouble knowing what the deal is applied to and needs to be manually entered after adding items to the cart
-
Some menus either don’t provide images of the food item or too small to easily identify
"Apps tend to use tons of descriptions for food items or menu pages, making it difficult for me to read everything. "
- Participant D
"I’m a busy person, yet I would like the time to spend ordering some nice food from time to time with my partner if I don’t feel like cooking ."
- Participant A
User Personas/Journey Maps
With the data I collected from the user research, I created user personas to humanize real-world problems based on the pain points above. Also, including each with a problem statement was a great way to help me quickly summarize their concerns and general backgrounds. The same idea was applied when creating a journey map to help pinpoint their potential steps, which could reveal new issues that I overlooked or find solutions in each task of their journey.
Bailey Thorn
Age:
Education:
Hometown:
Family:
Occupation:
22
Rutgers University
Cleveland, Ohio
Single
Junior Business Analyst
“Every time I order food from a new place, I have to separately look at Yelp to see which food options are more popular.”
Goals
-
More visual representation and make ordering and checking out faster
-
Occasionally wants a fancy meal in the comfort of his home
Frustrations
-
Need a faster way to complete orders with the same items continuously
-
Food descriptions on the menu make it difficult to read info
Bailey is a 22-year-old junior analyst who works at a large business firm. He lives in the city alone and spends most of his time busy with work. He believes the one thing that should be stress-free in his work life would be ordering food once he is off work and feels the need to treat himself to a nice meal on occasion, He would love to order his food and have it delivered quickly since he gets off work late.
Persona: Bailey's Journey Map
Goal: Enjoy a stress free dining experience at home
“Working with clients isn’t the same as a 9-5 job, so I work basically at any time. Sometimes I want a stress-free date night with my boyfriend when I get the chance.”
Goals
-
Stress-free date nights with her partner
-
Language accessibility features
-
Busy work life, so would love flexible reservation times
Frustrations
-
Ordering at the checkout counter is frustrating and messes with my productivity flow
-
Fluent in German, can speak English well but still has some trouble reading
Nadia Roseman
Nadia is a 24-year-old freelance designer who spends most of her days working at home for clients that need branding and/or logo designs for their business. Sometimes she gets tired of working at home in the same environment and wants a change of scenery. So instead of staying in all the time, she wants time to have date nights with her boyfriend to keep a healthy relationship.
Age:
Education:
Hometown:
Family:
Occupation:
24
Rhode Island School of Design
Cologne, Germany
Lives with Boyfriend
Freelance Graphic Designer
Ideating Design Solutions
To start coming up with ideas to address some of the pain points gathered earlier, I conducted a competitive analysis to learn more about how other competitors in my industry form their online presence and prioritize the needs of their users. "How Might We's" and "Crazy Eights" were also great techniques to get into brainstorming ideas without limitations or concerns about the final designs.
Competitive Analysis
The purpose of my market research was to collect data from both direct and indirect companies to understand the users' experience exploring their menus and completing their orders on competitors' apps. I want to know what works or doesn't work well for each of their mobile experiences, so I can pinpoint specific issues or missing information that I can improve on with this app.
The Capital Grille
Direct Competitor | $$$$
Steak/American Food
Strengths
-
Services like reservations, private dining, and customer service are one-click navigations
-
Simple to browse through the app and get more info about food options
-
Easy to navigate and buttons change to darker tone colors to indicate the interaction
Longhorn Steakhouse
Indirect Competitor | $$
Steak/American Food
Strengths
-
Waitlist incorporates a map to give estimated wait time for each location
-
Real time drive time to each location
-
Add and checkout button for quick ordering and a standard add to cart button
Clearman's
Direct Competitor | $$$
Steak/American Food
Strengths
-
Simple to understand navigation and get the info you need
-
Each restuarant has its corresponfing menus and reservations once you reach their page
Weaknesses
-
Only available in English
-
Disregarded in-app use of ordering online, links transfer users to their desktop website
-
No features for visual or audio impairment
Weaknesses
Weaknesses
-
Only available in English
-
No features for visual or audio impairment
-
Second navigation bar includes important info like about us that should be on the top and not easily accessible when you want to navigate info located on the bottom navigation bar
-
Not welcoming and no attention to customer usability in app
-
Awkward accessbility icons that only scrolls up page in small increments everytime you tap it
Crazy Eights and How Might We's
.png)
"How might we humanize the experience to create a more user-friendly journey on the app?"
"How might we make the menu easier for users to understand and navigate?"
"How might we make deal promotions more prominent on the homepage?"
Let's Get To Drafting!
The idea of grouping information was a significant part of my thinking process while creating these designs. There should be enough information to guide users smoothly through their user journey but limited to avoid confusion and boredom while navigating the app. I highlighted each design structure that I preferred from each iteration to create a final wireframe with all the selections.
Home (Final)
Cart
Tracking
Menu
Order Description
Confirmation
Paper to Digital Wireframes
This addresses users’ concerns to have deals as one of the first things they look for on the front page and the auto ordering feature which displays all your previous orders that can be automatically added to your cart.
Deals and ads brings you to the menu after user’s tap the image
Previous orders by recency and auto add to your cart
Larger image to give user’s a good idea of what they’ll order
Addition of accessibility feature for language
This addresses users’ concerns about the image size so they know what they will be ordering and the additional accessibility feature for languages is easily accessible under the profile icon.
Low-Fidelity Prototype
This flow is based on a user making their way through ordering food online and delivered to their address. From browsing and adding items to entering payment methods and confirming orders.
Lo-Fi Usability Study
In order to provide the best service, we need to figure out if the consumers can easily and more efficiently complete their orders compared to calling the restaurant for these services. We want to understand if there are any obstacles users may encounter in the menu, cart, payment method, and checkout screens.
Method
-
Date: December 11-12 (remote)
-
KPIs: Conversion study and User Error Rate Study
-
Participants: 5 participated with individual unmoderated user testing (ages 18-50)
4 out of 5 participants were confused or frustrated trying to customize their quantities while ordering
3 out of 5 participants commented on the use of friendly messages
3 out of 5 participants went to the hamburger menu first to access the sign out button which was not there
2 out of 5 participants pointed out the usefulness of the action buttons' design
Participant A
"I don't think the hamburger menu is a problem, but would be nice to have multiple features for the same signing out action."
Participant C
"I don't understand why I have to be in the cart screen in order to add quantities to my items. I should be able to do that from the start before adding it to my cart."
Let's Make Some Changes!
Added a quantity customizer for the item description page so quantities can automatically be placed into the cart.
.png)
.png)
.png)
Addresses the need for more alternate navigation options (before i create functions for hamburger menu). The menu acts as an overlay on all pages and brings users to all the intended screens.
High-Fidelity Prototype
Addition of a new color palette, animation upgrades to interactive buttons, and minor tweaks to the placement and sizing of elements.
Hi-Fi Usability Study
The same usability study will be conducted on the high-fidelity prototype to help our data remain consistent with the results I gathered from the first usability study. I can now compare the overall experience between each phase to see if improvements were made or if any other opportunities that were missed.
Method
-
Date: January 5-6 (remote)
-
KPIs: Conversion study and User Error Rate Study
-
Participants: 5 participated with individual unmoderated user testing (ages 18-50)
3 out of 5 participants were satisfied with the clarity of delivery service on top of screen
2 out of 5 participants didn't immediately look for tracking, but eventually found it
3 out of 5 participants enjoy the addition of alternate navigations
2 out of 5 participants mentioned the slow speed of the animations on the app
Participant A
"The navigations in this app was very well though out and there are multiple ways for others to get to the same place."
Participant E
"My favorite part was the order of the side menu and how it matches with the bottom buttons on the screen as well. I feel like it helps me look for the page faster than if the categories were in the different orders."
Let's Make Some Changes!
Changed the complex design of delivery and pickup buttons to simple shapes. Easier for users to select options and more area to allow button interactions
.png)
.png)
Added shadows to buttons to encourage a direct user flow for the main tasks and emphasis on the navigation bar with color to easily show users what page they're currently viewing
Accessibility Considerations
1
High color contrast between text/action buttons and background elements
2
Adding a language accessibility button on every page to make it easy to access and will be able to change languages depending on the user
3
Use of iconography on majority of the action buttons to make it easier for users to understand the purpose of the button without reading the text
Final Design System
When you think of colors to help emphasize luxury or elegance, usually purples and blues work well to portray brands or companies with high-end services. French culture and royal power both use shades of blues often as a way to set their status as a community. Many homes incorporate pale colors which helped me pick out a subtle yellow color to act as the complementary color on the app. Adding a bold orange helps create more contrast and clarity for action buttons and also completes a split complementary color scheme for the app.
Final Thoughts
Impact
Although this app hasn’t been tested in the real world, creating personas and usability studies helped envisioned a variety of real-life scenarios that each help build on the existing design. This awareness alone provided lots of feedback to help make the user flow smoother, and more accessible, and tweaks to design choices.
What I Learned
I was inspired by the emphasis on the users throughout this whole process and learning that we as designers don’t just accommodate our needs or the company’s needs. Users give you the most honest feedback while interacting with their real-world experiences and the services these apps provide them.
What Next Steps Would I Take In The Future?
I would’ve liked to expand my screen more to apply scrolling features to menus and slideshows now that I have more experience with Figma
Experiment with new forms of animation to make the user flow smother, realistic and interactively engaging for the user
Start to add more usability to other features after learning the importance of the user flow for this app
