Clif Bar • 2017
Refreshing Clif Bar's website
Overview
The story and products of Clif
Clif Bar & Company strives to produce the best nutritional products in the industry, working to reduce their environmental footprint in everything they do, from the field to the final product. I worked closely with UX/UI designers and developers to ensure Clif's brand, products, and message were represented precisely on every platform, updating key modules from branding to the visual architecture of the site.
Clif Bar experience
An interactive experience for the brand
Clif Bar sought out AnalogFolk to produce an interactive experience that brought together brand values, history, stories, and nutritional products. The best approach was to engage users through Clif products, Clif stories, and search capabilities, threading them together across the site.
Side navigation refresh
A clearer way to navigate the brand
Additional UI was implemented for hover and active states so users always know which product and page they are on. The same approach carried across to mobile inside a drop-down menu. The refreshed side navigation reads cleanly between active and hover states.
Photo gallery module
Less scrolling, more storytelling
Clif Bar lives closely with how their products affect different people and their stories. The "Our Stories" page showcases stories, events, and news that circulate around Clif. The team loved sharing these moments with great photography, but constant scrolling was hurting the experience. The solution: a Photo Gallery Module that works easily from desktop to mobile and brings the imagery forward.
Events page redesign
Find an event, sign up, go
Clif Bar's Events page needed revising after user research on the overall experience. With that feedback, we created a clear flow that lets anyone find an event and jump straight to a sign-up link. The page now includes filter panels to choose between months and locations.