New Playing View
Designed at Spotify in 2019
The Now Playing View is one of the most popular destinations on Spotify. However, over the course of many years, it had gotten inconsistent, hard to work with and out of date in general. The redesign I did turned the page into platform and provided a much better user experience.
My role
Sole designer • Wire-framing • Prototyping • Visual design • UI specification • Continues quality assurance
The team
Me as design lead • PM • Squad of front and back end engineers • User researcher • Data analyst
The problem
At the start of the project we had identified 3 opportunity areas:
Unevolved: Utility driven experience, unevolved beyond simple playback
Complex: huge codebase that’s hard to maintain
Discord: More than 15 different versions, with no cohesive design.
See examples below:
When we investigated the usage of the previous experience, we notices that some features that had been given prime screen real estate was hardly ever used.
Through user research on the previous experience, we identified a number of key areas of improvements:
- Actions differ across different Now Playing View and are not understood by users
- New users struggle to access the NPV, due to the Now Playing Bar being hard to interpret
- NPV context menu is a popular destination
- Switching play contexts is a jarring experience as the UI is changing
Explorations
While I created lots and lots of iterations, I prototyped 3 of them in Framer and brought them to user research.
Tip: try the above prototypes yourself by opening the links and playing Today’s top hits
I boiled down the challenge to the following issues:
- How to onboard people to the Now Playing Bar?
- What are the primary, secondary and tertiary actions?
- How do we make it clear the Now Playing View can be scrolled?
The final solution had an onboarding with a continuously bouncing Now Playing Bar until the user taps it. The first time the Now Playing View opens, it would automatically scroll down and back up again to let people know there there is now more to the NPV than before.
In terms of the actions, we prioritised feedback signals and shuffle controls and moved repeat and queue into the context menu.
Solution
I created a template that was flexible enough to cover everything playable on Spotify yet rigid enough to provide a consistent experience.
With the template, we turned the Now Playing View into a platform that anyone could easily use for their particular feature. In order to ensure long term constancy, I provided guidelines with Do’s and Don’ts.
In addition to providing the template and guidelines for how to use it, I also defined the default Now Playing Views for all context types Spotify support.
Results
After three user research sessions and two AB tests. We shipped the new Now Playing View to our users Q1 2019.
The New Now Playing View was tremendously positive for Spotify with:
- 0.5 percentage points increase of week 2 retention
- 0.4 pp sustained retention increase
- 4.2 pp cumulative music consumption per user increase
- 1.7 pp increase of playlists created
- 8 pp increase in songs added to playlists
- 6.2 pp increase in users who opened the Now Playing View by tapping the Now Playing Bar.