Course Project 1
Bakery Mobile Ordering App
UX designer designing an app for Bakery online ordering from conception to delivery.
Responsibilities Included:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
People in the community who are looking for an efficient way to customize and order from local coffee shops.
The Goal
The mobile ordering app will let users easily visualize and customize menu options, which will affect how customers can place their orders by giving them the ability to view the menu and order from their own devices. I will measure effectiveness by analyzing customer satisfaction and efficiency in ordering.
User Pain Points
Visualization
To help see, interact, and visualize a product before purchasing it
Personalization
Users want to feel seen and personalizing the experience will encourage a consumer to return
Innovation
The target audience of young adults is always looking for new products and something they can buy that will set them apart from others
Efficiency
People who are in a rush do not have adequate methods for ordering food efficiently
Creating Personas
Problem Statement
Courtney is a determined and creative social media intern who needs an easy ordering app for when she works at the cafe or when she picks up coffee for her team because she doesn’t want to spend time waiting in unnecessarily long lines while leading a busy life.
User Journey Map
Mapping Courtney’s user journey revealed how helpful it would be for users to have access to a dedicated bakery online ordering app.
Design
Starting the Design
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a customized page that can be changed based on user preferences. This will make ordering efficient for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy and clear customization of menu items was a key user need to address in the designs.
Low Fidelity Prototype
From the completed set of digital wireframes, I created the low-fidelity prototype shown below. The primary user flow I connected was viewing the menu and customizing a drink order, so the prototype could be used in an initial usability study.
Usability Study Findings
I conducted two usability studies, one for my wireframes, and one for my high fidelity prototype. My first usability study findings helped guide my designs from wireframes to mockups. The second study involved high fidelity prototypes and helped define what aspects of my design needed refining.
Round 1 Findings
Users want an easy checkout process
Users want concise navigation
Users want a receipt option
Round 2 Findings
Users want payment methods as part of the main user flow
Time picker functionality is confusing
Some button functionality is not evident to users
Refining the Design
Mockups
My early designs of the homepage included all of the features I wanted users to access, but after the usability studies, I decided to reorganize the page. I revised the design so users can easily locate key components to the user flow, such as “New Order” and “Menu.”
Before Usability Studies
After Usability Studies
High Fidelity Prototype
The high fidelity prototype presents a cleaner and straightforward user flow for order customization and checkout. It also met user needs for location and time customizations.
Conclusion
Accessibility Considerations
1
When incorporating motion into my prototype, I ensured that the speed and duration of motion did not exceed 5 seconds.
2
Uploaded images of my design to a color blindness simulator, to ensure the color palette meets colorblind user needs.
3
On the more menu, there is a selection for accessibility features to be turned on. This includes screen readers, visual impairment adjustments, text magnifier, and contrast adjustments.
Impact
The app makes order customization straightforward for the user.
“I like the fact that at the end of the customization screen, it tells you the item summary so you don’t have to go back and look through everything”
Learnings
While designing the bakery app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
1
Conduct a third usability study to determine whether user pain points have been properly addressed.
2
Conduct more research on the accessibility of the designs.