Password required

The - Bar Motion System

Year

2026

For

The - Bar (Diageo)

Role

Motion Designer

DESIGN TEAM | Neil Cooper (ECD), Jack Wade (Group Creative Director), Andrew Singleton (Associate Creative Director), Jade Hall (AD), Jose Simon (Senior Designer), Yuhao Chen (Designer), Regina Eyite (Copywriter), Louis Ralli (Senior UX Designer)

UI&UX

Motion

Brand & Identity

The - Bar

The - Bar is Diageo's largest direct-to-consumer drinks platform, a single destination gathering cocktails, craft, and liquor knowledge from across the group's brand portfolio. The redesign set out to turn a wide, uneven catalogue into something closer to a world: curated content, collections spanning many brands and spirit types, and a considered visual language. My contribution lived in the interactive and motion layer, the moments that make browsing feel like discovery rather than retrieval.

Website & Design System

The site architecture and design system were a team effort. My focus within it was motion, how movement would inhabit the system rather than sit on top of it. Brand pages share one structural grammar so that dozens of distinct identities can sit together without the hub fracturing, the consistency that lets the motion layer stay coherent across every brand.

Motion Principle

Three principles shape every motion moment on The Bar — one for moving through content, one for responding to touch, one for revealing it. Together they keep motion purposeful rather than ornamental:

Flow, motion carries long-form content, making it evocative to move through rather than a wall to read. React, elements answer the smallest interactions, so the interface feels alive under the hand. Discover, motion reveals content in layers, letting the sheer abundance of the bar arrive a little at a time instead of all at once.

Motion Curves

Four easing curves carry the motion across the site, each inspired by a moment in making a drink: Silky Way, the smooth pour of liquor into the mixer. Fizzy Drift, bubbles wandering up through the glass. Steady Stir, the even turn of the stirrer. Zesty Flick, the quick squeeze of a citrus wedge over the finished garnish.

Development & Handover

Motion is usually handed over as video, which leaves whoever builds it to reverse-engineer timing and easing by eye, drifting from what was intended. With a separate team developing this site, I built a motion system to close that gap: every interaction captured as reference video, including separate versions per breakpoint, where desktop and mobile behave differently, then translated into a spec the dev team could build from rather than guess at.

Durations, value ranges, and easing curves are written down per property, with sequenced reveals carried by a start-time formula so a list of any length staggers correctly. Motion that gets built the way it was meant to move.

The - Bar Motion System

The - Bar Motion System

The - Bar Motion System

The - Bar

Website & Design System

Motion Principle

Three principles shape every motion moment on The Bar — one for moving through content, one for responding to touch, one for revealing it. Together they keep motion purposeful rather than ornamental:

Motion Curves

Development & Handover

Durations, value ranges, and easing curves are written down per property, with sequenced reveals carried by a start-time formula so a list of any length staggers correctly. Motion that gets built the way it was meant to move.

Explore More

ARCHIVE