CHALLENGE
I created Deja Brew for a project as part of Google’s UX/UI Design Professional Certificate. We were asked to design a mobile app that solves for a problem we face in our daily routine; available mobile-ordering apps have inefficient systems for browsing through products, and confusing checkout processes.
GOAL
Design a mobile-ordering app that combines visual appeal with user-friendly design and functionality. I will do so by providing clear navigation, menu item details and customization options, and a straightforward checkout process.
RESPONSIBILITIES
-
Conducting user research
-
Paper and digital wireframing
-
Conducting usability studies
-
Low- & high-fidelity prototyping
-
Iterating on designs
UNDERSTANDING THE USER
User Research: Pain Points
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat mobile-ordering apps as a convenient way to order ahead and avoid waiting at their destination. However, many opt out of using such apps because they don’t offer the same options as ordering in-store would.
The main user pain points are as follows:
1.
2.
3.
4.
Limited description of menu items.
Unable to customize individual items.
Difficulty paying; manually entering credit card details.
Unable to access previous orders for faster checkout.
UNDERSTANDING THE USER
Personas & Journey Maps
Audrey is a busy university student who needs intuitive app navigation and customizable features because she wants the checkout experience to be efficient and stress-free. And Stefan needs detailed product descriptions because he wants to feel confident in the decision-making process.
By creating user journey maps, I wanted to illustrate the process of how Audrey and Stefan behave, feel, and what they think while accomplishing their goals to address pain points or provide moments of delight.
STARTING THE DESIGN
Low-Fidelity Wireframes
Using my favourite ideas from the paper wireframes, I began to build digital wireframes. Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. I focused on the personalization aspects of the user experience, such as ‘Favourite’ items and item customization options. After dozens of iterations, these are the wireframes that best represented user flow and met user needs.
From these wireframes I created a low-fidelity prototype, which was then used to test functionality before incorporating it into the final design and ensuring accessibility for end-users. To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to cart and checking out.
REFINING THE DESIGN
Usability Study
I performed usability testing with the prototype created from low-fidelity digital wireframes. The participants in the test included individuals with prior mobile-ordering experience, with 20% having never used a mobile-ordering app. This diverse group was essential to validate the app's primary user flow to ensure it is intuitive and understandable for both experienced and inexperienced users.
STUDY TYPE: Moderated
LOCATION: Canada, remote
PARTICIPANTS: 10, ages 25-45 years-old
LENGTH: 20 minutes
INSIGHTS:
-
Positive Feedback: Users want a more obvious confirmation when they've added an item to their order.
-
Scheduled Pickup: Users want to know when to expect their order to be ready for pickup.
-
Edit Options: Users want the ability to easily edit items from the Order Summary page.
Incorporating feedback and key insights from usability testing, I refined the designs to generate the following:
1. Adding a brief, full-page pop-up gives users greater certainty when they’ve successfully added an item to their order.
2. Implementing the option to choose the order pick-up time gives users more autonomy and personalization in the checkout experience.
3. Adding an ‘Edit’ button for each individual item from the Order Summary page allows users to customize a singular item without affecting the rest of their order.
Final Design
In my high-fidelity prototypes, my goal was to address the insights and confusion from my usability tests and refine the overall app interface and visual design. I also replaced the bottom navigation bar with a hamburger menu to enhance visibility of the primary user flow and available buttons.
