BACKGROUND

Spotify is the world’s biggest audio and music app with 600 million monthly active users. The company is worth more than 60 billion dollars and it is also a beloved global brand.

In order to serve the people who contribute to the whole ecosystem, Spotify hosts several public websites: Spotify for Artists, Spotify for Podcasters, Spotify for Advertisers, and Spotify for Developers. Each of them represents Spotify publicly in their corresponding global community and it matters to Spotify’s overall brand.

“Spotify for Developers” – developer.spotify.com – represents Spotify in the world’s developer community, and it is visited by millions every year, including
3rd party developers, internal teams, and official partners that want to harness the power of the world-famous Spotify API.

But for many years, the original website (below) hadn’t gotten any updates and started to become old-fashioned in terms of style, structure, and tech stack. It simply doesn’t represent Spotify’s brand as an innovative and modern company anymore.

I was given the responsibility of making a complete makeover of “Spotify for Developers” as the sole product designer and user researcher. I would need to come up with a new look, new onboarding, new documentation, a new community, and a brand-new dashboard, from interviewing users to pixel-perfect designs, in a few months.

RESULT

I worked with a team of talented engineers, developer advocates, and managers to make this a reality. When the new website was released, it won raving reviews from the developers in Spotify, our partners, and the external community. The website even won an accessibility award.

“This is more welcoming to me, to be on the portal and feel like I am being taken care of. It endears me more to the API… You enriched and nourished something that should exist on every platform.“
– Lee Martin, Power User

“The old version was very pragmatic, but this is a JOY to use.“
– Mark Koh, Machine Learning Engineer, Spotify

The “matching highlight” UX of the API where the users can click on a line of reference to see a code sample, and click on the code sample to see its corresponding reference is considered a revolutionary “wow feature“ in the industry, which had never been seen on developer portals before including Stripe, Apple, and Google.

Below is the trailer video with this feature emphasized:

DESIGN PROCESS

So how did I approach the project and how did I solve problems?

Below is my design process following a formula I developed 10 years ago when I designed my first app Instabridge, which I apply to every product I have designed ever since.

1: EYE ON THE END GOAL

A developer portal is different from other end-user-facing websites because it has an amplifying effect – when the partners, internal teams, and 3rd party developers use the APIs, SDKs to make a new product, it has the potential to generate millions of monthly active users for Spotify. So when we make user experience smoother for the portal’s users, we are not just making one user’s experience better, we may make millions of users’ experiences better.

On the other hand, tools for developers normally don’t get too much “design love” simply because developers are capable users who can figure out how to use a digital product despite painful user experiences.

We set out to change this. We wanted to make a developer portal where developers’ experiences are attentively cared for and their efficiency is enhanced. In the end, what we want to achieve is to “unleash creativity”.

2: DESIGN FOR EMOTION

I always believe in the power of “Design for Emotions”: the best products don’t just solve problems, they build love relationships. Great products are not just the fruits of useful functionalities, they are the triumphs of psychology. 

A developer website is no exception.

Branding

Designers generally agree that it is always a daunting moment to stare at a blank canvas when we have to come up with something striking and meaningful. It is more so when one has to come up with something brand new for a public Spotify website, which will be visited and judged by millions of people.

The scary thing about a blank canvas is its infinite possibility. Just as trying to find a way out in a vast forest, I had to find a direction and narrow down my search.

A strategy I use every time is to go back to the definition of a “brand”: the feeling people have when they think of a name. With the north star “unleash creativity“ in mind, I decided the key feelings I want people to have when they think of “Spotify for Developers” are:

• Energy – explosive inspiration

• Creativity – the urge to try something new

• Fun – one can play with ease

The metaphor of API also brought in key inspiration.

The API documentation is no doubt the most important part of the website. It serves as a manual, or a dictionary of how the API works.

Plugging in APIs to various applications is normally described as plugging in electricity. So I designed a yellow-green line that leads to the call-to-action button “see it in action”, which symbolizes plugging a power cord into a machine. 

There are 3 layers of metaphor behind the new design:

1. Plug in the API (electricity cord) and unleash creativity (confetti)

2. The colorful dots look like disco ball lights – music and dance

3. Outer space – infinite possibilities, a theme a lot of developers like because of pop culture

On top of fitting meanings, the entire pattern of a curvy line and colorful dots brings explosive energy and a sense of fun. It is interesting to look at and unique enough to remember.

The design of the confetti explosion also coincides with the name of Spotify because the confetti looks like spots: Spot-ify. 

I feel grateful for the amazing Spotify design system. I had such fun myself playing with its beautiful colors.

Inspired by Spotify’s tradition of telling powerful stories with statistics, I took the UX writer role and changed the tagline from “Build experiences for millions of music lovers with playback, personalization, and much, much more“ to “Build with Spotify’s 100 million songs, 5 million podcasts and much more”. It becomes more succinct and memorable.

Onboarding

I wanted to make the first impression as big as possible with the landing page. It shouldn’t only look distinct and striking, but it should also build a loving connection with the user right away. In the end, it is the positive emotions that make a lasting impression.

To achieve this, I collaborated closely with the product manager who is much more experienced with the API’s functions and developers’ journey, and we came up with the four-step onboarding together. It was an electrifying brainstorming session where we inspired each other to go way beyond what we could achieve individually. Those are the golden career moments I will remember for life.

Then I went on to design a sandbox environment with the code and result next to each other – a developer’s natural habitat – to deliver all the information in a compact and easy-to-understand form.

It makes a huge difference when we look at generic data or data that means something to us. One unique advantage of being Spotify with our 600M+ monthly listeners is that we can be quite certain that the users who come to this website have their Spotify account created and logged in already. It enables us to show them their top songs.

The four-step onboarding process are:

1. Get your top 5 tracks from the last 30 days

2. Recommend 5 songs based on your top 5 tracks

3. Save the 10 songs in a playlist

4. Listen to the songs right here right now

Integrate console with the references

On the old website, the console – a place for the user to try to run the code – has its own page and is disconnected from the documentation, which makes a difficult UX. The endpoints were also organized in a different order than in the documentation which could cause a lot of confusion. 

Another major new feature we have made is to combine the console with the corresponding API. The user can inspect the response with the reference right next to it, and can even use the “matching highlight“ function to accelerate the learning process. This is a feature the whole team is extremely proud of.

Much clearer navigation

The old website has a confusing navigation system. It combines horizontal and vertical lists. The user needs to move their mouse in great distance to go to a different section and it limits how many new products can be added – we were running out of horizontal space. I simplified the information architecture and made the navigation happen mainly on the left-hand side in a tree structure. I also made sure “where you are“ is unmistakably clear.

Improved visual language

When designing the documentation, a big part is to make it as readable as possible. First, visual languages are applied to help the users quickly scan the documentation. Bold colors are applied to important parameters. Hierarchies are marked with single or double vertical lines.

We need a lot of different colors with a 7:1 contrast ratio to meet the high accessibility standards we aimed for this website. The end goal is to maintain a highly recognizable Spotify look while reaching high readability and accessibility, which has been achieved according to the feedback we got from both internal and external users. We even won an accessibility developer portal award!

Make terms and scopes easily accessible

Most people never read Developer Terms carefully, but the developers who build with the Spotify API must comply with the terms, because there are serious legal constraints. Instead of asking them to read and understand the whole document, which is impossible, we summarized the important key points, listed them on top of every endpoint page, and pointed the users to the exact paragraphs in the terms. This is UX improvement brought much-welcomed convenience for the users and reduced the compliance issues and support tickets for the compliance team.