UI UX case study: Rhythm — the music masterclass

This case study explains my process, reasoning, and insights into designing an ed-tech app for all music learners. This project was an assignment from 10k designers masterclass.

Background

Now that everyone in the world is staying indoors due to COVID-19, we’ve seen the explosion of many Zoom meet-ups and Live streams. People are looking for new ways to socialize online — whether meeting their friends or meeting new people. By default, we can assume that all “events” will be online for the next couple of months.

“The 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.”

Problem statement

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

Duration: 20 days

Project Type: Solo

Research

🧠 Brainstorming:

Goal: What features can I include in the Music learning app?

The idea behind brainstorming was to jot down as many features as possible**(quantity over quality)** that can be added around the clearly defined goal.

It also helped me record my biases and preconceived notions from my previous experience with ed-tech apps and kickstart the research with fresh eyes.

👨🏻‍💻 Secondary research:

The process began with extensive research in all possible directions to comprehend the music domain. I tried to be as open-ended as possible, and collect maximum data to understand both problem and solution space to design an effective solution.

Most of the secondary research revolved around:

• Understanding how the music learning environment looks.
• Understanding how existing music learning web-based platforms, online schools, and apps function.
• Types of music instruments, genre, varieties of content, teachers, pricing, course duration, etc.

Some of the resources explored:

• Berklee
• Music Pandit
• Takelessons
• FSM buddy
• Skillshare

🧐 Competitive analysis

In competitive analysis, the attempt was to understand the patterns and unique features(if any) amongst similar ed-tech apps and how they function.

Although these apps differ in their domain, experience, and business model, they share similarities in functionalities.

Some of the apps explored:

1. Music Domain

• Yousician
• Masterclass
• Skillshare
• Justin Guitar

1. Other ed-tech domain

• Ted
• Khan Academy
• Unacademy
• Graphy
• Udemy
• Coursera
• Byju’s

Some of the common patterns observed:

1. Onboarding
2. Main content
3. Explore
4. Search and filters
5. Save and bookmark
6. Profile

Further exploration of user reviews in these apps revealed the gaps and user pain points. Hence, an opportunity to address them and create a better experience.

🤝 User interview:

The primary research(user interview) was conducted, on three friends of mine representing the target audience, to understand the mental model of users around:

1. The users’ needs in learning music online.
2. Pain points and frustration faced while learning online.
3. Their experience in learning through other music apps or similar ed-tech apps.
4. Expectations from the music learning app.

Interviewees(target audience):

1. Ashwin: Actively learning and playing the guitar for nine years (offline).
2. Omkar: Actively learning and playing the drums for five years (online).
3. Nihal: Aspiring to learn guitar (online).

Key insights:

1. Users want to learn one instrument at a time.
2. The learning experience is disturbed due to the bombardment of unasked suggestions.
3. Users want to learn at their own pace in an interactive manner.
4. The existing apps are overwhelming, cluttered, and unstructured.
5. The existing apps do not have a proper tracking system of learning progress.

🤔 Summarizing Gaps and frustrations observed from the research:

• The users are bombarded with unasked content causing frustration and getting lost/distracted from the learning content.
• Lack of motivation to complete the course.
• Bad user experience in navigating and finding the right video.
• No option to download the course and stream offline.
• Absence or unclear progress tracking of courses and lessons.
• No categories and subcategories are available, confusing the users to select the right course.

💡 Ideation

The following features are added, after synthesizing all the data from the research, to solve the users’ frustrations and pain points (Human-Centered Design) in addition to common patterns observed in similar existing apps (Familiarity bias):

• Personalization: Creating a personalized learning experience by keeping the music categories independent of each other and letting users learn one category at a time without the interruption of others. Example: The user selecting ‘guitar’ can see guitar-related content only, without interrupting other categories. The user, of course, can choose as many categories as they want to learn and switch whenever desired.
• Progress tracking: a clear tracking of the progress of lessons and courses
• Offline streaming: the ability to download and learn offline
• Live sessions: to increase the engagement
• Gamification: to motivate the users by setting goals, tracking their progress, and rewarding them.
• Payment: Annual subscription for each music category separately.

Information Architecture

Wireframes

Branding

After numerous explorations, the app was finalized to be called “Rhythm — The music Masterclass.”

This app involves multiple instruments, rhythm is one of the many musical elements common in all of them, and therefore the name resonates with any instrument.

The logo visualizes the rhythmic waves representing a segment of repeated movement of sound.

