Deadly Garden

UX Case Study

BACKGROUND

The online alcohol market is experiencing significant growth, projected to reach $41.74 billion by 2027, growing at a CAGR of 9.4% from 2022 to 2027. Craft breweries, like Deadly Garden, are increasingly seeking to leverage e-commerce to expand their reach beyond their physical locations. However, this presents unique challenges.

ROLE

YEAR

TOOLS

User Research

Visual Design

Prototype

Graphic Design

2022

Figma

Shopify

Illustrator/Photoshop

PROBLEM

Despite the growing popularity of buying alcohol online, many craft breweries face challenges in:

  1. Maintaining Legal & Regulatory Compliance: Navigating complex and ever-changing regulations related to alcohol sales, including age verification, shipping restrictions, and marketing guidelines.

  2. Ensuring Responsible Consumption: Effectively communicating responsible drinking messages and promoting a culture of moderation.

  3. Creating a Differentiated Online Experience: Standing out in a crowded market with numerous competitors offering similar products and services

GOALS

Deadly Garden is looking to address these challenges and elevate the online craft brewery shopping experience by:

  1. Build a Secure and Compliant E-commerce Platform: Develop a robust platform that adheres to all relevant regulations, including secure age verification, compliant shipping options, and responsible marketing practices.

  2. Create a Captivating Brand Experience: Design a visually stunning and immersive website that reflects Deadly Garden's dark and alluring brand identity, showcasing their unique story and product offerings in a captivating way.

  3. Enhance Customer Engagement: Foster a strong connection with customers through personalized experiences, exclusive online offers, and engaging content that highlights the brand's unique story and the craft of brewing.

  4. Drive Sales and Growth: Optimize the website for conversions, streamline the checkout process, and leverage data analytics to identify areas for improvement and drive business growth.

EMPATHIZE

Exploring User’s Pain Points

RESEARCH APPROACH

To understand user needs and preferences, we conducted user research with a sample size of 23 participants. This included a combination of usability testing and user interviews. Participants were selected to represent Deadly Garden's target audience: urban professionals aged 25-45 with an interest in craft beverages.

For usability testing, participants were asked to navigate through the websites of several craft breweries, online liquor stores, and other businesses with a similar aesthetic, such as independent coffee roasters and artisanal food retailers. This provided valuable insights into user expectations and pain points within the online retail space.

WHAT WE FOUND

Our research revealed several recurring themes:

FRUSTRATION WITH AGE VERIFICATION

Participants frequently encountered difficulties with age verification processes, such as multi-step identity checks or the requirement to upload government-issued IDs. These cumbersome and sometimes intrusive methods often led to frustration and abandonment of the purchase journey.

LACK OF TRANSPARENCY & TRUST

Many participants expressed concerns about the security of online alcohol purchases, particularly regarding data privacy and the potential for fraudulent activity. The lack of clear information about shipping costs, delivery timelines, and return policies further eroded trust.

DIFFICULTY DISCOVERING PRODUCTS

Participants struggled to find specific products based on their preferences, such as flavor profiles, ingredients, or occasion. Many websites lacked robust search and filtering capabilities, making it difficult to narrow down options and find the desired products.

LIMITED BRAND STORYTELLING

Many websites lacked compelling brand stories and engaging content, failing to capture the attention and imagination of potential customers. These websites often felt generic and lacked personality, making it difficult to connect with the brand on an emotional level.

POOR MOBILE EXPERIENCE

Several websites were not optimized for mobile devices, resulting in poor navigation, slow loading times, and frustrating user experiences. Participants reported difficulty reading product descriptions, navigating menus, and completing purchases on their smartphones.

DEFINE

Establishing the User’s Needs

DEVELOPING A PERSONA

From our research, we noticed some patterns among our participants. They were interested in exploring new and unique beverages, appreciating high-quality craftmanship, and seeking sophisticated drinking experiences. However, they were often frustrated by cumbersome age verification processes, concerns about data privacy and security, difficulty discovering specific products, a lack of engaging brand storytelling, and the need for a seamless mobile experience.

Based on these insights, we created a persona: Julian, Craft Beverage Enthusiast

Julian Reyes

Craft Beverage Enthusiast

DEMOGRAPHICS

AGE: 26 - 35

LOCATION: Denver, CO

EDUCATION: Bachelor’s Degree

JOB: Marketing Manager

FAMILY: Married w/ No Children

Julian, a 32-year-old marketing manager living in Denver, is a true craft beverage enthusiast. He frequents local breweries and cocktail bars, savoring the atmosphere, engaging with bartenders, and discovering new and exciting offerings. He appreciates the artistry and craftsmanship behind each beverage, from the carefully selected ingredients to the meticulous brewing or mixing process.

Julian, like most millennials, enjoys the convenience of online shopping and ordering. He enjoys the ability to easily explore the menus of different breweries and order his favorites for delivery or pickup. He appreciates the ease of mobile ordering, allowing him to place orders while on the go and have his preferred beverages ready when he arrives at the brewery.

However, Julian often finds that the online experiences of many breweries fall short of his expectations. Websites can be difficult to navigate, product information is often limited, and the overall experience lacks the same level of craftsmanship and attention to detail as the beverages themselves. He yearns for an online platform that reflects the quality and artistry of the beverages, offering a seamless and enjoyable digital experience that complements the in-person experience.

PROBLEM STATEMENTS

