Introduction

Many people believe that mastering a new musical instrument has little reputation for adults. Similar to learning a foreign language, learning an instrument is commonly seen as something that must be embedded during the formative (younger) years, otherwise the learner will be hopelessly behind, if not simply hopeless. It is believed that learning becomes much harder past the developmental stage of growth, so many individuals feel disheartened to start learning. As a child, I took a year of piano lessons, yet it was too costly for me to continue, coming from a disadvantaged background.

Now that I am an adult with desires to continue the piano education I once had, I want to help others who find themselves wanting to learn an instrument past their formative years, and especially those who come from impoverished backgrounds and cannot afford traditional music teaching.

Design Statement

With my own personal background concerning the inaccessibility of music, I found that I wanted to create a free-of-charge online music school (conceptually in the form of a non-profit), that includes a sheet music database, lesson booking and matching with a teacher, and pre-recorded lessons.

Therefore, my question is:

How might we design a free, online music learning platform that serves people of all ages and backgrounds, accessible to those of underserved communities?

Competitor Analysis

Heuristic Evaluation

I conducted competitor analysis of similar websites, first through heuristic evaluation. Based on the 10 heuristics/severity ratings from the NN Group, I evaluated two websites: Lessonface, and Blue Bear School of Music to see how they were advertising and designing their services.

I chose Lessonface as a competitor application because this website displayed many features I envisioned to include.

These include:

1. Personal matching with a suitable teacher
2. Reviews
3. Individual pages for teachers with information.

However, I would like to focus only on instrument learning, and emphasize more on the idea that everyone is welcome to learn instruments. I wanted to use Lessonface as inspiration and to help me decide what to build upon.

From analyzing Lessonface & BBSM, I found that I would like to take note of two things:

1. Adding an onboarding feature
2. Accessible, simple hero section & design

Pilot Usability Testing

Following the heuristic evaluation, I wanted to learn more about the potential usability problems Lessonface might've had. I conducted usability testing using the heuristics and issues I highlighted from my heuristic evaluation and created tasks accordingly.

Following the UT, I found that my participant experienced the issues I was testing. I was also introduced a new issue with the website's responsive design, where information was omitted when the window became smaller.

User Research

Contextual Inquiry

After conducting heuristic evaluation and usability testing, I realized that I needed to know more about the behavior, background, and user experiences of my target audience.

I decided to use interview, participatory interaction of the user and observation as my primary research methods. I chose to talk to someone with a background in music and had a piano with learning resources nearby.

I had my subject perform three activities in front of me:

My findings included that having a forum (like Reddit) where people can share knowledge, a feature to digitally write on sheet music + an automatic scroll would be helpful features to include. Additionally, I found through our conversation that not all people have connections to teachers and easy access to materials.

UX Storytelling

Persona + Usage Scenario

I decided on three features I would want to focus on for my personas, Diego and Nidhi.

1. Sheet music database that is accessible, high quality, and free
2. Teacher finding/search feature with a high level filter
3. Scheduling lessons feature with a calendar and confirmation

Low-Fidelity Prototype

I first designed my features, wireframes, and prototype with pencil and paper. Using information gathered from prior research, I was able to start ideating my platform. After sketching out my prototype, I asked a participant to go through the prototype and mark their journey. I also acquired others' feedback on what to change or add for my high-fidelity prototype.

Interface Design System

I used my paper prototype as a reference to create this design. First, I used Figma and created a frame with a custom size. I then laid out my components from the paper prototype. I then created the logo for my proposed service, Musical-u. I decided to go with a cool-toned color palette (purple/blue), avoiding warm tones like red, which is an alerting color, and yellow, which is difficult to design around because of contrast reasons. After coming up with the logo and color palette and checking its contrast ratios, I was able to come up with a fairly high quality design. Then, I made variations according to options I preferred for typography, shape, and light/dark mode.

Link to Figma File with my screen design variations.

High-Fidelity Prototype

After creating my low-fidelity prototype and finalizing my interface design system, I was ready to start designing my high-fidelity prototype, where I could visualize my fleshed-out application. I utilized Figma to first create the design system, and then incorporate it with all of the tasks I have proposed by creating the remaining wireframes. Using the feedback I received from the cognitive walkthrough we did in class with two other students, as well as my impression testing and feedback from the low-fidelity prototype user testing, I was able to create my final designs.

My prototype supports these main features:

1. Signing up + Onboarding
2. Viewing and searching through a sheet music database, markup of sheet music
3. Teacher search and booking lessons through a modal pop-up
4. Searching through the Academy with courses that include pre-recorded lessons

Additionally, my prototype supports:

1. Viewing the homepage signed in/signed out
2. Signing in