PROBLEM

The issue at hand for this project was to redesign the website of Clif Bar, a company who has a very distinctive and well designed packaging, but a poorly developed web presence. In order to propose a new UX and UI for to the company a new landing page as well as a few interior pages needed to be designed and developed. The pages needed to be fully designed and functionally coded.

 SOLUTION

I made the decision to simplify the user experience and create a design that is more cohesive and has a more direct approach. Their current site is convoluted by its navigation system, has very little actual information, and has an overloaded of unexplained click-able images. I decided to make the buttons more obvious, and provide a decent amount of body copy giving a glimpse into what you could find by clicking the button. I also created a number of product pages.

UXUI & CODING

User experience centered deign has to be intuitive, and user interface design needs to craft and cultivate that intuitive experience. When examining Clif Bar’s current website, I found the layout & navigation completely confusing. Looking at the competitors websites (particularly Kashi), I decided that the site needed to be simpler, more direct, less convoluted and fluid. The wire-frames above are my proposed solution.

Once a basic wire-frame was laid out I gathered assets, which conveyed the adventurous, exciting, and outdoorsy nature inherent in Clif Bar’s brand, and began coding. While I wanted the design and UX to be simple, I wanted to add a few flourishes to make it something special. It is a basic longer scrolling page, however I built in a parallax to give it a dynamic visual flair and fixed the header so that the user had access to links at all times.