BLASTING

INTO RE:PLAY

Re:Play is a design system that has been created to make it easy for engineers, designers, and brand managers to get on board and quickly develop products inside across the Spotify ecosystem.

SPOTIFY’S CURRENT STAGE

Spotify, provides the best music app for the general audience with what had came to be a very distinguishable brand.

However, with so many teams working on different projects, the design systems began to suffer. The B2B, Admin, and Consumer-facing teams were growing at a fast pace, than the design team, for them to catch up.

As a result, the user experience suffered, what could possible be the entire GLUE design system and we can imagine it was a very big problem to maintain across 45 platforms.

This was one of our biggest challenge when auditing the Spotify design system, which difficulted us playing the whole song of what their Design System would look like.

As of now Encore is set to unify the 22 design systems that make up Spotify various products across all supported platforms.

FINDING THE RIGHT TEMPO

This journey wasn't as harmonious as we would have thought, as throughout our planning and research phases, we encountered with some of the disparity between the various design styles present across Spotify's products.

With so many different component styles to choose from and numerous design systems in place, it was challenging to determine which reference points to use for our MVP while still ensuring it remained true to brand.

In addition to this, we faced the daunting task of establishing the ground rules for our design system, including which technologies to use and creating a roadmap that would be efficient for the developers and for the design hand-offs.

Mainly throughout the development of this project we had in mind that Design systems are for people, and with this we set ourselves to create a lean and versatile system that could be used by various teams across Spotify.

TUNING IN TO RE:PLAY

As we set out to create a Design System for Re:Play, we knew that we had a lot to accomplish in just two weeks. Our team size rather than a disadvantage was an advantage as it enabled clear communication between us. As a natural consequence of this and to be able to deliver the project on time we self-organized ourselves in an agile manner.

My primary tasks were designing, defining, and writing the Design System guidelines, allowing the engineers to understand the requirements of the components and how they were meant to be used for the end-users, alongside establishing an efficient hand-off pipeline to the engineers.

OUR DESIGN PRINCIPLES

LYRICS

For the principles we borrow on the established Spotify.Design published principles and as well gave them a bit of our own tunes to them.

Relevant: We believe in tailoring the experience to each individual user. We carefully curate the information we present, ensuring it is relevant and personalized. We steer away from a one-size-fits-all approach, recognizing that our users have unique preferences and needs.

Human: We understand that it's ultimately about people. We emphasize communication, expression, and human connection. Our design should be dynamic and reflect the ever-evolving cultural landscape.

Unified: Our brand is seamlessly integrated into every feature and app we create. Consistency is key, as we strive to build trust and familiarity with our users.

With this principles as our north star, we ventured in working with our design tools to build solutions that feel dynamic and reflective of the brand culture.

Grounding everything in one source of truth, we are looking forward to where the Re:Play beats take us.

BOOKING & CONTACT

With an atomic design approach in mind, we meticulously developed key elements such as Typography, Colors, Elevation, Accessibility Guidelines, Layout, Spacing, and Icons.

These foundations serve as the backbone of the Re:Play design system, empowering our teams to consistently deliver delightful experiences across all our products.

A RHYTHMIC

PIPELINE

A crucial pillar of our design process, Design Ops defines how we drive collaborative design through streamlined workflows. It encompasses the integration of people, processes, and technologies to optimize our design operations, ensuring a seamless collaboration between designers and other stakeholders.

Due of the size of our team, I had to take over the Design Ops of our design system. As being the product lead, it was my responsibility to communicate and hand-off my designs to the engineers in the most efficient manner.

Leveraging Supernova (Shoutout to them for giving us an enterprise license trial for the duration of the course) as our main source of truth. Through its integrated hooks, I was able to create a Continuous Delivery pipeline for the designs.

Our pipeline was set up as the following, connected through a

hook from Supernova that connects with the Figma API it allowed us to deploy our Tokens through Style Dictionary, to the assigned branch at Github.

Then through Zeplin, I was able to spec out the designed component for the engineers.

As well as managing our components in one central location was also crucial, which is where Storybook came in. It served as our live playground for the coded components.

IMPLEMENTATION

CHALLENGES

Not everything went as smoothly as we planned as we did encounter some challenges.

Aside of the frequent debates that we had between myself and my two engineers teammates.

In order to define the components we were developing and defending or accepting the trade-offs of it the requirements I had defined.

As the product designer, I had to define how much flexibility will let the end-ours have over the coded UI components, while engineers where defending their position regarding the development challenges they might face by developing the requirements of such components.