Lark’s Coffee App Design
Project Overview
The Product Lark’s Coffee is always looking for ways to improve its customer's experience and stand out from the competition. One way they are doing this is by launching a UX mobile web app that will streamline the process of ordering coffee in advance. The app will allow their customers to save time and effort when they need their coffee fix.
Project duration September 2021 - November 2021
Problem Busy workers and commuters lack the time necessary to prepare coffee.
Goal Design an app for Lark's Coffee that allows customers to select their coffee of choice, pay in advance, and once the order is placed, they receive a notification confirming their order was submitted. This way, they can skip the line and head straight to pick up their drink when they arrive.
Role UX designer designing an app for Lark's Coffee from concept to deployment.
Responsibilities Conduct interviews, create paper and digital wireframes, low and high-fidelity prototypes, conduct usability studies, account for accessibility, and iterate on designs.
Understanding the User
User Research
Personas
Problem Statement
User Journey maps
User Research
Summary
To understand the needs of the users I was designing for, I conducted interviews and created empathy maps. While conducting my research, I identified a primary group of adult users who don't have time to make coffee or are unable to and would prefer to order coffee daily and in advance.
This user group confirmed my initial hypothesis about Lark's Coffee customers; research revealed many factors limiting users from preparing coffee at home. Time and other user problems, including obligations, interests, or challenges, make it difficult for users to make coffee at home.
Pain Points
Time Working adults are busy and like to save time by ordering coffee in advance.
Accessibility Platforms for ordering coffee are not equipped with assistive technologies
Information Architecture (IA) Text-heavy menus in apps are often difficult to read and order from.
Personas
Problem statement - Craig is a busy working adult who needs easy access to coffee because they have no time to make coffee themselves.
User Journey Maps
Mapping Craig’s user journey revealed how helpful it would be to access a dedicated Lark’s Coffee app.
Starting The Design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper Wireframes
Iterations for each screen of the app were drawn; this ensured that each element on the digital wireframe was well-suited to address the user's pain points. I prioritized a fast and easy ordering process for the home screen to help users save time.
Digital Wireframes
Throughout the initial design phase, I adjusted and improved the designs based on the feedback and findings from the user research.
Images are clickable; this provides an intuitive way for users to navigate the app.
Easy navigation was an important user need to address in the app's design and equipping the app to work with spoken content technology.
Easy navigation that’s screen reader friendly.
Low-Fidelity Prototype
After completing the set of digital wireframes, I began creating a low-fidelity prototype to be used in a usability study. I started by connecting the first user flow, allowing users to test the app by adding items to their cart and checking out.
Usability Study
Findings
After I conducted two rounds of usability studies, I used the findings from the first study to improve the designs, from wireframes to mockups. While conducting the second study, I created a high-fidelity prototype, and it revealed what aspects of the mockup needed refining.
Round 1 findings
1. Users want to order coffee fast.
2. Users want the app to be easy to navigate.
Round 2 findings
1. Users suggested the images should be clickable for a more intuitive experience.
2. Users would like a cart button to see what's in their cart without going through the whole checkout process.
3. Users were initially confused and needed a more intuitive way to enter the app.
Refining The Design
Mockups
High-fidelity prototype
Accessibility
Key Performance Indicators (KPIs)
Mockups
The images weren't clickable in earlier designs, but after receiving feedback from the usability study, I made the images clickable.
Additionally, I revised the initial design and added a cart button so users can see a summary of what's in their cart without going through the whole checkout process.
After conducting the second usability study, the data revealed users were confused and needed a more intuitive way to enter the app. To streamline the flow of the app, I consolidated the "Loading Page" and "Home Page" into one central screen.
High-Fidelity Prototype
The final user flow was presented as a high-fidelity prototype, displaying a cleaner user flow from start to finish. It also met users' needs for icons and more consistent navigation.
Accessibility
Considerations
Text is spoken screen technology-friendly.
Icons were added to convey communication quickly.
Incorporated images to display items visually on the menu.
Key Performance Indicators (KPIs)
I considered a few KPIs that can be used to evaluate the success of the lark’s coffee mobile app:
Daily Active Users: The number of unique users who accessed the app each day.
Orders per Day: The number of orders placed through the app each day.
Time to Complete Order: The average amount of time it takes from when an order is placed to when it is completed.
Customer Satisfaction: A measure of how satisfied users are with the app, typically collected through user surveys.
Going Forward
Takeaways
Next steps
Takeaways
Impact The app makes users feel like Lark's Coffee thinks about their customer's needs.
One quote from peer feedback "The app made it so easy to order coffee. I would use this app as a go-to for coffee ordering when I am in a rush and want to order ahead of time."
What I learned While designing Lark's Coffee app, I learned how even something as simple as ordering coffee requires attention and detail. Each usability study and peer feedback session influenced each iteration to improve the design and function of the app.
Next Steps
To validate whether or not the pain points users have reported have been effectively addressed, we will run another round of usability studies.
Conduct more research to determine if any new areas need improvement.
Use KPIs to evaluate the success of the lark’s coffee mobile app.