The Problem: Unifying the BrewDog Digital Ecosystem
- Role: Digital Design Lead
- Tools: Figma, Protopie, Google Analytics, and Hotjar
- Focus: Design System, Customer Service, eCommerce, UX Strategy, Prototyping
The Challenge: A Fragmented Experience
BrewDog, a global brewer and pub chain with 80+ locations, faced a critical issue: a fractured digital ecosystem that was diluting the brand and frustrating customers. The existing digital landscape suffered from:
Inflexible eCommerce: The main .com site was rigid, making marketing campaigns difficult to execute and hindering Product Discovery journeys.
Inconsistent Hospitality: The booking system for bars and hotels offered a disjointed user experience and lacked necessary localisation capabilities.
App Fatigue: A family of three distinct mobile apps confused customers with unclear value propositions.
UX Friction: Data from Google Analytics, Hotjar, and Customer Research highlighted significant drop-offs due to unclear “Minimum Order” thresholds and confusing Free Delivery rules.
My Role & The Team
As the Digital Design Lead, I worked both on strategy and execution:
Collaboration: Prototyping for strategic purposes (for stakeholders), for Testing, and to communicate interactions and to validate ideas and communicate technical specifications to our development partner, Dev by Devs.
Leadership: Managing design and research output from third-party agencies (Ascent & Brainlabs) and guiding stakeholders across eCommerce, Hospitality, and Customer Service.
Hands-on Design: extensive UI/UX work in Figma, crafting the Design System from high-level concepts down to pixel-perfect component details.
The Strategy: Consolidation & Clarity
To solve the fragmentation, we moved away from reliance on micro-sites (such as Spirits, Soft Drinks, and campaigns like “Lost Forest”) and consolidated the digital footprint. The goal was to streamline the eco-system into three clear pillars:
- The Core Dotcom: A unified hub for eCommerce, Hotel/Bar bookings, and Customer Service.
- In-Venue Tech: An optimised In-Bar ordering web app and Kiosk interface.
- Loyalty: Preparing a single, robust Loyalty Mobile App to replace three legacy apps.
The Solution: A Scalable Design System
To drive this consolidation, I led the creation of a comprehensive Design System, designed in Figma and built in Tailwind.
- Visual Rationalisation: We audited and rationalised typography and styles across all products to ensure brand consistency.
- Component Architecture: created a library of reusable components and loading states designed specifically to improve usability and development velocity.
- UX Optimisation: We redesigned key user flows—specifically Navigation, Landing Pages, Product List Pages (PLPs), and Product Detail Pages (PDPs)—to solve the “Product Discovery” friction identified in the research phases.
Outcomes & Impact
The new Design System and consolidated architecture were built to drive specific commercial KPIs, focusing on Conversion Rate (CVR), Average Order Value (AOV), and Add to Basket (ATB) rates.
- Unified Brand Voice: Successfully retired disparate micro-sites, bringing sustainability messaging and sub-brands under one cohesive roof.
- Clarity for Customers: Redesigned UI patterns resolved user confusion regarding shipping thresholds, directly addressing the primary pain points found in user testing.
- Operational Efficiency: The Tailwind-based system streamlined the hand-off process to developers, reducing design debt and speeding up feature delivery.
Key Takeaways
By shifting BrewDog from a scattered collection of sites to a unified product ecosystem, we did not just improve the UI; we created a scalable foundation that supports the business across retail, hospitality, and loyalty.
As part of a new site, we moved off the Magento checkout and released a custom checkout with significant UI and UX improvements around Address Management, Stored and new Payment Methods and expanded Shipping options with ShipperHQ integration.
