Under Paytm’s Design Hood

The path to a super-app inevitably means adding features, which in turn creates the risk of complex navigation. The Paytm design team admits that “adding functionality while maintaining simplicity” is something they have to be constantly mindful of.

Unbundle and Surface

Based on the data and research, it was increasingly clear that as the Paytm app had grown, many users were not discovering new features.

Rahul Saini, Chief Design Officer, Paytm points out that “Unlike a social app, where you want to discover new content and keep going deeper, on an app like ours, the user wants to accomplish their task in the shortest possible time and with the least amount of friction. We found one of the best ways to help them do this was to unbundle the main menus and surface key categories right there on the home page.”

Paytm’s home screen has three main navigation paths:

• Pay
• Send money to bank account
• Recharge and pay bills

The new release maintains this navigation but unbundles each of the three into the next level of actions. For example, Recharge and Bill payments are unbundled into a section that shows all options upfront – from mobile recharge to electricity bill and gas cylinder booking.

Personal Dashboard

The new design offers a personal dashboard called ‘My Paytm’. It enables users to check their balances across linked bank accounts, Paytm Bank, Wallet and other payment instruments. It also provides quick access to the user’s transaction history.

What’s Under the Hood?

Powering the vision of a seamless app is Paytm’s powerful customer lifecycle management (CLM) engine. Everything a user sees on the app depends on where they are in their user journey:

• In the onboarding stage they are trying to discover a service
• The next stage is when they have tried the app, but they have not yet become a monthly active user
• They then move to the final stage of being power users, where they are familiar with the app. 

For each of these stages the UI inherits data from the CLM engine and customises the app interface accordingly. 

Developing a Design System

Delivering this level of personalisation at scale without breaking user experience requires robust design systems. Paytm has developed a design system called ‘PODS’, short for Paytm’s Official Design System.

In late 2020, the Paytm design team undertook a comprehensive evaluation of the current product. As anticipated for an app that had grown so rapidly, the team found widespread inconsistencies in the user interface – from colours and components to UI copy. 

Says Saini, “While building our design system, we wanted to address the issues we were facing as a team, while ensuring we do not compromise on the speed of delivery.”

He has a valid point. Most well-intentioned design systems are created to enable scale, but unfortunately end up slowing down and confusing teams; striking a balance is crucial.

The All-Important Buy-In

After setting up the basic framework for PODS, the next step was to get key stakeholders like management, project managers and developers on board. All stakeholders were part of discussions about how the design system would help to address issues in the current product development process. This is an important step that many design teams overlook.

The team uses Figma to share the design system across the company. All  product verticals use the central library, thus reducing design and tech debt and providing a cohesive experience across the app, without sacrificing speed. Customisation of components is limited to changing the content within them. A comprehensive icon library has also been built to ensure a uniform look and feel.

The design team collaborated with the development team to ensure the design system was structured the same way in code. This means there is now a common language established across product functions and developers can find UI components within their own environments. 

Anything we do at Paytm has to factor in speed and scale. The new system allows cross-functional teams to work faster while producing consistent, high-quality design. 

Rahul Saini, Chief Design Officer, Paytm

Saini says they have also implemented a governance system that allows designers to initiate change requests to ensure a balance between creative evolution and consistency. “We know that design systems can never be set in stone and must evolve with the product. So what we have established now is a common starting point. Every change request is benchmarked and tested across all our major user flows before we commit the changes to the central system. We’ve rolled out the new interface, and the feedback so far has been positive. Initial data also supports the unbundling decision.” 

Good Design Means Good Business

Paytm dominates merchant payments, with more than 70% of its revenue coming from the transaction fees it collects from merchants for their payment services. As the company heads to an IPO, the evolution in their product and interface signals a focus on providing a more cohesive experience and richer options for end-users.