top of page

|  Usability & Web Redesign

Dutch Bros

This was a team project focused on solving usability issues and redesigning the website for Dutch Bros, a popular drive-thru coffee chain in the United States.

User research began by surveying participants, creating persons, and completing heuristic evaluations. We used this data to formulate scenarios and test participants on their success rates with each task. The main issues found were in the homepage layout, the lack of global navigation links, and the absence of wayfinding elements (breadcrumbs). To formulate a solution, we compiled a list of recommendations to improve the site and created redesigns to reflect our proposed changes.

User Research Data

Heuristic Evaluation

Using the UserFocus 247 Web Usability Guidelines, each group member completed a heuristic evaluation. After comparing our results, we found overall low scores on the Home Page and Navigation & IA (Information Architecture) sections. 

Screen Shot 2021-08-19 at 10.06.46 AM.png

Testing

A usability test was conducted for the Dutch Bros website by testing 8 participants. Users were asked to fill out a pre-test questionnaire, complete tasks/scenarios related to the website, and provide feedback through a post-test questionnaire.  The following data was gathered:

Screen Shot 2021-08-19 at 11.11.06 AM.png

Based on the data collected, a list of recommendations was compiled to improve the usability of the Dutch Bros website: 

Redesign Navigation Bar 

Deconstruct the hamburger button for desktop view and make it horizontal

Consolidate so that it contains only the most relevant links

Globalize so that it is the same on every page.

Add Wayfinding Elements

Highlight or underline the current page

Indicate that the Shop page opens a new window and show users how to return back to the original site

Content & Layout

Place most relevant information first on the Home and Menu pages

Add a more visible search button to the Menu page

Add a Help button to the Shop page 

Website Redesigns

Website mockups were individually created to reflect a new design based on our user research.

Homepage.png
Homepage – 3.png
Homepage – 4.png
bottom of page