Project overview
The product:
Golden Donuts is a family-owned donuts shop located in San Francisco, and they aim to deliver local taste at a competitive price. Golden Donuts targets customers: commuters, employees, individuals, and families who crave sweets.
Project duration:
May 2021 – October 2021
The problem:
Golden Donuts operates with cash-only transactions and no mobile orders through food delivery apps.
The goal:
Design an app for Golden Donuts that allows users to order and pick up donuts and pastries.
My role:
UX Designer is responsible for an app design from concept to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low- and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
----------------------------------------------------------------
Understanding the user
User research: summary
Conduct interviews and create empathy maps to understand the users. A primary user group identified in the research is family working adults with and without children, who don’t usually carry cash.
This user group confirmed initial assumptions about Golden Donuts customers, but research also revealed that carrying cash was not the only factor limiting users from stopping by the shop. Slow service because only one person is working. It sometimes takes a long time to complete an order if it is a big one. Other user problems included time constraints, ATM location, and especially COVID-19.
User research: pain points
Persona: Janne
Problem statement:
Janne is a busy working mother who needs an easy way to place an order for pickup without stopping at the bank for cash.
User journey map
Mapping Janne's user journey revealed how useful it would be for users to access a dedicated Golden Donuts App.
Starting the design
Paper wireframes
Taking the time to draft an iteration on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. Prioritizing a quick order and menu to help users save time.
Stars use to mark the elements of each sketch that are to be used in the initial digital wireframes.
Digital wireframes
As the initial design phase continued, make sure to base screen designs on feedback and findings from user research.
Digital wireframes
Easy to read and image of donuts to aid users' decision making.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow connected was browsing and viewing menus and items so the prototype could be used in a usability study.
View the Golden Donuts low-fidelity prototype
Usability study: findings
I conducted two rounds of usability studies. The finding from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
----------------------------------------------------------------
Refining the design
Mockups
Early designs allowed for a scrolling option to learn more about Golden Donuts. After usability studies, I decided to simplify options to address users' needs in a quick order process. I added a divider and used a bigger font size plus images for visual appeal.
Mockups
The second usability study revealed frustration with the navigation from the menu to items. Since there are only a few options, I decided to simplify it to just one screen menu.
Key mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows in viewing items with the added-to-the-bag button.
View the Golden Donuts high-fidelity prototype.
Accessibility considerations
----------------------------------------------------------------
Going forward
Takeaways
Next steps
Thank you!
