Paytm is India's largest payments company that offers multi-source
multi destination payment solutions.

Paytm is available in 11 Indian languages and offers online use-cases like mobile recharges, utility bill payments, travel, movies, and events bookings as well as in-store payments at grocery stores, fruits and vegetable shops, restaurants, parking, tolls, pharmacies and education institutions with the Paytm QR code.

Paytm wanted to launch a physical card in the Indian markets just like the physical debit and credit card out in the market. One of major challenges while designing for Fintech products is the fear of hidden steps and hidden fees. Most of the time the users get annoyed with the hidden fee which the companies ask them to pay.

Along with it, usually the steps, which are involved in creating the accounts and to on-board, the users are many and there were many instances where the information can go wrong.

When we started to work on the product. We bumped into “roadblocks” and challenges along the way. Nevertheless, being mindful of our design principles was helping us design a better product and helped us grow as a team improving communication and craft. We aimed at ditching the current best practices and we wanted to create a unique experience. This means that we challenged the business-as-usual attitude.

In order to create such an app, the collaboration between designers and developers was crucial. When designing such a novel UI, it was essential to improve our communication. Keeping in mind the best advice of the design-thinking methodology, we started to show high-fidelity prototyping to the development team and reduced the talking. It became a communication therapy between developers and designers and we realized that our life jacket in the ocean of team dynamics is the use of tools that actually reduces time and money spent on building an exact interaction.

The interviews helped me to understand the users concerns and helped me in understanding their pain points. Soon after that, I started working on the wireframes of the application, Wireframes are used early in the development process to establish the basic structure of an app before visual design and content is added. In the ideation phase, I created wireframes presenting information architecture of the future layout. Soon after that, I wanted to start with the UI design of the product, choosing colors for designs in general is not easy. So why can’t we just choose colors for our projects based on how we feel about them or based on the trends? I have become more aware that knowing color theory, preferences and background of the client, culture of users and comprehension of your audience and competitors is the best way to choose right color for your project. Then after choosing the colours I made the overall high fidelity design of the product and then worked with the developers in implementing the design.

If you specifically show developers what kind of animations you want, you can avoid almost all the misunderstandings. We tried Framer X, Invision Studio but ended up using Principle for modelling the UI animations. We bumped into performance issues while using Framer X and since we used to create prototypes with Framer Studio, and the transition from auto-code to React was also a bit of a hassle. Invision Studio, however, looked more promising, so we ended up using its “little brother”, Principle, because the learning curve was so extremely fast!

Previous Project Cubatic.
Next Project Expert Point.