top of page

The

Challenge

Chapter 1 –––––– WHAT I WAS SOLVING

  • Musora's students struggle to find their favourite songs and artists/bands on the "Songs" page.​

  • There is no existing favourite feature currently available in the app.

Designing a Feature to Improve Student Engagement Music
E-Learning App

Context
Musora.com is an online music education app on a mission to create more musicians and keep them playing longer. Everything they do is for their students. They serve membership-based communities with 80,000+ drummers, pianists, guitarists, and singers through step-by-step lessons, interactive practice tools, and 1000s of popular songs. We're growing fast and looking for new teammates who want to grow with us.

Note: This is a personal project I created for Musora's app. I felt this was a great addition as it would help me find my favourite songs more easily.

Musora

2023

Team 

PJ Zito (Product Designer)

Tools

Figma

Skills

UI Design, Prototyping 

Goal

I aimed to add a "favourite song feature" on their song page and improve the user journey and web app interface to provide Musora's (Drumeo) students convenient access to cherished music, aiding progress tracking and goal achievement while enabling personalized practice. 

 

Deliverables

Takeaways

Chapter 6 ––––––  LEARNINGS

I learned that :

  • The "why" is more important than the "how." Qualitative data is precious as it tailors the website to our audience's needs while ensuring we avoid driving the customer experience by making assumptions.


     

  • Communication, communication, communication...
Transparency, collaboration and trust between departments (Product, Engineering, Design, Marketing) are critical to the success of any web project.
     

  • SEO has a significant role in a website refresh for risk factors. It's essential to find a balance between UX and SEO.
     

  • Having a solid visual foundation and a web design system is very valuable. It gives consistency to our product and improves our customer journey experience; it enhances workflow between designers and the dev team; it makes it easier to design with less decision-making (helps focus on usability and problem-solving = what matters).

Old Interface vs New 

PROPOSED SOLUTION 

After

Before

  1. Integrated a new tab to allow users to access their "favourite" and "in progress" songs

  2. Added a favourite icon which enables users to add the song to their favourite category with one simple click

  3. Updated the add-to-list icon to match the rest of the app

  4. Added a sharing feature to encourage users to share their songs with their mentors and peers

  5. Reduced the album size cover to optimize real estate

  6. Added a table header to improve discoverability interactivity and facilitate navigation

Goals

Chapter 2 –––––– WHAT WERE MY OBJECTIVES

  1. Improve the overall user experience and web app interface to provide Musora's students (drum musicians) convenient access to cherished music, aiding in progress tracking and goal achievement while enabling personalized practice. ​

  2. Enable users to share their songs with others and personalize their practice.

  3. Improve and polish the user interface to encourage overall user engagement and song discoverability.

HI-Fidelity Designs

Chapter 4 ––––––  PROPOSED SOLUTION

  • It was a VERY successful website launch with no complications.
     

  • I completed all the page designs in 6 months, which allowed me two months to support our engineers and complete the QA process before website deployment. (total 8 months project)
     

  • I designed a cohesive website brand experience that matches our new brand identity and significantly increased business revenue and platform adoption.

My Process

Chapter 3 –––––– WHAT'S NEXT?

01

Defined the 5 W

I asked myself the typical 5 W questions (what, who, why, when and where) questions as it supported my design thinking process and helped me explore different avenues and appraoches.

02

Gained clarity on Musora's mission

I did more research on the company and learn more about their brand, values and missions.

03

I defined User Personas

For this challenge, I didn't have a lot of data on the audience. Therefore, I worked with assumptions and asked myself what characterizes our audience and their motivations.

04

I created user stories

By creating user stories it allowed me to think very broadly, using design thinking principles and trying to empathize with our target audience to craft various solutions. 

05

I proposed 3 solutions with respective evaluations

I crafted solutions by creating user journeys and flows which helped me design potential and pleasable solutions. I created a list of pros and cons for each approach and I then created an effort/impact matrix to evaluate its implementation. 

Prototypes

Chapter 4 –––––– IN ACTION

Using AI and data, we can envision adding a "Recommended for you" section on the song page in the future, which will furthermore increase user engagement and discoverability of new songs for them to practice.  

Desktop Prototype

Mobile Prototype

Curious to learn more?

HOW I GOT THERE

More in-depth details about this project are available below.

bottom of page