How Spotify Is Upleveling Their Entire Design Team
In this video case study, Spotify shares how their Framer X toolkit is empowering designers to prototype with data.
There’s no doubt that Spotify has changed the way we consume and stream music. But with a recent IPO and a reported 232 million monthly active users, the Swedish-grown entertainment platform has had to scale rapidly—both in team size and product capabilities. Over the years, the company has formed a cultural DNA that empowers initiative from the bottom up, allowing product teams to stay nimble even as the company grew. But as market leaders, the need to innovate was stronger than ever and leadership was looking to tooling to solve for some of their biggest roadblocks.
Thanks to a belief in interactive design as a core element of the product workflow, Spotify was a pioneer in their formation of a Design Prototyping team, who mainly partner with embedded designers to bring their static concepts to life. But the team has had so much success they’re now looking to simultaneously automate themselves and uplevel the greater design team’s prototyping skills. To do this, they needed to offer a toolkit that would empower all designers, regardless of technical ability. To top it off, the toolkit would need to be able to tap into the Spotify API and access the trove of data that was the backbone of the company’s success.
A toolkit to empower everyone
Initially, the Design Prototyping team took the core design system and started implementing the basic elements in React. Buttons, typography, cards, colours and other core elements of the app were imported. Then the team spent some time deciding on how to balance between the company’s prototyping needs: fast iteration and creative freedom. For example, should designers be able to override a font size in a header component? Thanks to the flexibility of Framer X as a React-based design tool, the team didn’t need to compromise much.
Spotify prototyping toolkit
“Framer X gives us the ability to set and then expose the customizable properties of a component in the UI of the app. This gives even non-technical designers the ability to creatively customize a component for crazy little effort on our side.”
— Rob Walsh, UX Prototyper at Spotify
Prototype with data on the canvas
One of the main goals of the toolkit was to create a system where anyone can design with visual components in Framer X, but still use live data inside them. For example, creating a new design for an album card is as simple as designing that layout on the canvas and setting the properties in the panel, allowing content to be populated dynamically from Spotify’s own web API. The ability to pull personalized data like up-to-date playlists, artist images and full-track playback into prototypes was a primary factor in the Design Prototyping’s team choice of Framer X.
spotify prototype framer
“Other tools often force you to make trade-offs, such as no live data or inability to play media, all of which are particularly inconvenient for our use case. We’re trying to make sure this toolkit ‘just works’ and comes packed with all the bells and whistles one might need.”
— Achal Varma, UX Prototyper at Spotify
The Team Store as a single source of truth
Even at scale, Spotify is mindful of staying lean. Instead of allocating valuable months of time and resources to create a new toolkit from scratch, the Design and Prototyping team took a gradual and additive approach to introducing new components to their Framer X toolkit. With every new project, the team made sure that any components they made were as extensible and as reusable as possible, so it could be adopted into the wider toolkit, housed in the Framer X Team Store and available for wider use. But beyond increasing productivity between designers, the team was envisioning a grander vision, one that unlocked Framer X’s full potential as a bridge between design and development.
spotify components in framer
“Having a single source of truth for our design tokens and components will be an enormous gain for both productivity and consistency as we will no longer need to check both the design assets against the developed version.”
— Tyce Clee, Senior Web Engineer at Spotify
Founded in Sweden in 2006, Spotify is the most popular streaming service in the world, serving 79 countries globally. The company’s mission is to unlock the potential of human creativity by creating a platform where musicians can share their music and fans can listen and be inspired. Accounting for 40% of the total music streaming market, they are proud to say that they are the largest driver of revenue in the music industry today.
spotify employees working
232 million monthly active users
- 108 million paying subscribers
- Over 1.7 billion hours of music played monthly
- 4,000+ employees working across 16 offices
- Doug DeMarco, Design Prototyping Manager
- Rob Walsh, Senior UX Prototyper
- Achal Varma, UX Prototyper
- Tyce Clee, Senior Web Engineer
- Amanda Lasnik, Senior UX Writer
- Mike Brand, Designer
- Lu Han, Designer
- Megan Ellis, Design Director