Hometown Cafe App - Designing The Food Customization Experience
Google UX Design Certificate
October - December 2021
Project Overview
Hometown Cafe is a coffeehouse chain that serves a variety of hot and cold beverages, breakfast and lunch items, and convenient takeout options for busy people living in the city or suburbs. Their app provides these users instant access to their offerings and the ability to place orders on the go.
The problem:
Busy people who follow vegetarian or vegan lifestyle are frequently frustrated when customizing their orders on food ordering apps.
The goal:
Create a better user experience for the food customization feature on the Hometown Cafe App.
My role:
UX designer working on user journey from finding, customizing, and placing food order for Hometown Cafe App.
Responsibilities:
User research, wireframing, prototyping, user testing, and design iterations.
Understanding the User
I used the Design Thinking process to identify users, determine the problem, ideate, prototype, and test the application. In the empathize phase, I began my research by developing interview objectives, questions, and target participant characteristics. I was curious about what people thought about customization options on food ordering apps, as well as their motivations for using them and their experiences with them. Following that, I conducted five one-on-one interviews with people who met my target participant criteria.
I discovered several user pain points and gained valuable insight into food customization as a result of these interviews:
Unclear Descriptions
When perusing the menu, users notice that some items have only a brief or no description.
Food jargon usage
Special words or expressions used in the food industry can be difficult to understand for users who are not foodies.
Lack of visual cues
In the absence of images and symbols, users who are vegetarian or vegan frequently find it difficult to distinguish vegan or vegetarian items from non-vegan items.
Inadequate allergen information
Users who are allergic to specific foods and ingredients frequently struggle to find allergen information on menu items.
Persona:
After conducting the initial user research and identifying common user pain points, I created a persona based on data collected.
User Journey Map:
I created a journey map to better understand Mary's behaviour and document her experience at each stage of interaction.
Problem Statement
Moving on, I proceeded to define the user problem from the lens of the persona:
"Mary is a busy computer science student who needs a quicker and more efficient way to order vegan food for pickup so she could allocate more time working on her project."
Ideation
Storyboarding:
I sketched out a big picture and a close up storyboard to better shape and visualize the user journey and persona when using the App.
User flow:
After storyboarding, I created a user flow to lay out user's movement and interaction through the App, mapping out each and every step that the user may take.
Prototyping and Testing
Paper Wireframes:
I created paper wireframes for the main screens of the user flow.
Low-fidelity Digital Wireframes:
I then transferred the paper wireframes to figma to create low-fidelity digital wireframes.
Low-fidelity Prototype:
The low fidelity prototype was created from the digital wireframes to demonstrate the user flow from browsing the menu, selecting the item, customizing its ingredients, and proceeding to checkout. I conducted my first round of user tests with this prototype.
Usability Study: Round 1 findings
Many users found the plus and minus buttons in the customization menu to be confusing and out of place.
Multiple tabs in the customization menu caused users to skip some steps and go back and forth, slowing down the checkout process.
Users expected to see all their selections and preferences on the order review page.
Branding and UI:
After creating low-fidelity prototype and conducting first round of testing I started working on the App's branding and UI.
Mockups:
Based on my findings from the first round of usability study, I replaced the plus and minus buttons with checkboxes and radio buttons in the customization menu. I also changed the user flow in the menu where the user would go from one component to the next instead of alternating between different component tabs. On the order review page I added the missing details.
High-fidelity Prototype:
I connected the updated mockups and created a high-fidelity prototype. I then conducted a second round of testing.
Usability Study: Round 2 findings
The one-way customization process was too rigid for many users. If they missed something they wanted to add after applying the changes, they had to start over.
When customizing their orders, users expected to see default options. They desired greater flexibility so that they could customize all or part of their order.
Some users thought the "Save" call to action button in the customization menu was out of place.
Mockups:
I changed the one way customization process to a single menu. The components of a food item are separated into their own boxes with an option to customize. The user can see the default options. They can go back and forth between different component tabs, change the whole or part of the order and save changes.
I renamed all call to action buttons that the users felt were out of place. I also added a “Clear all Selections” button where a user has to select more than one option. This is useful when a user wants to change all default selections without having to deselect every item.
Final Result
The final high-fidelity prototype, created from refined mockups, provides a flexible and smooth customization experience, allowing users to place orders and checkout more quickly.
Accessibility Considerations
Used color palette that meets most of WCAG contrast ratios.
Paired ingredient icons with text for easier identification of vegan or non-vegan items and allergens.
Used universally recognized icons and symbols for navigation and customization.
Takeaways
Impact:
The refined user flow helps the users of the Hometown Cafe App make informed choices that fits their lifestyle needs.
What I learned:
With my first steps into user research and testing, I realized the complexity of customizing food. My initial assumptions and ideas were proven incorrect, and I learned how valuable was it to talk to users about their pain points. As a result, I was able to eliminate biases and fill many gaps in my knowledge.
Let's Connect!
Thank you for taking the time to review my case study on Hometown Cafe App. If you have a design problem and want to collaborate, please feel free to reach out to me.
Email:
Linkedin:
www.linkedin.com/in/mauryagovani