To identify potential solutions, we conducted a brainstorming session using the "How Might We" framework. From this exercise, five key areas emerged as priorities for improvement:

  1. How might we simplify the age verification process without compromising legal and regulatory compliance?

  2. How might we build customer trust and provide a sense of security during the online purchasing journey?

  3. How might we create a captivating and unique brand experience that differentiates Deadly Garden from competitors?

  4. How might we make it easy for users to discover products that match their specific preferences?

  5. How might we ensure the website is fully optimized for a seamless mobile experience?

IDEATE

Creating the Framework

BRAINSTORMING

We utilized several brainstorming techniques to generate a diverse set of ideas, with a heavy emphasis on Crazy Eights and Mind Mapping. The Crazy Eights exercise allowed us to rapidly sketch eight different concepts for a single problem, pushing us to think beyond obvious solutions. The resulting sketches ranged from a simple, elegant product page to an interactive 3D approach.

HOMEPAGE

PRODUCT PAGE

CONCEPT PRIORITIZATION

After the initial brainstorming session, we synthesized and grouped similar ideas from our mind map and sketches. We then used an Impact vs. Effort Matrix to prioritize the most promising concepts. This matrix helped us select features that would provide the most value to the user with a reasonable amount of development effort. From this process, three key concepts were chosen as the foundation for our prototype.

KEY CONCEPTS & SOLUTIONS

  1. Mobile-First Menu & Streamlined Checkout: This core functionality addresses the poor mobile experience and high cart abandonment. It allows users to view the tap list and place orders directly from their phones with a simplified, secure checkout process that integrates a compliant age-verification API.

  2. Immersive Product Discovery & Storytelling: To differentiate the brand and address the discovery problem, we designed an experience with a visually stunning product catalog. This includes high-quality, moody photography, tasting notes with evocative language, and detailed stories about the brewing process and ingredients, all designed to reflect the brand's unique identity.

  3. Digital "Tap Room Passport" & Loyalty Program: To enhance customer engagement, this feature provides users with a digital loyalty card that they can "stamp" with QR codes. It also includes a "Tap Room Passport" for users to track and rate different beers, and earn badges or rewards for milestones, fostering a connection to the brand and community.

PROTOTYPE & TEST

Putting all the Pieces Together

MAPPING USER FLOWS

Based on our key concepts, we began with a foundational user flow to visualize how a user would navigate the new website. The user flow diagram illustrates the path a customer might take, from the homepage all the way through to placing an order.

The flow is designed to be as direct and intuitive as possible. A user can start from the homepage and immediately access the product catalog. From there, they can easily filter products or explore featured offerings. The path to purchase is streamlined, moving from the product page directly to the cart, where a simplified, secure checkout process begins. The flow also highlights secondary but important paths, such as viewing the "About" page or getting directions to the brewery, ensuring all essential information is readily available and easy to find.

This initial user flow serves as the blueprint for our low-fidelity wireframes and ensures that we build a logical and user-friendly experience before adding visual design. It provides a clear, step-by-step map of the customer's journey and is the foundation for our usability testing.

CREATITING LO-FI MOCKUPS

The user flow diagram was then translated into a series of low-fidelity wireframes. These mockups were created to quickly visualize the layout, navigation, and key interactions without getting distracted by visual design elements like color and typography. The focus at this stage was on the functional and structural aspects of the website.

These wireframes were intentionally kept simple to allow for rapid iteration and to focus the upcoming usability testing on core functionality and information hierarchy. They provide a tangible representation of the user flow and serve as the foundation for our hi-fi mockups.

INITIAL USABILITY TEST FINDINGS

Usability testing sessions were conducted with a new group of participants in order to gather feedback about the prototypes. Participants were given several tasks to perform, such as finding products, filtering products, adding products to their carts, and completing the checkout process. We observed them interacting, gathered feedback, and learned where to improve.

Informed by the feedback received, we did iterative improvements on the prototypes to address the usability issues and make the user experience better. This iterative process included layout and navigation changes, improvements in filtering options, and tweaking of the design of the product page. By continuously gathering user feedback and further refinements to our designs, we ensured that the final product would effectively meet the needs and expectations of Deadly Garden's target audience.

HI-FI MOCKUPS

With the low-fidelity wireframes serving as our structural blueprint, the next step was to create high-fidelity mockups to bring the brand to life. This stage involved applying the visual design elements that reflect Deadly Garden's dark and alluring identity, including color palettes, typography, imagery, and micro-interactions. The goal was to create a final product that was not only functional but also visually stunning and immersive.

The high-fidelity mockups were built directly from the insights gained during the usability tests on the low-fidelity wireframes. Multiple versions of the low-fidelity wireframes were tested, allowing us to identify and refine the most effective layouts and user flows. This iterative process ensured that the final, high-fidelity mockups were grounded in user feedback and represented a validated solution.

CONCLUSION

Let’s Wrap Things Up

The Deadly Garden website project has addressed the key issues identified in the research phase. By focusing on a user-centered design and taking the best practices from the industry, we have created a compelling online presence that reflects the brand's unique character and enhances the customer experience.

Filtering options with a user-friendly interface, visually appealing product display, and optimized checkout experience have seen a considerable increase in user engagement and general satisfaction. Although it is difficult to track the exact metrics for AOV—Average Order Value—and conversion rates for a brand new business and website, leading indicators are positive.

Notable findings include a high level of user satisfaction regarding both the aesthetic and functional aspects of the site; a significant reduction in cart abandonment compared to industry averages for similar e-commerce websites; and positive feedback about how easy it was to navigate and effectively explore product offerings.

Further, the ability to continuously monitor and analyze the traffic on the websites and user behavior will help in identifying further opportunities for optimization and improvement. This evidence-based approach will let Deadly Garden continuously enhance the digital experience and magnify its impact on business development.