McCarthy Music

UX/UI (App Redesign)

WHO

  • Jason Cairati
    Lead Designer, Researcher

WHAT

  • An updated and improved redesign of existing music app

WHEN

  • 2023

WHY

  • Improve user flow and experience while updating overall design for current design trends and standard.
A hero image of the GalleryScan being used on an iphone
THE GOAL

Redesign existing app to better reflect updated design standards/aesthetics as well as improve user flow and features when purchasing music in the store.
THE PROCESS
‍
Initial research included a competitive audit, reviewing company data, and testing original design. Persona and user journeys maps were created to help better understand and empathize with the users potential pain points and define the direction to focus on. Through the analyzation of the visual style and user flow of well-known piano apps such as Skoove, Flowkey, Pianote, and others, a color palette and clean visual style was developed while still looking to maintain structure of the previous version of the McCarthy Music app.

PROBLEM STATEMENT
‍John is a busy professional who is interested in learning piano but wants to try the app out before committing.

PERSONA - JOHN


Age: 32
Education: Bachelors
Hometown: St. Louis, MO
Family: Single
Occupation: Electrical Engineer
‍

"I want to learn piano but I am skeptical of the ability of an app to teach me what I need and that it will have songs I'm interested in."
GOALS
Wants to learn to play piano in a limited time frame.
‍
Wants to know what the sheet music will sound and look like without having to make a purchase.
‍
FRUSTRATIONS
Frustrated when he's unable to look at sheet music to have an idea if the piece will be too hard or easy without purchasing.
‍
Frustrated when he is forced into a purchase from an app without knowing if he is happy with the experience.
‍
pain points


LACK OF INFORMATION

Users felt frustrated if they were not able to view an item before purchasing.


USER CONFUSION

Users were unsure of what level music fit their ability level
‍
Research revealed that users were frustrated when they couldn't view or try a product in the shop before committing to a purchase.
STARTING THE DESIGN
After determining the main problem users would be facing, it was time to review the existing design and focus on the two problems of no sheet music preview in the store and no way to try out the music before purchasing. Users desired a way to have a low-commitment option to try out the app and view songs to play. The main focus was finding an easy way to view the score, choose the difficulty level, and an option to try before purchasing.
REVIEW EXISTING APP
Redesigning the presentation of existing sections of the app became a focus. How could we more easily show the user category options while improving the user flow with less screens and easier navigation? 
DIGITAL WIREFRAMES
A redesign of the initial homepage after sign-in was done first. Categories were moved to a side bar for both easy access and to eliminate one screen in the user journey.
Comparisons between Item view in old design and first mock up helped determine how to improve upon the information available to the user. Major changes included sheet music preview, ability to choose difficulty for song instead of separate item, ability to try before buying, and an audio preview.
LOW-FIDELITY PROTOTYPE
This low-fidelity prototype followed the store browsing and try out experience for the user. A primary goal was improving ease of use through combining existing screens into one screen or into a better organized section.
‍
USABALITY STUDIES
A series of usability studies were conducted at both the low and high-fidelity level. Users were given a series of tasks to complete within the app and were observed/interviewed afterwards. Time spent on task was recorded and the rate of user error. After reviewing the data, a number of insights were discovered through this process.
Users were happy to both view, listen, and try out a section of a song before making a purchase.


REDUNDANT LABELING

Users felt the inclusion of both "select difficulty level" along with a title that said the same thing was not necessary to their experience.


AUDIO PREVIEW TIME

Users wanted to know when using audio preview how long the preview would last. A visual representation of this was applied to the next prototype.
REFINING THE DESIGN
After reviewing the data from the usability studies, new information was added and removed such as redundant titles and a visual way to view audio preview length.
VISUAL STYLE
Blue was chosen to promote learning and create a calm environment for the user as well as to stand out from the existing color schemes of competing companies. A color-coded system for difficulty level of sheet music was also chosen with color moving to warmer tones to emphasize increase in intensity/difficulty.
LIGHT OR DARK?
Two versions of the app were designed in both light and dark mode. User testing showed users preferred dark mode which also matches an increasing trend of dark mode across applications for less eye strain, especially at night.
OLD TO NEW
OLD DESIGN
NEW DESIGN

Category pages were turned into a side menu, along with profile and achievements being bundled together for a streamlined view. Improved navigation by over 50% through user testing based on time to navigate between different pages.
OLD DESIGN
NEW DESIGN

Original design kept each version of a song as a separate product with color/music note label. New design uses a color system to show user all available difficulty level for each piece to give the user the option to view all options at once to avoid backtracking for each version of a song. Price can be seen when hovering over each colored circle.
OLD DESIGN
NEW DESIGN
OLD DESIGN
NEW DESIGN

Simplified menus with more options hidden behind settings and moved underused features as well as streamlined the layout to reflect the highest utilized features. Progress bar was added and visually designed off of video streaming services to create a sense of comfort and familiarity for the user.
FINAL DESIGN
The high-fidelity prototype followed the same user flow as the low-fidelity prototype with changes to interface and color coding added to improve navigation and clarity when using the app.
‍
DESIGNING FOR ACCESSIBILITY
‍

Branding colors meet accessibility standards through proper color contrast and font sizes.

Heading hierarchy is utilized for ease of use with screen readers.
‍

Alt text for images and icons have been added.
Note: Future design would include an audio reader option to help visually impaired people learn to play through the same guided system.
FINAL THOUGHTS

IMPACT

Users felt like the new design visually represented a more modern look for the brand and improved the navigation through simplified menus and labeling.

Decreased time spent on main flow by over 40%.

“It's great being able to play through the music a bit without having to buy anything."

‍

WHAT I LEARNED

This project taught me the value of building a cohesive visual design language. Limiting color use to be both an aesthetic choice but also improve the user experience by using different colors as a guide for different behaviors.
NEXT STEPS
The next steps would be building out the other user flows for the app, more testing utilizing a range of techniques, and continuing to build out a full platform that includes guided lessons, online lessons with instructors, and backing tracks to play with certain songs. Developing a mobile app after testing of desktop/tablet version as well.

MORE WORK

Rahma Beauty
Responsive Web Design (UX/UI)
PRESERV
Mobile App (UX/UI)
LINKEDINEMAIL
a link to my email address