Roles: UX Designer, UI Designer, UX Research
Duration: October 2021-November 2021
Project Type: Bootcamp Project
Tools Used: Figma, FigJam, Google Forms, Jamboard, Google Sheets
Full of Beans Cafe is a local coffee shop native to Milwaukee, Wisconsin. Owned by UW-Milwaukee alumni Rob and JoAnn Hausknecht, Full of Beans Cafe is more than just a coffee shop. The space cultivates a community through their yummy food, beverages, craft nights, book clubs, and so much more.
The Problem
It is a sad day when caffeine enthusiasts aren't able to grab a coffee during their morning commute.
Many local Full of Beans regulars are looking for a simpler and efficient way to get their coffee while on-the-go.
They find it time consuming and inaccessible to always order their drinks in person and waiting in the dreaded drive-thru line while commuting throughout their day.
Mobile ordering through other coffee chains is always an option but between the difficult app navigation of competitors and users' loyalty to Full of Beans it is not an option that is heavily favored.
The Solution
The solution is to create an app that provides loyal customers with access to their favorite beverages and treats while on-the-go that addresses common pain points that are existent in other mobile ordering apps.
The Design Journey
Initial Discoveries
Mobile ordering was used for 22% of Starbucks sales in Q2 of 2020, a direct competitor for Full of Beans Cafe.
Along with that, from early 2020 to late 2021 mobile ordering in the U.S. grew by 105%.
Along with that, from early 2020 to late 2021 mobile ordering in the U.S. grew by 105%.
Mobile ordering has been shown to be convenient for users for years and has been favored since the start of the COVID-19 pandemic. With coffee being a daily essential for more than 60% of Americans and in-office work/classes becoming the norm again it is the perfect time for Full of Beans to invest in developing a mobile ordering application.
Surveys were conducted to learn about and empathize with the people that I would be designing this application for.
Survey Goals:
-Determine our users pain points
-Understand the users needs and goals
8 out of 10 participants preferred mobile ordering. These participants also expressed that their preference for mobile ordering was because of the convenience that it provided.
7 out of 10 participants expressed a need for more detailed customization options within the mobile app of their preferred coffee shop.
9 out of 10 participants stated that majority of their coffee purchases occurred while commuting.
All participants expressed frustrations with long wait times for their orders.
7 out of 10 participants expressed a need for more detailed customization options within the mobile app of their preferred coffee shop.
9 out of 10 participants stated that majority of their coffee purchases occurred while commuting.
All participants expressed frustrations with long wait times for their orders.
Meet The Users
Victoria, 24
-Graduate Student
-Extremely Busy/On a Tight Schedule
-Lab Technician
-Prefers coffee on-the-go
Theodore, 27
-Program Associate
-Commutes an hour to and from work daily
-Values bonding with his partner through their morning coffee runs
-Commutes an hour to and from work daily
-Values bonding with his partner through their morning coffee runs
User Pain Points
Time
Working class adults and students are looking for ways to save time while grabbing beverages or food items.
Accessibility
Many mobile ordering apps are not equipped with assistive technology
Customization
Individuals are looking to customize their beverages and food items to their liking.
What's working for others & what is not?
The goals for the competitive analysis are:
-Identify what is working for our competitors.
-Identify what our competitors are missing that our users are asking for.
-What can we learn from this analysis and how can we implement possible solutions that are determined for these findings?
Design Decisions
-Make the customers favorite drinks readily available to them by creating a “recently ordered” section.
-Make sure that customization options for drinks were very clear and easy to locate as this was an issue that many users expressed having when they placed mobile orders using other coffee chains mobile order applications.
Digital Wireframes
View wireframe prototype here
Usability Testing
Usability testing was conducted virtually with 5 users. The study was unmoderated and conducted using my Figma prototype and google sheets. Each participant followed the prompts given and submitted a survey afterwards detailing their experience.
Prompt 1: Open the app and order your favorite beverage for pick up.
Prompt 2: Open the app and scroll to the bottom of the homepage. Click the surprise me button. This allows you to take a customization quiz to order a “surprise me drink”
Prompt 3: Open the app and begin to place an order for a beverage. Add all of your favorite extras using the customization feature.
Feedback
Based on my observations during the first usability study I created a user journey detailing the predicted flow that users will take daily to place their Full of Beans order.
Mockups
Homepage
The homepage wireframe allowed for navigation through the app but it lacked clarity and specificity.
Iterations made:
-labels have been added to all photo cards
-there is a clickable hamburger menu with a clickable dropdown menu providing multiple pathways for navigating to order beverages
Product Page
The product page wireframe offered many customization options but the lack of specification confused users.
I added labeling to each customization category and to the customization options as well.
I added labeling to each customization category and to the customization options as well.
Search Bar
During the usability studies many users mentioned that they would have benefited from having access to a search bar while ordering their favorite drinks.
In response, I added a drop-down search bar that allows users to search for specific items using both their keyboard and voice recognition.
High Fidelity Prototype
Usability Test Two
I conducted two usability studies. The purpose of the first usability study was to identify areas for growth before the development of the mockups and the high-fidelity prototype.
During the second usability study the high-fidelity prototype was used to determine improvements and changes that could be made to further increase the quality of experience for users.
Round 1 of Testing Observations
1. The lack of headings made ordering drinks difficult.
2. The surprise me option was confusing for users.
3. Many users wanted access to a search bar and dropdown menu.
Round 2 of Testing Observations
1. Users needed more pathways to order beverages.
Next Steps
1. Explore options to address the pain point discovered during the second usability study.
2. Conduct follow-up usability study to ensure that all user pain points have successfully been addressed and possibly identify new pain points.
3. Continue to conduct user research based on data collected by the app to identify other additions for the app.
