A case study on how I
Simplified the notification design for CredAvenue
About the project
I was part of the initial design team at Yubi (previously CredAvenue) and contributed significantly to the company's rapid growth. I was the sole designer in charge of the Borrower's experience on the Marketplace platform at Yubi, from their onboarding to loan disbursement. I was in charge of this project and worked on it from beginning to end. But I did collaborate with a lot of other people on this project.
-
Product managers: To understand the project's overall scope and requirements.
-
Senior designers and stakeholders: To get timely feedback on my designs and design direction.
-
Engineers: To ensure that the final output matches the design exactly.
About Yubi
Yubi is a unified digital platform for discovery, trading and fulfilment of all debt solutions for Banks, NBFCs, Institutional investors and HNIs. In terms of debt financing, we are similar to Amazon. We were a one-of-a-kind fintech platform with no direct competitors.
So, let’s understand the two primary users on the platform: Borrowers and Investors
Who are the Borrowers?
Borrowers require funds for a variety of reasons, such as paying bills or expanding their business. They will post a requirement for the debt on the Yubi marketplace by selecting from the various instruments we provide.
Who are the Investors ?
The Investor will discover the investment opportunities posted by the borrowers, then choose and partner with the borrower for investments on the platform.
Understanding how the platform works
The borrowers are on the platform to partner with suitable investors on their loan deals on time. From the time the borrower publishes his loan deal until his loan disbursement, the borrower has to perform certain critical actions in order to optimise his loan journey. Notifications are used to notify users of critical actions. Few critical actions are as follows:
-
Responding to Investor's interest: Once the borrower has posted his loan deal on the platform, investors will express their interest in collaborating on the deal. This would be notified to the borrower, and he would have the option to go forward with a collaboration with the investor or not.
-
Responding to Investor's messages: Responding to the messages from the investors
-
Uploading documents for verification/approval: Because the platform does not require the borrower to submit any docs. to create his loan deal, he is prompted to submit the docs. at every stage of his loan journey as required by the Investors.
The real problem
The borrowers complained to the CST (customer support) that their loan journey hadn't progressed because they hadn't received a response from the investor (despite receiving one).
This was because these notifications were lost in a pool of other notifications inside the notification icon, causing users to delay/ fail to respond to investors.
This was the root cause of a chain of events.
-
The investor lost interest in collaborating with the borrower due to a delay from the borrower's end.
-
Borrowers felt that the platform lacked sufficient number of investors to meet their loan deals. This dis-heartened the borrowers, and they dropped-off from the platform.
-
Meanwhile, the CST team was trying to help in resolving the communication issue between borrowers and investors by calling them to respond to the notifications.
Identifying user pain points
I decided to dig deeper into the borrower's experiences and patterns by interacting with the customer support and marketing teams, both of which are aware of the user’s complaints and challenges. In addition, I conducted UX audit on the notification widget with my team and identified pain points.
Impactful user quotes
Which one should I act on it today to get my loan.
I don’t know what to do with these notifications as there are too many of them.
I visit the platform once a week to track my loan deal and there are many notification and I don’t know where to start or what to do with them.
Pain points
Needs
Never-ending list: Users find it challenging to locate a specific notification in a long list of notifications.
Overwhelming count of unread notifications:
Due to lack of time, most users avoid opening notifications due to the overwhelming count of unread notifications.
Notifications lacks guidance: Users are unsure how to respond to the information in the notification.
Lacks prioritization: Certain notifications are more important to users than others and they are not brought to the user’s attention.
Users prefer notifications that are simple, organised and easy to locate.
Users prefer for less intimidating notification experiences.
They need notifications that are action-oriented. Providing them with direction and assistance on their next steps.
Users need critical notifications prioritised if it affect their chances of receiving a loan from potential investors.
So, lets re-define the problem statement here
How might we ...
Enable borrowers to respond to critical notifications on time with a click of a button.
Design iterations starts here !!
Iteration #1
Focused based notification widget
In this iteration:
-
When the user clicks on the notification icon on the nav bar, the notification widget is highlighted and the entire background is greyed out. This allows the user to concentrate and avoid distractions.
-
Tabs are used to categorise notifications. The tabs are arranged in a way where the critical categories of notification that needs users attention are positioned first, followed by other set of notifications.
Learnings from iteration#1
Discoverability issues: Because the design uses scrollable tabs, there is a high possibility that the user will not click on the final set of tabs, resulting in discoverability issues.
Lacks notification priority: It is unclear which notification we want the user to focus on first in order to improve his experience on this platform.
Iterations #2
Take action in “ Action centre”
In this iteration:
-
The "Action centre" notification widget is positioned on the right side of the page. This section is called "action centre" to educate users that this is the space where they must take action.
-
The entire right side column of the page is reserved for the Action centre, the user develops the habit of expecting all important notifications to be located here and thus eliminating the need to locate them under the notification icon.
-
The notifications that does not require the user to act upon, such as the success/failure messages are located inside the notification icon.
-
Accordions are used to separate notification categories. The information used are clear and concise, and the user can view the detailed info. and take action by clicking on "see more" CTA which lands them on the relevant page.
Iterations #3
Action oriented “Action centre”
In this iteration:
-
Under each category, the five critical notifications that we want the user to act on are listed open, and the remaining ones are under the "see more" CTA, which takes them to the relevant pages.
-
A CTA button is provided enabling users to respond to the notification, as opposed to the previous design option where users were directed to the relevant page before they could take any action.
-
The first accordion remains open by default.
At Last! The Final Design
Iteration #3 was also improvised based on user testing feedback. The action centre directs the user on what action to take, whereas the ones that does not require the user's action, such as error messages, success messages are located inside the notification icon.
Categorised notification: Accordions are used to separate notification categories. Under each accordion, the most crucial notification is listed while the rest are seen under “ see more”. A CTA button is provided enabling users to respond to the notification.
Prioritised notification: Under each category, the notification that is of highest priority that affects the borrowers experience on the platform are listed open and the rest are listed under the see more CTA.
Actionable notification: Each notification is actionable on the action centre, allowing the user to take immediate action rather than being redirected to the relevant page to take an action.
Business impact after design implementation
Before design implementation
Acceptance of interest from Investors for collaboration in 20 days was 29.8%
After design implementation
Acceptance of interest from Investors for collaboration in 7 days was 29.2%
Project improvisations
The following were addressed in the future:
Message response: Users will be able to view, reply, and attach documents directly from the action centre. In contrast to the current design, where the user cannot view or reply to the messages and the notification redirects to the relevant page where the user can take any action.
Organised notifications: Notifications that do not require action, such as success/failure/alert notifications, were organised and positioned in the notification icon on the nav bar.
Improvised design components: The CTA text link would perform two different interactions in different locations.
Directs the user to another page where they can take action.
Opens a Popup modal on the current page for the user to take any action.
This issue will be addressed in the future.
