How Spotify Leverages Design Systems

During our research for The Ultimate Guide to Design Systems, we studied a well known name: Spotify.

In November, Spotify introduced a novel line of design systems under the name “Encore.” Encore is unique and stands out mainly because instead of a solo, it comprises a family of design systems, controlled and monitored by various teams.

This post sheds light on the main reason that led to Encore’s emergence, structure, and ability to stand out from other design systems that Spotify tried earlier.

Learn more about our Design System serivce if you’re interested in creating a Design System for your organization!

Spotify’s Journey in a Timeline

Spotify has received numerous questions regarding its approach to design systems. The company has attempted to respond to this question several times, using various techniques such as: thinking of it as a one-off scheme, incorporating a brilliant design team, and many other things. In its early days, Spotify had no design system. They built everything from scratch.

‍

Encore is unique and stands out mainly because instead of a solo, it comprises a family of design systems, controlled and monitored by various teams.

2009: A limited collective of patterns and standards

When Spotify first launched its mobile app in 2009, there were limited collective patterns and standards. Gradually, the app’s experience became mostly inconsistent.

‍

2013: Paint it Black

This hard patch continued until 2013 until Spotify eventually made its first genuine attempt to align its visual design over many platforms. After considerable effort, Spotify presented the signature dark experience called “Paint it Black.” Soon, the website and application started looking mostly like how people are familiar with it today.

‍

2014-2015: Global Language Unified Experience (GLUE)

Moving ahead to the years 2014-2015, Spotify’s Brand and Creative team brought a drastic change in brand identity. Eventually, a fully-staffed team was set up to create Spotify’s design system. The changes included introducing a new typeface (circular), new color schemes, and several graphic updates to be integrated into their applications. This design system was named GLUE, also known as Global Language Unified Experience (Learn more about GLUE).

GLUE was Spotify’s first-ever designed system that included a complete, full-time design team. It turned out to be successful in many ways. Spotify’s appearance was changed entirely. The majority of the desktop and mobile components were standardized, and soon Spotify went from a handful of people to a dedicated workforce of over 30 full-time designers and engineers.

The only problem with GLUE was that it was merely just a single and centralized team. A centralized system is deemed ideal for maintaining consistency, but it turned out to be an obstruction for Spotify. The reasons were quite obvious. Basically, Spotify focuses on the concept of “aligned autonomy” and encourages teams to have decision-making authorities. Later, they realized that a centralized design system was unable to cope with this mindset.

‍

2018: Becoming accessible to listeners everywhere and anywhere

2018 was a turning point for Spotify, and it continued to grow at a fast pace. They now had a team of 2000 engineers, 200 designers, and 45 unique platforms. The concept of desktop and mobile designs were almost extinct. Spotify entered the business of launching designs for speakers, smartwatches, cars, and smart fridges. This was mostly possible because “ubiquity” was the new company strategy.

Spotify wanted to pursue its plan of becoming accessible to listeners everywhere and anywhere. While Spotify was moving in various directions, new patterns, components, toolkits, and several other efficiency-enhancing, time-saving resources provided by a design system increased in demand.

By this time, the primary issue was that GLUE design had scattered, and nobody was keen on taking the design system to the next step. Gradually, engineers and designers took over the responsibility to create design systems of their own. For example, one group in New York began working on a design system known as “Tape.” Another team in Stockholm created a design system focused on designed tokens. And so started Spotify’s popular phase of design systems.

All the hard work consumed an incredible amount of effort, and most of these system parts are still being used today. However, this decentralized approach did not prove to be workable. At one point, Spotify calculated a total of 22 unique design systems hanging around, which would get quite confusing.

Spotify Takes the Next Step

Spotify was in dire need of a unified and useful design system, but they were well aware that a centralized team such as GLUE would not work. In 2018, they put in increased efforts in building a new design system for their company.

Spotify wanted to devise its new design system in the same way as it designed one of its product experiences. The company wanted to combine its existing resources and build a design system that they deemed collaborative, accessible, unified, and centered on a clear vision.

Most importantly, Spotify wanted the new design system to fit flawlessly with its autonomous culture. It wanted a system that could excel over several platforms. All of this eventually led to the emergence of Encore.

