Spotify Design

By 2020, Spotify had evolved significantly — growing into an audio-first company, doubling down on podcasts, and expanding from a handful of designers to almost 200. The original Spotify.Design website, launched in December 2018, needed a refresh to reflect this growth and the company's new brand identity.

In 2018 and 2019, Spotify began to play a stronger role in the global design community, developing a brand through an external website, social media, and events. In September 2019, the team took a hard look at what they'd done and realized designers were pushing the Spotify Design brand system to its breaking point.

After seeing Stink Studios' work on Spotify Pet Playlists, Spotify chose the award-winning London team as their partner for the site redesign. The goal was to create an inspiring resource for the design community while providing a platform to showcase the talented individuals inside Spotify.

Discovery & Research: The team conducted interviews with 300+ creative employees across operations, engineering, UX writing, art direction, and design. Key descriptors identified were "inclusive," "approachable," and "friendly."

Brand Design by Albin Holmqvist: For the initial design exploration, Spotify partnered with independent art director Albin Holmqvist, who had just completed a bold brand refresh for their flagship playlist Altar. Albin was asked to focus on attributes like adaptability, diversity, quality-driven, warm & friendly, and human-centered.

Bright hues quickly became a central theme. They wanted to stay away from the neutral, muted colors and dark design themes so closely associated with Spotify, hoping to deliver something more unexpected. Albin's experience as an editorial art director made him brave with color.

The brand's new DNA—bursts, action lines, and hand-drawn highlights—started to take shape. Those accents exuded the personality they were looking for, and were refined and carried over to the final design system.

Stockholm Workshop: A workshop in Stockholm gave the teams the opportunity to interrogate the brief together while co-creating ideas and concepts, with global participants joining remotely.

Design Principles:

• Playful and Delightful: The site taps into Spotify's new brand's playful DNA with motion and interaction elements
• Skip and Shuffle Navigation: Playful nods to Spotify's audio expertise allow visitors to navigate through content archives in familiar ways
• In the Spotlight: A homepage section featuring designer profiles
• Listen Feature: Curated playlists by Spotify designers accessible throughout the site

Ideation & Wireframes: The team kicked off with a series of ideation workshops. The resulting ideas were rated on a matrix of newness, usefulness, feasibility, playfulness, and brand relevance. Features with the highest scores were scoped and developed.

Over a week or so, wireframes were clarified and codified into design templates that met accessibility standards. Stink Studios then tapped into the new brand's playful DNA to develop delightful bits of motion and interaction.

Technology Stack:

• HTML, CSS, TypeScript
• Gatsby (React-based static site generator)
• GraphQL for data layer
• Spotify Web API and Web Playback SDK

Listen Section - Technical Innovation: One of the most challenging and innovative aspects of the build was the "Listen" section. This was one of the first instances of Spotify's beta Web Playback API being used outside the core product, allowing music to follow the user throughout the site without interruption.

The Listen hub uses two public Spotify SDKs:

• Web API: Accesses playlist data (titles, descriptions, tracklists)
• Web Playback SDK: Handles audio playback—the same technology powering Spotify's Web Player

For Premium users, an embedded in-site mini-player loads directly on the page. The player was built so listeners can navigate the site, read stories, and continue listening uninterrupted. For Free users or those accessing via Safari, mobile, or tablet, they're taken to the web player.

Accessibility Excellence: Accessibility and usability are at the heart of the site, following A11Y and WCAG 2.1 standards to level AA as a minimum. The team exceeded baseline accessibility expectations to make Spotify Design truly inclusive.