Simple Acts. Big Impact.

PepsiCo is a branch of Pepsi Inc. that focuses on environmental awareness and the importance what recycling and how it can impact our communities. They believe that bigger change starts with one bottle, with one person, with one action.

Diagnosis

The original PepsiCo website contained a resource library that was very outdated in terms of design and disorganized and hard to navigate in terms of user experience.

What they needed

They needed a whole new resource library interface with a clean and effective filtering system that would allow their users to easily find educational resources and materials. In addition, they were also looking to rebrand the site in the near future and wanted to utilize a combination of their current branding and new branding colors so the entire site looks consistent but also giving the resource library a fresh and clean new look that differs from their current one.

Re-design
Development

Design Concept

Their old site did not offer a concise and organized interface in which the user could easily navigate through the resource library and find what they're looking for. They had 3 different areas of filtering, the main resources, the Green Team resources, and the Recycle Rally resources. Each of these sections was to contain its own filtering without taking up the whole page. Our challenge was to create such an interface where we would contain all resources under a specific section inside that filter areas, so we implemented 3 different scrollable boxes of content cards with their own filter dropdowns.

General Design

To help track how many people who visited a specific resource found them helpful, we added a like button to every resource. We also added isons to indicate the resource type and file size on the content cards so the user can see what type of document it is before they even click to view the resource. By also including an animated effect to the filtering section called isotope menu, we added a dynamic element that would intrigue users but also serve the purpose of allowing the user to see how their selections are filtering down.

Results

Next case study