UI/UX Case Study: Musescore App Redesign

Sze Leen
14 min readSep 17, 2023

--

🤩ABOUT MUSESCORE

Musescore is a lightweight and user-friendly app designed for musicians of all kinds. It provides an extensive library of musical scores, with around one million scores publicly available. Musescore allows musicians from all around the world to be able to create and share their works, as well as make the learning process exciting and available for all. Hence, it has emerged as a top choice among musicians seeking their perfect score.

***

🎶PROJECT BRIEF:

In this project, the primary objective is to identify the challenges faced by users and develop creative solutions that meet both user and business needs. To achieve this goal, I was tasked to reenvision an existing app and revamp it to cater to a particular target audience.

Project Duration: 2023May ~2023Sep (4 months)

Target Audience: Youths (aged 18–26)

The whole project will be divided into 4 sprints:

  1. Research sprints
  2. Concept Sprints
  3. Usability Sprints
  4. Handover Sprints

😆RESEARCH SPRINT:

This sprint will primarily focus on data collection through interviews and research findings to establish a clear problem statement and create user personas. These insights will serve as a foundation for the development of concept sprint later on.

🎼 Hypothesised Problem Statement

  • For Music students
  • Who doesn’t have the productivity to practice their skills every day
  • Our product is providing a Pomodoro timer for students to help increase their productivity to practice their skills
  • That provides a simple yet interactive timer that encourages students to practice
  • Unlike Forest
  • Our product is a sharing platform with an analytic track on students’ practice time, a scheduler to remind students to practice, records students’ performance, and shares comments to correct their mistakes.

🎼Hypothesised User Persona

— -

🎼Objective of Research

  1. To gain insights on the behavior and goals of interviewees
  2. To get to know about the struggles, frustrations, and thoughts the interviewees have for being a music student
  3. To find out the apps that interviewees use for their music learning
  4. To understand their personal needs and experience with using music apps

🎼Research Procedure

  1. Browse online, to understand the pain points of being a music student
  2. Search the apps that music students usually use, and understand the issue of the app
  3. Prepare the questions in Google form
  4. Find the 3 suitable interviewees and arrange a schedule with them
  5. Proceed to user interviews to understand their struggles and experiences with music apps.
  6. Follow up with the interviewees to collect information that I’ve missed out on during the interview session
  7. Generate the survey findings and insights from the interview.

— -

🎼User Interview(1)

Interview Questions: https://forms.gle/GsyqmHTwz3anaMb9A

Insights:

66.7% are higher-grade students. 33.7% is more towards performance-based

66.7% of interviewees had issues with motivation to practice their music pieces, which matches my hypothesised problem statement. This is due to they had to practice the exam piece for months before the actual exam. So, it gets boring and tedious. So, they would either force themselves to practice or find a change of pace by playing other music pieces.

66.7% of interviewees take music pieces online. Sometimes the music piece online is not appropriate for their level and it does not sound good.

66.7% of interviewees had issues with their rhythm/chords.

— -

🎼User Interview(2)

Interview Questions: https://forms.gle/GsyqmHTwz3anaMb9A

Insights:

66.7% practice 1–3 times per week. 33.7% practice everyday. (It depends on how close their exam is approaching)

66.7% of interviewees dislike scales because it’s repetitive. 33.7% had issues with sight reading.

100% of the interviewees stated that beginner-level needs a lot of motivation to learn and practice new things. Advanced level doesn’t really have anything problem except the exam.

100% of interviewees feel pressured by their practice expectations due to fingering techniques, piano teacher, and slow development progress.

100% of interviewees mentioned the exam pieces get boring as they practice more

100% said most of the exam pieces aligned with their musical interests. But its bound to feel boring.

100% of interviewees watch recordings online to get a better understanding of their exam pieces. It also motivates them to be as good as the recording.

100% of interviewees do find some passage of the exam pieces is hard

66.7% of interviewees had other priorities to focus on, other than their piano. It hinders their practice.

100% find feedbacks from their teachers motivates them

— -

🎼Validated Problem Statement

For Music students aged 18 to 26

Who doesn’t have the productivity to practice their exam pieces.

Our product is an extensive sheet music collection for a variety of instruments. The user can choose their own choice of the music piece

That provides a platform where music students can have a short practice on the exam piece

Unlike Simply Piano

