Dutch Bros Website Redesign

– A UX Case Study
Redesigning the Information Architecture and UI of a coffee company website.

Objective
I was given a task to create digital comps of the Dutch Bros Coffee
website that addresses the needs of the users, the results of my team’s
usability testing and the goals of the company.

Methodology
The focus of this project was on Information Architecture (IA), so our
process used the following techniques:

• User Research (Previous Assignment)

o Online Survey
o User Interview
• Heuristic Evaluation (Previous Assignment)
• Usability Testing (Previous Assignment)
o In-person Moderated Usability Testing Session
• Card Sorting
• Prototyping

Card Sorting
The results of our heuristic and usability testing gave insight into the
usability issues of the drink menu. I decided to use Optical Workshop’s
card sorting program to get an insight into how potential users would
classify the drink menu.
CARD SORTING RESULTS

The results showed that I could reduce the number of categories on the
main drink menu page to better usability and decrease clutter.

Prototype
Through my prototypes of the Home, Menu, Campout Cold Brew, and
Employment pages, I addressed some key concerns with information
architecture, usability, and UI.

Navigation and Information Architecture

According to the Heuristic evaluation, the website lacked main
navigation tabs located at the top of the page and look like clickable
versions of real-world tabs.
CURRENT NAVIGATION: HAMBURGER MENU ICON

CURRENT NAVIGATION: MENU

The navigation style was changed from a hamburger icon menu to a

permanent menu across the top of the page. The hamburger style was
kept on the mobile version.

This decision was based on the following user feedback:

• What, if anything, caused you frustration? “The navigation bar

hiding.”
 • “I think the main navigation should be always visible instead of
hiding all the time.”
• User commented that, he didn’t even realize that the hamburger
link was there.
• “There weren’t any tabs at the top of the home page like other
websites. I don’t like having to find and use the hamburger link at
the top to get to things.”

The heuristic evaluation showed that the website’s main menu lacked
information that users are most likely to need. The site structure lacked
simplicity and did not have a clear conceptual model. It was also
confirmed with the usability testing, with comments such as, “I am
surprised that their employment opportunities were so hidden.”
Another user was frustrated with “The lack of links/tabs in the header
bar and having to scroll all the way to the bottom to find many of the
links.”

A user stated during the Usability Testing he would normally look for an
‘About Us’ link in websites he usually uses. He was frustrated with
having to go to the hamburger menu at the top to find the ‘Our Story’
link.

Another user searched for over two minutes for the link to take him to
the value proposition but became visibly frustrated when he couldn’t
find the link. He finally clicked on the hamburger link and then was
confused about which link to select. He didn’t seem to understand the
difference between the “OUR STORY” link and the “THE DUTCH BROS
FOUNDATION” links.
During the usability testing, many users had difficulty finding the
“EMPLOYMENT” page. A user stated, “I was looking at their main
options, but I didn’t see it. I scrolled down and found a hyperlink, and I
was surprised this feature wasn’t more noticeable. Another user went
to the main menu first, looking for something that said career or
employment. She then scrolled down to the footer and found the
“employment” link.

Based on the comments, the main menu tabs were changed to the
following:

• Menu
• Locations
• About Us
• News & Events
• Shop
• Careers

Other frustrations included users having the scroll to the bottom of the
page to find the RESOURCES link and how the links on the bottom
navigation page (Footer Menu) were not clearly clickable links.
CURRENT FOOTER MENU

I made a simple change to the footer so that the links followed usability
best practices. By underlining the links, there is no guessing if it is a link
or not, prevents delays, and speeds up access to the desired content.

PROPOSED FOOTER MENU

In addition to the aforementioned navigation and IA usability issues, I

addressed the lack of a convenient and obvious way to move between
related pages and sections by adding a breadcrumb navigation scheme
to reveal the user’s location on the website and provide an easy way
back home.

Writing and Content Quality

The scanability of the website lacked across many of the pages. The
issue is addressed by using headings and subheadings to make the
pages quicker to scan.

I also noticed that the “NEWS AND EVENTS” in the main menu and the
“DIGITAL NEWSROOM” link in the footer menu went to the same page.
Link names should match the title of destination pages so that users
are not confused.

Page Layout and Visual Design

The heuristic testing showed many usability issues with the page layout
and visual design of the website. For instance, the buttons and links
were not obvious to the user. When the user rolls the mouse over the
buttons and links, nothing changed in the design. It conveyed that they
were not clickable links. A user expressed frustration with the fact that
the links in the bottom navigation pane were not clearly clickable links.
Another usability issue was that the image boxes on the front page
looked like graphics but actually linked to a page. I solved these issues
by adding buttons to graphics that were linked, adding a drop shadow
on the buttons, and underlining text links and made sure the links
changed colors once clicked.
HOME PAGE “BUTTONS” TO INTERIOR PAGES

I found a major issue with inconsistency in the layouts of the interior

pages. I counted at least seven different layouts. Having a consistent,
clearly recognizable look and feel will engage the user and build trust
with our brand. When doing the comps, I chose a layout for the home
page, the menu, and an interior page. These layouts should be used
consistently throughout the rest of the website.
DIFFERENT PAGE LAYOUTS ON CURRENT WEBSITE

Home Page

The home page received multiple negative comments in regard to the

images. A user commented that “The images in the advertisements
seem a little cheesy and amateurish. The ads are not very appealing to
the eye, but the rest of the website is.” Another user stated, “I would
change the images used for the advertisements on the Home page. I
don’t like them. I don’t like the colors, and the images didn’t make
sense.” We also identified issues in the heuristic evaluation that
included the website not having a search input box and was missing a
value proposition, tagline, or welcome blurb. I added the search feature
to the main navigation menu. I also researched a little more about the
company and found a value proposition and a new header photo that
would complement it.
SEARCH BUTTON AND VALUE PROPOSITION ADDED TO HOME PAGE

Taking into account the comments from the usability testing and the
brand’s image, I used the same photos but added buttons to them with
drop shadows to better explain the images.

Menu Page

The changes to the drink menu are based on the heuristic and the
usability tests. The drink menu’s search feature was not easily located
on the page; I moved it to the header of the page to allow for the users
to quickly search what they are looking for. Another issue was the users
having to use the back button requiring multiple clicks, this seemed to
annoy the user based on their facial expression, but they didn’t’ say
anything about it. In response, I added the secondary menu bar just for
the drink pages.
SECONDARY “STICKY” DRINK NAVIGATION MENU

Concerning the layout, I used the card sorting data and the usability
test to create a better experience. A user stated, “I think the grid on the
menu page looks a little congested as it took me a moment to see
everything.” Another user stated, “Have their menu appear to be less
busy and include pictures of beverages (because there are a lot).” I
reduced the number of categories and included clear photos of the
drinks, and added button to get to the drinks within that category.

Menu / Cold Brew Page

I designed the layout of the page to be consistent with the main menu
page. During the usability testing, a user stated, “this screen of cold
brew drinks just looks like a list.” Another user stated there was a lack
of visuals for drinks. In response, I designed the Cold Brew page to be
visually appealing to the user, keep the same amount of information,
and have a link to more information on the product (nutritional values,
etc.).

Careers Page
Our moderated usability testing revealed an issue with the navigation
and information architecture of the page. Multiple users were unable to
find the employment page. One user stated, “It would be nice to have
the link to the application form at the top of the employment page,
maybe as a large button or banner, instead of buried in the
employment FAQ.” Once the users found the page, they had a difficult
time finding the actual application stating, “Where do I click?” and
“Where is the application button?”

My recommendation is to change the name of the link from

“employment” to “careers” and add it to both the main navigation menu
and the footer menu. In doing so, this will reduce the number of links
on the main page. Furthermore, the career page will include store
applications, headquarter careers, and internships.

A user stated, “I feel the same way about this application as I do about
the employment page in general. The application should be the focal
point.” Therefore, my recommendation would be to embed the online
employment application on the page. The button for the pdf application
will be easily seen by the users solving the issue of them not being able
to find the applications.

The FAQs will change from the gray boxes to an accordion-style that will
de-clutter the page and help users find what they are looking for
quicker.

Items Not Addressed in the Prototype

Additional changes that should be addressed that are not included in
my site comp would be to address the issue of the SHOP NOW page
opening to a site that is very different from the DutchBros.com website.
The lack of continuity has the potential to confuse users in regard to
what site they are on and discredit the brand. In addition, the
shop.dutchbros.com website cannot sort and filter their online
merchandise or do a general search. I would recommend adding these
features, so the users are able to find the products they need in a short
amount of time. The DutchBros.com website lacks in testimonials and
reviews across the menu items and their products. It would be my
recommendation that this feature is added to ensure trust and
credibility with the brand.