‍

Presenting Encore

Encore is a unique scheme that comprises a family of design systems, featuring everything that design teams require to construct beautiful and accessible Spotify applications. Encore is unlike other design systems because it is not one, but a family of design systems. It is a complete framework that integrated Spotify’s current design systems into one exclusive brand and became a “system of systems.”

Encore comprises many design systems, each of which is handled by a different group of people. As these teams manage the systems, anybody who creates Spotify products can be a part of it. Encore is not really a new design system for Spotify. The framework is new, but it has mostly reused many elements involved in the previous design systems. Spotify has either rebranded or taken out the significant parts to build the new and improved Encore systems.

The diverse systems remain connected with design tokens and are a part of the same website. They all follow the same framework that Encore is structured on. There were 22 disengaged design systems before, but now various systems of Spotify are connected together under one roof.

Design Systems inside Encore

Here is what Spotify’s newest design system, “Encore,” appears like.

‍

Encore Foundation

The Encore Foundation lies at the center and includes all things such as: type, color, motion, styles, spacing, and guidelines for accessibility and writing. It is also the place where design tokens reside. These are the primary things that almost all companies should incorporate in their design systems. In fact, this is what makes Spotify look the way it does. All Spotify products are required to use the Encore Foundation.

‍

Encore Web

Encore Web provides all the components present in a standard web design system, such as form controls, dialogs, buttons, etc. These features can be utilized for everything created through web techs like websites, web applications, their desktop clients, and fridge apps.

Encore Web includes the combined resources from its web-based platforms and incorporates all the things from Encore Foundation. The components are created with design tokens and follow the same guidelines and patterns stated in Foundation. Hence, these systems are connected.

‍

Encore Mobile

The Encore Mobile is yet to be defined. Similar to Encore Web, this is the platform for common constituents that many mobile apps share.

‍

Local Design Systems

The next layer comprises “local design systems.” Local design systems are used to store design elements that are customized for specific audiences and products. These components need to be shared, but not across the entire Spotify.

A few web constituents are utilized only in events for podcasters or artists (for instance, the Spotify for Artists application might call for a unique table layout or navigation pattern). With the Encore structure, these tailor-made design features can be stored in local design systems. This way, it can be shared by all groups who work on Spotify for Artists app.

The idea is the same on mobile. Many teams work on the main Spotify app, so there is a massive requirement for common mobile patterns and features. These design components reside in the local system customized according to the layout (Android or iOS) and audience (who listen to podcasts and music).

Right now, Spotify has 2 local systems, but this is probably not the final set. With Encore, they can bring in other local systems if the need arises. For instance, in the forthcoming years, stand-alone apps such as Stations and Spotify Kids might call for local systems. The goal is they should remain connected and be available under one roof (the Encore website).

In summary, a full-fledged design system is one that:

Offers design assets, documentation, and code.
Cultivates on the other systems.
Is actively managed and controlled by a committed team.
Has a coherent interface that engineers can work with.

This definitive framework was crucial for the entire Encore program to be a success. Any engineer, writer, or designer at Spotify must first choose the Encore design system appropriate for them and then have access to shared resources.

Concluding Thoughts

We witnessed that as Spotify’s product strategy and graphic language advanced, their design systems underwent changes too. It is clear that a design system cannot be one-size-fits-all. Instead, they have to be personalized accordingly with the company’s needs, respectively.

A vital lesson in all of this is the importance of understanding the firm’s culture and adapting to it. It is essential to accept the company’s idiosyncrasies and characteristics to ensure a design system will work.

For Spotify, it meant acknowledging the significant product setting it resides in and realizing that their teams work independently. Instead of having one team or system, Spotify felt it is better to incorporate a family of design systems, managed and controlled by various dispersed teams. This is only the beginning, and time will tell if they have got the hang of creating a “system of systems”.

‍

Want to learn more about Design Systems?
Check out The Ultimate Guide to Design Systems. And for the ecommerce side of design systems work, see how BTNG revamped FD’s design system in practice.

Implementing a design system? Our design subscription includes design system work.