deadly garden
a high-conversion eCommerce experience for a local craft brewery.
00
.problem
The majority of craft beer aficionados are restricted by their geographical reach for local tap rooms, creating a substantial niche in the craft beer market. As a key priority for the brand’s growth in 2021, the project’s purpose was to allow users to access and buy small-batch artisanal beers through a premium eCommerce site when they couldn’t access the physical brewery.
.solution
In order to bridge this geographical divide, I designed a unique eCommerce experience that brings the taproom to the consumer’s screen. Through the use of a high-end, engaging UI and a simple front-end shopping experience, we were able to take their online presence and make it an extension of their physical brewery. We made it easy for customers to access their small-batch releases, just like ordering a beer at the bar.
A complex taproom conversion to a simple high conversion online storefront is not an everyday task. This is a fast-paced project with strict regulatory requirements and internal stakeholder inputs. The scaling of an artisanal brewery through a national eCommerce platform is subject to similar regulatory and logistical constraints.
.year
2020
.timeframe
90 days
.tools
Shopify Figma UserTesting
.category
E2E Product Design
.constraints
Regulatory Compliance: Working through the complex web of state-by-state shipping regulations and required age verification pop-ups without disrupting the checkout flow.
Brand vs Utility: Ensuring the "dark botanical" experience stayed immersive while maintaining AA accessibility and fast performance.
Logistical Integration: Integrating real-time inventory between the physical taproom and the national digital storefront to avoid overselling the limited-edition product.
Aggressive Timeline: Moving from strategic discovery through fully functional and scalable eCommerce launch in a very tight four-month window to take advantage of the market's growth cycle.
.pain points
Checkout Friction: 62% reported being interrupted by the need for age gate requirements and leaving the site before reaching the product catalog.
Poor Mobile Experience: Taproom regulars described the brewery websites as clunky on mobile devices and said it was a hassle to check the taplist or order a four-pack.
Lack of Trust: Survey results highlighted the lack of trust in the handling and safety of the glassware for the fragile glass shipments.
Discovery Overload: Users were having difficulty discovering beers based on complex artisanal flavor profiles and were limited to traditional ABV and style descriptions.
.discover
translating the taproom to eCommerce.
Deadly Garden, a craft brewery located in Colfax, Colorado, prides itself on its dark, captivating ambiance. To translate this into an online platform, we needed to do more than just choose a template; we needed to balance a captivating brand with the legal and security requirements of selling alcohol online.
core goals
Analyze Compliance Friction
Evaluate Mobile Usability
Assess Shipping Trust
Understand Discovery Behavior
our audience
40 Survey Participants + 10 User Interviews: We targeted existing craft beer enthusiasts and local Colfax patrons to understand their online purchasing habits and their tolerance for compliance checkpoints.
consolidating data into actionable insights.
There is a regulatory challenge in selling alcohol online. We have distilled the feedback from the 50 participants to help us overcome the challenges without negatively impacting the UX.
primary findings.
Age Gate Bounce: 62% of the participants reported that the mandatory age gate was frustrating and caused them to leave the site before browsing the site.
Discovery Overload: Participants complained about the technical jargon and conventional approach to the site. However, they wanted to shop based on sensory/flavor experiences.
Fragile Trust Deficit: Participants want visual representations and tracking for the glassware to feel secure about purchasing limited editions online.
Mobile Taproom Disconnect: Taproom enthusiasts feel that checking the lists or four-packs on the mobile site is not premium.
.define
structuring the dark aesthetic.
To achieve this, we created a bespoke Shopify solution from scratch. We went beyond the usual templates and crafted a highly personalized and high-fidelity visual experience using Shopify’s section-based content management system.
bringing the data to life.
We identified three primary personas to address the various ways in which the end user would interact with the brand. This includes rare bottle releases and aesthetic-based purchases.
mapping the digital journey.
We were given a four-month launch window and set out to map the customer journey from arrival to confirmation. We identified the digital touchpoints that would need to be re-engineered for compliance:
Arrival: Ensure the ‘Garden Gate’ age verification process is as seamless and branded as possible.
Browsing: Design a bespoke and sensory-based filtering system to alleviate the discovery overload and move away from jargon-based product discovery.
Checkout: Provide clear visual shipping reassurance for the fragilities and real-time inventory syncing to prevent overselling.
defining the mvp.
We worked hard to ensure the right balance between strong brand identity and useful eCommerce functionality. We identified the following as the MVP:
A Frictionless "Garden Gate" age-verification flow.
Sensory-based product filtering architecture.
High-performance and mobile-first tap-list layout for fast browsing by the taproom regulars.
.develop
engineering the custom architecture.
With guardrails in place, we then entered the structural design phase: a robust base to prevent UI chaos and a seamless information architecture that would handle compliance and prep the client’s Shopify environment.
rapid iteration + crazy eights.
Our number one abandonment risk was age verification. Crazy Eights helped us develop non-intrusive entry strategies in record time… eight ideas in eight minutes. We ditched the generic pop-up idea and landed on a full-screen entry experience that fully immerses the user in the taproom aesthetic before product view.
information architecture for shopify.
All of this was informed by Shopify’s section-based CMS. We designed a product detail architecture and a unified checkout architecture, keeping the custom interface simple and user-friendly for the internal team to manage post-launch.
lo-fi wireframing.
Before the dark aesthetic, we validated the structural skeleton through lo-fi wireframing—prioritizing hierarchy, content placement, and mobile functionality. This allowed the new filtering system and checkout architecture to function seamlessly without the distraction of high-fidelity elements.
usability testing + iteration.
The dark botanical imagery posed a legibility risk. We tested mid-fidelity prototypes with users to identify breaking points and rigorously test compliance architectures.
.ideation
Initially, wireframes were developed with a standard image carousel for seasonal releases, but user testing found that users were scrolling through these images too quickly. The solution was to create a unique and informative "Featured Brews" section on the homepage for users to educate themselves on limited releases without having to click away.
.ideation
Product pages were initially developed with a standard dropdown for variations, which caused hidden clicks and friction for users. To combat buyer fatigue, we removed this dropdown and made the three most common formats prominent, one-tap buttons for faster buying.
.deliver
high-lore brand identity meets high-utility.
With the structure in place, we moved on to high-fidelity visuals. Problem: how to maintain the immersive dark botanical look without compromising AA accessibility, fast loading, and secure eCommerce requirements.
custom shopify architecture.
To reflect Deadly Garden’s personality, we built a custom Shopify solution from scratch, outside of the box of standard Shopify templates. Goal: create a high-fidelity visual experience with Shopify’s section-based CMS, providing a premium experience for users and an easy drag-and-drop system for the brewery team to make updates without developers.
The Core Experience
Our wireframes were now interactive screens, and we fixed pain points based on observations from the venues:
Re-engineered compliance to eliminate distractions. Success: a secure and fully compliant eCommerce site with a seamless branded age verification process.
Added custom filtering to explore limited releases based on flavor profiles instead of confusing terminology.
final outcome
The last custom Shopify build took a moody tap room and turned it into a secure digital storefront by transforming strict regulatory requirements into immersive brand touchpoints, which results in removing friction from checkout, enabling the internal team, and driving online revenue.
.impact
The Deadly Garden project struck a balance between High Lore brand identity and High Utility eCommerce. Through understanding user frustration and overcoming regulatory thorns, we created a sustainable digital future for a one-of-a-kind artisanal voice.
Conversion Optimization: Reduced checkout abandonment rate by 32% through seamless and streamlined age verification.
Revenue Optimization: The new digital storefront resulted in a 145% revenue growth year over year.
Operational Efficiency: Shopify integration reduced inventory-related errors by 90%, allowing for a single source of truth in physical and digital sales.
Client Empowerment: Provided a fully custom platform where the internal brewery team can manage it without dependence on developers.
