Brewdog.com Lead Product Designer April 2021 – present

Full Bleed Component

The Problem:

Disparate BrewDog digital eco-system. Main dot com website suffered from inflexibility of Ecommerce site, not flexible for marketing campaigns, booking system for 80 bars & hotels was an inconsistent experience and struggled with localisation. Additionally a family of mobile apps with inconsistent and unclear propositions to customers.

Using data from Google Analytics, Hotjar and Customer Research we identified many problems. Chief problem for new Ecommerce pages to solve was that the existing website was failing customers in Product Discovery journeys and related issues surrounding the clarity of Minimum Order thresholds and Free Delivery rules.

The Team:

As Digital Design Lead, I was managing Design and Research at 3rd Party Companies Ascent & Brainlabs, also hands on design in Figma for the Design System and individual components, down to pixel detail and Prototyping to test ideas and communicate design to Dev partner Dev by Devs.

The solution:

A Design System to be designed in Figma and built in Tailwind to bring consistency across the digital eco-system and re-enforce the branding.

As part of a wider project we looked to reduce the number of sites and apps. This involved guiding stakeholders from eCommerce, Hospitality and Customer Service from discovery to delivery of new features and opportunities within the dotcom site to reduce reliance on micro-sites (Spirits, Soft Drinks, Promotional campaigns like Lost Forest and Sustainability messaging), and limiting the eco-system to:

  1. Ecommerce dotcom site to also promote Bar & Hotel bookings & digital customer service.
  2. In-Bar ordering web-app and Kiosk.
  3. Preparation for Loyalty Mobile App, retiring 3 current mobile apps.

The Design System:

As part of the Design System, we rationalised the typography and design styles of all digital products. Creating re-usable components, loading states and design patterns to improve usability and create brand consistency aimed at Conversion (CVR), Average Order Value (AOV), Add to Basket rates (ATB), Online Bookings and other KPIs and commercial outcomes.

Key areas for improvement were Navigation and the identification of the customer issues with Product Discovery, so ATB rates were a key target across Landing Pages, Product List Pages (PLPs) and Product Detail Pages (PDPs).

Product Card features
Product Card for Product List Pages, Search Results and Attraqt Powered Carousels.
  • New website launched uplift in Key Metrics and Accessibility for Ecommerce, Bar bookings, In-Bar digital ordering and post-purchase customer service. The new site, also freed up the digital infrastructure for marketing opportunities; successful campaigns like Personalised Cans, Peter Crouch Laout (Lager and Stout cross breed) and Boris Lie-PA (at the time of the British PMs resignation) were all possible with zero development.
  • Many newly designed components, implemented across the end-to-end journeys for e-commerce, bookings for Brewdog 100+ bars and in-bar ordering through app.
  • New features, such as videos on Landing Pages and Product videos on product cards, tagging key product information, flagging product and bar features, having a huge positive impact on KPIS across key customer journeys.
  • New payment methods, Clearpay, Apple Pay, G-Pay and implementation of Shipper HQ as part of a revised journey for Basket & Checkout.
  • Cutting edge eCommerce tools, Attraqt, Exponea & Segment enabling personalisation, cross-selling and context based AI to increase frequency of purchase / booking, increase AOV and overall increased conversion and ultimately business goals of profitability and revenue both in bar and through online sales.
  • Revised Loyalty Programme Planet Brewdog (and its member pricing) and bar subscription Brewdog Plus launched and managed within the My Account section of the app.
Architecture of the Product Detail Page (PDP).
Architecture of the Product Detail Page (PDP)

Implemented Consistent Navigation designed Mobile First and revised ‘Material style’ text input fields and mobile first thinking within a company that was very much desktop focused, though 77-80% of customer purchases and 82-85% of bar bookings are on mobile devices.

Data-driven decisions behind the Mobile First Navigation
Data-driven decisions behind the Mobile First Navigation
Architecture of the Mobile First Navigation
Architecture of the Mobile First Navigation

Prototyping using Protopie, for advanced prototypes for both features and transitions / animations for both Stakeholder Approval and Communication with Developers in Jira.

Solutions to complex problems, such as shipping differing types of alcohol across states lines in the USA and clarity of a homepage with both eCommerce and Hospitality priorities.

Shipping Alcohol across State Lines
Shipping Alcohol across US State Lines
Design System Figma Components UI example
Design System Figma Components UI example for Spacing Rules.
Competition Campaign
Revised CMS configuration allowed for much easier campaigns, such as Competitions

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.

Flow for Checkout
Flow for new Checkout, replacing Magento Checkout.
New Checkout had massive positive impact on key-metrics.