# Spotify Design

The new home of Spotify's design team.

- Launched: 2020/05/14
- Client: [Spotify](https://spotify.com/)
- Studio: [Stink Studios](https://www.stinkstudios.com/)
- Live: https://spotify.design
- Stack: HTML, CSS, TypeScript, Gatsby
- Page: https://pim.dev/work/spotify-design

## About the project

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.

## Awards

- [SiteInspire](https://www.siteinspire.com/website/9483-spotify-design): Feature (2020)
- [Awwwards](https://www.awwwards.com/sites/spotify-design): Honourable Mention (2020)

## Credits

- [Andrew Sellers](https://andrewsellers.co.uk/) (Front End Developer, Technical Lead)
- [David Fiz Querol](https://davidfiz.com/) (Designer)
- Sam Steele (User Experience)
- Rhianon Taylor (Producer)
- Hannah Lynd (Producer)

## Said about the project

> Within design—especially at larger organisations like ours—there is a pressure to always show the finished, polished article. We were trying to set the stage for a design culture in which showing and sharing work in progress was welcomed.
>
> — Nanci Veitch, Design Program Manager, Spotify ([source](https://www.itsnicethat.com/articles/spotify-design-graphic-design-sponsored-content-290121))

> We managed to design something that felt like us.
>
> — Nanci Veitch, Design Program Manager, Spotify ([source](https://www.itsnicethat.com/articles/spotify-design-graphic-design-sponsored-content-290121))

> This is a true partnership with the Spotify Design team that delivered on shared ambitions.
>
> — Stink Studios, Agency Statement ([source](https://www.stinkstudios.com/work/spotify-design))

> It was unanimous that the site needed to be playful and delightful, ensuring they were creating a site that felt true to the values of what makes Spotify unique.
>
> — Spotify Design Team, from global designer interviews ([source](https://www.stinkstudios.com/work/spotify-design))

## Press

- It's Nice That: [A visual identity designed to spark joy](https://www.itsnicethat.com/articles/spotify-design-graphic-design-sponsored-content-290121) — Deep dive into the brand identity with quotes from Dan Sormaz (VP Design), Shahin Haghjou (Art Director), and Nanci Veitch (Design Program Manager)
- Spotify Design: [All Glown Up! How We Made Over Spotify.Design](https://spotify.design/article/all-glown-up-how-we-made-over-spotify-design) — Behind-the-scenes of the redesign process and Stink Studios collaboration
- Spotify Design: [Making the Brand: Redesigning Spotify Design](https://spotify.design/article/making-the-brand-redesigning-spotify-design) — Two-part article on the rebrand with Albin Holmqvist
- Stink Studios: [The New Spotify.Design](https://www.stinkstudios.com/work/spotify-design) — Agency case study with project details
- Spotify Design: [All Glown Up! How We Made Over Spotify.Design](https://medium.com/spotify-design/all-glown-up-how-we-made-over-spotify-design-bc369c21524a) — Medium publication of the makeover story
- Awwwards: [Awwwards - Honorable Mention Page](https://www.awwwards.com/sites/spotify-design)
- FWA: [The FWA - Case Study](https://thefwa.com/cases/spotify-design)
- SiteInspire: [SiteInspire - Website Feature](https://www.siteinspire.com/website/9483-spotify-design)
- Gatsby: [Gatsby - Showcase](https://www.gatsbyjs.com/showcase/spotify.design)

---

Index: https://agent.pim.dev/llms.txt