top of page

The Coca-Cola
Company X Mixers
B2B Digital Platform

Project Summary & My Role

  • Visual & Motion Design

  • UI & UX Design

  • Art Direction & Brand Guardian

​

Partnering with Coca-Cola, we created “The Coca-Cola Company Mixers B2B Digital Platform” – A web tool showcasing Coca-Cola’s entire mixers portfolio, including Coca-Cola Signature Mixers, Coca-Cola and Schweppes – cocktail recipes – a drinks pairing tool – as well as rewarding bar owners with the ability to create their own bespoke menus. With the aim to raise brand affinity, increase drinks sales and inspire users and bar owners with rich product content.

 

My role in this was to lead the design and creation of the Mixers Site – acting as a central hub this site showcases the Coca-Cola mixers portfolio, cocktail recipes, product information and heritage – in addition it includes portals redirecting users to the drinks pairing tool and bespoke menu generator. 

 

I was responsible for defining the whole UI throughout the site, all Interaction design, as well as collaborating closely on its UX development with our UX lead. I also helped oversee its development providing guidance and feedback until we launched the site.

Mixers_Free Mockup Web Browser Dark Theme_v1.png

Sitemap - Information Architecture

Helping to define the sitemap, it was created to provide a high-level view of the site’s information architecture. It demonstrated page organisation and structure, providing an overview of user navigation and how pages flowed from one to another.

Slide4.png

Content Structure

In a high-level approach to wireframing, the content structure defined the hierarchy and layout of each page. Following a module base system, much akin to regular Coca-Cola ONE sites, we used colour as a reference to demonstrate the relationship between the different brands and pages contained within the site. 

 

The hierarchy of each page was defined by pushing primary page functions to the top with relevant secondary functions/next steps below. This was important to prevent any site friction, fulfil on user journey expectations, while also guiding users to new relevant content so they could easily continue to explore and use the site.

Slide6.png
Slide7.png
Slide8.png
Slide9.png
Slide10.png
Slide13.png
Slide14.png
Slide11.png
Slide12.png
Slide15.png

Defining UI

The key to defining the UI was establishing an approach that could clearly accommodate the different Coca-Cola brands being showcased within the site – i.e. Coca-Cola Signature Mixers, Coca-Cola, Schweppes and Schweppes Signature. Additionally, the site still needed to feel on brand and belonging to the overarching Coca-Cola Company. 

 

Being a drinks site, I wanted to ground the UI approach within the idea that user was visiting a cocktail bar. While layering the primary UI in a neutral black, adhering to a clear modular system (which I broke up with angular splices) and signposting relevant sections of the UI with corresponding colours for each Mixer brand, I sought to aid user navigation by visually drawing their focus to which ever mixer they were most interested in. 

 

The site was also supported by full bleed images, which I designed and created myself – specifically the homepage bar header and all the cocktail images/ page headers.

Mixers_Free Mockup Web Browser Dark Theme_v2.png
Mixers_Free Mockup Web Browser Dark Theme_v3.png
Mixers_Free Mockup Web Browser Dark Theme_v4.png

Prototype

Before proceeding with development, I  developed a prototype of the Mixers site. This crucial step not only played a significant role in shaping the user interface design but also proved indispensable in showcasing the site's functionality to key stakeholders. Moreover, the prototype served as a valuable reference point throughout the entire development process, ensuring a seamless and successful implementation of the project.

V2_Prototype_Icon_Mixers_v1.png

Click to explore
prototype!

Arrow_curved_1.png

Interaction Design

An integral aspect of the UI design phase involved determining the site's response to user interaction. To imbue the site with the ambiance of a vibrant bar environment, I incorporated subtle scroll parallax effects across its pages.

 

These interactive demos served a dual purpose: first, they effectively showcased to stakeholders how the site would come to life with user scrolling; secondly, they played a vital role in guiding and instructing the developer on the precise implementation of these effects throughout the site's construction.

Christmas Update

In the run up to Christmas, I was asked to re-dress the UI for the Mixers site and give it a festive feel. Part of the update included adding new Christmas inspired cocktails (which I needed to create the visuals for) and adding Christmas magic to the bar inspired header images. 

Mixers_Free Mockup Web Browser Dark Theme_v6.png

Pitch Stage Pre-Visual

During the pitch for this project, I was tasked with crafting a pre-visualization of the Mixers website to captivate the client and showcase its potential aesthetics and ambiance. In this exercise of pure creativity, I designed a parallax scroll effect that immerses the user into the heart of the site, which showcased the new Coca-Cola Signature Mixers.

Live Site

https://mixers.cocacola.co.uk

Roll the Credits

  • Agency – Movement Digital

  • Visual & Experience Director – Tim Ash

  • UX Lead - Fiona Hutchinson

  • UX Copywriter - Mike Stone

  • Development Lead - Paul Herron

explore_more
 

bottom of page