Design Systems London 2019 - Shaun Bent

15th of November 2019

On This Page:

2006 - No designers, they made mock-ups in MS Paint.
2008 - Spotify released on the desktop
The different platforms Spotify was on were owned by different teams for those platforms
In 2013 Spotify decided to align all things to a single brand to address the fragmentation. It was when it started to look like the dark themed application we see today.
After the Design System for the new consistency was created the team creating it was disbanded.
In 2015 Spotify tweaked the design, including their green. With the previous team disbanded they needed to start again with GLUE. The Spotify Design System.
Two challenges with GLUE.
- Autonomy, with ‘The Spotify Model’. Having a single team created a bottleneck. One team owned the UI - teams broke away, creating their own components
- Spotify is everywhere, Spotify changed direction to being more than just an application. Which leads to 45 individual experiences.
- The GLUE. approach was never going to scale across 45 platforms.
- The GLUE. had become unstuck - the decision was to close down the team. The team was disbanded but the Design System had continued usage.
A team was created to solve these new problems. Creating the DLS (Design Language System).
- Design Tokens to the rescue! Allowed the language to go to the 45 platforms. Allowed them to make small changes that would get applied to all projects.
- Client facing applications started to have its own Design System being created - Tape. It had massive, grassroots adoptions. Tape was open, GLUE. was closed.
As it was open - Tape has become the de facto Design System for Spotify.
Now Spotify has 3 official design systems. But, through research they found 22 (and counting) independent Design Systems being used across Spotify.
Having tried Centralised and De-Centralised systems they need to find the right balance between these two options.
- 45_+ platforms
- 22 design systems
- ~200 designers
- ~2000 developers
- 1 Spotify
“Design Systems are for people” — Jina
Now they are creating Encore
- Creating a Foundation with Design Tokens
- Web - a common base for all of Spotify’s web experiences
- Mobile
- Local Design Systems - tailored for specific use cases
- Encore for X - extensible architecture. Embraces the autonomous culture.
- Local Design Systems are built on top - but they doesn’t need to be 22 of them.
- Each system needs to provide design, documentation and code.
- Encore has different squads across the world. Working together.