[
Chivas Regal
]
Translating the 'Clashing Forces' identity into a rule-breaking digital experience.
Role
Senior UI Designer
Scope
UI/UX, Responsive Website, Design System
Duration
4 months
SUMMARY
Chivas Regal faced an existential threat: irrelevance. Seen as a “Dad’s drink,” it was losing ground to modern spirits. To stay relevant, the brand pivoted to a new “Clashing Forces” identity.
Working with the Lead Designer and the wider product team, I helped translate the brand strategy into a tangible, responsive web experience. I focused on high-fidelity visual design, motion prototyping, and systematising the complex new art direction for the web.
My key contributions
Visual System: Converted a complex, print-focused style guide into a responsive web interface.
Layout Design: Created editorial-style layouts that broke the grid to reflect the brand’s rebellious attitude.
Motion Prototyping: Animated interactions to bring static brand elements to life, defining the site’s motion language.
Campaign Assets: Designed digital assets for the “Success is a Blend” campaign, maintaining visual consistency across all touchpoints.
Strategic Context
The "Dad's Drink" Dilemma
Chivas faced an aging audience and a digital presence too safe to compete with streetwear culture. Our challenge was to bring the chaotic “Clashing Forces” art direction to life, balancing the visual energy needed to engage Gen Z with the usability required for a global e-commerce platform.
Creative Direction
Controlled Chaos
We didn’t tame the identity, we systematised it. Moving beyond standard grids, I helped execute a vision of “Controlled Chaos” across key journeys. Aggressive typography paired with elegant serifs created visual tension, capturing attention while keeping the energy intuitive enough to drive global conversion.
Impact & ROI
The rebrand and digital overhaul were key in transforming Chivas from a dusty bottle into a modern lifestyle brand.
Commercial Growth
Brand Perception
Successfully shed the "Dad's drink" label, repositioning Chivas as a credible player in the streetwear space.
Design Efficiency
Co-created a library of 260+ components, reducing handover time and ensuring global consistency.
Engagement
The new "rich" layouts and animations increased time-on-site as users explored the reinvented brand world.
Design Execution
To bridge historic prestige with “drop culture,” we turned the chaotic print identity into a dynamic digital system. Drawing on luxury streetwear principles, we moved beyond the grid to focus on visual tension.
Breaking the Grid
I created editorial layouts with overlapping images and aggressively cropped headlines. This captured the campaign’s rebellious energy while maintaining a clear spatial system for responsive design.
Texture & Depth
Rejecting flat design, we added rich textures to UI components to reflect the liquid’s premium quality.
Scroll-Triggered "Chaos"
We built a reactive system where visual elements dynamically appear and overlap as the user scrolls. This gave users control over the “clash,” making the experience active rather than passive.
Systematising the Chaos
This project showed that UX doesn’t always have to be minimalist. Sometimes it can be loud, textured, and bold. By bringing the “Clashing Forces” concept to life, we helped Chivas Regal connect with a new generation.
Learnings & Future Roadmap
I learned that balancing the “Clashing Forces” aesthetic with usability was a constant negotiation. High-energy visuals engage users but can overwhelm them during functional tasks.
For future iterations, I would explore:
Adaptive UI Intensity: Reducing visual noise during checkout flows
AI Flavour Visualisation: Personalising education based on user taste
WebGL Motion: Optimising collision physics for lower-end devices
