Spotify Sandbox

 
 

Spotify Sandbox

spotify.com

 

Role

Product Designer

Responsibilities

Design IC (End-to-End)

Team

Variable x-functional teams
Solo designer

 
 
 

Tinker, test, triumph

Various experiments around personalization, formats, and flows that I worked on in my time at Spotify.

 
 
 
A world where marketing website and web player are one and the same.

A world where marketing website and web player are one and the same.

 
 

Site as player

70% of people coming to spotify.com claim they’re trying to listen to music. Examining the site’s logged out experience through a product lens — HMW we design a site where music is one click away? — we did an exploratory pass at a merger of the marketing website and the web player.

This union of products brings content to the forefront, introduces UI before registration, and provides contextual triggers to sign up.

 
 
 
Web player walkthroughs targeted at increasing retention and teaching less savvy users.

Web player walkthroughs targeted at increasing retention and teaching less savvy users.

 
 

Task-based onboarding

Over half of users who register on the web don’t play a song in their first week. When surveyed, many new users alo specifically request guidance on how to use the product.

With these insights in mind, we designed an opt-in, task-based onboarding flow anchored around actions that are proven to be correlated with retention. Tooltips provide guidance in context of actual behavior, and nudged users towards tasks that correlate with retention.

 
 
 
Diary studies with families were supplemented with in-home interviews in the US and Brazil.

Diary studies with families were supplemented with in-home interviews in the US and Brazil.

 
 

404s and heartbreaks

Our old error pages had a picture of a sleeping guy that looked like it was from 1995 and copy that said “Shhh...this page is sleeping.” No links, no troubleshooting, bad vibes overall.

For hackday, I partnered with a UI Engineer to design and ship two new animated pages for 404 and 500 errors. They’re music-themed and people on Twitter seem to get a smile out of them.

 
 
 
Line breaks in Japanese are not as fluid as in Western languages, making responsive page design a tricky venture.

Line breaks in Japanese are not as fluid as in Western languages, making responsive page design a tricky venture.

 
 

Launching localized experiences

When Spotify launched in Japan and Arabic-speaking countries, our site needed to be updated to support strict character configurations and right to left text.

I worked alongside a small engineering team to adjust templates and define design guidelines around language and cultural scalability, enabling us to go live in these major new markets.

 
 
 
Lots of people use the web player at work or school, making it prime for simple background streaming.

Lots of people use the web player at work or school, making it prime for simple background streaming.

 
 

Building a better radio

In tandem with the native Stations app, I designed a large-screen radio experience targeted at the segment of web player users who rely on the player for music at school or work ( internet restrictions + shared devices!).

Given this user group’s context, a background listening session — and drastically simpler UI — are the perfect fit.