Elysian Brewing Company: Website & E-Commerce Redesign

 

My role

UX Designer (end-to-end)

The client

Elysian Brewing Company

The project

Website and e-commerce redesign

banner-3.png

Project duration

2 Weeks

Primary persona

Lauren Berlinger
29 year old Script writer.

Scope

User interviews
Field study
Comparative analysis
Competitive analysis
Storyboard
Information architecture
Sitemap
Lo-Fi prototype
Usability testing
Hi-Fi prototype
Style guide

Tool

Pen & Paper
Whiteboard
Sticky notes
Sketch
InVision
iMovie
Card sorting
Affinity mapping
WebAIM Contrast Checker


I was tasked with redesigning the Elysian Brewing Company’s website and e-commerce experience. It was first important to validate the client provided persona through qualitative research and understand how the Elysian Brewing website can be expanded to better meet the target users needs.

The challenge

 

Through qualitative research, usability testing, and design iterations, I simplified and streamlined the Elysian Brewing Company website and designed a new e-commerce experience to order beer for pick-up.

The solution

 

Elysian Brewing Company is a Washington grown brewery that operates four locations in Seattle. Since it was founded in 1995, Elysian Brewing has grown and in 2015 it sold a 25% share to Anheuser-Busch. No longer able to meet the Brewers Association definition of craft brewery, Elysian has lost its standing as a Seattle craft brewery. This set Elysian up for nationwide distribution, but had a negative impact on its local standing.

Background


 

Primary persona

My client provided me with a primary persona, Lauren Berlinger. The first step in my research was to validate that Lauren is in-fact the primary user for their website based on their business goals.

 

Research methodology

Field study
I started my research with field study. Exploring the Elysian customers in the environment of the brewery. This method allowed me to understand the context of the environment and peek into the business behind the website itself. One of my goals was to investigate how the management perceives the business goals and the customers they serve.

User interviews
I conducted user interviews to explore the user experience at Elysian Brewing in Capitol Hill. I wanted to investigate their behaviors, habits, and reasons they use the Elysian Brewing website. This uncovered many interesting trends, such as the desire for ordering beer online for pick-up.

Usability testing
I conducted usability testing to first establish a baseline experience of the current Elysian Brewing site and e-commerce checkout. This allowed me to understand the users thoughts, feelings, and behaviors of the original site and establish pain points. Once I created a functioning prototype I continued with four rounds of usability testing to inform my design decisions.

 

Research overview

My first step was to validate the client provided persona through User Interviews. Explore how the business goals and pain points can be realized through a more intuitive checkout process. I measured my success in simplifying the user flow and meeting user needs through usability testing my design changes with customers.

My exploration began with the Elysian website and Yelp reviews. I wanted to get an idea of the brand and its role in Seattle brewing culture before I started my field research.

I started with an ethnographic bend to my research and I visited Elysian Brewing in Capitol Hill. I wanted to establish a sense of the business and get a chance to speak with the customers. My goal was to get to know more about the behaviors and history of individuals who work at the brewery and the customers who visit the locations.

 
 
Elysian Entrance copy.jpg
ElysianMenu.jpg
 

User interviews

 

After I finished my interview with the location manager, I asked if I could chat with some of the customers that were present that evening. She gave me permission as long as the customers said yes and felt comfortable.

“I am a Manager at the Capitol Hill location and have worked at Elysian Brewing for 16 years!”

— Site manager

I took my beer and walked up to them and introduced myself. I allowed the customers to guide the conversations and questions. Mostly, I asked five to ten questions, trying to focus around their background and general experience.

 
Meeting Manager2.png

During my time talking with the manager at Elysian it became evident that the Brewery had a lot of goals it wanted to achieve, which would inform my redesign choices. It was clear that although the brewery is making a lot of money on a national level, it took a serious hit in the craft beer culture of Seattle.

  • Elysian has produced up to 663 beers since it opened in 1996.

Elysian produces at about one new beer weekly and they have new goals for reinvigorating their brand amongst Seattleites.

 

Business objectives

 

These are four of the top business objectives that Elysian Brewing wants to achieve.

Regain trust

  • The business objective is to attract the local Seattle crowd and regain their trust as a craft brewery.

Thinking local

  • Convince Seattleites that Elysian Brewing is still thinking local even when though they have gone national.

Seasonal and experimental beers

  • Focus on seasonal and experimental beers.

 

Up-to-date website

  • Keep its website up-to-date to minimize confusion and disappointment.

 

Participants

I conducted five user interviews with individuals who were spending their evening at Elysian. I wanted to know what they enjoy about breweries and what it is about Elysian that brings them there.

Participants
A total of 16 users participated in interviews and usability test sessions. I utilized one Elysian manager, five customers, and 11 beer enthusiasts.

