Case study: a platform for all Music learners

In the case study, I explain and take you through my process of designing an app called Music Masterclass, which is a platform for all Music learners.

👉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 Ed-tech platform in the Music niche. The closest analogy would be that they’re ‘MasterClass for Music’.

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

I started searching on the internet for all the information that I should know to get started.

In this process, I try to be as open-ended as possible to collect more and more data so that I can widen my scope of exploration.

I explored some online web-based platforms to build more context in this space so that I can design a clear solution.

Some of the links I explored-

Top 10 genres of the music industry,

Online platform to learn music, languages, and other creative skills

Online Music school

Courses categories exploration

I explored various online music schools to get as much information as I can get around

• Types of courses
• Duration of courses
• Pricing
• Content
• Creators/Teachers of such courses
• I also wanted to explore are different categories of music for which I can include courses and lessons because music as a niche is very vast, so I had to explore and finalize whether to go specific into a certain category or make an app general for all types of music classes.

I also wanted to find some gaps and user pain points with similar apps and content, so that they can be addressed to create a better user experience.

Explorations from Masterclass App, Skillshare and other Ed-Tech platforms

Summarizing all the user problems and frustrations

• Only annual subscription is available in some products-No option to buy smaller plans and Unclear subscription models — users tend to turn their backs from such products.
• Users highly want an option to download and stream offline
• Bad user experience navigating between lessons and no track of already watched videos/lessons.
• Progress of lessons/courses is unclear and not user friendly.
• Lack of motivation( internal and external) to complete the courses
• Bad user experience in terms of navigation and exploration.

BTS of Research part of the process

Competitive Analysis

🤩 I went ahead and collected screenshots of several apps to observe how they show content screens and observe the common patterns.

Common patterns I observed were

• Onboarding
• Explore pages
• Main content screens
• Search and filter
• Bookmark and save

Ideation

Because this is an open-ended problem, I want to make an app for different categories of music (DJing, guitar, piano, drums, composition, music production, beat making, singing, Base guitar, Ukulele, Jazz, Country music etc) in general and not for a specific type of category like- just for instruments.

So for this platform, I decided to have the best individuals from respective fields of expertise to give their masterclasses.

So I categorized all courses that the platform will have in 4 categories broadly-

1. Instruments

• Guitar
• piano
• drum
• ukulele

2. Singing/Songwriting

• Beyonce
• Taylor Swift
• Ed Sheeran

3. Djing/Beat Making/ Music Production

• Marshmello
• Dr. Dre
• Timbaland

4. Music Softwares

I again researched the details of the courses that a specific Instructor/ Mentor will teach.

I had done extensive research around this, to understand the terminologies and familiarise myself with the jargons related to music to layout the Topics and subtopics for different courses.

Information Architecture

💛 This is the step where most of the heavy thinking goes in, as a product designer I just don’t need to design some beautiful looking screens but whole information systems and logic for the whole product for better usability.

Overall Site Map and Information Architecture

Wireframing

😍Now I go crazy while doing wireframes, I absolutely love it, Pen and Paper wireframes are the best to try out different layouts and iterations in less time.

Remember — You have to productive as well as efficient.

Deep dive in the wireframes and Ideation

Visual design

Onboarding

Design thinking around Onboarding

• Visually communicate the value of the app upfront- User should feel motivated to sign up.
• I have to make it easy for user to onboard
• I can mention user’s pain points, dreams, and barriers to make them feel motivated to sign up
• How can I show a clear number of steps while onboarding
• Don’t do information overload
• Use imagery to serve temptation to the user
• Use of specific copy
• Earn trust first and then ask them to sign up
• Decrease the number of form fields, so that the entry barrier is low and the conversion rate is high.

