Improving the Website of a $1.28 Billion Revenue Coffee Chain
Skills
UI/UX Design
Collaboration
User Research
User Personas
Usability Testing
Team
5 UX Students
Tools
Adobe Illustrator
Adobe XD
Year
2023
Background
Dutch Bros is a coffee chain founded in 1992 by two brothers Dane and Travis Boersma. The coffee chain offers a variety of options such as coffee, energy drinks, sodas, snacks, and more. Dutch Bros has become popular because of its culture and drive-thru only option. However, their website had a few issues and needed a revamp.
Problem
Users found that the website was not intuitive and easy to use. The information architecture led to confusion and the visual design was overwhelming due to clutter. This made it difficult for the users to achieve their tasks quickly.
Process
Collaboration
I was assigned to a group of 5 other students to collaborate and find ways to improve the usability of the Dutch Bros website.
Usability Testing Materials
We conducted surveys, questionnaires, tasks and scenarios for our participants, observation sheets, and 2 sets of user personas.
Task(s) For Participants
Find “Contact Us” link
Access contact information
Find a link to the menu on the homepage to see what featured drinks are offered
Find a link to place a pickup order online
Find the nearest Dutch Bros location
Access additional store details
User Insights
I discovered that the participant was not able to find links quickly or at all causing frustration. Most of the time on task took 6-13 seconds while one took 30 seconds, leading to a fail completion. This result led me to focus on optimizing the navigation menu and visual hierarchy.
User Personas
Design
Based on our insights, each student from the group was responsible for re-designing the Dutch Bros website independently. My design approach was to focus on simplicity and efficiency while still making the website visually appealing.
Results
I enhanced 4 inside pages of the website: Home, Full Menu, Product, and Contact Us Pages. I constructed these pages by creating a more intuitive navigation, integrating new colors in the branding, moving and adding new elements (hover toggles, contact form, filter dropdown, links) to create a smoother experience for users.
Final Design