BURDOCK BREWERY
PROJECT TYPE: Website Redesign
ROLE: UX/UI Designer
TOOLS: Figma, Figjam, MIro
Quality craft beer, big savings & fast delivery– Burdock Brewery brings deliciousness to your doorstep
Project Vision
The Challenge
The Solution
Budock Brewery is a small business in Toronto, Canada. We wanted to redesign their website to be able to attract more of their customers or prespevtive customers to shop online throught their website.
We observed that convenience is the key motivator behind beer drinkers’ shopping habits, and that the unpredictability and delays of online shopping drive potential customers to seek more convenient shopping at widely-accessible stores like LCBO.
We set out to motivate users by offering promotions that improve the overall convenience of their online beer shopping experience. We used our hero space to promote an offer for 20% off and same day delivery on any orders of large cases.
CURRENT WEBSITE DESIGN
OUR WEBSITE REDESIGN
Impact
Current
Redesign
Search bar is hidden in sidebar navigation under “Menu”
User does not know if they are logged in/out
Search bar is visible and easy for users to locate
Information architecture is intuitive; minimistic navigation
Information architecture is not intuitive; confusing navigation
Major headings are not easily legible due to animated banners
User will know after signing in if they are logged in/out
Beer club sign up mentioned in Hero image
Promotion written with eye catching typography mentioned in Hero image
User Test Insights
Average time spent (3 Users)
Finding the search bar: 45 seconds
Finding the promo: 10 seconds
Find Navigation: 15 seconds
Finding the search bar: 5 seconds
Finding the promo: 3 seconds
Find Navigation: 5 seconds
User Research
RESEARCH SURVEY
PROTO PERSONA
Key Insight: 61% of beer drinkers never purchase alcoholic beverages online, while 17% said rarely.
Only 17% of beer drinkers purchase online often.
Research Plan
OBJECTIVE 1
Uncover users’ habits when shopping for beer
RESEARCH QUESTION
Why don’t beer drinkers tend to buy beer online?
OBJECTIVE 2
Understand users’ frustrations and motivations when online shopping
INTERVIEW QUESTIONS
-
How do you typically purchase beer?
-
What factors do you consider when choosing a beer?
INTERVIEW QUESTIONS
-
What do you like about online shopping?
-
Can you tell me about a negative experience you’ve had online shopping?
-
What would motivate you to buy beer online?
Research Interview Insights
Affinity Diagram
Insight Categories
-
Purchasing & Drinking Habits
-
Beer Selection Factors
-
Online Shopping Gains
-
Online Shopping Pains
-
Incentives to Buy Beer Online
Key Trends
PURCHASING &
DRINKING HABITS
ONLINE
SHOPPING GAINS
INCENTIVES
TO BUY BEER ONLINE
ONLINE
SHOPPING PAINS
-
Beverage of choice for social drinking
-
Fast, reliable delivery
-
Discounts & promotions
-
Convenience
-
Delivery
-
Unpredictability
-
Shipping Difficulties
USER INSIGHT STATEMENT
​User needs and key insight: Priya Priston, a socially active young professional needs incentives such as fast delivery, discounts and quality customer service to make online shopping for beer to be more convenient– because the accessibility of buying beer in-person at LCBO makes online shopping feel inconvenient.
UX HYPOTHESIS
Our conclusion: We believe that featuring more incentives for social beer drinkers (such as same-day delivery, and discounts for bulk orders and Beer Club members) will encourage users to consider buying beer online as a convenient alternative to buying in-store.
VALUE PROPOSITION
The Burdock Brewery website sells craft beers and offers a free membership to help social beer drinkers like Priya solve the unpredictability and shipping difficulties of online shopping.
​
We're better because we offer 20%-off discounts and same-day delivery for maximum convenience.
We’re believable because we're devoted to quality customer support; users are assured that our delivery is fast and reliable thanks to our live delivery tracker and SMS text updates
STORYBOARD
USER JOURNEY MAP
CARD SORTING
Define
Group
Stucture
SITEMAP
User Goal: To sign up for a Beer Club membership and use the Party Starter promotion for a large order of beer.
TASK FLOW
USER FLOW
LOW FIDELITY PROTOTYPE
USABILITY TEST INSIGHTS
ITERATIONS
FREQUENCY SYNTHESIZATION
Must-Have:
-
Remove second page for Beer Club sign-up; place sign-up form on the main Beer Club page
-
Add a confirmation message once order is placed; include order summary and tracking info
-
Add phone number to sign-up form for tracking purposes
-
Add cart overlay that appears when an item is added
Should-Have:
-
Reduce size of "Keep Shopping" CTA in cart overlay
Could-Have:
-
Upgrade fidelity of "Terms and Conditions" button, and product cards on Cases page
HIGH FIDELITY PROTOTYPE
VERSION 1
USABILITY TEST INSIGHTS
FREQUENCY SYNTHESIZATION
ITERATIONS
Must-Have:
-
Improve readability:
-
Product cards- enlarge the font for product titles, descriptions and prices
-
Hero space- raise the opacity of the coloured boxes; replace yellow buttons with blue buttons
-
Cart- increase line height for body text
-
Balance the header buttons by moving the search bar to the left side of the header, and minimize padding on the Log In/Cart buttons
-
Reduce the dark blue on the Checkout page by changing the fill on the Cart column to white
Should-Have:
-
Add Shop Pay, Apple Pay and Google Pay buttons to the Checkout page
Could-Have:
-
Add an animation that indicates an item was added to the Cart
HIGH FIDELITY PROTOTYPE WALKTHROUGH
VERSION 2
STYLE GUIDE
FINAL THOUGHTS
-
Survey should be short and concise to have a higher completion rate and overall better data quality
-
The task and user flows are central to the later stages of the design process
NEXT STEPS
-
Conducting A/B testing to re-examine discarded and alternate ideas
-
Adding an animation that indicates an item was added to the Cart
-
Interview someone from the Burdock Brewery team for more insight
Be sure to checkout the process for Burdock Brewery Redesign below!