UX + UI Design ⎢ Branding
Brief:
This app project was designed during my Google UX Design Certification Course. The focus was on users having full control of their dine-in experience through their phones.
Subsequently, helping combat the health concerns due to Covid-19, as well as the staffing shortages at restaurants.
Date: May - June 2022
Role: Director / UI + UX Designer / Researcher
Problem:
Restaurant customers sometimes have allergies or dietary restrictions and need to know what ingredients are used in the products.
A lot of those customers get concerned when menus don’t provide the proper info and wonder if the staff will have the correct answers. These customers then refrain from returning to the restaurant because of this problem.
Solution:
From research to testing, I designed an app that allowed users with allergies or food restrictions to filter the menu when ordering through their phones. All the while safely enjoying their dining experience.
Click HERE to view the full case study
•••••••••
Design Process: Empathize
•••••••••
Research:
User Interviews: I interviewed 6 participants whose ages ranged from 20’s - 30’s. I asked them a range of questions in regards to their dining-out tendencies. These questions ranged from frequency, menus, interactions all the way to what positively or negatively impacted these experiences.
Competitive Audit: I conducted a competitive audit on other food & drink apps, focusing on restaurants that offer similar features that I wanted to incorporate. I evaluated on the functionality and design of the other apps, documenting what they did right and where they could improve.
Usability Studies: After each iteration of a low fidelity prototype and a high fidelity prototype, I conducted a usability study each time with 6 participants. To refrain from bias, I had one-on-one sessions with each participant and had them follow a series of prompts to navigate through the prototype. I refrained from speaking and only answered questions pertaining to the prompt questions as to not skew the data in any way. The users were told that it was a Think Out Loud method. This encouraged users to state out loud everything they felt, thought, or experienced for documentation.
Focus Areas:
1) What drives users to attend dining locations?
2) What are common pain points during the dine-in experience?
3) How can my app be better than competitors?
2) What are common pain points during the dine-in experience?
3) How can my app be better than competitors?
Interview Results: Pain Points
•••••••••
Design Process: Define
•••••••••
Persona:
Michael is a 38 year old software engineer that recently got engaged and enjoys going out and socializing with friends. Michael does not drink, but he does enjoy his meals. However, Michael does have dietary restrictions which include wheat and dairy. Michael wants a seamless ordering experience with knowing what ingredients are in the dish and the price of the meal, all without having to ask for additional help.
User Journey Map:
Following the results of the initial research and development of a persona, I then mapped out Michael’s journey while using the app. The user journey map was important to better empathize with users. Breaking down the journey helped identify potential pain points and ensured an easy path for the users.
Site Mapping:
Once the journey map was set for my persona, I moved on to the site map. The map helped me with displaying the architectural structure of the app and how to organize the flow of navigation.
User Flow:
This flow chart was crucial in the development of specific tasks for the usability studies. The tasks during the study guided the participants through the prototype and helped determine if the overall user experience was good or not. The flow of the app became more complex as more decisions were given for users. From a simple option of a filtered menu or not, multiple branches formed. Designing this visual reference helped me stay focused on the user.
•••••••••
Design Process: Ideate
•••••••••
Storyboards:
Storyboarding early on in the ideation phase helped structure and narrow down the experience. A big picture storyboard focused on overall interaction and close up storyboard focused on app experience. This helped form an overall blueprint before wireframes were formed.
Paper Wireframes:
Rough paper wireframes accelerated ideation without having to focus on fine details. Simple variations in quick succession helped develop layouts in a fast and productive time frame.
Digital Wireframes:
Rough paper wireframes accelerated ideation without having to focus on fine details. Simple variations in quick succession helped develop layouts in a fast and productive time frame.
Low-fidelity Prototype:
The main user flow was for a user to access the menu, filter the food menu based on allergies, then place the order.
•••••••••
Design Process: Testing
•••••••••
Usability Study:
I conducted a usability study with 6 participants. To refrain from bias, I had one-on-one sessions with each participant and had them follow a series of prompts to navigate through the prototype. I refrained from speaking and only answered questions pertaining to the prompt questions as to not skew the data in any way. The users were told that it was a Think Out Loud method. This encouraged users to state out loud everything they felt, thought, or experienced for documentation.
Findings:
1) Need visual cue for horizontal scrolling
2) Include a “call for help button”
3) Have option to pay or open tab
4) Include directions to access digital menu easier to understand.
2) Include a “call for help button”
3) Have option to pay or open tab
4) Include directions to access digital menu easier to understand.
•••••••••
Design Process
(Feedback Loop): Ideate
(Feedback Loop): Ideate
•••••••••
Refined Designs:
Following the usability study, adjustments were made. Onboarding process was added. I made made better visual cues for horizontal scrolling, placed options for payment time, and added a call waiter button.
•••••••••
Design Process
(Feedback Loop): Prototype
(Feedback Loop): Prototype
•••••••••
High-fidelity Prototype:
The high-fidelity prototype followed the same user flow as the low-fidelity prototype for consistency. The prototype included design refinements and adjustments across screens following the feedback from the previous user test.
•••••••••
Design Process
(Feedback Loop): Testing
(Feedback Loop): Testing
•••••••••
Usability Study:
I conducted the second usability study with the same 6 participants. They followed the same prompts as before and were asked to think out loud the entire time.
Findings:
1) Place more confirmation cues
2) Have credit card selected by default after putting card information in
3) Make the onboarding process more understandable
4) Update to clearer verbiage on prompts
2) Have credit card selected by default after putting card information in
3) Make the onboarding process more understandable
4) Update to clearer verbiage on prompts
•••••••••
Final Designs
•••••••••
