Chuck's Hop Shop
Land of a thousand beers
Summary
Chuck’s Hop Shop is a neighborhood beer store and taphouse with two (now three!) locations. I worked there and was the manager for six years, so when I started getting into the field of UX, I knew I had to help the owner update their online presence.
The problem that they were having was that their website was not user friendly and customers didn’t know how to find what they were looking for, which was often the current tap list and food truck schedule.
Duration: 10 weeks + ongoing
Platform: Responsive Web
My role: Front-end to back-end. I conducted user research, created designs, and helped implement using Wix.
Reading time: 5 minutes
Problem
Chuck's Hop Shop management is tired of fielding calls from customers about basic store information, when it should be easily accessible through the website. When customers go to the website they become confused and just call the store for information like the foodtruck schedule or current tap list.
Design
People are confused about where to navigate to and sometimes hit dead ends. How might we change the site structure to highlight the most requested information from users that call the store?
Goals
Their current site structure doesn't match the customers needs. The content is hard to find and doesn't accurately showcase the voice of the business. I needed to introduce a hierarchy to the information that represented the average users needs.
Solution
Through comparative analysis, customer, and employee interviews, I created a navigation system that represents users needs. I focussed on the customers needs while bringing the branding into the modern world. I cut the navigation and pages down in size while increasing customer forward information.
Outcome
Almost there but on hold. This project started about a month before COVID hit and we had to shut down some of the operations. I was working there during this time and was laid off for three months before we were able to open again.
During that time the business shifted its focus. Chuck's could only sell to-go sales and outdoor seating, which meant that I had to go back to the drawing board.
Chuck's Hop Shop the day after lockdown, March 2020.
Discovery
The beer lover persona
Leigh is a 27 year old middle school teacher and likes taking her dog out to local dog-friendly breweries or tap houses on the weekend. She’s college educated and considers herself low-to-middle class. She stays pretty busy throughout the school year, so when she goes out on the weekend she doesn’t have very much time to plan beforehand. She’ll check a couple place’s Instagram pages or websites to see what the latest brew is and head out.
Confusing site navigation
The primary navigation for the website needed to be updated to reflect the shift in the business. They no longer needed a corporate delivery option as that service was now defunct.
There were also links thats went nowhere, links that were duplicated and links that sent you to the wrong place.
User flow showing journey for someone navigating to the "Current Tap List" from any store location.
More focus
Since I worked at the shop at this point in the design process I was able to have informal interviews with customers like Leigh as they sat at the bar. I was also able to talk to employees daily and regularly talk to the owner about their needs and painpoints with the current site.
From many hours of conversation with the owner, relaying customer needs, I was able to steer design toward a focus on tap list information and food truck schedule.
Ideating
Succinct navigation
I was able to cut down roughly half of the navigation, as some of it was no longer needed and other areas lead to dead ends.
Moving away from interactive carousels and focussing more on cards, while decreasing the links on the page, would decrease confusion coming from the home page. Users like Leigh just needed to select store and would be able to access all of their needed information. There would also be a global footer with full site map added for ease of use.
Updated sitemap that focusses on simplicity. Less repeated pages and no longer a corporate delivery section. No more carousel link and a shared shop section. Added global footer.
Adding character
The original tap list pages needed some work. In a desktop browser the entire section was left justified, leaving a huge empty space. Navigating to this page also made the user open a new tab, taking them away from the website.
The new version of the taplist page utilized a plugin so that the user wouldn't have to open a secondary tab. There is also some added verbiage to explain the page and encourage users to come back to it.
Back to normalcy
The owner wanted to get away from the "calendar look" by importing calendar data into a Google sheet, which was turned into a web app. This page also had a lot of extra white space.
Creating some contextual verbiage again gives the users insight into what their looking at. Using a Google plugin again here will give users something their used to.
Future design and implementation
Since it is a small business, the owner made the original website himself. In order for me to change the website, I had to do it myself. I learned how to use Wix and implemented the designs. I also taught myself some basic HTML/CSS to help supplement the design changes. I presented new design ideas and worked with the business owner directly during this process.
Through Google analytics we could see that the vast majority of people access the website through a mobile device. Using the card design made it easy for responsive design. Menu was turned into a hamburger drop down menu.
Peer Review
While I was designing this during the beginning of COVID and the start of my UX design journey, I wasn't able to get much usability testing done. But, I was able to get my designs in front of half a dozen experienced developers and designers, who gave me invaluable feedback throughout the iterative process.
Before & After
<Slide>
Future results
Chuck's Hop Shop's website was confusing to navigate and wasn't showcasing the two main things customers search for: the current tap list and food truck calendar.
My goal was to simplify, modernize, and create a responsive experience. I achieved this goal by talking to the owner, employees, and customers to find out what needed to be addressed. Once I've implemented the design the website will be easier to navigate for your everyday beer lover like Leigh.
Reflections
This was my first project, which I did by myself, after teaching myself the basics of UX design. I learned a lot along the way and it was because of this project that I solidified my resolve to become a designer.
Presently the design changes aren't fully live. Due to unforseen circumstances, the implementation got put on the back burner. My goal is to finish implementation and help maintain the website for the forseable future. Once it's up and running I'd love to implement A/B testing to gauge the effectiveness of the design changes.