Project overview
Project overview
Da Bakery is a local bakery located all around Saudi Arabia. They uses fresh wholesome ingredients to provide a wide variety of freshly baked goods. Da Bakery targets customers like students and workers who lack the time or ability to cook.
Project duration
June 2022 – October 2022
The problem
Busy workers and students don’t have enough time to cook their meals
My role
UX designer designing an app for
Da Bakery from conception to delivery.
The goal
Design an app that allows users to quickly and easily make online orders for delivery or pickup
Responsibilities
Conducting interviews, paper and digital wireframing. Low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User research: summary
I conducted interviews and created personas to better understand the users I’m designing for and their needs. One identified primary user group was students with part jobs who don’t have time to cook.
For this user group, some assumptions we made for Da Bakery customers were true, however research also shows that time wasn’t the only obstacle. Other user problems were costs, interests and challenges that makes it difficult for users to cook their food.
User research: pain points
1
Time
Students with part time jobs are so busy and don’t have time to cook
2
Accuracy
Users may select wrong address when ordering for delivery
3
Cost
ordering food for delivery charges extra fees
Persona: Omar
Problem statement
Omar is a university student and a part-time photographer who needs a fast and efficient way to order food because he doesn’t have time to cook.
User journey map
Mapping Omar’s user journey revealed how helpful it would be for users to have access to a dedicated Da Bakery app.
Paper wireframes
sketching out different layouts of the screens and making iterations to them helped to ensure that users pain points were taken into considerations when creating the digital wireframes. For the home page, the screen was design with a simple interface that encourages users to navigate through.
Arrows were used to indicate the elements of each sketch that would be used in the initial digital wireframe.
Digital wireframes
As the initial design phase continued, I started working on the digital wireframe while keeping in mind the feedback and finding from the user research.
Choosing the right address was a main user concern in the user research, therefore we incorporated the map for maximized accuracy.
Low-fidelity prototype
The low-fidelity prototype was created by connecting the digital wireframes together so we can test it out with users in a usability test.
Usability study: findings
I conducted two round of usability studies. The first study used a low-fidelity prototype and helped in refining the low-fidelity prototype into high-fidelity prototype. The second study used the high-fidelity prototype and showed what needs to be improved.
Round 1 findings:
Round 2 findings:
1
Users need a more accurate and errorless way to select the right address
2
Users need a more intuitive way to complete the checkout process
3
Users need better cues on how to select a store
1
Add a feature that makes users save and view their saved addresses so they can choose from them when they order for delivery
2
Use one metric to describe the size of the products
3
After placing an order, ask the users if they want the app to take them directly to the tracking page
Mockups
In the early design, when checkingout, some users kept going back and forth between the pages to check the prices and decide between “Delivery” or “Pickup”. Therefore, I added the total for both “Delivery” and “Pickup” to speed up the checkout process.
Before usability test
My cart - Delivery
My cart - Pickup
After usability test
My cart - Delivery
My cart - Pickup
The second usability study revealed frustration that users couldn’t select a saved address and have to enter the address every time by dragging the pin on the map. To overcome this struggle, I added a dropdown menu that users can use to choose from their saved addresses.
Before usability test 2
After usability test 2
Key Mockups
High-fidelity prototype
The high-fidelity prototype presented clear user flow for delivery or pickup ordering and checkout. It also allows users to order for now or later to schedule ahead of time.
Accessibility considerations
1
Provided access to people with low vision or color blindness by using a sufficient contrast between text and its background
2
Used icons to help make navigation easier
3
Used images to help all users better understand
Takeaways
Impact
Users felt confident using the app and appreciates that it meets their needs.
One quote from study participant:
“the app looks simple and is very easy to navigate through. I love that it help user to select their address in a more accurate and errorless way”
What I learned
While designing Da Bakery app, I learned that engaging users in the process (by testing and iterating on the designs) is what makes the app successful and usable.
Next steps
1
Conduct a third round of usability study to check with users if their pain points were duly considered
2
Conduct more user research to determine any new areas of need