Verdi: Classical
Music Streaming
for Aficionados

Verdi: Classical
Music Streaming
for Aficionados

Context
My Role:
Product Designer


Team Size:
Individual


Deliverables:
Validated MVP


Time Frame:
2 Weeks


The Problem:

Classical music streaming grew 46% in 2018 vs the previous year. A study by MIDiA showed that 30% of classical music listeners are under the age of 35.

Popular streaming platforms still sort classical music through the categories we use for pop music such as artists and albums while ignoring important details like performance details and structure of multi-movement pieces.

Listeners of classical music need better products that support their listening habits as well as their desire to know the full background of the pieces.

Background:

Getting to Know Our Listeners 🎻

Classical music aficionados are well-versed in their understanding of classical music, and have different needs/preferences than the pop music fan.

-They often know what pieces they are searching for (though they enjoy discovering new music all the time)

-They tend to be very interested in the background, personnel, and structure of the pieces.

-They often play instruments themselves and study music theory/music history.

-They complain of suboptimal experiences when using their streaming apps for listening to classical music.

Classical Structure & Metadata Needs Some Love 🎼

Classical music is usually composed in the form of a symphony, concerto, or similar work, most of which are comprised of multiple movements.

Most music streaming apps are organized around songs and albums, while multi-movement symphonies are not well considered.

Classical music also has important metadata such as the composer, orchestra, lead violin, conductor, and arranger/version. This information is equally as important as the recording for many enthusiasts.

Classical Music Has Ugly Album Art 🥴

Another pain point for those who frequently listen to classical music is that the album art is usually quite ugly and low quality, usually cobbled together to fill the requirement when uploading or designed with a very low budget.

Many collections of classical music are uploaded as third party compilations and have even worse artwork since they were not released by a record label or official institution. It's a shame that we currently represent some of the greatest musical works ever achieved in human history with "afterthought" quality artwork.

Constraints: Don't Break the Law

Key Constraint: Our product must operate within current streaming laws and capabilities.

The final product must be able to publish music in a similar way to existing platforms through the permission of record labels, music library owners, and independent artists.

The final product must not violate copyright law nor allow activities like exporting mp3's, unverified uploading, unlicensed work performances or remixes, etc.

I Love Paper Prototyping!

Home Screen

The home screen is designed as a discover feed with plenty of CTA's for the user to start listening to different features. At the top of the viewport is a featured track, album, or playlist.

Player Screen

The main considerations with the player screen were to have accessible controls for the track, offer additional background and context for the piece of music, and provide a beautiful interface that solves the problem of "ugly album art."

Everything You Want to Know

The final player screen features an expandable "About This Work" section, a window showing the progression of movements within the greater work, and music controls at the bottom.


Hiding the Album Cover (No More Eyesores)

To solve the album art problem, we decided on a uniform and responsive typographic layout to display the name of the "parent work" (i.e. the name of the symphony) and performer info at the top.

The name of the individual track is shown in the lower third above the controls. The album art is purposefully hidden and only visible in the details window.

Waveform Progress Bar

"Is this the piece I'm looking for?"

One drawback of discovering classical music via an app is that there are a lot of calm, quiet interludes and it is often difficult to find the "main theme," i.e. the main melody which you'll recognize.


A Mini Waveform Bar Hints at the Exciting Parts

By implementing a scrubbing progress bar with a variable-width waveform, the listener can see and skip to the exciting parts of the track if they desire.

Keeping the thickness of the bar close to the straight-line style used by Spotify and Apple Music, I was able to maintain balance and scale within the controls panel.

Design System
Re-Thinking the Composer Playlists

The purpose of the composer-based "Discover" playlists is for customers to be able to jump in and start listening to a certain composer, whether that's with prior familiarity or unfamiliarity with their work.


Tabs to Switch Between Single Tracks and Entire Works

Our original plan was to offer tabs to alternate between "Entire Works" and "Single Tracks." This would have allowed the listener to either view the composer's most famous individual movements, or their most popular symphonies, concertos, and sonatas (which are made of multiple movements).

Accidentally Overwhelming our Novice Listeners

After putting this feature through qualitative user testing, it became clear that the more novice listeners were easily overwhelmed with so many options, as they just wanted to start listening and didn't always know what the difference was between a single track and an entire work.


Savvy Listeners Also Didn't Find it Useful

Even while knowing the difference, the more savvy listeners also felt overwhelmed by the tabbed playlists and preferred a more simple approach.

After these testing sessions, it became clear that moving to a single-tab playlist was the best path forward.

Revised Composer Playlist after removing tabbed layout.

High Fidelity Design & Interactions:
Discover Feed with Horizontal Scrolling
Mood-Based Playlist Menu
Player Window
Playlist Actions

More Projects: