Bar Chef Cocktail Kits
A cocktail subscription kit service
Role
Lead UX/UI Designer, working in collaboration with a UX Researcher and the company’s main stakeholder.
I was responsible for the scope and strategy of the project, portions of the research, designing the information architecture, writing the website copy, and building the wireframes and high-fidelity prototype.
Timeframe
4 weeks
Tools Used
Figma, Adobe Illustrator, Adobe Photoshop, Google Workspace
Problem and Overview
Bar Chef Cocktail Kits is a startup that offers a monthly cocktail kit subscription service, which is then supplemented with live virtual mixology classes (called “Virtual Happy Hour”) hosted by professional bartenders.
Bar Chef was looking to improve their conversion and bounce rates, and needed help to identify issues on their website and design a solution to improve their performance.
Goals
Identify pain points on the existing Bar Chef Cocktail Kits website.
Understand why the bounce rates were high and the conversion rates were low.
Design solutions to solve usability problems and increase conversions.
Process
Assessing the Existing Product
We began by conducting user tests of the existing Bar Chef website in order to gauge user reaction and comprehension of the products & services. We interviewed three (3) people who fit the target demographic provided by the client (aged 25-50, tech-savvy, consumes alcohol, enjoys entertaining).
User Feedback
Users struggled to use the website and were unable to relay either how the service works or the contents of the kits.
The information presented on both the homepage and product pages was overwhelming and poorly organized.
The website looked generic, disjointed, and visually uninteresting.
Users did not comprehend the purpose of the Virtual Happy Hour sessions:
“I only understand that it happens monthly and something related to cocktails is involved, but I’m not sure what.”
Competitor Analysis
We also conducted an analysis of Bar Chef’s competitors to see how they have navigated the monthly subscription kit business model. The analysis consisted of looking for common patterns shared between these sites (American Cocktail Club, Cocktail Courier, Saloon Box, Shaker & Spoon), as well as any other methods or features that appeared to create interest in their respective services. Some of the most notable findings were as follows:
All of these sites employed a similar information architecture for their navigation menu:
The “Subscribe” page is accessible from the top level of the menu.
The contents of the kits are conveyed on a dedicated “What’s Inside” page.
“Learn” / “How It Works” focuses on explaining how the subscription service works.
The “Subscribe” pages were minimal and focused on displaying different subscription options/tiers and getting customers to add a kit to the shopping cart:
Nearly every competitor website provided previews of past boxes. This showed visitors what they can expect from a subscription box and instilled a sense of scarcity since each kit was only available for a limited time.
Minimum Viable Product
After conducting research and becoming knowledgeable about Bar Chef’s website issues, we determined that our Minimum Viable Product (MVP) would have to be a website that could properly explain the company’s products and services in a way that held people’s interest.
Design
Rebuilding the Information Architecture
We quickly zeroed in on the need to restructure the information architecture to make the client's products and services easier to grasp. After observing certain patterns employed repeatedly amongst Bar Chef’s competitors, we modified the main navigation menu as follows:
Old Navigation Menu:
New Navigation Menu:
The biggest change was to partition the abundance of information found on the existing subscription kit product page (located under “Subscription Kit”) into separate pages that would be concise and help make the information easier to both access and understand. The monthly subscription kit was brought to the forefront of the menu via a dedicated “Subscribe” page, while one-off items, including gift cards, were contained in the “Shop” page.
We also renamed the “Virtual Happy Hour Events” feature to “Cocktail Classes”. The instructional aspect of the meetings was lost on users, who assumed that they were simply social events, and so adding the word ‘classes’ emphasized their educational value.
Low-Fidelity Prototype
I personally created simple grayscale wireframes and later prototype based on our revised information architecture. The homepage was also overhauled to remove redundant elements (e.g., multiple hero graphic banners and testimonials) and replaced with streamlined explanations of how both the subscription service and online mixology classes work.
Wireframes
(Click image to view wireframes in Figma.)
Homepage Breakdown
Added a subscription kit service CTA to the navigation menu in order to draw attention to the business’ primary offering.
Added new information pages to the navigation menu (“How It Works”, “What’s Inside”, and “Past Boxes”).
Created a concise yet engaging “How It Works” section complete with infographics.
Created a “Virtual Cocktail Classes” teaser to highlight one of the company’s key competitive advantages.
Usability Testing
To test this new website design we interviewed a set of three (3) new participants. Users were now able to comprehend the general concept of the subscription service from just the homepage, though there were still some minor changes to be made based on feedback:
Issues:
The Cocktail Classes were a big selling point for the subscription service and yet felt buried within the “How It Works” page.
Users felt that a dedicated “Past Boxes” page was unnecessary, and instead expected it to be grouped with “What’s Inside”.
Solutions:
Added a dedicated “Cocktail Classes” link to the navigation menu.
Merged “What’s Inside” and “Past Boxes” into one page.
High-Fidelity Prototype
In addition to the aforementioned solutions that we had arrived upon through research and user testing, we also sought to create an aesthetic that was fun and inviting to create user interest in the products and services. More specifically, we leaned into visuals that evoked the feel of a “lifestyle” brand by introducing playful infographics, a bright accent color, and a typeface that felt friendly and fresh.
Screens from the high-fidelity prototype.
Second Round of Usability Testing
For this last round of testing, we spoke to five (5) new participants. These testing sessions resulted in very few issues to resolve, as users had a clear understanding of what the website was for and could navigate it with ease. In addition, 80% of the participants expressed interest in the product and were eager to navigate past the homepage to learn more, especially when it came to the Cocktail Classes; this was seen as an exciting feature not offered by other comparable companies.
“I think the homepage is a very informative overview of what I want to know right off the bat, not knowing anything about the service to start with.”
Issues:
The frequency of the subscription boxes was unclear.
Users were caught off-guard to learn that alcohol was not included in the kits.
Solutions:
Put more emphasis on “monthly” on the “Subscribe” page.
Moved up the relevant “No Alcohol” verbiage/links in the page hierarchy.
Original Website
Final Design
Conclusion
The final designs solved the usability issues regarding incomprehension and blandness, as users came away with a clear understanding of the website’s purpose and were excited about the offered products and services. In addition, the conversion and bounce rates improved greatly during usability testing.
This project was a welcome challenge in that it involved two interconnected services (the subscription kits and the virtual cocktail classes) that could be considered convoluted, and so it required strong analytical thinking to ensure that they were presented in such a way that would drive up user interest and conversions. It all ultimately paid off, as the client was very much impressed with both the deliverables and the thoughtful, logic-based approach used to address the problems.
Were I to continue on with this project, I would like to expand upon the Cocktail Classes page because it was such a draw for our users, either through the use of customer reviews, more video previews, or even a dedicated landing page for private events.