Reimagining Design Systems at Spotify

How we acquired right here 

How ought to we do design programs at Spotify? That’s a query we’ve tried to reply a number of occasions, by totally different approaches: from treating it as a one-off undertaking to having a fully-staffed design workforce and many issues in between. 

In the early days of Spotify, there was no design system—we have been constructing all the things for the primary time. When we launched the cell app in 2009, there have been few requirements or shared patterns in place, and the Spotify expertise began to get more and more…inconsistent.

This drift continued till 2013, after we kicked off our first actual try to align the visible design throughout platforms. This was an enormous effort, and it had a huge impact: we launched the signature darkish expertise, and Spotify began to look one thing like what we’re acquainted with immediately.

Then in 2014-2015, the Brand and Creative workforce refreshed Spotify’s model id in a serious means. We had a brand new coloration palette, a brand new typeface (Circular), and many visible updates that wanted to be built-in into our apps. To do that, we arrange a fully-staffed workforce to create a design system for Spotify, somewhat than treating it like a one-off undertaking. We referred to as this design system GLUE, aka Global Language Unified Experience (you might have heard of this one).

The GLUE design system was successful in plenty of methods. The workforce refreshed Spotify’s feel and appear, standardized a lot of our elements throughout cell and desktop, and grew from a handful of individuals to 30+ full-time engineers and designers.

But there was a catch: GLUE was a single, centralized workforce. This was nice for consistency, and plenty of firms discover {that a} centralized workforce works for them. For us, although, it turned a bottleneck. Why? It comes all the way down to how the group is about up. Spotify values “aligned autonomy” and empowers groups (squads) to make their very own choices. After some time, we noticed that having a centralized design programs workforce didn’t match with this manner of working.

In 2018, Spotify continued to develop, and quick. 

We had 200 designers. 

2000 engineers. 

45 totally different platforms. 

The days of designing for cell and desktop have been lengthy gone. Now we have been additionally designing for vehicles, smartwatches, audio system, and even good fridges. This was partially as a result of a brand new firm technique: ubiquity. We wished to make it doable for listeners to entry Spotify anyplace.

With Spotify shifting in all these thrilling new instructions, we noticed a urgent want for brand spanking new elements, patterns, toolkits, and all the opposite time-saving, efficiency-boosting sources a design system gives. The challenge was the GLUE workforce had been disbanded by this level, and nobody was actively pushing the GLUE design system ahead. 

That’s after we entered the “grassroots” section of Spotify design programs. Designers and engineers across the firm took it upon themselves to make their very own design programs. For instance, a workforce in New York began engaged on Tape, a design system for internet. (Get it? Tape? And Glue? Yes, we love a pun.)  A workforce in Stockholm began a unique system for design tokens; and so forth.

Plenty of nice work went into these ground-up efforts, and we’re nonetheless utilizing components of those programs immediately. But this extraordinarily decentralized, “everyone make your own” strategy wasn’t sustainable. At one level, we counted 22 totally different design programs floating round. Can you think about being a brand new designer or engineer and asking, “Hey, do we have a design system?” and the reply is, “Yeah, we actually have 22”? Pretty complicated. 

Let’s give it one other go 

Spotify actually wanted a helpful, unified design system—however we knew {that a} centralized workforce like GLUE most likely wouldn’t work. So, in 2018, we kicked off a brand new effort to create a design system for the corporate. 

This time, we wished to design our design system, identical to we’d design considered one of our product experiences. We weren’t beginning with a very clean slate, although. We wished to consolidate the sources we had, and create a system that felt unified, accessible, collaborative, and primarily based on a coherent imaginative and prescient. 

Most importantly, we wished a system that will match with Spotify’s tradition of autonomy—one which  might scale throughout a number of platforms and use instances.  

Which brings us to Encore.

Introducing Encore

Encore is the household of design programs that has all the things groups must construct lovely, scalable Spotify apps. 

What’s totally different about Encore is that it isn’t a single monolithic factor. It’s a framework that brings Spotify’s current design programs below one model—a “system of systems.” 

There are a number of design programs inside Encore, every managed by a unique workforce across the firm. And whereas these groups preserve the totally different programs, anybody who builds merchandise at Spotify can contribute. 

