Musical-u Case Study
Introduction
Many older adults 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 the feature to personally match with a suitable teacher, reviews, and 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, I found that I would like to add an onboarding feature and to have a less cluttered hero section.
I chose Blue Bear School of Music because it is a nonprofit, so the organization naturally has the same goal as me for my project idea. Although I don't foresee my project working with an actual nonprofit, I still think there are parallels between this organization and my proposed project. There is a lot of room for improvement for Blue Bear's website, design-wise.
There were many design choices that could be improved. On the surface, there are many issues of color contrast, textual hierarchy, website organization, and button styles. From my research, I decided that my project will focus on having smarter design choices for accessibility.
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.
| Heuristic Being Tested | Usability problem | Task scenario |
|---|---|---|
| User control and freedom | Cannot remove instrument category when searching for music lessons, confusion | Finding a clarinet teacher, then changing to flute teacher |
| Consistency and standards | An element that appears to be a button but is not a button | Find the FAQs page and phone number from the top navigation |
| Recognition rather than recall | Important links under nested menu | Find the "About" page under the nested menu |
Below is the UT session video on YouTube. I used Zoom to record the session between me an my participant on my PC, while my participant was sharing his screen through Zoom on his laptop.
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:
| Activity 1 (general) | Activity 2 (music learning) | Activity 3 (music learning) |
|---|---|---|
| A general activity with a desire to work on a skill | Learning/brushing up on an instrument | Learning a song on an instrument of choice |
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.
- Sheet music database that is accessible, high quality, and free
- Teacher finding/search feature with a high level filter
- Scheduling lessons feature with a calendar and confirmation
I created two personas with their own stories to tell. By writing Whys (Why are they using this product?) and Hows (How are they using this product?), I was able to insert myself into my potential users' shoes.
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 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:
- Signing up + Onboarding
- Viewing and searching through a sheet music database, markup of sheet music
- Teacher search and booking lessons through a modal pop-up
- Searching through the Academy with courses that include pre-recorded lessons
Additionally, my prototype supports:
- Viewing the homepage signed in/signed out
- Signing in
Link to Figma Prototype, clickable prototype of the tasks
Conclusion
What I have learned
Throughout the process, starting from competitor analysis to designing my high-fidelity prototype, I learned a lot about UX design and research. The extensive research that was put into this project every week made me realize how in-depth this process could be. User interface design was in actuality, very much more research focused than design focused. The amount of testing and iteration that was done during this 9-week process was much more than I expected, so this class was really fulfilling.
I was able to fulfill my goal of creating an entirely new application and designing all of the features I initially wanted to design. I also received a lot of feedback from testing participants.
It was my first time going through heuristic evaluation, and I felt that I learned a lot about how I should go about competitor analysis. I was able to find a lot of issues with similar platforms that I would like to avoid. Then, it was my first time conducting a field study and contextual inquiry. Unfortunately, I did it through Zoom this time around, but in the future, I would like to visit the participant’s place in person. It was also my first time drawing a low-fidelity prototype, and completely dismissed options to go back, simply because I initially believed that a browser back button would suffice. I decided to add breadcrumbs and easy ways to go back to my high-fidelity designs. Lastly, it was my first time conducting a cognitive walkthrough and learned a lot about how I can do testing that is shorter in length. Overall, my project turned out well and the research and insight I put into it really shows in the final product.