Clif Bar & Co.png

Clif Bar


Client: Clif Bar

Agency: AnalogFolk

Role: UX/UI Designer

Year: 2017

Team: Christian Lugo, Ben Howarth, Taneisha Kirchner

Deliverables: Branding, Visual Design, Art Direction



Clif Bar & Company strive to produce the best nutritional products in the industry. They are working to reduce their environmental footprint in everything they do from field to the final product. Their food is made with sustainable, organic ingredients; baked with clean renewable energy; packed in environmentally friendly packaging; and delivered by transportation that doesn't pollute. 

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.

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