DUTCH BROS. COFFEE: USABILITY STUDY
About Dutch Bros.Coffee
Dutch Bros. Coffee is a publicly held drive-through coffee chain base in Oregon, with company-owned and franchise locations expanding throughout the western United States..
Introduction
For my User Experience course in the university, we were placed into groups with three people and learned to work remotely as a UX Design team. The goal of this study is to test the Dutch Bros website’s usability with the use of a heuristic evaluation and a moderated usability study to figure out its pain points and create design solutions that can solve this problem.
Timeline
6 Weeks
My Role
-
Heuristic evaluation analysis
-
Moderated usability study (2 out of 6 --participants)
-
Analysis of findings
-
Design solutions
-
High-fidelity mockups
Methods
-
Heuristics evaluation
-
Usability study
HEURISTICS EVALUATION
Our first step is evaluating the overall functionality and design of the website. We use "UserFocus’ 247 Web Usability Guidelines" and follow the guidelines’ checkpoints to find usability issues with this website and at the same time document the issues contained by the non-compliant areas.
Categories We Focus On:
-
Home Page
-
Navigation & Information Architecture
-
Trust and Credibility
-
Writing and Content Quality
-
Page Layout and Visual Design
The Three Rating Criteria:
-1 - Not Compliant
0 - Somewhat compliant / Not applicable
1 - Compliant
Our Findings
After evaluating 123 guidelines in total, we found that the Homepage and Navigation & Information Architecture categories rated the lowest.
The specific areas of concern:
-
Navigation
-
Menu Page
-
Online Shop
-
Product Page
Based on the result of the evaluation, we started creating tasks and scenarios for the useability test, developing and improving the usability problems of the specific areas from the user's point of view
MODERATED USABILITY STUDY
Participants: 6
Data Collected:
-
Pre-test questions (Gathering brief user background)
-
Time on task
-
Path taken
-
Observations
-
User quotes and comments
-
Post-test questions
Scenarios & Tasks:
All 6 participants were tested in the same manner and were given the same survey that consisted of 6 pre-test questions, 3 scenarios with 2 tasks (6 total) related to the usability of the site, and 8 post-test questions to complete in order to collect qualitative and qualitative data while testing how users interacted and reacted to the site.
-
Scenario 1 focuses on the navigation of the website and how users could easily browse the page they need.
-
Scenario 2 explores the shop website that was made separate from its main website.
-
Scenario 3 put users on the menu page to see their process of finding the drink and print out the nutrition information.
.png)
.png)
Results
-
2 Tasks had 100% failure for all users. Those Tasks are "Find the site map" and "Find the filter in the shopping page".
-
The total proportion of tasks completed by all participants is 50%.
-
0% of participants were satisfied with the website while performing the task.
-
100% of users commented on the shop tab creating a new pop-up window in a negative tone.
-
100% of users think the process of browsing the menu page and finding products is repetitive and inconvenient
-
83.3% of participants preferred using the search bar to find out specific employment position information.
SOLUTION
Based on the results and opinions we obtained from the Usability Study, we present the specific solutions in the form of High-fidelity Mockup. The presented pages are:
-
Home Page
-
Shop Page
-
Menu Page
-
Product Page
HOME PAGE & NAVIGATION
CURRENT PAGE
The home page is the first page that the user encounters when browsing the website. If there has no clear layout and well navigation, users may get confused or lost their way when browsing.
Problems of Home Page
-
Needs clearer visual borders between elements like images and text.
-
Certain images have text placed on top of them making it hard to read.
Problems of Navigation
-
Users have difficulty moving to and from different pages due to the navigation being hidden in a hamburger menu when viewed via the web.
-
Lack of Search Bar.
-
Lack of Sitemap.
Home Page (Current Design)
RECOMMENDED CHANGES
Home Page
-
Create clearer visual borders between every image and information area.
-
Avoid placing text over images to increase legibility.
-
Provide larger area for each featured content on home page and enlarge the text, button, and image in order to attract users better.
Navigation
-
Avoid hiding the navigation in a hamburger menu to lessen repetitive clicks. This will make it easier for the user to move around different pages especially when it’s being viewed on a computer rather than on a mobile device or tablet.
-
Add a search bar on the navigation to make user find out what they need easier.
-
The links on footer are rearranged according to the category of information, and a Sitemap is added to help users find directions when browsing the website.
Home Page (Mock-Up)
SHOP PAGE
Problems of Shop Page
-
The shop page shows in a new pop-up window different from the home page window, which confuses users.
-
Lack of sort and filter options when browsing products.
-
Product type options are hidden in a hamburger menu, causing users to need one more step when browsing on the product type they need.
Shop Page (Current Design)
RECOMMENDED CHANGES
-
Combine the shop page with the main page, and switch between the shop page and other pages through the navigation at the top of the page.
-
Add sort and filter options when browsing products. Filter options include "Product Type, Price Range, Color, and Insulated/Non-Insulated". Sort options include "Most Popular, Price Low to High, and Price High to Low".
-
Put the product type options on the left of Shop Page.
Shop Page (Mock-Up)
MENU PAGE & PRODUCT PAGE
CURRENT PAGE
Based on the expected and observed click paths, it seems that the website forces users to click a lot within the drink menu, especially when going to look at a different drink.
4 of the 6 participants wanted to stay on a single page to choose between drinks and to compare.
Problems of Menu Page
-
Unable to switch freely between other types of products and information pages
Menu Page (Current Design)
Problems of Menu Page
-
Do not have a printer-friendly option for users to open
-
Same as Menu Page, unable to switch freely between other types of products and information pages
Product Page (Current Design)
RECOMMENDED CHANGES
Menu Page
-
Create a side menu that allows users to switch between drinks.
-
Create another navigation for the whole menu page and drink page to shows the order of product type and drink page.
Menu Page (Mock-Up)
Menu Page
-
Create a printer-friendly view with a print button displayed throughout the site.
-
Have the same Side Menu and Menu Navigation as Menu Page.
Product Page (Mock-Up)
What I Learned?
-
Heuristic Evaluation is indeed a nice way to find potential problems of a website when you just begin a UX project, through clear evaluation criteria, we can find out the problems of the website more efficiently and directionally.
-
This is the first time I work as a team to do user research with complete steps and direction, The time that we can communicate and cooperate is a lot less than we actually thought. More effective communication and better time management are a must for us.
-
In the process, I learned that understanding users' thoughts is not only asking for their idea but also having to observe their behavior and reaction while they are doing usability tests. Based on the task and question we set for the usability test, we may get some different results.
Next Step
If more time can be spent on this project, here are things I would like to work on:
-
Another round of usability study for the new design.
-
Iterate based on the usability study findings
-
Create a design system to make all the icons, logos, and text consistent throughout the website.
-
Find out more problems in other areas of the website and fix them.
-
Improve the design of the menu page based on the Mock-Up. I think that categories of drinks are too much and messy, it could be easier to browse if I organize them.