PepsiCo Scaling and Structuring PepsiCo’s Design System

  • UX/UI
  • React
  • B2C
  • B2B
  • Documentation

My Role:

Main Function

Scaled PepsiCo’s design system by defining a B2C multi-library architecture, supporting flexible and consistent product experiences.

Enhanced global documentation by restructuring content and defining reusable patterns throughout libraries, aligning B2B teams around clear, shared design decisions.

Conducted audits to identify inconsistencies and support the redesign of the e-commerce app, leading to the creation of the PepsiConnect sub-library built on updated product needs and aligned with the core design system.

PepsiConnect app on a phone
PepsiCo design system overview

Auditing and scaling a multi-library system for e-commerce

Bringing clarity to a multi-library design system

I audited the B2B library to see how well it matches the main Peacock design system.

The review showed a lot of duplication. Local components were very similar to those in the core library, but they did not have enough documentation or consistency. Teams often started with Peacock components and changed them to fit PepsiConnect’s needs.

This way of working caused fragmented implementations, made it harder to scale, and led to repeated bugs in the product.

The review showed that we need a clearer multi-library model. It helped set boundaries between core and product-specific components, laying the groundwork for a system that is easier to scale and maintain.

Audit of the PepsiConnect B2B library against Peacock

From components to E-commerce

Rethinking PepsiConnect for smarter ordering

I enhanced the B2C e-commerce experience by streamlining key user flows for browsing, selection, and purchasing in PepsiConnect.

I spearheaded the development of reusable components and product patterns in PepsiConnect, aligning them with the Peacock design system to ensure scalability and consistency across both platforms.

These initiatives yielded a more intuitive and efficient experience, supported by a robust and scalable design system foundation.

PepsiConnect 4.0: stock snap, loyalty, stories, AI search and deals 8 deals available Top brands in my area Products with promos

Documentation

Bringing clarity to a multi-library design system

I audited the B2B library to see how well it matches the main Peacock design system.

The review showed a lot of duplication. Local components were very similar to those in the core library, but they did not have enough documentation or consistency. Teams often started with Peacock components and changed them to fit PepsiConnect’s needs.

This way of working caused fragmented implementations, made it harder to scale, and led to repeated bugs in the product.

The review showed that we need a clearer multi-library model. It helped set boundaries between core and product-specific components, laying the groundwork for a system that is easier to scale and maintain.

Peacock design system documentation pages

Storybook Customization

Turning Storybook into a true extension of the design system.

I customized Storybook to mirror the Peacock design system, creating a unified experience for design and development.

I aligned UI, functionality, and components so design and code work seamlessly together.

By bringing Peacock’s visual identity into Storybook and adding theming, backgrounds, and documentation, I reduced confusion and enabled faster onboarding for new contributors.

I aligned Figma and React component properties to keep everything consistent.

Translated design decisions into scalable, ready-to-use configurations.

Results

A cohesive, scalable, and developer-friendly source of truth.

There is now stronger alignment between design and engineering workflows.

It is now easier to show the value of the design system to business stakeholders, which helps build trust and encourages adoption.

Storybook themed with the Peacock design system
More projects