Matteo
Matteo

I helped Spotify kick-off a new component library

During my 1st year at Spotify, I helped their design system team lay the foundation for a new component library for iOS and Android, and standardize their engineering design process.

Spotify's album entity page, where Encore components are used

My role

In 2019, Spotify presented a new model to design and code systems to serve more than 45+ platforms that were being created by over ≈2,000 engineers and ≈200 designers.

In 2021, I joined their mobile design system team of 8 as the sole designer, with the responsibility to lay the foundation for a new component library for iOS and Android.

Framing the problem

Following growing sentiment among consumers using Encore, who wanted and expected more generic pre-built components in new programming languages for iOS and Android, my team was formed to achieve a level of parity with what Encore currently offers for the web.

Spotify serves close to 45 platforms, which resulted in teams creating 22 separate design systems over the past decade. Most of these systems are "local", meaning they predominantly contain ad-hoc components, not reusable by others.

How we did it

We started by defining and inheriting some principles, for example, relying on the established appearance and role of UI components and patterns, while improving for speed, efficiency, and accessibility.

Visual complementing design specs for controls
Visual complementing text style guidelines
Visual complementing accessibility guidelines on controls

We also leaned into Spotify's embed program—where an individual contributor can join another team for two weeks, and up to multiple months—to help us ship faster or learn about our consumers.

We constantly updated consumers on our progress and requested their feedback to minimise the possible misunderstandings that often happen when building generic components that are supposed to be adopted by multiple features.

The results

Near the end of 2022, we released a new library of selected components for iOS, Android, and Figma. For example, text, icons, colours, basic controls, lists, cards, images, swipe actions, and more.

Visual complementing guidelines on how to style controls to be visible over media content
Visual complementing the styling of controls over extracted colors
Visual complementing best practices regarding swipe actions

During the year-long production, we collaborated with other teams to make sure they could deprecate their ad-hoc components and migrate to ours once we released our library. Some components required collaborations of 4–6 months.

Two months after the Figma library launch, we saw ≈8000 inserts from more than 12 teams across the company.

I also worked to create a series of Figma files to nudge new designers to align with Spotify's best practices.

Educational Figma gile on cards and rows
Educational Figma file on touch targets
Educational Figma file on type settings
Educational Figma gile on slots and subcomponents
Educational Figma file on swipe actions

Adoption

As of early 2023, ≈20 teams have created ≈20,000 instances in Figma using our library, while iOS and Android are reaching a level of adoption that enabled us to start deprecating legacy elements.

Send Matteo a reply about this page
More from Matteo
Back to profile