Case study

Creating a new online presence for the UK’s best selling craft beer

Services

UX/UI design
Interaction design
Visual design
Design systems thinking
Art direction
Prototyping

Client
Brewdog
Agency
AmazeRealise
Role
Lead Designer
Case study hero image
Client
Brewdog
Agency
AmazeRealise
Role
Lead Designer
Deliverables
UX/UI design, Interaction design, Visual design, Design systems thinking, Art direction, Prototyping
A new home for a craft beer challenger

Brewdog was founded with the aim to revolutionise the beer industry and completely redefine British beer-drinking culture. Founded in 2007 in Scotland it has grown at an exponential rate. Now, more than 10 years on you can see the impact the brand has had on the Food and drinks industry.

After this extensive and continuous period of growth Brewdog wanted to completely overhaul their digital presence. While retaining and improving the core e-commerce experience they also wanted to put community at the heart of their proposition.

Challenge

We were challenged with designing a new vision for Brewdog.com. The design needed to be flexible and scalable to allow the layouts to flex to a multitude of different uses. It also needed to act as a solid MVP foundation to meet the needs of Brewdogs continuous growth.

Outcome

We designed a new look website with a flexible and extensive design system which created a seamless ecommerce and brand experience.

A visual showing designs for the homepage, shop and bar pages of the Brewdog website
Design for Brewdog website on a mobile device
Design for the account section of the website on a mobile device
Design for a Brewdog product page on a mobile device

Born in Scotland

In 2008, in an estate in north east Scotland Brewdog was born. Founded by James Watt and Martin Dickie Brewdog's mission was to shake up the Beer industry. Through their innovative challenger positioning, controversial marketing and uncompromising tone of voice the brand have quickly built a following. Fast forward to now and they have multiple breweries, run events and have a chain of craft beer bars dotted across the UK & internationally.

Community at the heart

To keep up with the intense growth of the company Brewdog needed a website that matched their ambition. We were commissioned to make this happen with an emphasis on putting the core values of community, passion and openness at the heart of the new hub.

Mapping the structure of the site

We started by organising the site content and considering the overall information architecture. We needed to be mindful that ultimately a key part of the site needed to be the ability to sell Brewdog’s extensive selection of craft beer. However this could not come at the expensive of sidelining Brewdog’s values of community spirit.

Exploring the Site IA

Look & feel

As we moved through the design process we shifted our focus to the look & feel of the site. Beyond creating a seamless experience for the user we explored how we could embody the spirit of the brand in a unique, accessible and eye catching manner.

Showcasing the modules that make up the Brewdog design system

The underlying design system needed to allow us to create fresh and varied layouts while also being reusable and able to flex to both immediate and future requirements. This meant thinking about an extensive list of modules and styles that could be combined seamlessly and degrade gracefully where needed.

A focus on some of the product specific modules that make up the Brewdog design system
Atoms, molecules & organisms

Crafting the layouts

The modular design system was then used to create the layouts for launch. These pages were varied in both their form and function and required us to smartly use our design system to build out the finished MVP layouts.

Creating community spaces

Individual bar pages were designed to be much more than simply 'sales' pages. They were aimed at being rich spaces full of community events, food pairings, offers and unique content.

Exploring your new local

Overhauling the shop experience

Brewdog has grown exponentially since it launched in 2008. This growth has allowed them to significantly expand the range of products that they are able to offer their customers. A core part of this project was to overhaul their shopping experience to meet the needs of this ever growing range of products and experiences.

The shop window

The landing page for the online store was aimed at showcasing this wide range of products. A card style system was implemented allowing the page to flex to different needs. To create variety different styles of cards were created for things such as offers, promoted cards and merchants. Additionally cards for things such as events and links to blog posts were also designed to build depth and flexibility into the layout.

Product card hover stateBrewdog beer product card
Product card hover stateBrewdog guest beer product card
Product card hover stateBrewdog product subscription card
Product card hover stateBrewdog merchandise product card
A visual showing the design for the Brewdog shop homepage on Desktop and mobile breakpoints
Shop landing page
Adding depth to the product pages

Individual product pages also became a significant focus in this redesign. We wanted to add depth to these pages in a way that reflected the culture that Brewdog represents. Our thinking incorporated elements such as tasting profiles, brew sheets and food pairings.

Overhauling the product pages
Design for the Beer Brewsheet for a beer on mobile
Design for the taste profile modules for a Brewdog beer on mobile devices
Design for the similar beers module on mobile which is found on product pages
A wide range of products

These product pages had to then flex to the wide variety of products that are now part of the Brewdog offering. Using our modular approach we were able to design templates that flexed seamlessly for everything from beers to things such as Merchandise and multipack offerings.

Product page examples

<Clickable prototype--core pages (simple)>

Link to prototype with core pages...... Keep this simple.

Prototype

Basic clickthrough

Loren ipsum dolor sit amet.......

CTA label here

Launch & beyond

The site has successfully launched. The design work has formed the basis of Brewdogs initial MVP launch and become the foundation for future interactions of the website.