PhonePe Design System

Mar ‘23 - Ongoing | PhonePe

A comprehensive system consisting of reusable components, guidelines and processes to make shipping products or features easy and efficient

About PhonePe

PhonePe is a leading Indian digital payments platform that offers a wide range of financial services, including UPI-based payments, mobile recharges, bill payments, and investments. With over 450 million registered users, the app provides a seamless and user-friendly experience for managing transactions and investments. It is trusted for its secure and efficient services, making it one of the top fintech apps in the country.

My Role

I contributed hands-on to the end to end process of planning and executing the design system for PhonePe along with other team members.

Execution Process

We followed a 3 - Phase process to build the Design System.

Phase 1

Experience Audit

Conducting a thorough audit of the app allowed us to identify inconsistencies in the foundational styles and UI components. We shared these insights with stakeholders and collaboratively agreed on a plan to address and correct them.

What did we Audit?

  • Design files and live screens

  • Existing UI library

  • Other Assets (Icons, Illustrations etc.)

Here is a quick summary of the Audit

A snippet from the Audit Findings

Here is a quick overview on how we optimised the existing component ‘Avatar’ which is one of the widely used components across the PhonePe app.

Phase 2

Tokenisation

This is where we created the style guide for the product and the design tokens based on the style guide. Style guide acts as a source of truth for designers to understand the allowed styles in the system. Tokens are reusable decision elements and it acts as a bridge between designers and developers to collaborate better.

Tokens Studio Plugin and Token Structure

Phase 3

Component Library

The UI Component Library consists of all the main components allowed in the system along with their detailed documentation including the usage guidelines and developer handoff for each component.

Once all the components are created, the system is ready to be launched and the designers and developers can start using the system.

Design System Life Cycle

The work on design system is a never ending process. It always follow a cycle like below:

Educate: Creating a solid system foundations
Engage: Adoption, Collaboration and Support
Evolve: Iteration, Research and Innovation

PhonePe has completed the Educate phase of creating the design system and is going through the Engage phase where we adopt the system in the relevant teams and the app itself.

Ongoing Work

  • Design System Adoption

  • Development of Components

  • Training and Education

  • Team Support

Next Steps

  • Design System Maintenance

  • System uplifting based on upcoming trends or product needs