Amanda Alexander

GIT 340

Professor Matt Dirks

12/6/2019

Mockup Design Explanation

I wanted to start off by saying I was completely inexperienced in both HTML and Photoshop. I
decided to learn Photoshop. I had to teach myself everything for the assignment, so if I could’ve done
something better within the program I apologize in advance. To start with the homepage, there was a
few things I changed. The side sandwich bar I got rid of because it was confusing to users in user testing.
Within the original main navigation, it had coffee, menu, love abounds, and locations listed. I got rid of
coffee, love abounds, and locations. I decided to put the most important user buttons at a top
navigation bar at all times. Nothing has to be opened, it’s constant and easy to know what’s what. I got
rid of the coffee option because it was confusing to participant’s in user testing. They thought pressing
coffee would get them to the drink menu. Eliminating this made no room for confusion. I also took
locations out to take up less space and make the main menu look simple and easy to navigate. My
mindset was the less the better. My goal was only to bring out what was necessary to a user in this site. I
put in a location pin instead. It’s always there, and not in a pullout. Putting the pin there made the
homepage simpler because in the original there was another space for location which I thought was
unnecessary. I made the navigation bar white with black text because it contrasted well against page
backgrounds, as well as the navigation bar itself. I also did not know how to find Dutchbros specific site
text into Photoshops text boxes so I went with a simple bold font for the menu and main page headers. I
wanted things to match all the way through. I also put Shop into the main navigation to show that is
apart of the same site.

The first interior page I did was the Menu page. The problem with this page in user testing was
the lack of information in categories. There was none, which could confuse someone trying to figure out
where their coffee was. Or if they didn’t know what specific coffee they wanted, they could find one
based on category descriptions and their personal preferences. I left out the search bar because it
blended in with the webpage in user testing. One person I personally tested didn’t even see it and
complained about how it was there. So, I decided to do simple category descriptions instead. Since there
were no category descriptions on Dutchbros I had to come up with my own descriptions based on my
knowledge of coffee and some google research on meanings like breve coffee. I kept the blue
background from the original menu for contrast, but kept my basic font for the word menu to stay
consistent with my main navigation bar. If this were a real website, the user could hover over the
category and they could see if it was clickable to see the coffees listed under it.

The second interior page I created was the merchandise page. The problem in user testing for
this specifically was how it pulled out a new tab and was a completely different designed website than
the original. My goal here was to make it all as one. It was also a problem in user testing that
participants couldn’t return to the original homepage after being on this second tab, I eliminated this
problem by keeping it all on one site. I showed this by titling the page ‘shop’ and keeping it on the main
navigation bar. I also made sure to keep the same font for consistency. In the original merchandise page,
the secondary navigation pulled out under the main navigation. I personally thought it looked too
cluttered and I didn’t know how to pull it off in Photoshop and have it still look professional. So, I
decided to do a secondary navigation in a side menu. I chose this also because it was easy to see
categories and subcategories. I also made a point to put the option to purchase coffee grounds under
shop instead of the main menu like the original website. I thought this way it made it less confusing. I
also made sure to add a shopping cart within the main navigation so is visible to a user if something is in
their cart. I decided to leave the icon on all pages that way, if the user somehow gets away from the
merchandise page, they can still see if an item is in their cart on all parts of the site.

The last mockup page I decided to do was the Our Story page. I still thought this was important
enough to leave in navigation since it builds trust in users. During user testing, there were complaints
that the page was a lot to scroll through and that the large photo of the founders under text looks
cluttered. When I designed my mockup my goal was to make it simple and to the point. I wanted to keep
the our story heading for users to know where they were, so I put it above the actual story of the
founders. I also found a much better and clearer photo of the original founders on a different part of the
Dutchbros site and added it to this page instead of the overlaid photo in the original site page. I found it
to be a lot cleaner. I made sure to add a footer note to point out the founder’s names since in testing it
was a little hard for our participants to find. In the original page also, there was a giant YouTube video
that I thought looked tacky so I left out. And also, they talked a lot about their mission statement and
agenda as employees. I thought this wasn’t fitting for an our story page and decided that if I were to
completely rebuild the website, it would go on a different page all together. For this reason, I left all of
this out. I decided to put in one header from the page because I thought it was nice and had sentimental
value above the founders photo.