My Role: UX designer
Timeline: Mar 2023 - Apr 2023
Introduction
For my Information Design and Usability course, my peers and I were assigned a group project that we spent time collaborating on for the entire course. Our main goal was to redesign components of a website for it to be more user-friendly, and for users to accomplish tasks more efficiently.
The website we were assigned was Dutch Bros (link to official website), and by gathering user research and conducting usability testing, we were able to pinpoint what accessibility and usability issues to prioritize in our redesigns.
User Research & Testing
The first step in our project was conducting user research. This included demographic questions, as well as more general user information so that we could better understand Dutch Bros' customers and their needs. We also created two user personas based on these results.
This process was followed by individual user testing, and I tested two participants on the usability of the website.
Redesigns Based on Usability Test Findings
Using Figma, I created 4 high-fidelity wireframes with redesigns based on usability findings. From there, I was able to design 4 site comps with newer, usable website components.
Home Page
A major usability issue regarding the home page was the placement of the menu, and how it was being accessed by users. In the user survey conducted before the usability test, and in the usability test itself, users indicated that they are most interested in the menu when going to the Dutch Bros site. Therefore, it is important for a menu button to be readily accessible.
The current website has a few menu buttons on the home page, and the one in the navigation bar is represented as a coffee cup icon. Based on the research, the coffee cup icon in the navigation bar should be changed to a button simply saying ‘our menu’, which would fit nicely with the ‘our story’ and ‘our impact’ buttons. In addition, the home page should forgo having a menu button in the header, and instead be used as a photo carousel advertising any new or popular products.
Although the research did not bring attention to the ‘careers’ button on the navigation bar, this button can also be removed to avoid having too many buttons. Site visitors can apply by scrolling down the home page to a section that advertises job opportunities, or by clicking on the ‘careers’ button in the footer.
'Our Story' Page
In my fellow teammates’ usability testing, there was a recurring issue with a particular component in the ‘our story’ page. This page contains an interact-able timeline sharing the history of Dutch Bros as a company. However, there are no clear directions to guide users in interacting with this feature, and test participants were left confused as to how they should.
The intract-able timeline requires users to either use their mouse to scroll left and right, or use the left and right keys on their keyboard.
Based on the usability test, there should be arrows on either side of the timeline to better communicate to users that this component requires horizontal scrolling.
'Contact' Page
Participants in both my and my teammates’ usability tests had trouble with finding the contact form for customer inquiries. In the footer of the current website, there is a contact button available for users, but once it is clicked on, it takes them to a page where they need to scroll through a long FAQ, and finally click another button for the fill out form to appear.
Because this path takes longer, and based on user responses, there should be two distinct pages for contacting necessities, and the FAQ. This will limit scrolling and avoid an overwhelming amount of content on a single page, as the FAQ takes up most of the current contact page.
'FAQ' Page
Although the contact page could have a fill out form without having users click a button, and the FAQ, this could potentially be too much content on one single page for users to accomplish tasks quickly. Therefore, a single FAQ page can be much more convenient for users who might have a question but want to check if it is answered in the FAQ, or who simply want to learn more about Dutch Bros.
The re-designed FAQ page below also condenses the FAQ section, having the headline and filter bar and the FAQs next to each other, so as to limit scrolling. This new page should also be equipped with a contact button that is readily available for users in case the FAQ does not answer their question or address their concern.
Retrospective
This project was an amazing collaborative experience and helped me gain more skills in user research and usability testing. It was a great way to expand my knowledge on user-centered design and the importance of accessible, usable site components.
