Creating a design system for Diageo's 'The-Bar' to roll out a refreshed brand

Diageo is one of the largest, beverage companies in the world—they hold over 200 household brands including Gordon’s, Don Julio, and Talisker.

I was hired by Critical Mass to work on Diageo's direct-to-consumer website The—Bar. Diageo had had recently updated The—Bar to include eCommerce functionality and Critical Mass had been working on a refresh of the brand that needed to be rolled out.

I worked on creating a design system to implement the updated brand while also expanding and evolving the site's recent eCommerce side.

Creating a set of foundational styles through a comprehensive audit.

When I started working on The—Bar there wasn't a single design system in place, instead work was siloed into projects. Due to the consistency issues that were accruing over each project I took the initiative to run an audit and create a central design system which would also be helpful in rolling out the new brand visual direction.

I managed to find over 120 different typographic styles and a similar amount of colours across the design files and live site from which I was able to create a condensed set of foundational styles and associated tokens.

Updated foundation pages from the design system

The brand foundation pages defining much of the design system tokens were used as guidelines for the wider team

New colour combinations

Applying the new brand colours to create dynamic designs that brought imagery to life and introduced seasonal variety.

Applying the brand refresh with design system colour themes

A big part of the brand refresh carried out by Critical Mass was an expanded set of brand colours.

I worked to combine these colours into fresh and contemporary pairings that meet accessibility guidelines. These colour pairs were applied to new design system components as themes and allowed content authors to choose them according to the content.

Updated product detail page

Utilising combinations of colours from the new extended colour palette and large typography to create an engaging visual and brought to life through prototyping in Principle.

Redesigning the the product detail page and improving and expanding the checkout flow.

While working on the project I also delivered a new product detail page the improved the user's experience by insuring the key product details and checkout flow were always accessible in a stick side bar. The new layout also brought information key to a user's decision making such as the product's flavour profile and shipping information much higher in the page.

Updates to the checkout flow at the same time meant that new functionality such as gifting and engraving was delivered consistently throughout the user journey.

Part of the checkout journey

Screens from the improved checkout journey including the addition of gifting options