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
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
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
Key Insight: 61% of beer drinkers never purchase alcoholic beverages online, while 17% said rarely.
Only 17% of beer drinkers purchase online often.
Uncover users’ habits when shopping for beer
Why don’t beer drinkers tend to buy beer online?
Understand users’ frustrations and motivations when online shopping
How do you typically purchase beer?
What factors do you consider when choosing a beer?
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
Purchasing & Drinking Habits
Beer Selection Factors
Online Shopping Gains
Online Shopping Pains
Incentives to Buy Beer Online
TO BUY BEER ONLINE
Beverage of choice for social drinking
Fast, reliable delivery
Discounts & promotions
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.
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.
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
USER JOURNEY MAP
User Goal: To sign up for a Beer Club membership and use the Party Starter promotion for a large order of beer.
LOW FIDELITY PROTOTYPE
USABILITY TEST INSIGHTS
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
Reduce size of "Keep Shopping" CTA in cart overlay
Upgrade fidelity of "Terms and Conditions" button, and product cards on Cases page
HIGH FIDELITY PROTOTYPE
USABILITY TEST INSIGHTS
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
Add Shop Pay, Apple Pay and Google Pay buttons to the Checkout page
Add an animation that indicates an item was added to the Cart
HIGH FIDELITY PROTOTYPE WALKTHROUGH
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
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!