Finedge: A Finance Masterclass — UI/UX Case Study

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

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

  • 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.

Competitor Analysis

  • 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

  • They are convenient.
  • Offer flexibility.
  • Provides life long learning. (Lifetime access to courses)
  • Teaches to be self-disciplined.
  • Promotes independent learning.
  • 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

  • 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.
  • 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

  • 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

Information Architecture (IA)

📏 Wireframes

Wireframes
Some more iterations and ideas

✨Visual Design

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

--

--

--

Entering the world of UI/UX Design with a background in Graphic Design. I enjoy creating Intuitive Interfaces and solving design problems.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Case Study: Creating a new website for Zero Outage Industry Standard (ZOIS) Association

Image of new web design of Zero Outage site by Black Cliff Media

The Redesign of EATALY.COM

Being Agile and getting your development team onboard

Getting a Job: Post-PhD Edition

Materials And Methods Research Paper Example

Responsive Web Design

Satisfy user by identifying their Persona

幣 (Japanese Kanji) — cash, bad habit, humble prefix, gift, Shinto offerings of cloth, rope, cut…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rishabh J Ravi

Rishabh J Ravi

Entering the world of UI/UX Design with a background in Graphic Design. I enjoy creating Intuitive Interfaces and solving design problems.

More from Medium

Case study: Spotify.Greenroom

A Masterclass for Women Fitness: UI/UX Case study

Case Study: UI/UX Redesign for Reducing User’s Stress Level

Case study: Spotify for new individual artist