Dutch Bros Desktop Website
Role: UX Research, UX Design, Project Management | Time: Two Months | Tools: Figma, Google Workspace​​
Overview
At first glance, Dutch Bros has a seemingly clean, and professional website. But with further user observation and testing, it was found that several of the tested participants struggled to navigate through the website, leaving them frustrated and unsatisfied. This case study does a deep dive into the Dutch Bros website in order to find out what exactly is causing issues among users, and how we can fix these problems through research and design.
Purpose​
For this comprehensive case study, I collaborated with a small team of three classmates, providing me with valuable experience in team collaboration. I believe this project was instrumental in advancing my design skills by not only allowing me to dive into practical UX challenges but also allowed me to take the lead in creating all of the research materials. While not officially affiliated with Dutch Bros, it enabled me to apply UX design principles and methodologies, showcasing my commitment to growth and ingenuity as a designer.
​Disclaimer: This case study is a self-initiated educational project and is not affiliated with any official entities or organizations.
Discover
Research Materials​
After conducting a heuristic evaluation on my own, I took what I learned and collaborated with a small team to come up with some user testing materials. Together we came up with the following:
​
-
Pre-Survey Questionnaire
-
Three unique, timed scenarios for participants to complete (each including two tasks)
-
Post-Survey Questionnaire
​
​
You can find the detailed version of all the testing materials created here.
What Did We Learn?​
After conducting our user research, we came together as a team to discuss any major takeaways. Here are some things that really stood out to us;
Research Overview​
Test Goals: Observe and analyze our test subject’s experience with the Dutch Bros website.
​
Reason for Test: Provide insight on how to make the Dutch Bros website user friendly and more intuitive.
​
Results:
​
-
Pre-test: We saw why people would find themselves on the site in the first place, many participants often buy coffee while they're out, not too appealing at first glance.
-
Post-test: Difficult to use, unclear, not likely to recommend to other users.
Recommendations: Create more clarity, label icons, more direct pathing.
​
Making these specific changes will allow for a smoother and more enjoyable experience for users, helping them find simple and crucial tasks for the site.
The Problem
The user testing participants had significant trouble finding (what should be simple) tasks on the website such as: menu, local store locations, and filter/search bars throughout the website.
Define
User Personas​
Creating user personas let me step into the mindset of Dutch Bros customers, so I could really understand their goals, frustrations, and expectations when using the site. It gave me clear insight into where the site was falling short—and what changes would actually make their experience better.
My Design Solutions​
After bringing this persona to life, conducting an extensive review of our research findings, and engaging in comprehensive brainstorming sessions, I've come up with a set of design solutions developed to address the widespread user pain points. Throughout this process, I remained committed to to making sure these solutions align with Dutch Bros' target audience while maintaining the company's core values and brand identity.
​Home Page:
-
People were having difficulty differentiating and recognizing the “locations” and “menu” icons on the home page. To avoid any further confusion, I added some text that clearly defines both the "locations" and "menu" icons.
​
-
Another common usability issue I found was the lack of an obvious “contact” link. By adding a “contact” link to the navigation menu, I’ve eliminated the need to scroll to the footer in order to locate the company's contact information.
​
-
To simplify the navigation menu, I decided to combine the “Our Impact” and “Our Story” pages.
​
Menu Page:
-
While the menu is not particularly difficult to navigate, there are a large number of menu items to look through before arriving at your targeted beverage. To fix this, I decided to add a clearly visible search bar located towards the top of the menu page.
​
-
I decided to reduce the size of the holiday drink images and placed them into a side scrolling gallery in order to utilize the display space on the menu page without sacrificing the displayed seasonal beverages.
​
Locations Page:
-
During our team usability tests, most of the participants didn’t have too many issues with the locations page once they found it. What I did notice however was that a few participants had no idea how to recognize which location was actually the closest after they input their zip code. In fact, most of them didn’t even notice that the locations list had updated and only seemed to notice the map updating. To fix this, I decided to add numbers to the locations listed and display them in a single ordered list from closest to furthest location.
Contact Page:
-
On the “Contact” page, the first thing displayed is a very long list of FAQs. You have to scroll down past them and then click on a button to open up a form where you can then enter your concerns to send to corporate. My way of fixing this was to reveal the contact form and place it at the top next to the FAQ list. Making the contact form more easily accessible will make customers feel more supported in trying to solve their issue if they can’t find the answer to their problem in the FAQs.
Develop
Wireframes
The next step in the process involved deciding on the most promising solutions and translating them into wireframes. These wireframes then acted as our game plan, helping us visualize how everything would come together in the final designs
Deliver
Final Designs​
Using our wireframes and user research, we were able to come up with these final designs. After some discussion among the team, I found that the other group members didn't feel as comfortable with their design skills, so I volunteered to be solely responsible for creating the final product.
Conclusion
Wrapping Everything Up
Given the educational setting of this project, my proposed final designs were not executed in a real-world setting, thus hindering the availability of any actual quantitative or qualitative results for this case study. Even so, I found this project to be an invaluable learning experience. Some of my major takeways from this case study can be summarized as follows:
​
-
​Collaborative Learning: This project marked my first experience working on a case study as part of a team. Collaborating with my teammates allowed me to gain valuable insights into different perspectives and approaches to UX design, improving both my ability to work effectively in group settings and my skills overall as a designer.
​
-
Learning To Take The Lead: By recognizing my comfort level with certain aspects of the project, I ended up taking the lead on many important components. This experience not only strengthened my confidence but also provided me with the opportunity to apply my knowledge, unique styles and skills to keep the project moving forward.