Website Redesign
It’s time for an upgrade
Chuck’s Hop Shop is a quirky brew pub loved by many that has been a top contender in Seattle’s saturated beer market for the past 5 years. The “land of 1000 beers” is no doubt an indecisive person's worst nightmare as they have over 900 craft beers, ciders, sours, and assorted fermented libations available to choose from, with most being sourced from around the beloved Pacific Northwest.
While they have an excellent reputation, their current website does not demonstrate their success. People come to Chuck’s for the multitude of beers and stay for the unique brew pub experience. I wanted to redesign the website to showcase their beer and the sense of community at Chuck’s Hop Shop.
My Process
Two main problems:
Redirects
The website has its fair share of issues. Paramount, in my opinion, is their poor navigation system. 5/8 menu options currently redirect to a related but different website, and two of these five redirect to a Google Doc.
Infinite scroll
The homepage doubles as their blog, leading to an “infinity scroll” and past events being advertised.
My proposed redesign simplifies the navigation and improves the page length.
Left: Current homepage. Right: My proposed redesign.
Homepage redesign goals
free up space
remove unnecessary content
improve navigation
Beer me.
The next page to tackle was the “On Tap Now” page. Coupled with the homepage, this felt like the other most important page redesign. Their present tap list redirects to a google doc with their options typed in various neon colors against a black background. Based on my competitive analysis, I made these three versions of the beer page to test with users. Below are three lo-fi versions of what would be the “On Tap” page.
Proposed design
I created 3 interactive design treatments to learn about beer
Current beer list design
links to a google document
Wires
V1 features: This version is great for browsing to get a sense of all of the beer options offered.
V2 features: This version menu option for beer type at top, scrollable list of options. Clicking a beer takes users to the V3 page.
V3 features: menu option for beer type at top (same as V2), large image, carousel of beers.
Success!
The majority of users tested favored version two of the “On Tap Now” page because they liked the beer categories navigation at the top and they liked seeing multiple beer options on one page.
Keg flow
I decided to combine the keg ordering page into the beer page since all of Chuck’s beers are available as kegs. Users currently have to email Chuck’s Hop Shop to order a keg. Due to the short time frame of this project, I did not change this.
Events + Food
Yet another (obviously) important thing to know prior to going to a drinking establishment: food options! Similar to the tap list, the Events and Food Trucks tab currently redirects to a table built out on a GoogleDoc (second strike!) It was important for me to change this because the GoogleDoc version lacks professionalism and causes users to lose the primary navigation of the page, which can be confusing and frustrating— especially to novice users. Below are the lo-fi wireframes I sketched out for the “Events” section.
V1: List view of events above food truck schedule.
V2: Calendar view of events above food truck schedule.
New & improved
Events: now has both a list view and calendar view to appeal to a wider audience. In my user testing I did a preference test between the list and calendar view and there was about an equal number of users that preferred each view. So I included both!
Food trucks: the food truck calendar can be found in a 7 day weekly calendar carousel format at the bottom of both the list view and calendar view. This allows users to click through and view which vendors will be at the brew pub on the days they plan on going.
Chuck’s Shirt Shop
Merchandise Flow
The last section of the website I redesigned was the merchandise page. Their current merch page redirects to Shopify, again losing their primary navigation. They don’t have very much merchandise, so an outside page seemed unnecessary. In this flow, I included the option of picking your order up at the store as an alternative to the shipping option.
Prefer to click through the website yourself?
Take a deeper dive!
Go ahead, click away. https://invis.io/DKTEIG68CGN
Not pictured in the video above: the “visit us” page, “our story” page, and the entire merchandise flow.
Final prototype video
More than Beer
I had an opportunity to create an easy to use, well organized website for a local, community based, interesting business.
People come to Chuck’s for the multitude of beers and stay for the unique brew pub experience. I wanted to redesign the website to showcase their beer and the sense of community at Chuck’s Hop Shop.
I wanted to help a local business that fosters a sense of community and diversity flourish. I wanted to encourage current and future customers to interact with the company online by making a website that people are delighted by.