• I decided to show the actual product upfront to give the user the value and glimpse of the product without even signing up.
• I also kept in mind the user freedom to skip the walkthrough to directly go to the Welcome screen.
• The main signup is through social media and phone numbers with OTP verification.
• After entering the phone number, the user is asked their name.
• I wanted to make sure that the user is shown relevant content and wanted to make the whole experience more personalized so I kept a goal-based learning approach in the platform.
• In this way, the user can keep clear track of their progress.
• A user can add one or more goals, this also helps the platform know what to suggest/recommend to the user and make the explore experience personally curated.
• When users invest time in the product, they feel like they own it, which is a better approach while onboarding, this is called-

Endowment Effect- People value something more if they feel it’s theirs.

Explore/Home Page

First, let’s give you some more context

Overall idea of the platform and premium subscription.

• As a Free user, you have access to all unpaid courses on the platform which you can complete at your own pace and these are pre-recorded lessons.
• As a Premium member, you have all the benefits of free users as well as you get access to the live courses with exact timelines (Specific start and end date)

There are other benefits and edge cases I’ll walk you through later in the case study

If the user has already started watching a lesson and left in between

Search

• I feel it's important to show the user what’s trending on the platform so that they are more intrigued to know about it, even more, that is why I added some tags for trending courses on the top even before the user taps on the search bar and starts typing.
• So when clicked upon a certain category say for eg- Piano, in this case, you are taken t a screen where there are all the courses listed along with all the necessary details that help you make the right decision.
• I decided to go to a list view for the search result because of one simple reason. The emphasis needs to be on the text rather than the thumbnail. The learner clicks on a search result based on the text and not the image.

I also thought it would make sense to show all the categories of the courses platform offers so that you can go into the category of your interest.

Main content screen and notifications

On the main content screen, my goal was to design an experience that solves the problem of the users I explored during research i.e clear track of the progress of course including —

My classes

• I thought it would make sense to add a calendar in this section so that you can see the dates on which you have a session to attend.
• Clear indication around the date (Blue circle) makes it clearly distinct from the dates on which you don’t have any live classes.
• When clicked upon the date on which you have live classes, you go on a screen with a list of live sessions showing all the necessary details- Time, Mentor name with their picture, and Session title/lesson name.

Adding a calendar makes user’s life easy and helps manage other tasks accordingly.

But how does Online live sessions work?

• Clear indication of ongoing live class gives user the information of System Status which is very important to convey the message to the user that the class is going on live.
• To increase the interaction while learning I added the option of live chats so that learners can comment their thoughts and ask questions so that Mentor can answer them on the live session itself.

Pricing and Payments

I used this psychology bias in designing the subscription screen

My Profile and Gamification

• Self-learning is difficult so I decided to add some spice of Gamification to boost the motivation of the users.
• I did this by adding badges, XPs, and leader board in the app

I divided the profile tab into two main parts i.e. My performance and Leader board.

My performance

• The ranking card shows your overall rank, level you are at, total XPs you have, and also how many XPs you need to get to the next level.
• Next, you have a Statistics card including, Daily and weekly XPs earned and hours watched.
• I also added a pie chart which shows a learning breakdown including how much time you spend watching what type of courses.
• At the end, you have badges earned/unlocked and also the blurred badges with their name and on what levels they are earned.

Leader board

• You can navigate between, Daily, weekly and monthly tabs to see the top 3 learners.
• Other ranks are shown as list items with their name and XPs earned.

But what happens when I reach the next level for eg- Level 20 (Diamond)?

You get a pop up with this delightful badge to cheer you up!

There are other external motivations as to why someone will watch the lessons to level up, as there is more than just earning badges which I will cover in the next case study where I explain how the referral flow for the app works.

Learning and insights

Alright folks That’s a wrap, hope you found it insightful and take away what you liked. If you have any questions, feel free to reach out to me on Linkedin, Twitter, or Instagram.

I thank Abhinav Chhikara for giving me this assignment as a part of the 10k Designers Masterclass.

I would also like to thank Abheyraj Singh for giving me time to time feedback and critique.

Thank you for reading till the end! Did you know? You can hold that clap button for few seconds to give a maximum of 50 Claps, would really appreciate it. See ya!