Bliss Bakery.
Making online ordering quick and easy for customers.
Project Overview
The Product
I was given the project to create a bakery app in a big city. A smooth, on-the-go app for users to schedule in store pick ups.
My Role:
UX Designer through all design stages.
Duration:
May 2023- September 2023
The Challenge
The challenge in general was broad, so I had to hone down on research to understand the common problems food and drink orders app face for everyday users. Lack of engaging entry points to the menu can leave users confused. With poor layout and function, can cause users to give up and not complete their purchase. Food pick ups should have ease of navigation, that's straight forward.
The Problem
Users are looking for a simple and easy way to place a pick up order for their baked goods. Whether its fresh bread, sandwiches, cookies, pastries, and drinks, users should be able to add their items to their cart and complete a scheduled in store pick up.
The Goal
The goal is to create an app design for a bakery in a big city, a website where users can placed their bakery pick up order with ease.
Project Research
We see thousands of restaurant apps and websites on the daily, and there was a few major apps I looked at, along with local smaller bakeries that allow pick ups. Big name apps I looked at was Door Dash, and then I also was inspired by the layout of Panera Bread Co. app. This allowed me to read reviews from real time users, and look at the problems and possible design solutions I could implement in my own design.
To help myself get in the users shoes, I created two personas. Meet Elena and Tommy.
Main Features and Structure
Now that I understand where my users interest lie, I can start with the structural hierarchy of my app design. I know that users are inclined to place pickup orders for convenience or when they’re busy. Users are looking for fresh baked goods that are high quality to possibly pick up for breakfast or lunch.
How would be users be navigating the Bliss Bakery app? I came up with a map of how I believe users would search through the app.
The customer journey map helped me decided what was most important to include in the app. I got into the shoes of my users to understand why ordering in store can be frustrating and time consuming. With this exercise, it created a bunch of solutions to the problems in my app. People want to place their orders in a more convenient manner if they’re busy or have their hands full.
With that information, I continued my customer journey map and pulled out what would be the most important screens for my prototype.
I got very hung on the ideas of an account to sign into, but that is not feasible when people want to quickly place a one off order. So I ended up with two possible outcomes of users placing an order: a Guest Experience and Account Experience.
Users will be able to check out as a guest, or they can use their account to gain rewards. With the guest experience, users will be able to immediately look for the meal they want to eat, with the option to sign in or just continue as a quest if they come back.
How that I have an idea of what my prototype screens can look like, I drew up my own wireframes with pen and paper. I went through a couple iterations, and consolidated them into a couple frames.
The header has the hamburger menu for navigation, as well as an account access in the top right corner. The bottom navigation contained a home icon, rewards, and a shopping cart. The front page had navigation links to the menu as well as most popular items placed on the home page.
Since I had the general layout down, I went ahead and create my low-fidelity prototype in Figma. I used general shapes, lines, and text to create the general layout of my screens.
Low-Fidelity Prototype for App
Visual Design
Once I had the layout down and the user flow I wanted to follow, I did research into the visual design and visual hierarchy of the Bliss Bakery app design. I used the type face Quicksand in different sizes and spacing.
For the color, I chose two main colors of the brand: A warm orange and a rich brown. I feel like these colors are unique to a bakery to the warm breads, cookies, and sweets. For the other neutral black and grays, I created these color styles of text to establish hierarchy instead of changing the weight of the text itself.
Once I had my visual designed laid out, I went straight into designing my high-fidelity prototype for the Bliss Bakery mobile app. After looking at my digital wireframes closer, there were definitely a lot of structure problems to iterate on, especially in the scheduling in the check out process.
High Fidelity Prototype for App
Design Iterations
Landing Page
I went through multiple iterations for the home page. I went back and forth having an interactive banner on the top of the home page, but ultimately settled on a hero image, along with a list of popular food items to grab users attention. Instead of having an access point to the menu at the top of the screen, there are entry points to the drink and food menu so users can find the menu item they need with ease.
Another big change was the navigation. In the low-fidelity prototype, there was a navigation bar at the bottom of the app that would let you see your rewards, your shopping cart, then access back to your home screen. At the very top right corner is an account icon. In the finalized high-fidelity prototype, all of the navigation is contained in a hamburger menu in the top left corner, while the shopping cart icon is in the top right. This allows for a cleaner look, and makes it more accessible for users who use screen reader technology.
Schedule Order
The low-fidelity prototype I created just allowed for an order to be placed that day, and the users was able to just choose a time they would like the order for. While looking through apps like Door Dash, I noticed that it was more common for a calendar of some sort would be present. I also noticed that before you start your order on Door Dash, you are asked if you would like your order now or to schedule it for later.
For my high-fidelity prototype, users are able to press ASAP to get their order within 20 minutes of placing the order. The other option is to place your order will in advance, and when users choose that option a calendar and time slider will be available. This should ease users minds with placing large orders and not having to worry about still standing inside the bakery, waiting.
Accessibility Considerations
1
Paid close attention to color contrast to make sure people with seeing impairments could still navigate the screen.
2
Key information on the home screen is upfront and visible for screen reader technology.
3
Text is at a hierarchy making it easier or screen readers to go through. There is also a use of sans-serif typography to make it easier to read.
Takeaways
There was a bold change from beginning to the end of the design. From the complete landing page makeover, to the date and time picker during the checkout process. Each change was made deliberately with the user at the forefront of the design. This creates a more human centered design so people can choose their next meal with ease.
Next Steps
1
For future research, include a broader sample to gain more research on what users look for while ordering mobile.
2
Conduct a usability test for the schedule now or later option in the checkout process.
3
The user profile section can be developed further. A place to save your favorite items to make ordering easier.