Can I get an Encore? Spotify’s Design System, Three Years On

 A fast recap

The choices we made concerning the design and construction of the system in 2019 had been a mirrored image of the panorama we would have liked to construct for. 

We needed to serve greater than 45 completely different platforms that had been being created by over 2,000 engineers and 200 designers.

When we disbanded GLUE, our previous design system group, many grassroots techniques spun up as a replacement. We managed to seek out a formidable 22 distinct design techniques.

And lastly, we put loads of thought into how we’d go about making a system made up of guidelines, patterns, and requirements that may match inside our tradition of autonomy.

(re)Introducing Encore

Encore was our reply to this advanced panorama of merchandise, groups, and methods of working at Spotify.

It represented the consolidation of present initiatives — some official and plenty of grassroots. It supplied a single, unified framework that may substitute the 22 distinct design techniques that existed beforehand.

Encore was designed for Spotify’s numerous set of use instances, throughout many platforms and experiences.

So we launched what we referred to as “a family of systems” or what’s identified within the design techniques house as a “system of systems”, reasonably than one single monolithic design system.

Each a part of the Encore household is managed by a distributed group and usually inherits from one other Encore system, ranging from Foundation and dealing its manner out. 

This made all the pieces extra versatile — and match higher with Spotify’s autonomous tradition.

Spotify has grown since then…

But that was three years in the past and so much has modified.

As our R&D group has grown, our design system has wanted to assist extra use instances, extra platforms, and most significantly — extra folks.

We know that the built-in flexibility has enabled autonomy to some extent, however as Encore has gained adoption and recognition, we discovered that we would have liked to encourage standardization with a purpose to obtain higher consistency.

All of this progress, plus a rise in each native techniques and frameworks for varied merchandise, has challenged the Encore organizational mannequin and its capacity to scale.

We mixed our information of Spotify’s design and engineering methods, and our sturdy relationships to get a transparent sign on how we may enhance our mannequin shifting ahead.

Now that you simply see the place we have been, let’s break it down into some classes we’ve learnt alongside the way in which.

Lesson #1 – Reinforce our design targets, reasonably than our organizational mannequin

Since launching Encore, it has quickly change into an excellent instance of Conway’s legislation or, in different phrases designing techniques that replicate the org mannequin. In our case, the thought of “local systems”, a key precept for Encore’s layered mannequin, inspired the system to replicate our org construction.

In a bid to create autonomy and drive utilization, we created a system which conforms to our hierarchy reasonably than embracing a extra cross-platform, experience-driven mind-set.

We received’t obtain our present enterprise and design targets by working like this, however because of collaborating with our native system companions, we’re now actively engaged on evolving this mannequin and hope to share extra with you early subsequent yr.

Lesson #2 – Define and observe success

Back in 2019, our manner of monitoring design system adoption was largely a box-ticking train. We had been fairly actually ticking bins in a desk.

Fast ahead to 2022 and we now have knowledge pipelines with dashboards for our key techniques. We question repositories throughout the corporate every day to unearth precisely the place and what number of occasions tokens and parts are used, how typically clients are upgrading, and to determine tendencies and patterns that assist us plan future roadmaps.

Our subsequent step is to evolve our analytics system in order that we will determine alternatives in codebases the place tokens and parts could possibly be used, however aren’t but.

We are additionally establishing key metrics alongside adoption which inform a extra full image of Encore’s Usage, Contribution, Coverage, and Satisfaction.

Lesson #3 – Balance the scales of reusability by investing in native parts

When designing our system for cell, we put the give attention to flexibility. Our native experiences are the place the vast majority of new options and experimentations happen, groups right here want to maneuver shortly, so we wished to offer them most flexibility.

On internet, we took a extra conventional method, making a library of reusable parts. We’ve seen enormous adoption and utilization; groups are in a position to construct and ship utilizing our parts.

As the cell system has developed, we’ve seen a rising sentiment amongst the designers and engineers engaged on our native platforms that they need, want, and anticipate extra pre-built parts that may be merely configured, composed, and consumed similarly to what we’ve seen achieve success for our internet system.

It’s clear that we swung somewhat too far within the path of flexibility and we’re now balancing the scales by enabling extra reusability on our native platforms. At the start of the yr, we created a devoted group to construct a reusable set of parts for cell, with the objective of attaining a degree of parity with what we at present supply on internet.

Lesson #4 – Non-semantic design tokens supply restricted worth

Our preliminary token system centered on being non-semantic, containing issues like our shade palette, spacers, and typography scales.

However, we shortly realized the restricted worth that these extremely generic tokens supply as we discovered ourselves unable to securely change them with out inflicting some alarming downstream regressions.

For instance, as half of a giant accessibility drive in late 2020, we wished to regulate the worth of our most vital shade, Spotify Green, to enhance distinction. We knew the Spotify Green token was getting used hundreds of occasions throughout iOS, Android, and internet, however we didn’t know the place or how.

With this in thoughts, we’ve been investing closely in introducing semantic layers into our token system in order that we will higher perceive the context by which our tokens are getting used, giving us the boldness to securely change values understanding the influence.

Lesson #5 – Power our system with robots, algorithms, and automation

Even with the extremely sensible group of parents engaged on Encore, it was going to be very difficult for us to manually implement and preserve all the pieces we wished on the scale we would have liked.

This gave us a possibility to work smarter, not tougher.

So, we constructed a complicated design token integration with Figma. We created a bot that we name Figgy, to routinely synchronize modifications made in our code supply of reality throughout hundreds of Figma information in minutes. This means design and code are at all times stored in sync.

To construct the semantic token layers we talked about within the earlier lesson, we developed a color-theming algorithm that, given a number of enter values, can generate a complete shade theme with assured accessible shade distinction.

We’re persevering with to speculate on this method and at the moment are within the means of growing a brand new algorithm to generate format and spacing themes, which is able to allow our parts to scale and adapt to completely different gadgets and person modes.

Lesson #6 – Strengthen our numbers and create advocates

In the early days of Encore, the web-based group acknowledged an elevated degree of curiosity and enthusiasm from the broader internet group in key choices we had been making.

So we leaned closely into the Spotify embed program the place a person contributor can be part of one other group for 2 weeks, and as much as a number of months, to assist them ship tasks or simply study and contribute.

The Encore embed program has now change into a well-known addition to our general evangelization technique. In 2022, we’ve had somebody embedded on an Encore group each single day of the yr. 

The main cause for internet hosting embeds is to construct a stronger group of possession across the system. As an additional benefit, we get to enhance our onboarding processes, strengthen our documentation, and assist our teammates meet new colleagues in a distant local weather.

We’ve had folks be part of our groups from all around the world, not solely bringing their numerous experiences and backgrounds but in addition serving to us find out about what they do of their nook of Spotify.

What’s subsequent for Encore?

Going into 2023, we’ll evolve our layered system mannequin to handle the constraints and alternatives we now have recognized.

Encore has grown organically right into a little bit of a spider’s internet and we have to simplify and refine with a purpose to guarantee we proceed to assist our inner communities and ship on our design aspirations. We’ll focus much less on platforms and extra on the experiences we’re attempting to create.

Be certain to observe us on Twitter and Instagram and maintain an out on this weblog for extra updates within the close to future.

Credit: header illustration by Jael Umerah-Makelemi