Credit Booster, an engaging feature brings in daily engagement in app

Project Overview:

mPokket is a leading money lending app in the fintech industry for the youth of India. To create an engaging experience and to disburse the credit limit in a gamification format through an engaging feature(MVP).

Client

mPokket

Year

2022

Objective:

To create an engaging experience and to disburse the credit limit in a gamification format

Design Process:

7-Stage Design thinking model has been used. The stages of this Design Thinking process are as follows:

Empathize
Define
Ideate
Prototype
Development
Test
Tracking

Design Toolkit:

Adobe Photoshop
Adobe Illustrator
Adobe After-effects
Adobe XD
Useberry

User Research:

Research Strategy

The first thing we focused on was our research strategy. In order to identify how the user will actually interact with the Quiz model. We have a lot of variations of gamification in the UX world, but as we are a youth centric product so quiz model was one of the ideas that came from the business end. So based on the Quiz model, we conducted a usability test by interviewing people that fit our user archetype. These were users over the age of 18 who are the current customer and as well as the prospect users.

Also we conduct a competitor analysis. Aside from using and understanding the feature, this also gave us an insight in the market space and provided additional context for the engagement we are working on. We conducted our interviews in a consistent and controlled manner based on the interview guide in preparation for Usability Testing.

Competitor Analysis:

Considering that the app is for Indian youth, we researched fintech apps and also quiz apps. We also explored popular quiz apps to understand their features, design and experience. We focused our research on User Interface elements and User Experience Flows. In conducting our user research, we interviewed several teenagers between the ages of 18–30.

The definition of “user” is:
A user who

Does Not have max. DPD (Days Past Due) beyond ‘I’ days (including paid and current overdue loans) (I=30)

AND has an approved credit check

AND has made at least ‘J’ repayment (J=1)
Configurable values: I & J

Some of the questions we asked them include

How old are you?
Which stream are you pursuing in college/school?
What are your favourite subjects/interests?
Have you used any quiz app before?
What features would you like an fintech quiz to have to make your learning and use of the app fun?

User Feedback:

From my interviews, I discovered that most of my respondents had not used any educational app in any form though some had used quiz apps like Kahoot!. Majority of my respondents showed a huge interest in using an educational app provided that the app will be fun to use, easy to navigate and most importantly help improve their learning and knowledge.

User Persona:

After combining the data and feedback from my respondents along with my analysis of other educational apps or quiz apps, I was able to create a user persona that would be an ideal user of an educational app and also be interested in using the quiz feature.

User Flow:

After numerous testing and feedback we altered the user flow of the app,  so it would be a better experience for all users. Due to the short time frame for the project, we decided to focus our efforts on improving the recording process.

Sketch:

The next steps were to each do a  lo-fi sketch using the new user-flow we created.

Here quickly incorporated our brainstorming ideas into rough sketches, and outlined the different screens from A-B.

Lo-Fi Wireframing:

After sketching out our wireframes,  we moved into Figma and created lo-fidelity wireframes.

Following the user journey map, we chose a single ‘happy journey’ and mapped out the different designs.

Credit Booster Quiz:

With the Credit Booster feature, the user can boost his credit limit by playing a quiz with us. Main motive is to create a good chance for the user to earn and reuse the credit limit by borrowing more from the platform. By arranging 3 sets of questions we will be able to get at least 30 secs more interaction from the users. And this will become a practice to earn more boost daily and use that by borrowing loans which will create more disbursements.

We need to keep a generic structure of the quiz such that we can configure-

Frequency at which the quiz is available for the customers to play = X days (X=1)
Number of questions in each quiz = Y (Y=1)

App feature:

Hamburger menu-

In order to facilitate discovery of the feature for our User Segment, we need to make 3 main changes to the menu items-

Need to introduce a red dot on the hamburger menu icon on the Get Cash page to indicate to the users that there is a new feature to explore
Need to list Credit Booster in the menu between “Scholarship” and “Refer & Earn”
Need to make the Credit Booster menu item stand out with a label which reads “New”

Carousels-

The main discovery of the feature needs to be driven via the Carousel section on the Get Cash page. Thus, we should make it the 1st item in the carousel.

The credit booster banner should be shown only if the customer has not yet answered the quiz that day.

Also, in order to drive the engagement for these users, we should show appropriate content at different stages.

We need to replace the text based carousels with image based ones.

Intro page for Credit Booster:

Intent of this page is to explain how the user can earn credit boost via this feature. This page is shown to the customer in the following scenarios-

When the user clicks on the CTA to play the quiz but has not answered any question as of now
When the customer clicks on the question for “How to earn credit boost” from the FAQs section on the Credit Booster Page

Quiz page:

This is the page to answer the quiz questions. Quiz questions can be of following types-

A questions counter section: This section is visible only if the number of questions in the quiz is greater than 1.
A layout for displaying the question: There can be multiple question formats and each format may have a different layout. Hence, we must keep it modular to make sure we can link a question type to a page layout with ease. Currently, there are three question types: Text, Image and Video & two page layouts: one for Text type and one for image and video types.
A section to guide the customer: For answering a question, a user gets W chances (W = Number of options - X) (X=0) i.e. if a user selects an incorrect option, he is still allowed to select from the remaining options until he exhausts his chances. Once he selects the correct option, selection of any other option should not be allowed.
- If the customer taps on an incorrect option, the text should read: “Try again! You still have W chances to select the correct option” & no CTA is available
- If the customer exhausts the max. number of chances to select the correct answer the text should read: “You have exhausted all your chances” and the CTA to move to the next question (if any) should appear else the CTA that reads “Get Boost” should appear
- If the customer selects the correct answer, no text is shown and the CTA to move to the next question (if any) should appear else the CTA that reads “Get Boost” should appear
- Clicking on the “Get Boost” CTA should show the reward to the customer and the background page should be the Credit Booster page
In case a user drops off in between the quiz, he should land on the last unanswered question (if any) and on the CB dashboard screen if all questions are answered.

Note:

We should ensure any text rendered on the app should remain as text and not get converted to emojis, some html tags, etc. in case it contains special characters or any other format
Though the screen shows 4 options, the number of options can be more or less, hence we need to keep it dynamic

Credit booster main page:

This page consists of broadly the following elements-

CTA to play quiz- This CTA has two states

Active-

When the user has not played an available quiz on that day.

CTA text: “Play quiz to increase your boost by Rs.XXX” (Rs.XXX = Max. boost per quiz)

Inactive-

When the user has already played the quiz on that day.

CTA text: “Next quiz available in HH:MM hours”

HH:MM is a countdown timer in hours and minutes with a countdown step of 1 min.

FAQs section:

This section holds the frequently asked questions for this feature. We should have the following flexibility for this section-

The questions, answers, action type, action link for this section should be configurable i.e. addition / deletion / modification should be possible from the backend without any deployment
The questions should be texts and the action on clicking on them can have two actions based on the type of the answer:
1. If answer is text, then it is simply shown under the question in an extended section
2. If the answer is a link, then it should open that page. Clicking back on that page should bring the customer back to that particular question
Each FAQ page should have an independent link of its own and should be related to a feature, activity and screen E.g. Credit Booster | Credit Booster Activity | Credit Booster Page

Current set of questions and answers are as follows-

Q: How to earn a credit boost?
A: Link to the intro page of credit booster
What is excess boost?
A few more to be added…

Design System:

We considered our design system to add consistency, structure and communication across all team members and the app interface. We chose a simple readable humanist typeface that would improve reading legibility at both small and large sizes. The colour palette is mature yet modern and has good contrast.

We also implemented icons and friendly illustrations/Json Animation to bring some fun and enjoyment to the feature.