Chuck’s Hop shop: Website Redesign

CURRENT WEBSITE

CURRENT WEBSITE

THE REDESIGN

THE REDESIGN

Let’s start with the basics

Challenge: Redesign a confusing website and make it into something awesome and functional, a place where beer drinkers can order kegs.

Context: This was my first UX Design project and as such, I learned a lot. I hope to convey some of those learnings and my improvements here.

Chuck’s Hop Shop (CHS) is a watering hole for Seattle-ites. There are two locations, although most people don’t realize this. CHS is a great place to take kids and dogs (how cool is that!). The atmosphere is down-to-earth and they boast a giant selection of beers on draft, take-away, and in kegs. Did I mention they sell kegs? Amazing. To get a feel for how fantastic this place is, one of my user research participants said it best, “I take all my out-of-towners here.” Now that’s sayin’ something.

Top learnings:

  1. Always start by analyzing competitor websites, getting a sense for the company’s brand, and looking for the company’s unique selling points.

  2. The design process is never over, however there comes a time to move on.

  3. Get your work critiqued all the time.

 
Feature Analysis v2.png

I make charts.

The first thing I did for this project was a website feature analysis comparing Chuck’s Hop Shop to 5 other beer joints including: locations in the neighborhood, a beer subscription, and other highly rated brew pubs around Seattle.

See all those red X-es? Those are the categories I determined needed to be featured in my new website designs. You wouldn’t know it from the current Chuck’s Hop Shop website, but it is good for kids, dogs, and groups. These are major unique selling points (USP) and they should be capitalizing upon.

 
 

This positives and deltas chart gave me a new perspective

Like here, in my positive and deltas analysis there are a lot of things Chuck’s hop shop could be capitalizing on, but aren’t. See how many deltas I wrote down?

Positives and Deltas.png
 

Let me summarize all that research.

There is a lost opportunity here. Chuck’s hop shop has unique selling points that they don’t communicate to the user such as:

  • They sell kegs of beer to consumers

  • They allow dogs on site

  • They are great for groups

  • Children are welcome

  • They have a patio (great for summer!!)

  • They have a huge selection of beer (both in their bottle shop and on tap)

  • Pictures of the environment on their website may help new customers decide to go there

  • We should expound upon their giant beer selection

And I should communicate ALL of that to the customer in my new designs!

 

Based upon these discoveries, I came up with a clear problem statement.

How might I redesign Chuck’s website to provide clarity and increase the number of kegs sold?

Goals are the north star to my designs

Goals are important, they are what I come back to over and over again throughout the design process to make sure I stay on track. I like to look at all stakeholder goals, so I came up with 3:

  1. Business Goal: Redesign website and increase keg reservations on website. 

  2. Brand Goal: Every patron feels like Chuck’s Hop Shop is their own backyard. 

  3. Beer Drinker Goal: Find out if it is a good date location and easily see what’s on tap. 

 

With my goals in mind I got out my sticky notes and started on a new information architecture.


BEFORE

BEFORE

DURING

DURING

AFTER

AFTER

It’s so much simpler!! And you don’t have to immediately choose which location’s website to go to. Problem solved.

 

After creating a solid Information Architecture, I put pen to paper, sketched some screens and made them digital.

PAPER SKETCH

PAPER SKETCH

FINAL

FINAL

 
 

I’d like to bring your attention to the “ON TAP” Before and After.

This is Chuck’s on tap display.

On their primary nav, you click “On Tap” and are entered into a google spreadsheet of their tap list that looks like this.

While a bit archaic, I do give them props on their consistency. When visiting Chuck’s Hop Shop, this google spreadsheet is the same thing you see on giant televisions displayed around the bar.

Screen+Shot+2019-10-06+at+8.33.24+AM.jpg
 

Even though they have some things going for them with the google spreadsheet tap list, I decided to give it a makeover, complete with expandable and collapsable menus and a sorting feature. Now you are able to sort by the type of beer as well as the price, brewery origin, and if you want to get really tipsy, the ABV.

AFTER+Tap+Display.jpg
 

After creating an Invision prototype, I conducted some usability tests with beer drinkers.

I created a script, scenarios, and a consent document allowing me to record their testing sessions.

