Work

About

The Process

Role: Lead Designer • Timeframe: 4 months • Agency: Grey
🎯 Project Brief
💭 Design
⛳️ The Solution

🎯 Project Brief

💭 Design

Homepage concept 1: Shaping the mold

A “timeline” of defining moments demonstrates P&G's evolution and commitment to the future. Dots that represent all of the components of P&G morph to form (and reform) different objects on scroll.

Visual design by Brad Clymer

Visual design by Brad Clymer

Functionality Example

Pros:
  • Showcases P&G’s long-standing commitment to innovation through their heritage
  • Demonstrates how P&G is ahead of the curve, not following it
  • Proves that P&G always has been and continues to be the leader in the industry
Cons:
  • Lack of visual humanity
  • More focus on past instead of present and future
  • Technology may be difficult to implement within short timeline
  • Can be difficult to update often

Homepage concept 2: More than just products

While some see just a bottle, P&G sees diligence, potential, impact and so much more. With this concept, brand-agnostic packages break apart on scroll to reveal rotating 3D graphics of the “ingredients” that go into every product (CSR, Quality & Ingredients, Innovation, etc.).

Visual design by Angela Kim

Functionality Example

Functionality Example

Pros:
  • Connects products consumers know to the larger impact of P&G
  • Proves that P&G cares about not only what they develop, but how they develop them
Cons:
  • Focuses more on the products rather than P&G as a whole
  • Lack of real photography can feel cold
  • Technology may be difficult to implement within short timeline
  • Can be difficult to update often

Homepage concept 3: Improving your world, every day

P&G does good globally, across the country, and in our own backyards. Every aspect of the business is driven by the commitment to make your everyday life better. So when someone comes to pg.com, let’s show them exactly how P&G works to build a better world for them through scroll-triggered storytelling.

Proof of Concept

Functionality Example

Functionality Example

Pros:
  • Demonstrates that P&G’s efforts and brands have relevance and impact to both the consumer and the world at large — a main point of difference compared to smaller brands
  • Provides real utility and value through an easy access and smart search bar
  • Personalizes the experience with regionally-specific home and neighborhood backgrounds
Cons:
  • Global focus could be seen as a negative
  • Storyline could be difficult to update
  • Visuals aren't ownable

Secondary & tertiary pages

After working with the stakeholders to determine all the required site content, I facilitated an affinity mapping session with the cross-functional team.
This resulted in 65% fewer pages and a 60% decrease in clicks to the deepest content.
Since pg.com houses numerous brands in over 45 countries, it was crucial to establish a design system.
To determine the modules needed for the system, I sketched initial designs, then looked for patterns. This helped make sure the site was customizable and easy to build for each region and product, yet maintained consistency under the P&G brand.
For the secondary and tertiary pages, we went through multiple iterations before landing on an approach that accomodated accessibility and maintained consistency with the new P&G visual ID.

⛳️ The Solution

  • A refined visual design that's consistent with the new VisID so the site has a more distinctive and ownable look and feel
  • A visual story that starts within the home to focus on P&G's local and personal impact
  • Focused content on clear and contextual CTAs
  • A low-tech plan for countries where connectivity is not as strong
See the original site
In addition to showing P&G's story, we built in solutions that highlight specific messaging and help consumers quickly find relevant content.

Get in touch

alanaleshno@gmail.com

Back to top