Bakery App
I completed this project as part of the Google UX Design Certificate. I designed this app in response to the prompt "design a food ordering app for a bakery in your hometown"
Role: UX Designer
At a Glance
Team
UX Designer (me)
Tools
Figma
Timeline
July 2021-Jan 2022
Responsibilities
User Interviews
Wireframing
Prototyping
The Goal
Design an app for the bakery that allows users to order ahead of time, enabling a streamlined ordering and pickup process
Discovery Research
I conducted four initial phone interviews and created empathy maps to better understand what users are looking for in a food ordering app. The goal of these interviews was to answer the following questions:
Research Questions
-
Why are users using food ordering apps?
-
What features do users expect or want to see in food ordering apps?
-
What frustrations have users faced in similar apps?
The interviews confirmed that users would tend to have experience with other food ordering apps and be busy during the day, so it would be helpful to be able to order ahead of time. The research also revealed some pain points that users have had with other food ordering apps:
Findings
User Pain Points
Time
Menu Accuracy
Order Again
Users do not have a lot of time, and would appreciate a quick and easy ordering and pickup process
Some food ordering apps do not fully match the restaurant’s full menu options
An app should allow users to easily view what they’ve ordered previously and order items again
Ease of Use
Apps with a lot of features can be difficult to learn for new users
Personas
Name: Ani
Age: 24
Occupation: Paralegal
Ani is a 24-year-old paralegal with a busy schedule. They live with their town roommates who will often order food with her. Ani enjoys baked goods but doesn't have time to bake as often as they'd like. Ani gets easily frustrated when they know an establishment has something on their menu that is not on the app.
Name: Camila
Age: 45
Occupation: Teacher
Camila is a 45-year-old who lives with their spouse and two children. Camila is an elementary school teacher, , and they really enjoy celebrating special occasions like birthdays by getting baked goods. Camila likes the idea of using an app to order baked goods, but they find it difficult to learn how to use a food ordering app.
User Journey Map
Mapping out Ani’s user journey helped demonstrate how an app can make the ordering and pick-up process more efficient, as well as the importance of including the full menu on the app.
Starting the Design
Paper Wireframes
Drafting multiple iterations of each wireframe allowed me to experiment with different ideas for layouts and content, helping me land on the one that seemed like it would best address the users’ needs. For the homepage, I ultimately chose a design that included some previously ordered items, some featured menu items, and an easy way to find the full menu. Pictured below are the iterations of the home page, and the final wireframe.
Featured menu items and a button to view the full menu
Button to view the full menu and order again options
Full menu on the homepage
Featured menu items at the top and then the full menu
Order again options and full menu
Final Homepage Wireframe
Digital Wireframes
As I continued with the design process, I wanted to ensure that I took the users’ feedback into account. I included the items they most wanted to see on the homepage, with clear navigational clues to access the other parts of the app. Below are two of my digital wireframes, for the homepage and menu page, respectively.
3/4 users wanted a way to easily reorder items, so I put items the user has ordered before at the top to make it quick and easy to find
I included quick buttons at the top to allow users to skip to the part of the menu they’re interested in. It also helps to break up the menu into related sections.
While the homepage includes a few featured items, there is a clear button that indicates how to find the full menu.
The navigation bar at the bottom of every screen allows for easy navigation throughout the app.
Low-fidelity Prototype
The low-fidelity prototype connected the primary user flow of adding an item to the cart, checking out, and submitting the order, so the prototype could be used in a usability study. A video of this main user flow is included below, and the full lo-fi prototype can be viewed here.
Usability Study
I conducted two rounds of usability studies, one with the lo-fi prototype described above, and one with a hi-fidelity prototype. Both usability studies were unmoderated and took place remotely. Each study had five participants, all between the ages of 21 and 65.
Round 1 Findings
-
3/5 users want the button for the full menu to be easier to find
-
4/5 users want there to be more ways to access the cart
-
5/5 users want the homepage to be accessible from the navigation bar instead of the profile page
Round 2 Findings
-
2/5 users felt that there needs to be more contrast between the accent and background colors
-
4/5 users found scrolling to select the pickup time to be confusing and difficult to use
-
3/5 users commented that there is no easy way to add multiple quantities of an item
-
4/5 users felt that the cart and settings buttons should be switched on the navigation bar
Refining the Design
To address this concern, I added an additional button in the top right corner of the menu page. In the second usability study, all users used this button to access the cart. I also added the home button to the navigation bar in lieu of the profile button.
Users found it difficult to find the cart
Before Usability Studies
After First Study
Users wanted more contrast between colors
The second usability study revealed concerns about the contrast between colors, so I opted to use red instead of the yellow to increase contrast. I also switched the placement of the settings and cart buttons in the navigation bar.
Before Second Study
After Second Study
Final Designs
Mockups
High-fidelity Prototype
The final high-fidelity prototype included a better color contrast, easy navigation buttons, and the ability to add a quantity when adding an item to the cart. The full prototype can be viewed here.
Accessibility Considerations
-
Chose an accent color that contrasted well with the background and text colors to ensure all users can read the text, regardless of contrast sensitivity
-
Used icons and imagery to help make navigation easier and help users understand what each button does
-
Ensured all animation and motion are between 150-500 milliseconds so that the motion is not distracting or confusing to users
Reflection & Takeaways
Impact
The app feels familiar to users who have used food ordering apps before, allowing them to consider the BakeryApp an easy way to order their baked goods.
What I Learned
The process of designing the BakeryApp has shown me the importance of taking an iterative approach and conducting user research at each step. In my original designs, there were features or issues I had not considered until I conducted user research, and revisiting my designs to incorporate feedback allowed me to create the best possible designs to address the users’ needs.
Next Steps
If I were to continue this project, my next step would be to conduct another round of usability studies to ensure that user pain points have been addressed and that there are no new problem areas in the current design. After that additional usability study, I would conduct more user research to determine remaining areas of need, such as the option for delivery, a help section to explain how to use the app, and the ability to customize menu items.