Persona development
The user interviews validated Lauren Berlinger as the primary persona. However, it was clear that it would be very valuable to develop at least one more persona. This would allow Elysian to better align its vision with families that visit the brewery for social time and event veterans who use the website to learn about Elysian’s community events or buy swag. It would be very valuable to tap into this previously established user base and anchor the beer for pick-up to already established user habits.

 

To better understand and synthesize my research I created an affinity map from the five customer interviews. Affinity mapping helped validate that the client provided persona, Lauren Berlinger lines-up with the business goals and objectives.

Affinity mapping

 
 
Affinity mapping.jpg
 
 

The main points from user interviews:

 
  • “I like to go to breweries to try new selections”

  • “I go for the special beers”

  • “I need it to be convenient”

  • “I need to look for events”

  • “I need it to be timely and want updates”

  • I don’t know where to learn about it”

  • “I need to have beer to go”

  • “I have to trust the brand to order online”

 

“I want online order options so I don’t miss out on new brews!”

— Interview participant

 

Problem statement

Lauren needs a way to reserve and buy Elysian Brewing’s exclusive craft beers online because otherwise she will miss out on their unique weekly batches.

 

Solution statement

I designed an online system to order for pick-up experimental, seasonal, and specialty beers which assures Lauren won’t miss out on exclusive opportunities.

 

We believe that by creating an online system to order for pick-up weekly, seasonal and specialty beers for Lauren we will give her the opportunity to try our new brews on her own schedule without having to fear she will miss them. We will know this to be true when the checkout metrics of our seasonal, specialty and weekly brews registers increase in sales.

Hypothesis

 

I created a scenario to demonstrate Lauren’s emotional arch in learning about and using the Elysian brewing online order for pick-up so she never misses an exclusive beer.

Storyboard

Click on the image to enlarge.

 

Competitive
analysis

To explore the main competitors of Elysian Brewing I wanted to look both locally and nationally. This was important because there were very few craft breweries in Seattle that had national distribution. So, I decided to look outside of Washington. One of Elysian’s main competitors is Ninkasi Brewing Company from Eugene, Oregon. They also have national distribution and have continued to operate with a craft brewing agenda.

Landing pages comparison.Click on the image to enlarge.

 
 

Competitive analysis for brewing companies.

 

As Elysian wants to reestablish its name as a craft brewery in Seattle, I wanted to also examine the other brewing competition that would share customers. Seattle has a large craft brewing culture, so I selected larger breweries that were popular to both tourists and locals and had been mentioned in the news or mentioned by local bloggers.

Click on the image to enlarge.

 

I chose Whole Foods, Starbucks, and Sweet Greens, because they are companies that have already implemented an e-commerce model that allowed for customers to order online for pickup. Lauren would most likely also use or shop at these businesses.

Comparative analysis

 

Click on the image to enlarge.

 

Establishing a baseline

I first wanted to see where the strengths and weaknesses were in the current website construction. I enlisted five users to perform five tasks on the original website and had them think out loud as they completed them.

 

“I get lost and can’t find my way through the checkout!”

— Interview participant

Elysian Brewing item page. Click on the image to enlarge.

  • Task 1 - Find a piece of clothing that you like and purchase it.

  • Task 2 - Where would you expect to find information on Beer to GO?

  • Task 3 - Can you show me where to find the business timeline?

  • Task 4 - How would you find a contact haze in a store near you?

  • Task 5 - Tell me where you would expect to find information about their hours?

Once users started the process of selecting an item for purchase, they felt the product page was unresponsive, and once they opened the cart they were overwhelmed by the form fields. Four out of five users asked for help and only one user actually made it through the check-out process.

 

Information architecture

After establishing the baseline, I referenced the competitors websites and comparative businesses to help establish the global navigation title language I might want to use.

 

To understand and validate if the navigation language I chose was clear and intuitive to users I conducted open and closed card sorting.

Open
I had five users perform open card sorts to explore their mental models.
Once I felt I had synthesized this data and came up with my top navigation I repeated the process with closed card sorting.

Closed
After establishing the global navigation language, I had five new users sort the content within the categories.

Card sorting

 
Open card sort

Open card sort

 

I created a user flow to best understand the decision path Lauren would take while ordering her beer for pick-up. This was created to help build out the navigation and establish where I should focus.

User flow diagram

 
 

New sitemap

I first sketched out the sitemap of the original website to best understand how it was laid out and the logic behind its construction. There are a lot of good things about the website that I want to include in the redesign.

I created a new sitemap to which addressed some of the design issues faced by users in during the baseline testing.

 

Click on the image to enlarge.

 

I first sketched out possibilities of what the new pages might look like, incorporating elements from the original website that I felt were strong. This included using Lauren’s pain points and preferences to inform the new direction. Working quickly I was able to find which designs didn’t work. This established the basic layouts I wanted for the different page types in the website. After working out the kinks I jumped straight into lo-fi wireframing in Sketch.

