Skip to content

Case Study

Musync Catalog

UI/UX Designer, PMFebruary 2024 – May 2025
Musync Catalog on a tablet, showing the Music Scores page with a filter sidebar and a list of scores, each with Add to Library and Purchase buttons.Musync Catalog on a phone, showing the mobile Music Scores page with search, a filter button, and score cards with Add to Cart and Add to Library buttons.
1

Overview

What is Musync Catalog?

Musync Catalog is a web store for anybody to purchase music scores or subscribe to add music to the Musync app.

What is the problem?

For the Musync app to make sense, there needed to be scores that musicians could readily access in order for the platform to be usable. This prompted the company to formally create a web store to facilitate this process.

What is the goal?

Have a web store for music scores to be added to the Musync app or downloaded to a user’s personal device.

Who are the target users?

The target users are simply Musync users. Musync aimed to have this platform be used by as many users from the mobile app as possible.

2

Role

UI/UX Designer, PM
February 2024 – May 2025

Responsibilities

  • ▪Led the UI/UX design team
  • ▪Collaborated with CEO and CTO to capture vision
  • ▪User research, data modeling, information architecture, prototyping, visual design system, creation of a Stripe/purchasing model, and architecting structure and backend communication with Musync Admin
  • ▪Managed design-to-dev handoff and sprint planning
3

Research

Goal of research

We conducted a brief audit of existing e-commerce stores and how the structure would work for our website. These included sites like MuseScore, JW Pepper, Hal Leonard, and IMSLP.

  • JW Pepper
  • MuseScore
  • Hal Leonard
  • IMSLP
MuseScore's sheet music browse page: a search bar and navigation across the top, a sidebar with filters for popular tags, instruments, and difficulty level, a banner for MuseScore Studio, a row of New playlists such as Trending songs, Film Music, and Video Games, and a Best of MuseScore row of sheet music thumbnails.

Key findings

What we found was that the strongest candidate from our research was MuseScore, which had an immense library of sheet music and an established purchase/subscription model.

4

Define

Key insights

1

Ability to add a score from the catalog to a user’s Musync library.

2

Robust search and filter mechanism for quick score retrieval.

3

Subscription and purchase capability.

4

Mobile and desktop friendly experience.

Problem statement

“How might we design a mobile and desktop experience that enables any user to find, add, subscribe to, and purchase music scores?”

5

Ideate

Wireframing

These drafts of wireframes and low-fidelity mockups were meant to lay out the organization of key components like the filter, search bar, score listing, payment screens, and confirmation of checkout. The goal was more function than design at this stage.

Store wireframe: a sidebar with genre and part filters, including string instruments like violin, viola, and cello, next to a search bar and a grid of sheet music listings, each showing a title, composer, and number of parts.
Score listing
Score detail wireframe: a sheet music preview beside the title, composer, arranger, parts, price, description, and an Add to Cart button, followed by a score overview table and a list of other versions to view.
Score detail
Payment wireframe: a Checkout, Payment, Confirmation progress bar, a credit card form and billing details fields, and an order summary with subtotal, taxes, total, and a Pay Now button.
Payment
Confirmation wireframe: the completed progress bar, a message that the order is confirmed and the items were added to the Musync Library, the two purchased scores with prices, billing details, and the order total.
Confirmation

Information architecture

From our initial wireframing, we were able to come up with a model of important screens and sub-screens that users would interact with. We highlighted Score, Account, Orders, Your Library, and Cart to be the major functionalities of the app, with purchase/subscription being the secondary action.

Musync Catalog information architecture: Launch Catalog leads to Login, then to five main sections. Scores: search, filters, sort by, and view, where viewing lets you add a score to your library or purchase it. Account: edit profile, edit payment method, and manage subscription. Orders: add to library and download. Your Library: purchased scores, search, sort by, score/folder management, and add, where adding lets you upload MusicXML or create a new folder. Cart: payment portal and remove score.
6

Design

Responsive component library

Musync Catalog UI components: the top navigation with Scores, Account, Orders, Your Library, a cart with an item count, and a profile avatar; score cards with a preview, arranger, composer, tags, a Basic subscription badge, and Add to Library, Purchase, and Add to Cart buttons; Basic and Advanced plan badges and a selected tag chip; a Remove from Library confirmation dialog; a saved Mastercard row; and Add, score, and folder menus with upload, new folder, move, and delete actions.

Typography and color palette

As with the Musync mobile app, we wanted to keep the existing typography and color palette. As a result, we kept Nunito for the font family. This ensured consistency across platforms.

H1Musicians Are Awesome
H2Musicians Are Awesome
H3Musicians Are Awesome
BodyMusicians Are Awesome
CaptionMusicians Are Awesome
MenuMusicians Are Awesome
ButtonMusicians Are Awesome

Main

Background
Header
Primary
Secondary
Button
Selected state
Drawers/Modals
Filter/Link
Empty textbox

Accents

Brown
Light brown
Red
Light red
Green
Light green
Yellow
Light yellow
7

Final Designs

The final designs showcase the major screens with an emphasis on ease-of-use, robust navigation through search/filter/sort mechanisms, simplified purchasing portals, and cross-functionality with the Musync mobile app through the My Library section.

Music Scores page: a navigation bar with Scores, Account, Orders, Your Library, and a cart, a filter sidebar for instruments, genre, ensemble, and subscription plan, and a searchable list of scores, each with composer, tags, a Basic plan badge, and Add to Library and Purchase buttons.
Music Scores
Score detail page for Moonlight Sonata: a large sheet music preview beside the title, composer, price, an Advanced plan badge, Add to Cart and Add to Library buttons, and a details panel listing genre, ensemble, instruments, subscription, and description.
Score detail
Your Library page: a Purchased Scores banner prompting you to add them to your library, a search bar with Sort by and Add buttons, personal and shared folders, and saved scores, with filters in the sidebar.
Your Library
Orders page with an expanded order listing three purchased scores, each with a price and In Library or Add to Library and Download buttons, followed by the subtotal, taxes, and total, and a collapsed earlier order below.
Orders
Cart page listing three scores, each with a Basic plan badge, price, and delete button, next to an order summary with subtotal, taxes, total, and a Continue button.
Cart
Account page with a profile photo, name, email, and instrument tags, an Edit Profile button, a saved Mastercard under Payment Method, and the Basic plan with a Manage Subscription button.
Account
8

Reflection

This project took many iterations to become a fully-fledged platform. And as such, I believe I learned a great deal about e-commerce sites through working on the Musync Catalog. I learned about subscription and purchasing on a web store, how music scores would be visible and organized, and cross-platform communication with the mobile app.

The case study above offers but a glimpse of all the hours my team and I put in to make this project come to fruition. As in the mobile app, I’m incredibly grateful for Musync, especially to Ismail Husain and Javed Husain, for giving me the opportunity to put on so many different hats and grow as a working professional.

Thank you so much for reading this case study and taking the time to go through my work.

See more work