Empathise & Define
Dutch Bros Coffee needed an update to its website to account for a larger target audience as they expanded nationally. As a UX research team of four, three others and I conducted an end-to-end usability study for Dutch Bros Coffee to enhance their online user experience. Through a combination of qualitative and quantitative research methods, we explored user behavior, pain points, and preferences to develop data-driven recommendations for optimizing their website. By creating a user-oriented design, Dutch Bros Coffee can strengthen its digital presence and better serve its customers' needs. Join me on this journey as we dive into the world of coffee and user experience.
Usability Study.
Age Range:
Target 14-68
User Data:
Sample Size: 40
Locale: Western US
Personas: 2
Purpose:
This usability test aimed to evaluate how participants would react to a series of scenarios that could determine how well the website for Dutch Bros Coffee functions for a typical user. The scenarios are based on a heuristic evaluation already conducted by user researchers in the project. All app functions have been redacted in this study from the original heuristic evaluation to focus on the website functionality.
Methods Used:
Heuristic Evaluation
Pre-Questionnaire
Observational Testing
Post Questionnaire
Personas.
Questions >
Ideate.
Phases:
Heuristic Evaluation
User Tests
Define Pain Points
Heuristic Evaluation.
Evaluation Results >
User Tests.
Instruction
While initiating this test, each participant was given a certain amount of instruction and information before taking the test. All participants were told to think aloud, make decisions as they usually would, not to ask questions to the examiner unless necessary, and to audibly say the word “done” when they were complete or “cannot complete” if participants could not finish the task. Each participant was instructed that there were no correct or incorrect answers and that they were not being graded on a value scale. Out of the study participants, ten were chosen per each evaluator as the best representation of the average clientele of Dutch Bros Coffee and its website
Usability Tests
Methods and Materials
type : non-intrusive.
-
a computer for participants to navigate
-
a recording device to record interactions
-
an examiner with the participants to evaluate and take notes on observations made.
*Observations consist of facial expressions and movements of the body, mouse reactions, audible comments, and the direct path each participant took during the scenarios.
Testing is done via four categories.
-
Pre-test Questionnaire
-
Scenarios/Tasks
-
Post-test Questionnaire
-
Observation Sheet
Findings.
-
Participants in this study were given scenarios and a set of tasks to determine if usability is satisfactory.
-
Scenarios are conducted from a heuristic evaluation by a set of user researchers for this project.
-
The results of this study determined ineffective Interaction Design and Information Architecture.
-
We recommend redesigning certain aspects of the Skeleton, Strategy, and Surface planes based on our collected data
-
Applying these recommendations will make the site more intuitive to a broad target audience.
-
All participants are coffee drinkers from the West Coast of North America.
-
Ages 19 - 64 years old.
Gender was split even in the sample
Recommendations.
-
Create a visual hierarchy on the homepage
-
Display main navigation on the homepage
-
Create more functional navigation buttons for users
-
50 percent of participants had issues with navigation
-
Create a search bar on the homepage in the header area.
-
Provide an auto suggestion/ auto correct to help with user input.
-
60 percent of all participants had issues locating the search bar
-
Remove hovers from images that are not hyperlinks
-
Non active links on hover were an issue for 60 percent of users
-
Place the CTA button for app download closer to the top of the homepage
-
All participants studied did not download the Dutch Bros app
Final Design Comps.
The redesign stuck with the same fonts and sizing, not to change the feel of the site but rather to focus on accessibility. The concept design is a typical “inverted L” design that starts with the Dutch Bros logo and multifunctional return home button. The navigational links follow a pattern that makes the most sense according to users’ patterns on the site and goes as follows: menu, locations, shop, about us, and contact us. On the opposing corner, a search bar was added so that no matter what page a user was on, they could use the search bar to find what they need. An autofill/autocorrect function is also added to assist with user error.
The next page redesign came on the Menu page. The significant issues users had here were the general organization of drink choices and the lack of a search function that worked intuitively. The search bar that was originally on this page has now been added to the functionality of the search bar in the header and can be accessed from any page the user wishes. Secondary to this, the categorical design has been changed to allow more easy browsing of the drink selection. There is still heavy use of white space, and ideally, the drink menu still follows the same Dutch Bros format to keep consistency.
The next item changed was the actual items themselves. The composition shown is a redesign of items on the site. Initially, all food items were broken links that did not open another page but highlighted the items on a hover. Instead of deleting the hover, it was decided that it would be more beneficial for users to click on the objects to find more information about them, including caloric information like other drinks and allergy information to aid those with allergies. Also added was the functionality to set a location and view pricing information at a given location of the users choosing.
The last major overhaul came from the new “About Us” section. This redesign was to coagulate like pages and allow for a more streamlined experience when viewing the website. There were many notes of organizational problems among users. It seemed best to combine the “Our Story” page with the “Our Impact” page to remedy this issue. When landing on the new page, it immediately defaults to the “Our Story" section, but when the user clicks on the directional arrow, it transitions to the “Our Impact” section. Aside from condensing the pages, there were no complaints about the section itself, so the design and flow were left untouched.
Takeaways.
-
Age played an interesting role in design.
-
Ages 19-40 spent less time browsing to try and accomplish scenarios, as expected.
-
The reasons behind why stem from a dynamic between the age cutoff of 40.
-
When given a failure task, those over 40 statistically spent 8-10 minutes more than their younger counterparts trying to solve the task.
-
Fundamentally the cause lies in a way each would assess the problem.
-
Those in the 40+ bracket would spend more time trying to accomplish the task because they assumed they were not comprehending how to use the technology appropriately.
-
Conversely, those in the younger bracket would associate the same task as a problem with the technology they were using rather than a user's lack of knowledge.
-
Statistically, when asked if they would return to the site, most participants ranged from "probably" to "never again."
-
80 percent of the participants cited usability as their main concern in deciding whether they would return to the site.
-
Among those that took the test, all the participants that cited usability concerns said they would likely not buy a coffee from Dutch Bros if given the opportunity.
-
For the 20 percent that did not cite usability, over half stated they would likely get Dutch Bros if given the opportunity