top of page
Pepsico Management Playbook Hero Image

Management Playbook

World’s largest Beverage Brand

The Overview

About

Digitize the Waterfall (Traditional) Project Management Playbook, which will serve as a model for creating interactive material. It will aid in the acceleration and direction of the Commercialization function's core competencies and development.

COMPANY: Cognizant

ROLE: UX Consultant

SECTOR:

Retail

TIMELINE: 3 Weeks

TOOLS: Adobe XD

Project Objectives

Ease of use and sharing

Content should be easy to find and share. It should have intuitive navigation

Post website launch

It should be simple to update and modify content by utilizing the NextGen MyPepsiCo architecture.

Robust search

It will allow people to find relevant content

Engaging and interactive

To promote adoption and return visits

Mobile enabled

Content should be accessible on any mobile / tablet device leveraging the Responsive Web Design  NextGen MyPepsiCo framework.

Target Audience

  1. Primarily for Refresh/Refrain Innovation (Short-term projects).

  2. To help users manage innovation.

  3. Day-to-day audience and project managers (who utilize the playbook daily) carry out the playbook's actions.

  4. Cross-functional functional partners—Marketing, R & D, Supply Chain, Finance

  5. Use the playbook for new hire onboarding and look for best practices when you get stuck in a process.

  6. Users are in NA, Europe, Asia, the Middle East, North Africa, and LATAM (more usage).

  7. Project Managers 

  8. All the features and content in the playbook will be the same for everyone. No personalized content.

Instances of this playbook 

  1. Self-Learning, Workshops

  2. Periodic refresh of skills.

The Process and Insights

Design Process

Design Process followed to complete The Pepsico Management Playbook

Pain Points

  1. Content clutter and tone 

  2. Navigation 

  3. Redundant pages in the Waterfall Management Playbook  

  4. Broken Information Architecture 

  5. Confusing Titles  

The NextGen Framework

Pepsico framework Screenshot 1
Pepsico framework Screenshot 4

The Solution and Execution

Our Approach

  1. The intent was to keep the interface fresh, clean, and intuitive. The focus is on the interaction and the customer experience. 

  2. Absorb existing playbook content and branding and have stakeholder sessions to clarify and co-create a digital content information architecture.

  3. Ensure creative assets align with brand and style guides.

  4. Establish reusable, scalable processes and templates for the digital playbook. 

  5. Create an overall information architecture adopting the NextGen RWOW framework.

  6. Review wireframes with the business and incorporate feedback per topic. 

  7. Establish a model and process for greater efficiency and scalability.

Solution

  1. Built a navigation system that is simple, intuitive, and robust.

  2. Topic-specific content optimization.

  3. We created an engaging and dynamic platform to deliver a seamless user experience with improved performance and authoring.

  4. Created crisp and concise content with a consistent tone and tenor.

  5. Defined hierarchy by segregating and grouping information to improve the overall information architecture.

Information Architecture -  Primary Navigation

Information Architecture Tertiary Navigation created for Pepsico Management Playbook
Definition of Information Architecture created for Pepsico Management Playbook
Information Architecture Primary Navigation created for Pepsico Management Playbook

Visual Design Guidelines

Grid Setup

In this playbook, we determined a grid for the content and other elements, such as pictures and graphics. This will make programmer’s job easy and helps in maintaining consistency across visual images. To set up a grid we took into consideration certain mandatory aspects like container, units, number of rows and columns, margins and gutter.

Image describing the Grid layout used for the Pepsico Management Playbook

White Space

White spaces give an elegant and peaceful note which relax the eyes while emphasizing the main message.

Whitespace used for the Pepsico Management Playbook

Color palette

We have intentionally used a small variety of colors so as to not dilute the brand visuals, which adds confusion.

Primary Button

#FA9614

BG

#E3F7FC

Secondary Button

#1794CE

Icons

#22335E

Headline

#000000

Icons

#27B1EF

Title

#4E4E4E

Illustrations

#008133

Body Copy

#707070

Illustrations

#3DD1F9

Typography (Lato font)

We used ‘Lato Font Family’. Making sure we bring details like hierarchy, weight, line-height, letterspacing and include examples of usage in your product.

Title and Subtitle details used in Pepsico Management Playbook
Paragraph and Quotes details used in Pepsico Management Playbook

Iconography

The icons are built upon a base grid structure that includes guidelines for sizing of different shaped icons. These scale guidelines ensure each icon has the same visual weight so they all feel the same size, regardless of their overall shape.

Icons used in Pepsico Management Playbook

Design Concepts

Landing Page created for Pepsico Management Playbook
Case study Page created for Pepsico Management Playbook

Comparison between PPT Playbook and Digital Playbook

Before

Landing Page Before Image Pepsico Management Playbook
Product Page Before Image Pepsico Management Playbook

After

The splash page is composed of smiles and covers categories (Core Beverages, Waters and Sports Beverages, Salty Snacks, Quaker Foods) . You can change these products at any point in time using Adobe Flash and Adobe Photoshop.

Before

'What is Project' Page Before Image Pepsico Management Playbook
'Managing the team' Page Before Image Pepsico Management Playbook

After

'Understanding the Basics' Page created for Pepsico Management Playbook
'Team' Page created for Pepsico Management Playbook

Before

'3 Lenses' Page Before Image Pepsico Management Playbook
'Managing the Team: Case Study' Before Image Pepsico Management Playbook

After

'Our 3 Lenses' Page created for Pepsico Management Playbook
Mexico Case study Page created for Pepsico Management Playbook

Old Icons, different styles, sizes and not one family

Old Icons of Pepsico Playbook Management

Creation of New Icon Family

Icons created for Pepsico Management Playbook

The Challenges

  1. COVID-19 Lockdown

  2. Work from Home Enablement

  3. Usage of NextGen Framework

  4. Very High Client Expectation

  5. Challenging deadlines

BROWSE THROUGH SOME OF MY SELECTED PROJECT

Case Studies

bottom of page