Here’s how we designed our new Central Dashboard
The Challenge
Consumers who come on the web app for the first time have to go through multiple stages before getting an approved credit limit. During this onboarding journey, the users might not complete the entire flow and drop off at a certain point. When they log in again, they have no context where they left off in the onboarding journey and there is no information on what they should do in the app. This has also been the reason why many users churn at this point.
Moreover, consumers who manage to get a credit limit find it cumbersome how to manage their accounts and take relevant actions.
Using our app feels like solving a puzzle, so why not make it the most engaging puzzle ever. This project is aimed at making our app extremely engaging and fun to use, ensuring more and more users become valuable customers.
Understanding Our Customers
To get a better idea of what customers really wanted, we did a simple thing: we talked to the customers.
We conduct ‘Coffee with customers’ quarterly in the company where we invite users to our office, talk individually to them and also have focused group discussions. (A separate blog on how we conduct these sessions coming in soon :D)
We also partnered with D91 Labs (Open-source initiative to help Bharat to build great fintech products) to better understand user behavior. It helped us get some great user insights and frameworks for fintech in India.
We also analyzed data from the customer intelligence team to further understand the customer pain points
At ZestMoney we always value to create deep relations with the customers
Setting the goals
We started by setting the following goals for the project and what we might achieve in the end :
The Guiding Light
Any well-designed product or feature has certain core principles on which it is built. For us it was :
Build Financial Confidence — Users should always feel in control. Build social proof and trust in the product
Easy Onboarding — The learning curve should be very low. Users should fully understand how to use the product and overcome inertia
Reduce Cognitive Load — New users have a lot on their minds. Bite-sized nudges and visual cues are needed to reduce cognitive load
Delight — Users should feel delighted when they take their first loan or when their credit limit is approved by creating a visual appeal
Customers can sense the value and care with which the product is built
Phase 1 — The Humble Beginning
Since the scope of the project is very large, we divided it into three phases. This would help us roll out the project in a more iterative way and incorporate more feedback.
The first phase was around designing a new user experience for the Credit Limit Journey. We began the project by doing multiple sessions of whiteboarding and wireframing with the stakeholders.
Identifying the Use cases
It was important to understand the onboarding funnel through which the new user would go through. It was broadly divided into 5 categories as shown below —
While doing the user stories, we came across a lot of scenarios that we had to build for. There were different types of users coming through various channels. So, we listed down all the use cases and what the user expectation would be at every stage.
Designing the Architecture
After getting the complete picture of all scenarios, we worked on defining the information architecture of the dashboard. There were 3 major components — Action Card, Notification Card, and Merchant/Offer Banners.
Rules of the Game — Making a system
The architecture was so scalable that it could solve all the scenarios we had figured out. Now, the next step was to create a system that would allow different teams and the rules engine to decide the order of the cards, the priority, and the custom content.
DLS
Being a very small team, we never had the time to create a Design Language System. But, this project allowed us to define components having shared principles and patterns. And, we started to think of creating a new system for ourselves.
Phase 2 — Making Loans Easy
We rolled out the credit limit journey to all the users after we saw an improvement in the conversion. So the next step was to make getting Loan seamless.
The current flow was very confusing for the users and they couldn’t understand properly :
- How can they apply code on the merchant/partner website?
- How does multiple voucher generation work?
- What happens to the old vouchers which are not redeemed?
- What happens when a voucher generation fails?
- How is the voucher associations with different brands?
Making a decision
As we were making new flows, architecture, components and mini DLS, there were a lot of key design decisions that we were making as part of the process. We did a lot of iterations involving multiple stakeholders, users, and the QA team
Card layout
The Action Card layout was one of the critical decisions we had to make in the design architecture. We tried out multiple variations and tested it with the users as to which would make more sense.
Increase voucher
The current experience for increasing the voucher amount was very intrusive for the users. After the loan is approved, they get a popup to increase the voucher amount and the subsequent flow was difficult to navigate. We solved it by having it on-demand and making it a one-step flow.
New generation flow
We revamped the voucher generation experience and made it more brand-centric. Users could now easily generate multiple vouchers and use them on the partner’s website.
Visual delight
We focused heavily on visual communication to make it easier for users to understand and bring out delight. We did some of these things by adding structure, visual indicators (progress bar), including controls to empower users, build a relationship with the user (messaging) and few animations to create a lively experience.
Phase 3 — Putting it together (My accounts)
Users who have completed their onboarding journey or have taken one loan visits the platform to:
- Shop on Flipkart, MMT, Amazon & 1000+ partners in EMI without credit card
- Buy a new mobile, television, fashion & more today and pay for it later
- Get a personal loan for emergency expenses
- Get 0% EMI offers
- Check their available credit limit balance
- Repay their EMIs
- Get their repayment statements
Using similar principles and guidelines, we are currently working on making the complete dashboard modular and allow users to perform all these actions seamlessly.
New learnings every day
We are constantly evolving in our process of how we design products. Every day we evaluate screen-recordings, analyze data, take user feedback, use best industry practices and innovate in the fintech space.
We are Hiring!
We’re looking for amazing creative individuals from all fields to join our young design team. We focus on creating beautiful, usable designs that impact people’s lives (Build for Bharat). Email us at careers@zestmoney.in and our team will get in touch with you.
