PepsiCo Website Redesign, retelling the brand's story
I restructured the information architecture of a 1,500 page website to better communicate the brand's values.
Business Problem
Today's consumers expect
brands to be sustainable
27%
more likely to purchase
"when Gen-Z and millennial customers believe a brand cares about its impact on people and planet"
2030
transfer of purchasing power
"$68 trillion in purchasing power will transfer to Gen-Z and millennials surpassing that of baby boomers"
Problem
But PepsiCo's website's poor usability
prevented users from discovering
sustainability initiatives
Opportunity
Redesigning the website could boost the brand's image
The improvements included creating simpler navigation, modular page types, balanced page structures, and clearer content. High-level changes and attention to detail created a more meaningful experience.
Problem Space
Usability issues included...
A heuristic evaluation revealed that there were several basic usability issues. It was difficult for users to orient themselves in any part of the website.
1
Ambiguous link labels
3
Non-scalable pages
2
Poor scannability
4
Unstructured content
The Solution
I designed a more
usable website that highlighted
the brand’s core values.
Let's take a closer look at
my design process that
led to this solution.
Design Strategy
I took a holistic approach
to redesigning the 1,500 page website.
Redesigning so many pages required a methodical and cohesive strategy rather than dealing with each page on a case-by-case basis. This would also ensure an end result that left room for future growth.
Top-down Approach
Starting with the overall experience before solving for isolated issues.
Audience-based Navigation
Creating user journeys specific to each audience.
Standardization
Making modular designs for standardization & scalability.
Strategy 1
Content Audit: Top-down approach.
Considering the size of the website, first understanding all the current content was essential. Pages were classified according to which to eliminate and how they could be standardized.
Evaluating the entire 1,500 page website
Strategy 2: Top-down Approach
Site Map
Designing the sitemap created the fundamental structure for users to navigate the website. I took all the pages I evaluated in the content audit and organized them into appropriate categories.
Creating categories users would navigate
Challenges I faced along the way
and how I iterated on my designs.
Challenge 1: Site Structure
Simplifying the site map
The categorization of the current site map and poor link labels made it difficult for users to understand what they might find at a certain place. High-level link labels were ambiguous. Progressively flattening the design of the site map also made it more scannable and easier to navigate.
Building a flatter menu
that was easier to navigate.
Strategy 3: Standardization
Reusable Page Types: Wireframes
After I identified the page types to creat, I designed wireframes to decide on the placement of crucial elements such as navigation bars. This created a clearer picture of the user experience.
Crafting a consistent and memorable experience
Challenge 3: Content
Content Rewrite
An important part of shaping the brand image was to make sure that users with different levels of interest have content to engage with while scanning headings or reading content in depth.
Creating scannable and digestible content for users
Final designs, a unified experience,
with different user flows
Challenge 2: Navigation
Tackling 5 Tier Navigation:
Organizing pages so users could trace their steps.
In the current website, the lack of breadcrumbs or indication as to where the user is makes it difficult for them to navigate back to where they came from or orient themselves.
Using local navigation to orient users