• A darker shade of turquoise is selected as the primary color, a blend of blue and green that represents the characteristics of each color, such as calmness, energy, creativity, and refreshing, which is well suited for the music domain.
• Since this is an educational app, users would be spending more time learning(staring at the screen). A dark mode UI would help users reduce eye strain and use the app for a longer duration.
• Font: SF pro text
• Icons: The musical instruments icons were created to maintain consistency and align with the personality of the product.

Visual Designs

This section showcases each design decision taken while designing the final screens.

Onboarding

Onboarding is the first point of contact for the users in a long journey that begins in the app store. A proper design increases the likelihood of successful adoption and retention-related actions by the users.

Also, the users have a limited amount of time to learn how the product works before actually starting the interaction with it.

The onboarding screens are designed considering the above points.

Design thinking around onboarding:

1. Communicate the value of the app right upfront — motivating users to sign up.
2. Most people perceive images faster than words. Hence, the logical and rational illustrations representing particular actions give out information about specific features or benefits quickly, in an attractive and easily decodable way.
3. Use short, specific, and crisp copy to avoid information overload and provide value to the user in their limited amount of time.
4. The number of steps or slides should be clearly indicated.
5. The freedom to skip the onboarding section and jump right into the sign-up/sign-in screen.

Making users invest their time and effort in personalizing the app by selecting their preferences makes them more likely to feel that the app is now theirs.

Endowment effect: People value something more once they feel like they own it in some way.

Homepage

The design thinking and information architecture on the homepage:

1. Users can learn one category without being interrupted by others for a more personalized learning experience. Additionally, users have the opportunity to flip between categories and add as many as they like at any time.
2. Multiple entries point (types of guitar, genres, and mentor list) to the users to reach the desired content/course seamlessly.

Search

An effective search feature improves the user experience by delivering speedy and accurate results, reducing the risk of users feeling lost, which otherwise would result in cognitive burden and dissatisfaction.

The search feature is designed to help users guide through the seamless search experience and get accurate results.

1. Top searches: this section creates a sense of curiosity among users to explore more varieties in the app other than already known categories.
2. Types and genres: help users make quick decisions by providing multiple options.
3. Sort and filter: this feature again helps the user to do a quick search and get accurate results.
4. Results: the results are displayed with thumbnails and descriptions to help users make a quicker decision.

Main content

Overview

Lessons

Reviews

The main content section solved the problems observed during the research:

• No option to download the course and stream offline.
• Absence or unclear progress tracking of courses and lessons like
• How much of the course is completed/remaining?
• The total number of lessons, and what lessons are you currently on?

Reasons to implement the binary rating method:

It requires very quick and easy action from users in terms of cognitive load.

It allows the product to match future personalized recommendations for the user based on their affirmations, as the binary rating method is behavioral in nature.

Notification

Here the notification center type modal is used where all the notifications land up at one place regardless of their source.

Payment

Selective subscription model:

A selective subscription model allows users to subscribe only to the selected music category avoiding the additional payment to unasked categories.

Ex: An user wanting to learn guitar would pay only for a guitar subscription and get access to all guitar-related content.

The users can add multiple music categories; each subscription is independent of the other.

Reasons to implement a selective subscription model:

1. Research revealed that the existing apps’ subscription model charges the users for all categories together. In the pay-per-use model, the user has to decide before every purchase, increasing the cognitive load and disturbing their budget.
2. This app prioritizes personalized learning; therefore, it made sense to charge only for the selected category.
3. Helps users to pay only for what they want and avoid paying for unwanted categories.

Live classes

My class

• This section is the repository of all kinds of interactions the user makes with the courses (Watch history, bookmarked, downloaded, and explored).
• The calendar shows the upcoming live sessions, which helps users manage their tasks and time better.

Gamification

Gamification is added to boost user engagement, motivate them, and help users learn at their own pace.

The gamification has three sections:

1. Current level

The current level and the number of hours spent in learning give the users a sense of mastery.

2. Progress tracker

The fact is everyone learns at their own pace, and to cater to this; a progress tracker is implemented for users to set goals and monitor their learning progress.

The graph clearly shows the number of learning hours on a daily, weekly, and monthly basis.

• The user can set goals and reminders to help them motivate and be consistent in learning.
• Having personal goals and reminding users to practice music makes the app a lifestyle companion.

Investment loop: When users input something into the product in anticipation of a future benefit, it increases perceived value and loads the next trigger.

3. Achievement journey

This section includes all the received and upcoming rewards to date, giving a sense of achievement to the users.

That’s a wrap!!

Thank you for reading till the end. I hope you found it insightful.
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 Paritosh Kumra for giving me time to time feedback and critique.