Garnier Color Connection

A set of interactive tools that offered personalized recommendations, tutorials, and care tips. The refreshed experience energized the brand, powered a national campaign, and earned Zenith Optimedia’s Project of the Year.

[ 2014 / Case study ]

Making Hair Color Simple, Personalized, and Fun for Garnier Consumers

The Challenge

Garnier needed to create a deeper relationship with both new and existing hair color users while building credibility, buzz and driving sales of it’s four color brands. It's previous online experience had been fragmented, limited, and less than successful.  To succeed, the brand needed to make the hair color category easier to navigate and find ways to delight consumers with uniquely personalized experiences.

The Solution


"Hair color made easy" is the focus of Color Connection and Shade Selector. CC provides the tools and information to take the confusion and stress out of coloring your hair by providing tips, video tutorials, and care follow-up for those wanting to maintain their color, explore the latest trends, or make a more radical transformation. Users can save their shade discoveries for later, chat with a specialist, or utilize the Shade Selector tool to go through a dynamic interactive experience to get recommendations for the right shade. The branding was refreshed to be more vibrant, exciting, and personable.

The Outcome

Color Connection and Shade Selector were the driving features of a successful national campaign and won Zenith Optimedia's Project of the Year.

The Landing Page

Users start with a landing page (top) and enter the app through Simplicity, Trends, or Transformation, setting the tone for exploring top-level hair color advice and product recommendations.

Advice Page

Features instructional and informative videos and a live chat.

Products Page

Easily browse the product options and color details.

My Colors

Users are able to save colors that interest them to do additional research, compare, and purchase products.

The Shade Selector

What Color is Right For You?

The Shade Selector tool takes the stress out of choosing the right hair color by giving immediate feed back and recommendations based on the user's interests and needs.

Thank you!
I appreciate you taking the time to explore this project and the process behind it. If you’d like to connect, I’d love to hear from you—whether it’s to discuss a potential collaboration, compare notes on design challenges, or just say hello.
You can reach out directly using the links in the footer below, or head back to the Projects page to see more of my work.