Design System Improvements Through UX Audit

PhonePe Design System

Year
2023
My Role
Lead Designer - Design Systems

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.

About the project

A design system initiative focused on improving product consistency through UX audits, component standardization, and scalable design foundations.

My role

Led the end-to-end UX audit of the PhonePe app, identifying inconsistencies in visual styles and component usage. Collaborated with cross-functional teams to prioritize improvements, enhance the design system, and establish a scalable design token architecture.

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 about 45 core components that can be used in the PhonePe app along with their usage guidelines.

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: