Finedge: A Finance Masterclass — UI/UX Case Study

Explore The World Of Finance.

In the case study, I explain and take you through my process of designing an app for all your financial knowledge.

Background Context

• Now that everyone in the world is staying indoors due to COVID 19, we’ve seen the explosion of a lot of Zoom meet-ups and Live streams. People are looking for new ways to socialize online — whether that’s to meet their friends or to meet new people. We can assume by default that all “events” for the next couple of months are going to be online.
• This is a project you’re working on as a UI/UX Designer for a fairly new startup in the market. They’re a media and EdTech platform in the niche of finance. The closest analogy would be that they’re ‘Masterclass for Finance’.

🎯 Problem Statement

Your goal as the UI/UX designer for this startup is to design the Onboarding, Browse Products, Product Details and Checkout flows. Apply the design process for each part and work iteratively through it.

What is Finedge?

• Finedge is a Finance Masterclass (Edtech app). There are courses on understanding financial concepts from Personal finance to Corporate Finance and Public Finance.
• The goal is to help users make well-equipped decisions related to financial management and to be financially literate.
• We’ve Invited amazing finance experts to help users with their financial needs. Learn from the best!

Need for Finedge

I started with some secondary research to find out more about the need and importance of the app in this niche. Some of the main findings:

• Without an understanding of basic financial concepts, people are not well equipped to make decisions related to financial management. Financially literate people have the ability to make informed financial choices regarding saving, investing, borrowing, and more.
• Based on this definition, 33% of adults worldwide are financially literate. This means that around 3.5 billion adults globally, most of them in developing economies, lack an understanding of basic financial concepts. These global figures conceal deep disparities around the world.
• According to the report conducted by the Global Financial Literacy Excellence Center, only 24% of the Indian adult population is financially literate. In comparison to other major emerging economies, the financial literacy rate of India is the lowest.

Links:
Financial Literacy Around The World, The Importance Of Financial Literacy In India

Competitor Analysis

I explored a few other EdTech apps that are available so that I have a better understanding of the design patterns being used.

• Skippable onboarding/Browse content before signing up.
• Downloadable lessons.
• Feedback/Discussion forum.
• Before purchasing the course, the user can view the work of existing students, while in others it’s unlocked only after purchasing the course.
• Educator profile/info.
• Free courses are available in some apps, while they provide a free trial for a month or two in a few other apps.
• Subscription-based payment in some apps, while in others it’s pay only for the course you want (Course-based payment).

The Good And The Not So Good

I decided to research the advantages and disadvantages of EdTech apps to find the gaps and user pain points which I can take into consideration and create a better user experience.

I started with some secondary research:

The Good

• They are convenient.
• Offer flexibility.
• Provides life long learning. (Lifetime access to courses)
• Teaches to be self-disciplined.
• Promotes independent learning.

The Not So Good

• Makes it easier to procrastinate.
• It may create a sense of isolation.
• Gives more freedom, perhaps, more than we can handle.
• Requires to be responsible for our own learnings.
• No interaction or engagement between the students and educators.

User Research

To validate my secondary research, I reached out to some of my friends who have used EdTech apps to know their thoughts about it.

The Good

• One answer that was common among all of them was it’s convenient and they have the freedom to study whenever they want. Be it late nights or early mornings.

The Not So Good

• No timely feedback. They need to wait a long time for someone to respond and cannot clear their doubts immediately.
• “I took forever to complete the course”. It makes it easier to procrastinate.
• There is no engagement within the apps as it caused the user to lose interest during topics that weren’t interesting.

💭 Ideation

After the information gathered during the research, I decided to ideate the main features I want in the app.

• Skippable onboarding - option to browse content available before signing up.
• Pre-recorded lessons with interactive live sessions and access to workshops from the educator.
• Course-based payment.
• Discussion forum.
• Downloadable courses.
• Common free courses are available to get the user started if interested.
• User engagement when they reach certain points. (Ex: If they reach halfway through a course, pat the user on the back and encourage them to proceed).
• Gamification. Complete achievements and get rewards to exchange for discounts.

🙌 Information Architecture

Now with the information gained from researching and Ideating, I built the IA for the app.

Information Architecture (IA)

📏 Wireframes

After IA, I moved on to wireframing. It’s a very important process to try out different layouts and iterations. I started with a Pen and Paper and once I was happy with the various iterations, I moved on to digital wireframes to continue iterating it more to something I was satisfied with.

Wireframes

Some more iterations and ideas

✨Visual Design

Now the fun part! After a lot of iterations and feedback, allow me to walk you through the final design screens while explaining the decisions I made.

Onboarding

• Simple and clear onboarding.
• Communicate what the app offers upfront, so the user feels motivated to sign-up.
• Show the number of Onboarding steps.
• Give the user the choice to browse the content in the app before signing up.

Sign Up/Sign In

• Users can Sign Up/Sign In through social media or use their mobile number or email. It’s quick and easy.
• Once the user has signed up with their preferred option, they are welcomed with a warm Hello asking for their name.
• And the next screen is where the user can choose their interests so that they can only see the courses they want to see. They can always select or deselect their interests later in the profile section.
• And since this app has a referral system, the user is asked up front if they were invited by their friends to Finedge. They can choose to skip this option and do it later if they choose to do so.

Explore/Home

• On the Explore/Home page there are different categories available for the users. These categories are to help make it easier for users to browse through courses.
• The carousel on top showcases Educators on the platform and also shows Live events going on.
• As the name suggests, the category Free Courses provides the users with some basic free courses to help them get started. This also helps build interest and curiosity to learn and in turn would boost purchases of courses.
• And the categories that the users chose during onboarding appear on the Explore page to make it easier for them to browse and make a decision.

Course Details & Live

• Once the user selects a course, they land on the about tab. Which contains all the information regarding the course — About the course, what the course offers, what the user will learn, reviews and FAQ.
• When the course isn’t purchased, the discussion tab is disabled and only the preview about the course is watchable.
• Once the user has purchased the course, the save option changes to download, so the user can download it and watch it offline at any place and any time.
• In the discussion tab, the user can view all the live sessions hosted by the educator and ask questions and doubts about the course.
• How does Live work? Once the educator has gone live, the students can join in. If they have an important question that they want to ask the educator, they can use the Ask the Educator feature which highlights the question, so it’s easier for the educator to pick the questions while looking at the comments.
• Encourage users when they reach certain milestones. It creates a sense of engagement.

Library

• Library is where all your Purchased and Saved Courses show up.
• There is a sort option to easily sort your courses; Sort by Recently Added, Recently Watched, Progress, Downloaded.

Search

• Once you go to search, it shows you your recent searches if any. It also shows the popular searches on the app to inform you of what courses popular at the moment. And also there are categories to make it easier to browse through courses.

Checkout & Payment

• Easy checkout process.
• Add a discount code if available. The referral code box changes to the colour of the discount coupon.
• Proceed to make payment. Choose the mode of payment you prefer and make your payment. The course is all yours. Start learning.

Account & Gamification

• Online education can be lonely. To keep some engagement going within the app, I decided to Gamify it using collectable rewards by completing certain tasks that can be exchanged for coupons and getting a discount during the next purchase.
• Let me explain how it works. When you complete certain tasks, you get one or two Diamonds depending on what the task is.
• Now using these Diamonds, you can exchange them for discount coupons.
• Once the coupon is redeemed, the user has a limited time to use the coupon before it expires.
• For this example, I’ve used a limited number of tasks. The more I iterate and explore, there will be more tasks and more diamonds to collect in the future. 💎

Learnings and Insights

• Research is a very important part of designing. It makes it easier to validate your design direction and ideas.
• Information Architecture is just as important. It makes the design process a whole lot easier when there is a structure in place.
• This project was challenging and fun at the same time. There were so many iterations and so much brainstorming that went into it. I didn’t just get to design good looking screens, but screens that actually work. And the most fun I had was when I had to think of how to make the app more engaging.

Prototype

That’s the end of this case study. I hope you found it insightful going through my process. Thank you for reading. Do let me know what you think about this case study.

I’d like to thank Abhinav Chhikara, Mayank Khandelwal and everyone at 10K Designers for their help and feedback. 💥

Oh! Clap it if you like it. 😉👏