PI Design System

Shireen

Home

Work

About

Resume

Get in touch

PI Design System

DESIGN SYSTEM

WEB APP

B2B

Role

UI Design,

User testing with Storybook

Impact

5x Faster Workflows,

90% Reduced Inconsistencies,

Team

2 Designers, 1 Project Managers,
5 Developers

Overview ✨

What is PI Design System

We have built Pi’s first end-to-end design system to power a multi-product B2B workspace covering multiple domains.The system ensures consistency across EsperGroup and its five child brands (EsperHealth, EsperPulse, EsperCare, EsperShield, EsperScience), speeding up design and development while reducing inconsistencies.

A design system was needed to bring consistency, speed, and scalability across Pi’s growing product suite. Without it, teams faced duplicated work, inconsistent visuals, and misaligned handoffs.

The system created a shared foundation of tokens, components, and patterns—helping designers and engineers build faster, with clarity and cohesion.

Goal 🚀

To establish a Design System that acts as a single source of truth, enabling product teams to:

Ensure Consistency across all user touchpoints
Improved efficiency by reusing standardized components and patterns
Scale easily as new features, products, or teams are added
Collaboration between design and engineering with shared guidelines and tokens
Enhance quality and accessibility by embedding best practices into the system

Solution 💡

Pi Design System provided a single source of truth with resusable components, design tokens and patterns. Integrated with Storybook.js for live demos, it ensured consistent visuals, streamlined handoffs, and scalable workflows across all products and brands.

Built governance and documentation around the system—versioned releases, contribution guidelines, and accessibility checks so it stays reliable and easy to adopt.

The Process

Foundation Step

Defined the visual language by creating a consistent color palette, typography scale, spacing tokens to ensure design consistency across platforms.

Component Library

Designed and documented a library of reusable components (buttons, inputs, cards, modals) and commonly used widgets along with their various states to improve design efficiency and reduce duplication.

Storybook.js Integration

Implemented the design system into Storybook.js, allowing interactive documentation, live previews, and easier collaboration between design and engineering teams.

Outcome

Improved
Consistency

Faster Design

& Development

Onboarding
Efficiency

Improved Consistency - Unified visual language across products, reducing inconsistencies in typography, spacing, and colors by ~90%.
Faster Design & Development -Designers and developers reused documented components, cutting design iteration time and handoff clarifications significantly.
Onboarding Efficiency - New team members adopted the system quickly, reducing onboarding time for both design and engineering teams.

My Learnings 🏆

Storybook bridged the gap between design and engineering, making the handoff truly interactive.
Design Tokens are leverage; they power scalability across components and brands.
Testing new features with the system exposed missing patterns (like error states or edge-case layouts). This iterative validation ensured the system was future-proof.
The biggest learning was that a design system is a living product. It constantly evolves as new use cases, brand updates, and accessibility standards emerge.