About My Project
Claremont Craft Ales is a family-owned craft beer brewery that offers fresh, high-quality, creative, and delicious craft beer in Claremont, CA. The cozy tap room of Claremont Craft Ales has always been one of the favorite spots for local beer enthusiasts.
Current State
Unfortunately, Claremont Craft Ales' website does not match the superb quality of its award-winning craft beers. The non-responsive display, outdated navigation bar, problematic graphic design, and improper social media plug-ins need to be improved.
The Current State of the Claremont Craft Ales Website (Nov 2020)
User Research and Persona Creation
The key to a successfully business website is knowing the users and catering to their needs. Therefore, one of the most important components of my work process in redesigning a website is to conduct user research and create personas for my client's potential customers.
Persona Hypotheses
Based on my preliminary research, I identified two user archetypes for the Claremont Craft Ales websites:
Beer connoisseurs: They consider craft beers as a hobby and a way of life. They frequent craft breweries but are not heavy-drinkers. Beer connoisseurs look for high-quality craft beers that suit their tastes and a like-minded community of beer lovers.
Experimenters: They enjoy drinking beer but are not very familiar with the makes and styles of craft beers. They like to explore different options while socializing with friends. Experimenters also seek recommendations and pairing ideas from the bartenders.
User Interviews
In order to test my persona hypotheses and better understand the needs of the users, I designed a survey questionnaire with six questions. I visited Claremont Craft Ales and conducted six interviews with their customers. The questions I used for my user interviews are listed below:
After carefully analyzing the notes from my user interviews, I was able to confirm my persona hypotheses and synthesize two personas: the beer connoisseur as the primary persona and the experimenter as the secondary persona.
Primary Persona: The Beer Connoisseur
Secondary Persona: The Experimenter
User Stories, Use Cases, and Feature List
Between the two personas I created for Claremont Craft Ales, customers that fit the primary persona make up over 50% of the brewery's customer base according to the owners. Therefore, it is crucial to conduct in-depth analysis on the beer connoisseur users. In doing so, I first identified four user stories, then came up with third common use cases, and created a feature list according to the needs and goals of the beer connoisseurs
User Stories
Use Cases
Feature List
Site Map
After creating the user stories, use cases, and feature list for the new Claremont Craft Ales website, I acquired sufficient information to work on the information architecture and created a site map with Sketch.
User Flows
Based on the information architecture I developed for the new Claremont Craft Ales website, I created three user flows with Sketch to illustrate some of the most important functions of this website based on the needs and goals of the users.
Wireframes
After finalizing the site map, I created both the desktop and mobile wireframes for the new Claremont Craft Ales website with Adobe XD. These black and white wireframes provide a general idea about the new website, giving both the designer and the client a chance to focus on the structure of the website without being distracted by the details in graphic design.
Desktop Wireframes
Below are the desktop wireframes of the top-level pages:
Desktop Wireframes of Top-level Pages
Responsive Wireframes
In order to cater to mobile users, it is important to make sure the new Claremont Craft Ales website is responsive. Since the screen size is much smaller on mobile devices, it is crucial to reorganize and prioritize elements in the responsive design. Below are selected responsive wireframes:
Selected Responsive Wireframes
Visual Design and Use Cases
After developing the wireframes for the new Claremont Craft Ales website, I moved on to the visual design component of my UI process with Adobe XD. When deciding the color palette of the new website, I kept the two main colors from the original website (orange and blue) since they match the interior design of Claremont Craft Ales' taproom. I slightly adjusted the orange and blue so they look more modern and less sharp. Moreover, I changed the text color to a dark shade of grey instead of the original black so the website is easier to read.
Color Palette of the New Claremont Craft Ales Website
I then used the new color palette and completed the visual design process. Below are several selected screens that are needed in two key use cases:
Use Case 1: Order Online
A user comes to the website and buys a beer:
A.The user comes to the website
B.And clicks on the “Shop Online” button
C.And browses craft beers
D.And clicks on the beers she is interested in
E.And enters the desired quantify and clicks on the “Add to cart” button
F.And clicks on the “Shopping Cart” icon when ready
G.And reviews order information before clicks on the “Checkout” button
H.And fills out shipping, billing, and payment information
I.And clicks on the “Place Order” button
J.And reviews order confirmation
Responsive Screens with Visual Design Used in Use Case 1
Use Case 2: Make A Private Event Inquiry
A use makes a private event inquiry:
A.The user comes to the website
B.And clicks on the hamburger button
C.And clicks on “Private Events”
D.And reviews the capacity and amenities of the venue
E.And fills out the Private Event Inquiry form
F.And clicks on the “Submit” button when ready
G.And reviews confirmation
Responsive Screens with Visual Design Used in Use Case 2
Prototype
After completing the user research, information architecture, wireframes, and visual design for the new Claremont Craft Ales website, I eventually had enough resources to create a prototype that can demonstrate the functionality of the new website with Adobe XD. Please click here to check out the prototype for the new Claremont Craft Ales responsive website.
Below is a screenshot of my prototyping process in Adobe XD:
Based on the two use cased I presented previously, I designed two scripts to showcase the prototype I developed.
Prototype Script 1: Order Online
Prototype Script 2: Make A Private Event Inquiry
Usability Testing
I conducted usability testing after I finalized the prototype for the new Claremont Craft Ales mobile website. In order to ensure this new website suit the needs of its users, I created a research plan and conducted usability testing with the help of five participants who drink craft beer at least once every three months. The usability test was conducted on UserZoom Go with its unmoderated testing feature.
Goals and Assumptions
The goal for a successful prototype is that an average user can complete the following five tasks independently without confusion.
Questions
In order to get valid and meaningful results from the usability test, I designed two sets of questions for the participants. The first set, the screener questions, was designed to filter out potential participants who do not match my personas or are not likely to use the new Claremont Craft Ales website. The second set, the establishing questions, was designed to gain more insight about users' general experiences about craft beer breweries.
Tasks and Follow-up Questions
To test if an average user can achieve the five goals mentioned previously, I designed five tasks to measure the usability of my prototype. I also asked follow-up questions after each task and one overall follow-up question at the end of the usability test to measure participants' general user experience.
Test Results
All five participants successfully passed all five tasks in my usability test on UserZoom Go, indicating a reasonable website design. Below is a table summarizing the results of my usability test:
In addition, I compiled a highlight reel video that includes snippets from the five tests. Please see below or click here to view to video.
Below are six findings I summarized from the usability tests:
As demonstrated by the testing results and the highlight reel, the prototype for the new Claremont Craft Ales mobile website is a success. The participants didn't report any significant issue or experience any confusion. Therefore, no major updates are required for the prototype other than several typos, carousel links, and some minor adjustments.
Finishing Thoughts
It is always amazing to witness the transformation of the "ugly duckling". I'm honored to have the opportunity to help a local small business redesign its website in this challenging time - small community-based craft breweries and local beer lovers have never needed a well-designed website for e-commerce more.
