Anna Farrell
User Experience Design
Clif.com_0001_0.1-Home-Pop.jpg

ClifBar.com

Clifbar.com

 
tndkklvnxeoprzcusexl.jpg
 
 

The Project: Clif.com Site Redesign
Key Bits: Responsive web, Brand Architecture, Brand re-positioning
Role: UX Lead / Creative

The Problem:

Clif Bar came to us earlier this year in search of a website redesign. Their current site is not very happily responsive, their CMS is a bit of a nightmare, content was bloated and underperforming, and the branding only addresses one of their core master brand verticals. Most people (myself included) don't really realize when standing in Whole Foods that Luna Bar and Clif Bar and Shot Bloks are all owned by the same company, let alone their compelling brand narrative.

Suffice to say, our work was cut out for us. 

Our Solution:

Where we've netted out is a streamlined experience that is completely responsive, introduces the brand hierarchy in a simple way, and begins to provide a layer of expert guidance to our adventure-seeking audience.

clifbar.com

 
 

Discovery Research:

Because the current site was so bloated with content, our first step was to try and catalog it, see how users were currently navigating, and evaluate what needed to go. I quickly realized that users were largely coming to the site for company or nutrition information, skipping the bulk of the content all together.

It occurred to me that our issue might be larger than what appeared on clifbar.com. So I took a step back and looked at the entire brand experience - how do people have a relationship with this brand? Where do they find it? Is it a brand loyalty choice, or one of convenience?

I quickly realized that one of the biggest issues was the relationship between all of the Clif Bar & Company brands. Customers might have a relatinoship with the LUNA brand via the product, but online, we were sending them to an entirely Clif Bar branded experience. Not really helping them get to know us better.

 
CLIFBAR-UXAudit_042616.jpg
 

Information Architecture:

After aligning on a strategic direction for the site, my main IA task became to streamline the current site. I stripped everything back, introduced a brand hierarchy to help users understand the relationship between the sister master brands, and their children, and left room to grow and evolve as the brands grew over time. Knowing that we had a very limited time for development, I worked closely with our tech lead and worked to consolidate the templates used on the site as much as possible - creating shared modules and templates that would flex to the different master brands' needs, but offer consistency of experience and development effort.

 
 

Design Solution:

UX and Visual design partnered very closely to design and iterate on the flexible page templates (some of which seen here). We netted out at a minimal UI, letting the beautiful adventure photography be the hero of the experience. What's seen here is the first in the evolution toward a truly curated experience for our users - allowing me to login, connect to APIs I already use (i.e., Nike+, Garmin), to offer truly next level nutritional guidance. Our goal here was to start the transition for the brand from "food company", to "adventure partner", hinting at what's to come.

 
Clif.com-Mobile_0000_0.0-Home.jpg
 

Recommendation Engine

After determining our goal of becoming a partner to our user in whatever adventure they embark upon, we landed on creating a guided pathway through the various products under the Clif umbrella. 

We used the research-backed fill-in-the-blank sentence over a video texture background to entice users to tell us what type of adventure they'd be taking on.

Using the key product pillars, we were then able to tee up product recos to our user, across brand lines, and help them understand how the Clif Bar & Co. family of products can help them achieve whatever their goal.

 
Clif.com_0001_0.1-Home-Pop.jpg
 

Master Brands

Each master brand under Clif Bar & Co received its own landing page allowing the specific branding to come to life and welcome users clicking through from branded content with familiar branding and visual treatment.

We were able to weave the Clif story through the site, while also highlighting product through the innovative sticky side-navigation. Key product and brand iniatiatives have a happy home with the right amount of prominence to guide the user, but allow for free exploration.

 
Clif.com-Mobile_0002_2.0-Clif.jpg
Clif.com_0002_2.0-Clif.jpg