Sketches and wireframes

 
7.png
User testing001.jpg
User testing 04.jpg
 

After finishing my first set of wireframes for the website and e-commerce I uploaded them into InVision. This allowed me to link the pages and create a clickable prototype.

I set my baseline early on in the project which also assisted in the creation of the next set of task scenarios I would ask users to accomplish. This task was very specific due to the limitations in the prototype. It was restrictive to have such a specific task as it limited the user's natural flow and decision path.

The first prototype, I had five users complete five tasks and took notes and audio recorded their comments and thoughts. Then I asked follow-up questions after they completed them.

Task scenarios and usability testing

 
 
 

Iteration one findings

 

I made a lot of changes after my first round of user testing. I selected five more users and had them perform the same task scenarios. It was important to simplify the task wording, which yielded much more valuable information about the users needs, pain points, and expectations.

Five users results
Three out of the five users found the checkout fairly easy and intuitive, but there were several noted hang-ups. They didn’t know they needed to add the date and time while checking out, because the boxes were not located in an intuitive location. Users also commented that they would prefer a guest checkout option.

 

Iteration two findings

 

Five users results
Four out of five users found the checkout easy and intuitive, but there were several minor hang-ups. The users didn’t know if their item had been added to the cart and felt that they didn’t expect to be brought directly to the cart page.

 
Usability testing5.png
 

Iteration three findings

Six users results
Five out of the six users found: The checkout remained easy and intuitive, but there were several elements to note and change. The users appreciated the color/value change on the add to cart button. Wanted more information on the confirmation page. They said they might have forgotten where they were going to pick up their beer and not remember the time. They also mentioned that they needed billing info for their card.

 
Original website test 02.jpg
 

Iteration four findings

Five users results
Three out of five of the users mentioned that they really wanted guest checkout options. This was a common declaration throughout the iterations. They said they would rather use the guest checkout and not have their info saved. I made these changes and added an email section on checkout.

 

Wireframes and design changes

Purchase Confirmation page
1) I changed the text, added the address and time of pick-up as well as an edit order button.

Shopping Cart page
For the shopping cart page I made four major changes.
1) Moved the date and time panel to beneath the item.
2) I added an ‘proceed to checkout’ button and ‘continue shopping’ button beneath the additional comment section.
3) I made sure to add the number of items in the cart.
4) I fixed the price in the subtotal.

Checkout page (if customer is logged in)
On the checkout page I made a lot of helpful changes due to user struggles and comments.
1) Removed main navigation.
2) Enlarged and added time and location.
3) Removed quantity edit options.
4) Added an edit quantity button below.
5) Added save address for later
6) Added billing address section

Log-In and Sign-up page 1) Added a close X in the right corner to allow users to close the overlay. 2) Created a Guest checkout option. 3) Added 21 or older confirmation.  4) Added sign in under button.

Log-In and Sign-up page
1) Added a close X in the right corner to allow users to close the overlay.
2) Created a Guest checkout option.
3) Added 21 or older confirmation.
4) Added sign in under button.

Guest Checkout page
When I added guest checkout I needed to add a way for users to receive an email confirmation.
1) Added email on guest checkout page

Product page
1) Created a visual cue on add to cart button and stay on product page allowing customers to stay on product page after adding to the cart.
2) Added a continue shopping link so customers can return to beer page to continue browsing.

 

Style guide

 

Prototype

 

(Left) Home page. (Right) Our beers page. Click on the image to enlarge.

 

(Left) Product page. (Right) Review order page. Click on the image to enlarge.

 

Next steps

Recommendations

  1. Adding a customer review section for each of the beer pages will add trust and confidence in the quality of the brew.

  2. Design and add an ordered history page where users can keep track of their beer purchased.

  3. Add a calendar sync option for time and date of pick-up, so users can easily schedule their beer pick-up into their day.

  4. Conduct two more rounds of usability testing with the high fidelity prototype and then build the website out and release it out into the wild where its success can be tracked through analytics.

 

Reflections

Task creation
It was not very helpful to have such specific tasks when setting a baseline user experience. It limited the user's natural flow and decision path, which skewed the research findings. It is important to have a prototype that can accommodate more of the unexpected user choices.

Surveys and broadening the research
It would have been very valuable to start this project with a survey to cast a wider net around the Seattle area and explore more of the user behaviors and pain points. This would allow for a clearer validation of the client provided persona and allow for the project to be expanded and include more of the intended user base.

The importance of metrics
Although this project included a solid base of qualitative research it did not include System Usability Scale metrics, which removed an important part of measuring whether the design changes are in fact increasing ease of use. Moving forward, I would start by having five users complete task scenarios and each fill out the SUS form to establish an average baseline metric with the prototype. From there, each iteration would include quantitative data points.

 

Thank you!

 

City of Seattle
IT Service Hub redesign

UX Researcher

King County Library
Native app redesign

UX Researcher