Alex logo

johnnie walker's global website

The task of completely redesigning and building a mobile first remake of Johnnie Walker’s global website was a mammoth undertaking which spanned 20 months and embraced a myriad of stakeholders and partners.

Johnnie Walker

Agency: BBH
Role: UX Design Lead

Digital Art Director: Oli Cole
Creative Director: Joakim Borgstrom
Year: 2014

The Breakdown

This responsive site comprises 7,500 words, 1,200 images and over 30 whiskies. There are an incredible 43 different versions in 16 languages. During the development of this project, over 2,000 support tickets were raised, triaged, allocated and closed.

Starting with stakeholder interviews, benchmarking and competitor reviews, this was an iterative process where we were working to update the look, feel and functionality of Johnnie Walker's digital offering, reaching multiple predefined audiences while keeping to a simple, clean, and mobile first design principle. The work included personas, information architecture, user journeys, technical flows, and of course wireframing. Partnering with Amberlight, we used their lab facilities to do in-depth usability testing on early interactive Axure prototypes. Through these tests we gained insight into what was and was not working. We also re-introduced several existing versions of products in a new and more visible way, helping whisky novices choose which product might fit them, and offering additional functionality such as where one can find the product in their local vicinity.

Johnnie Walker Persona
The Personas

To kick this project off, we used existing client and market research data to design layouts for a variety of pages from range of products to heritage of whisky, working with responsibility to design new elements and modules for the project to work across desktop and mobile. Created mobile pages as well as desktop with implications for CMS taken into account. Worked with UX team and to usability guidelines.

Johnnie Walker Site Map
The Site Map

As the original site was so large, a fair bit of time was spent mapping, streamlining and optimising the site’s information architecture. We mapped and took an inventory of the old site, and then figured out how we could improve things and how the new site would optimally fit together to fulfil the client’s goals. As this was a complete redesign with all new content, it was was crucial to get this step right so we would have a solid foundation to build on before going further into design work.

Johnnie Walker User Journey
The User Journey

One of the seven main scenarios the brand wanted to optimise the site around was driving sales through gifting and occasion giving. I illustrated several potential gifting user journeys to help me visualise how this might translate to possible features of the website.

Johnnie Walker Technical Flow
The Technical Flow

My technical flows map out how a user might travel through the system, showing all the possible paths, including all possible branching and decisional splits for each given task.

Johnnie Walker Wireframes
Example Wireframes

I created a GPS- enabled “store and bar finder” to help users find out where they could purchase Johnnie Walker. The feature used Google Maps’ API to integrate map functionality, as well as providing location details and phone numbers that used native dialling when accessed on mobile.