Onboardong Revamp

A B2B SaaS product Onboarding revamp

A corporate case study project with Yubi ( formerly CredAvenue)

"I got the opportunity of working at India's unicorn of 2021- CredAvenue (now Yubi) B2B Fintech SaaS platform. This case study is about improving the onboarding experience that moved certain metrics and created many positive business impacts. Scroll down to know more! "

My Role: I worked as a product designer along with other stakeholders- (Product Manager, Buisness Teams). I handled every step of design process from UX research to developer handoff.

Process Duration: 3.5 months

Design Deliverables: Web & Mobile platform - UX Research, Wireframes, Visual Design, Prototype, Testing, Developer Handoff & QA Monitoring

Project Stakeholders(Internal): Product Managers, Engineering & Data analytics team, Business Team, Internal Customer Support team

What is this platform about?

CredAvenue ( now - Yubi) is a fintech debt marketplace platform that connects borrowers with various investors.

Borrowers in this case are business owners / SMEs (small and medium enterprises)

Investors refer to Banks/ NBFCs/Microfinance

CredAvenue is a first-of-its-kind comprehensive enterprise and retail debt solution that offers a full stack tech-led solution for the entire discovery, investment, and fulfilment of debt deals through the below platforms - Loan platform - Bond platform -Co-Lending platform - Supply Chain platform - Securitisation and Direct assignment platform.

Onboarding process

The onboarding journey helped different entities and user groups create a profile to become credible and visible to investors on the platform. Regarding UX, the onboarding screen saves users from confusion when using the application and the frustration of finding the platform's functionality independently. The onboarding journey should be designed in a simple style, the content should be filtered, and the main features should be introduced first.

We knew who our target users were but wanted to know more about them

A Jobs to be done framework was created to understand the actions that they perform on the CredAvenue Platform

Power User 1

Chartered Accountants/Business Owners (Borrowers)

Approve and oversee all financial information filled out by their assistants and bank admins
Create various deals on our platform to gain investor funding

Power User 2

NBFCs/Banks (Investors)

Express interest in various borrower's deals on marketplace
Provide inputs to bank admins and CredAvenue's internal team to carry forward the borrowers' deals

Non-Power users

Bank Admins/Operational Users/Assistants

Input information of various borrower's in our platform
Assist various investors and businessmen in completing their profile on our platform

How all of this started? What made us realize the need to revamp?

There were certain triggers that led us to think about revamping the onboarding journey of borrowers' side. We did the heuristic evaluation to identified various loopholes from UX and UI point of view

I along with the product team conducted a heuristic evaluation of the current platform by using Jacob Neilson's 10 interaction parameters. Below are the images of the platform prior its revamp.

Older screens of the platform

Heuristic Evaluation Results & User Pain Points identified after conducting User Interviews with NBFCs and internal backend team.

Heuristic Evaluation Summary & User Pain points

Diluted focus on CTAs and user actions and prominence of various elements unclear
Inconsistent design elements and design language
Borrowers have no idea on how their data is being used ( we had 3rd party inetgrations for fetching data)
Huge number of customer support tickets
Manual entries in text fields led to many errors on data collection
Lot of fintech jargons on the platform were not understood
Need of resources from business team for each borrower onboarding process
Incompete borrower's profile details impacting deal creation

We listened to user's pain points and crafted User Personas

Power user 1: Borrower(Business Person/Client)

Non power user: Bank Admin

Initial set of requirements - Business goals -Metrics

Welcome users and excite them about the experience and product services offered.
Provide transparency to the users on how the data is being processed and build
A quick and smooth seamless onboarding process by reducing manual data entries and 80% backend team intervention.
Onboarding target was set to minimum of 25+ borrowers per month

Drive users to take actions that increase various business metrics:

Conversion- converting users who come on our platform at the same time increasing the users onboarded
Engagement & Retention- converting users who come on our platform
Referrals -Increasing the number of onboarding through user group- Connectors (Chartered Accountants)

