Clif Bar & Co.png

Clif Bar.com

 
 
Clif_REV_2016_withrule.png

Client: Clif Bar

Agency: AnalogFolk

Role: UX/UI Designer

Year: 2017

Deliverables: Branding, Visual Design, Art Direction

 

THE STORY AND PRODUCTS OF CLIF  

Clif Bar & Company strives to produce the best nutritional products in the industry. They are working to reduce their environmental footprint in everything they do from the field to the final product.

I closely worked with UX/UI designers and developers to ensure Clif's brand, products, and message are represented precisely on all platforms. My role was to update key modules on all platforms from branding to the visual architecture of the site.

 
 
Clif Bar & Co.png
 
 

Clif Bar experience

 

Clif Bar sought out AnalogFolk to produce an interactive experience that brought together brand values, history, stories, and nutritional products. We believe the best approach was to engage users through Clif products, Clif stories, and search capabilities.

 
 
1.png
Page 2.png
 
 

01. Side Navigation Refresh

Additional UI was implemented to hover & active states ensure the user what product and page they are on. Same approach to Mobile within a drop down menu.

 
 

Side navigation has been improved and is clear between active and hover states.

 
Side Navigation.png
 
 

02. Photo Gallery Module

Clif Bar lives closely on how their product effects different people and their story. Clif Bar’s “Our Stories” page showcases stories, events, and news that circulates around the Clif’s. We noticed that Clif Bar loves sharing these stories with great photography but the constant scrolling has entered User experience. My task was to create a solution to cut back on the scrolling. The solution was a Photo Gallery Module easily useable from Desktop to Mobile.

 
 
Our Stories.png
Our Stories Expanded.png
 
 

03. Events Page Redesign

 

Clif Bar’s “Events Page” needed revising after conducting some user research on the overall experience. With the feedback, we were able to create a clear user experience and flow that would allow anyone to find an event and find the direct link sign up for that event.

 
 
Mobile Artboard.png
 

Events Page now includes filter panels to choose between Months and Locations

 
Events Page.png