Creating a Health-Conscious, Customizable Burger Experience
How can I eat well without knowing what I’m eating? CustomBurger came to fill the space between wanting to eat a delicious hamburger and eating healthy and without too much conscience. Here you can build your own burger with more detailed information about the ingredients.
the challenge
This project is part of the Google UX Design Professional Certificate, which is a series of 7 courses focused on preparing a professional for the UX Design market.
This project was developed in 5 of these 7 courses which are: Fundamentals of User Experience Design, Start the UX design process: empathize, define and ideate, Build wireframes and low-fidelity prototypes, Conduct UX research and test the first concepts, Create high-fidelity designs and prototypes in Figma.
the product
CustomBurger is a regional burger joint located in the south of Minas Gerais in Brazil. CustomBurger strives to offer healthy, specialty burgers and sides. They offer a wide range of competitive prices. CustomBurger targets customers who like to have their own food experience and people on a restricted diet.
problem
People with a restricted diet (vegetarian, celiac, etc.) lack personalized options when ordering food.
goal
Create an app for CustomBurger that allows users to easily order and pick up fresh, healthy food.
understanding the user
User research | Persona | Problem statement | User journey map
user research summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through the survey was working adults with dietary restrictions or ordering hamburgers at least once a week.
This group of users confirmed initial assumptions about CustomBurger, but the research also revealed that a restricted diet was not the only factor limiting users from ordering hamburgers.
Other user issues included not knowing where the ingredients came from, or the calories because they wanted a personalized experience or health-related information.
restricted diet
It is difficult for people on a restricted diet to find a place to order food
ingredients information
Platforms for ordering food do not give much information about the ingredients
user interface
Apps are hard to navigate and not easy to use
persona
Problem Statement:
Anne Lysa is a busy working adult who needs easy access to healthy food options because she has dietary restrictions and doesn’t have time to cook dinner herself.
user journey map
Mapping Anne’s user journey revealed how useful it would be for users to have access to a CustomBurger hamburger app.
starting the design
Paper wireframe | Digital wireframe | Low-fidelity prototype | Usability studies
paper wireframe
Taking the time to sketch out the iterations of each app screen on paper ensured that the elements that made it into the digital wireframes were adequate to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
digital wireframe
As the initial design phase continued, I made sure to base the screen designs on user research feedback and findings.
low-fidelity prototype
Using the complete set of digital wireframes, I created a low-fidelity prototype.
The primary user flow I connected with was to build and order a hamburger, so the prototype could be used in a usability study.
usability studies findings
I performed two rounds of usability studies. Findings from the first study helped to guide projects from wireframes to mockups. The second study, using a high-fidelity prototype, revealed which aspects of the mockups needed to be refined.
first round findings
People want to save the payment option when creating their profile | People want to express their personal preferences | People want to order quickly.
second round findings
The checkout process has too many unnecessary steps | “Build your own” functionality is confusing and should be improved
refining the design
Mockups | High-fidelity prototypes | Accessibility
mockups - first round
The first designs allowed for some customization, but after usability studies, I changed the bread and meat selection buttons to a drop-down menu, so I could show more options without changing the layout. I’ve also added an element to show which extras are selected.
mockups - second round
The second usability study revealed frustration with the checkout flow. To streamline this flow, I consolidated the three “Checkout screens” into two screens with summary and checkout.
mockups
high-fidelity prototype
The final high-fidelity prototype featured cleaner user flows for assembling a hamburger and checkout. It also met user needs for a local pickup or delivery option, as well as more customization.
accessibility considerations
alt text
Easing access for visually impaired users by adding alt text to images for screen readers
icons
Use of icons for easy navigation
images
We use detailed images for burgers and ingredients to help all users better understand the designs
going beyond
impact | learnings | next steps
learnings
When designing the CustomBurger app, I learned that the first ideas for the app are just the beginning of the process. Usability studies and peer feedback influenced every iteration of the app’s designs.
next steps
usability studies
Conduct another round of usability studies to verify that the pain points users experienced were effectively addressed
user research
Conduct more user research to determine new areas of need