So is Encore Spotify’s “new design system”? Not precisely. The framework is new, however Encore really reuses numerous the nice that went into our earlier design programs. We’ve both straight-up rebranded them or extracted components of them to create the brand new Encore programs.

The totally different programs keep related as a result of they’re all constructed utilizing design tokens, they usually dwell on the identical web site, following the same construction outlined by the Encore framework. Before, we had 22 disconnected design programs; now, we nonetheless have a number of programs, however they’re all related and below the identical umbrella. 

Design programs inside Encore

Here’s what Encore appears like below the hood.

Encore Foundation

At the middle, we’ve got Encore Foundation. It’s the place we maintain issues like coloration, kind kinds, movement, spacing, plus tips for writing and accessibility. It’s additionally the place our design tokens dwell. These are issues everybody ought to use—it’s what makes Spotify appear to be Spotify. Using Encore Foundation is the minimal bar for each Spotify product.

Encore Web

Next up, we’ve got Encore Web. It provides all of the issues present in typical internet design programs: buttons, dialogs, kinds controls, and extra. These elements can be utilized in something that’s constructed utilizing internet tech—from internet apps to web sites, our desktop shopper, and, sure, even the fridge app. 

Encore Web has the shared sources for our web-based platforms, nevertheless it additionally consists of all the things from Foundation. The elements are constructed utilizing tokens, they usually comply with the patterns and tips outlined in Foundation. So the programs aren’t stand-alone issues: they’re related. 

Encore Mobile

We’re nonetheless defining this one—much like Encore Web, we envision this being the place for frequent elements which can be shared throughout a number of cell apps.

Local design programs 

But that’s not all, people. In this subsequent layer, Encore additionally incorporates what we name “local design systems.” Local programs are a spot to maintain design parts which can be tailor-made for particular merchandise or audiences. These are issues that have to be shared—simply not shared throughout all of Spotify.

Some internet elements are solely utilized in experiences for artists or podcasters (for instance, the Spotify for Artists app may have a particular navigation sample or desk format). With the Encore framework, we will maintain customized design parts in an area system so all of the groups engaged on Spotify for Artists can share them. 

It’s the same concept on the cell facet. There are plenty of groups engaged on the primary Spotify app, so there’s an enormous want for shared cell elements and patterns. These design parts dwell inside an area system that’s tailor-made to the platform (iOS and Android cell apps) and viewers (individuals who take heed to music and podcasts).

Right now we’ve got two native programs, however we don’t assume that is the ultimate set. With Encore, we will add further native programs if wanted—for instance, sooner or later we could add native programs for stand-alone apps like Spotify Kids and Stations. The key’s that they keep related, and that they’re all accessible in the identical place (the Encore web site). 

To recap, every of the small circles above is a totally fledged design system that:

• Provides design belongings, code, and documentation 

• Builds on the opposite programs 

• Is actively maintained by a devoted workforce

• Has an outlined interface for engineers to work with

This underlying construction is essential for the success of the general Encore program, nevertheless it’s not one thing everybody must learn about. If you’re a designer, engineer, or author at Spotify, you’d simply decide the Encore design system that’s related to you, then dive into the shared sources.

Some last ideas

We noticed that as Spotify’s visible language and product technique developed, our design programs needed to change too. We’ve seen how a design system isn’t one-size-fits-all—it must be tailor-made to the corporate’s wants. 

Perhaps the most important lesson for us was how essential it’s to grasp the corporate tradition and adapt to it. For a design system to work, it must embrace the corporate’s traits and peculiarities. For us, that meant acknowledging the large product panorama we dwell in and the autonomous methods during which our groups work. Rather than having a single system or workforce, we consider it’s higher for Spotify to have a household of design programs, taken care of by a number of distributed groups.

This is only the start, and there’s loads to determine as we transfer ahead with constructing our system of programs. While Encore isn’t publicly accessible proper now, we’ll maintain sharing what we study as we go—so keep tuned for future posts!

P.S. Want to affix us in benefiting from Encore? Check out our open roles.

—

Big due to everybody who’s labored on Spotify’s design programs over time! Design programs are a workforce sport, and we’ve had numerous gamers…too many to call, however you understand who you’re.