Our product provides a streak and level system that motivates the user to practice every day if they want to maintain the streak. The more pieces they play, the more experience they gain, and the higher their level.

🎼Validated User Persona

😀CONCEPT SPRINT:

🐥Detailed Analysis

After researching some of the music apps, I have compiled a list of three of the best music-learning apps I’ve come across. I examined each of the three music apps, including the pros and cons of their design, information, and experience.

— -

  1. Musescore

Musescore’s is the largest library of musical scores available online. It is being extended by both professional and amateur musicians. Every musician will find the right score and every author will find their audience. Moreover, our community is always there to help you learn and improve your musical skills.

— -

2. Simply Piano

Simply Piano is a fast, fun & easy way to learn piano. You’ll be amazed how much you can achieve with only 5-min practice per day, at your own pace and time.

Once you download the Simply Piano app for free, you’ll be introduced to some piano basics and gain access to selected songs and piano video lessons.

— -

3. Skoove

It’s never too late to start learning to play the piano. Join over 2 million Skoove users enjoying interactive piano lessons. Skoove is for everyone, from beginners to advanced players.

Fall in love with the music — You’ll soon feel in tune with every note, enjoying the rich emotion behind them.

Discover personal feedback — Skoove recognizes the notes you play, telling you what’s right and where to improve.

— -

🐥Competitor Comparison Board

After doing an in-depth analysis of the 3 apps, I have made a comparison among the apps. I did my analysis based on the following aspects:

  • logo & product
  • subscription
  • sign in
  • language
  • supported model
  • tutorial
  • navigation
  • online platform
  • accessibility
  • notification
  • collage
  • Impression
  • user-friendliness
  • navigation
  • app rating
  • design appearance

— -

Feature Proposal

Based on the problem statement and the findings of the detailed analysis, I’ve listed 3 feature proposals that I think would be helpful when music students use the application to have an exciting learning experience; Streak, Leaderboard, and Task tracker.

— -

🐥 Sitemap

This sitemap consists of five main pages: scores, Mission, leaderboards, and profiles.

Link: https://www.figma.com/file/iORmtiDfPwLgVgcG2cZaLG/SITE-MAP?type=design&node-id=401%3A211&mode=design&t=19RtPUbEY17l4L2I-1

— -

🐥 User Story Map

The user story map serves as a framework to comprehend the user journey and pinpoint the primary functions. Its purpose is to maintain the practice consistency within Musescore applications.

Link: https://www.figma.com/file/veKhRqfu5UUdF9G0e7N4K4/STORY-MAP?type=design&node-id=206%3A100&mode=design&t=NOLRIbgIy3KEltWn-1

— -

🐥 Wireframe

Figma: https://www.figma.com/file/mVZzCAvCwPOg4myvBWZPeZ/wireframe?type=design&node-id=0%3A1&mode=design&t=RVVRBTAMksMM5FMe-1

wireframe design & prototype

— -

🐥Concept Test

I’ve conducted this user testing in order to gather addition suggestions and feedback from the interviewees. This is to further improve the user experience of the low-fidelity prototype before moving on to the development of hi-fidelity prototype.

Interview Question: https://forms.gle/ZaGQSgaL9C2dKE9CA

Figma Prototype Link: https://www.figma.com/proto/mVZzCAvCwPOg4myvBWZPeZ/wireframe?type=design&node-id=44-202&t=TJ7sKslPW6PvqFOw-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=44%3A202

— -

🐥Concept Test Result

— -

🐥User UI flows

The user UI flows guide me to ensure the user experience of the prototype is both seamless and user-friendly.

Link: https://www.figma.com/file/qMghmsdszzK5mw4FQX9BfC/User-Flow?type=design&node-id=0%3A1&mode=design&t=6HfZwL96doiHIBWB-1

🙂USABILITY SPRINT:

👻Moodboard:

Before moving on to the development of the Hi-fidelity prototype, I have made a moodboard with a compilation of typography, colour palette, layout, button design, animation, and icon design. The moodboard helps me to have an overall idea and inspiration for the design of my app

The objective is to redesign Musescore into an app that not only serves as a valuable educational tool but also promises an engaging and delightful user experience. The following are the design keywords of the app.

  1. playful
  2. minimalist
  3. organic

— -

👻Hi-Fidality Screens development:

The design process consists of two phases. The first phase involves the exploration of various shapes, colors, and layouts to generate creative ideas and concepts. In the second phase, the focus shifts towards establishing more defined and specific design styles. Below, we’ll compare the designs created during these two phases to illustrate the progression and evolution of the design.

Phase 1 (week 8–11):

week 8
week 9
week 10, 11

Phase 2 (week 12–15):

week 12
week 13,14

— -

👻Internal test Report :

Conducting an internal test allows me to gather feedback from my classmates before moving on to the usability testing phase. This initial feedback helps me identify potential issues and make necessary improvements to the app’s design and functionality before it’s subjected to broader user testing.

Google form: https://forms.gle/j4wG8UrK9VEUzvBE8

Report link: https://www.figma.com/file/gqg7GAF5BOdgB3bqgKrATL/Internal-User-Test?type=whiteboard&t=SLG4o1NOCIwPIud7-1

— -

👻External User Test:

Once the high-fidelity screens were completed and finalized, a usability test was carried out. This test aimed to refine and improve the app’s design, information presentation, and navigation to ensure a more user-friendly and effective overall experience.

Google form: https://forms.gle/CLkQraEWkrnshzBu9

— -

👻Usability Test Report:

Summary Feedback

  1. Task 1

100% manage to complete the task

88.9% of users find its easy to complete the task

100% find the design/layout look pleasing

100 % agree that the buttons and icons are clear enough

100 % agree that the informations are clear enough

2. Task 2

100% manage to complete the task

100% of users find it’s very easy to complete the task

100% find the design/layout look pleasing

Only 44.4% agree that the buttons and icons are clear enough while 55.5% disagree.

100 % agree that the informations are clear enough

3. Task 3

100% manage to complete the task

100% of users find it’s very easy to complete the task

88.9% find the design/layout look pleasing

100 % agree that the buttons and icons are clear enough

100 % agree that the informations are clear enough

4. Task 4

100% manage to complete the task

88.9% of users find it’s very easy to complete the task

100% find the design/layout look pleasing

100 % agree that the buttons and icons are clear enough

100 % agree that the informations are clear enough

5. Task 5

100% manage to complete the task

88.9% of users find it’s very easy to complete the task

100% find the design/layout look pleasing

100 % agree that the buttons and icons are clear enough

100 % agree that the informations are clear enough

6. Post test

88.9% of users are satisfied with the overall experience

88.9% of users agree that is easy to navigate through the app

88.9% of users would frequently use the app

— -

Action Plan:

  • Task 2:

Change the icon for the dailies button because some of the users said its not clear enough.

🫠 HANDOVER SPRINT:

This is the final sprint to compile the work for handover. The collection below are components that will guide future designers with clear guidelines and standards.

👾 Style Guide

The purpose of a style guide is to provide clear and consistent guidelines on how to design, format, and present various elements of content, branding, or communication within an organization or project. It serve as a reference for other developers and helps to maintain the brand identity and design consistency.

Figma link: https://www.figma.com/file/vgKb8ubqASq5PPpbhnuXbX/Style-Guide?type=design&node-id=12%3A2697&mode=design&t=NRF3W0IF1NJYoWv5-1

— -

👾 Product Roadmap

The product roadmap is created to outline the strategic development plan for the app. The roadmap covers the whole project, which has divide into 4 sprints as shown below:

— -

👾 Final Screen

— -

👾Product Mockup:

📝 Final Thoughts:

The learning curve throughout the semester is interesting. While we have prior exposure to UI/UX design in our foundation studies, this UI/UX course is rather different. It requires more in-depth research about the topic, more interviews, and extensive analysis in order to create a seamless and user-friendly design. It involved a continuous cycle of interviews. redesigns, and refinement. It's a lot of back-and-forth. But I am quite satisfied with the outcome I achieved.

Even though I am not really inclined towards UI/UX design, I’ve come to appreciate the progress of the development of an application. This course gave me valuable insights into app development and sharpened my UI/UX skills. Additionally, I find Figma to be a great software for documentation and designs. Overall, it has been a rewarding experience.

Lastly, I want to extend a special thanks to my lecturers, Jeremy and Yi Chyuan, for giving lots of useful advice and making my learning experience enjoyable. Also thanks to my classmates for giving suggestions and for participating in all the endless surveys 😂

--

--