Bobby's Burgers (Mobile)
Project Type
Tools
Platforms
UX/UI Design
Figma
Mobile
Bobby’s Burgers is a design project for the native mobile app of Bobby's Burgers, a large national fast food chain serving up a tasty mix of burgers and sides. The fictional company prides itself in providing a breathless amount of toppings and near-unlimited customizability options for their customers, and I wanted that mission to factor into every element of its eventual design.
The Problem Statement
The Bobby’s Burgers mobile app was created to cater to picky eaters, time-strapped professionals and busy families need an easy fast food ordering and customization experience.
Every step of the design process needed to accomplish the following goal: Create an app that allows users to easily order from Bobby’s selection of burgers and customize them to their heart’s content.
Initial User Research
Interviews with prospective users were conducted to better understand the type of people I was designing the Bobby’s Burgers app for. Through this research, I discovered that the primary user we needed to serve were busy people who needed an easy ordering experience that prioritized customization and empowered the user with feedback on what they were paying for.
Through this research, we discovered that dietary restrictions/preferences, price, time spent procuring food and health concerns were all major factors to our interview subjects when deciding when and where to eat. Below are pain points encountered by our users when attempting to procure a meal.
Text-heavy menus without detailed photos of each item are difficult to navigate for some people
Full-time workers and homemakers often lack the time to prepare food at home
People with food sensitivities often lack options or are locked out of certain menu items when they aren’t customizable
When customizing a food item at a restaurant, it’s sometimes unclear how the price and calorie amounts have changed throughout the process
Based on my user research, a couple of personas were created to encompass the needs of our users. Above is one such persona, "Alice."
"Alice" is a busy mother of four who needs a reliable way to make custom food orders for her picky children because they often desire several substitutions in their food, making the ordering process difficult.
Creating Alice's user journey revealed the ways the Bobby’s Burgers app can better serve users. These insights were used during the ideation and wire-framing steps later in the process.
Paper and Digital Wireframes
I went through multiple potential iterations of the home screen, thinking about common design patterns for mobile ordering apps and design flows that would best address user concerns, chiefly, getting to the ordering process quickly and without error or frustration.
Large, contrasting CTA buttons direct the user to the most typical user flow
Immediate access to the user’s order history allows for easy reordering of favorite meals
Large, detailed photos of every menu item makes for better accesibility
Large, high-contrast order button is the center of the order experience
Next were the creations of the digital wireframes in Figma. The initial round of user research, as well as a round of competitive audits, informed every step of the design process. I wanted to use large photos and detailed descriptions of each menu item provide the user with as much information as possible, visually and textually.
Low-Fidelity Prototype
A comprehensive low-fidelity prototype was created test the usability of the initial proposed user flow. This prototype was used in a usability study with potential users to understand how they would follow the intended user flow, and gauge what changes needed to be made to improve usability.
Usability Studies
For the Bobby’s Burgers app, two rounds of usability studies were conducted. The first helped guide the app from the wireframe stages to a more high-fidelity mockup, while the second provided valuable insight into creating the finalized designs.
Round 1
(After Low-Fidelity Prototype)
Users want more robust customization
Users like ordering the same things repeatedly
Users want pickup/delivery options
Round 2
(After High-Fidelity Prototype)
Users want to set default options for easier ordering
Users need key information like price totals on the confirmation screen
Certain UI elements are confusing/need refinement
The above mockups from the low fidelity prototype show the improvement of user experience based on insights from the first usability study. Initial designs simply allowed users to choose a restaurant location from a list of nearby locations, but feedback from study participants allowed for insight. I added the ability for users to save their favorite restaurants which show up in an additional tab.
Here, a second usability study on my high-fidelity prototype informed changes on the hierarchy of information displayed in app and allowed for more intuitive user experience like the inclusion of a user-set default location and a user location marker on the map.
Final High-Fidelity Mockups and Prototypes
Above are a sample of the latest high-fidelity mockups created for Bobby's Burgers.
Here is a screenshot of the latest iteration of the high-fidelity prototype which addresses all primary user concerns and includes a robust menu item customization system, pickup and delivery options, and updating calorie and price totals.
This project is still a work in progress as it is important to me, and will continue to be updated and improved upon. Please pay attention to this space for future updates.