A major deal breaker for us

How we tackled 2 major problems that we prioritized

Lengthy onboarding process how we shortened ( TAT time for creating company profile was very high)

There were two parts of the onboarding journey- Sign up and the Data collection

Data collection was the next step after sign up process. I had to cut down lot of steps in order to make the onboarding faster.

Incomplete profile pages were impacting visibility for attracting investor deals

I had many rounds of discussion with product manager. We classified various steps as per user types that were critical during the initial signup process and rest of the steps were then asked after the user completes the signup and lands on the profile page. Certain cues and nudges were given on profile page and home page of borrowers to push users to complete their profiles so that they can create various deals for attracting suitable investors.

Revamped User Journey & stages

Lo-fidelity Wireframes Phase 1

Retrospective - A turning point for us

How we took a step back after 1st round of wireframes

I took feedback from users, from business team, and our CEO and then learned more about the user's mental model.

We realized crucial aspects that were missed out

No intimation to the users on what documents to keep handy
Where is the third party information coming from on the platform?
Making them aware about the need of this onboarding process and our key offerings
The USP of our brand and services was not coming out very clearly

Redesigning for the next design iteration phase- High Fidelity Wireframes (Phase 2)

A lot of amends were made on the user flow and certain other aspects: adding more details(borrowing profile submission date, no borrowing history checkbox, shareholding percentage, etc) on various steps of data collection flow, verification states on certain financial documents, and adding more visual cues on the screens.

Feedback Analysis on phase 2 wireframes

I did user testing again by using the Maze platform and took feedback from business and product teams. I received some positive feedback and got to know a few other areas to yet improve on.

Click on below video to view hi-fidelity wireframe prototype which was used for User Testing

wireframes phase 2_Trim.mp4

There was a time constraint and we had to be faster in our delivery process so I included the above feedback while converting the wireframes into visual designs.

Visual Designs

After many rounds of iterations and feedback finally the visual designs for ready for development. Although these were the newly revamped screens, through continuous feedback we brought in more improvements in the user flow in successive sprints.

How I tackled some challenges during visual designs

After I got the go-ahead on the wireframes and content from all stakeholders i started baking my visual designs

Design System challenge

The design system was not scalable, so I had to redesign certain components which were then added back into the design system.

CredAvenue Branding aspect

The branding and USP element was not prominent enough. So I had to redesign the data collection screens with a new sidebar element.

1st option without sidebar

2nd chosen option with a left sidebar for branding/USP

Click on below video to view the visual design WEB PROTOTYPE

Visual Design Prototype.mp4

Click on below video to view the visual design MOBILE PROTOTYPE

Mobile prototype.mp4

BUSINESS IMPACT || MEASURING RESULTS

After many rounds of iterations and feedback finally the visual designs were ready for development. Although these were the newly revamped screens, through continuous feedback we brought in more improvements in subsequent sprints.

We executed an email campaign, we tracked the data in amplitude for a month. Among the 300 leads (potential customers) we sent email,

47 clicked and 29 people signed up in a month, which is double the size we did before the revamp.

The below results were measured through tools : Amplitude and Hotjar after a period of 1 month post revamp.

Lessons to keep in mind

Learned how to design for various edge case scenarios considering all design states and cycles.
Skipping certain steps due to time constraints is advisable provided it does not hamper the outcome.
Know your users' availability and book time slots in advance for user testing.
Know what systems and platforms users use before even starting with the design process.
Launch a few initial features first and keep iterating and testing your MVP along with subsequent sprints to avoid bottlenecks and delays in deliveries.

Future scope & things I would add differently

Account-based login- reverifying if someone if a new user is from an already registered company, asking for an invite to join the platform through an internal invite.
Ensuring that the minimum threshold profile completion is attained during the signup process itself so that time to land on the profile page is quick.
Improving on the visual aspect and looking into the contrast ratios and accessibility part.

Page updated

Google Sites

Report abuse