Here are my test script and Consent Form:

Consent Form.png

TEST SCRIPT

Hi, ___________. My name is Sarah, and I’m going to be walking you through this session today. Before we begin, I have some information for you, and I’m going to read it to make sure that I cover everything. 

You probably already have a good idea of why I asked you here, but let me go over it again briefly. I’m asking people to try using a website that I’m working on so I can see whether it works as intended. The session should take about 15 minutes The first thing I want to make clear right away is that I’m testing the site, not you. You can’t do anything wrong here. In fact, this is probably the one place today where you don’t have to worry about making mistakes. 

As you use the site, I’m going to ask you as much as possible to try to think out loud: to say what you’re looking at, what you’re trying to do, and what you’re thinking. This will be a big help to me. Also, please don’t worry that you’re going to hurt my feelings. I am doing this to improve the site and so need to hear your honest reactions.

If you have any questions as we go along, just ask them. I may not be able to answer them right away, since I’m interested in how people do when they don’t have someone sitting next to them to help. But if you still have any questions when we’re done I’ll try to answer them then. 

And if you need to take a break at any point, just let me know. With your permission, I’m going to record what happens on the screen. The recording will only be used to help me figure out how to improve the site, and it won’t be seen by anyone except the people working on this project. It helps me, because I don’t have to take as many notes.

If you would, I’m going to ask you to sign a simple permission form. It just says that I have your permission to record you, and that the recording will only be seen by the people working on the project.  

(Give them a recording permission form and a pen. While they sign it, START the SCREEN RECORDER)

Do you have any questions so far?

(START WITH SCENARIOS)

 

I conducted both qualitative and quantitative research

I wanted to know the answers to the following questions:

  1. How long does it take participants to find out if Chuck’s Hop shop allows dogs?

  2. How long does it take participants to find which beer has the highest ABV at the Greenwood Location?

  3. How long does it take participants to reserve a full keg of Dogfish Head IPA and a keg tap to be picked up at the Greenwood location on 8/12/19?

For quantitative data, I measured:

  • How long each task took the participant to complete.

  • How difficult or easy the participant found navigation through the website (using a system usability questionnaire).

For Qualitative Data, I tested:

  • The ease of performing each task.

  • What participants expected to see on each page.

  • Where participants struggled in performing their tasks and why they struggled.

Results

Average & Range Time Scores for Scenario 1 & 2:

  • Scenario 1 took participants an average of 55 seconds to complete with a range between 30 and 78 seconds.

  • Scenario 2 took participants and average of 42 seconds to complete with a range between 31 and 60 seconds.

System Usability Score (SUS):

  • The average SUS score for the redesigned website was 84.36. To understand where that lies, any score over 68 is good. While SUS testing is often used for larger systems, I think this score indicates that the core of what I designed is a solid foundation.

Qualitative Findings:

  1. User 1, 3, and 5 all said something like “I go to the ‘about’ section to find out information about the shop.” This indicated that the “on tap now” and information about dogs was not where users thought to find it. I should feature this information in the About section.

  2. “To me, seeing pictures of the environment always makes a difference” User 2 said this after the first scenario. Based on this, I should include a photo of a dog in the next iteration. She also wondered if there was beer garden, indicating that I should also add a picture of the beer garden.

  3. “I recommend making pictures above buttons clickable” - User 4

  4. “The search bar needs to be placed in an area that indicates you can search the ENTIRE website. A search bar too close to the shop page on main navigation makes it seem like I can only search for shopping items.” - User 5. From this I learned that I needed to place the search bar elsewhere.

Top LearninG

  • Task 1 and 2 need to take less time in the next design iteration. The qualitative research indicates that people thought the information should be in the “About” section, not the “Visit Us” section.

 

After taking the finings from my usability tests into account, I made a few edits and produced these wireframes

page_home.png
page_on_tap_now_ v1.png
page_our_beer.png
Food Page.png
page_bottle_shop.png
Events Page.png
 

my Next Steps if I were to work on this further:

  1. Create a hi-fidelity keg flow.

  2. Usability test the tasks again to ensure a shorter completion time from participants.

That’s about all I have for you on this one. It was a great first project please check out my newer projects below.