— PROJECT NAME
Re:Play Design System
We were handed with the brief of reverse-engineering and understanding a company design system. Our team was assigned to work on Spotify.
This project consisted of re-imagining the Encore Core Design system and delivering an MVP of it within two weeks.
The challenges of this project included reproducing what encompasses a Design System from its guidelines, principles, UI design, and later deploying them it as a functional coded design system.
During the course of this project I was working along two other engineers, and myself as the sole designer and Product lead. Given this we had to work out and establish an efficient workflow to deliver this in the given deadline of 2 weeks.
Re: Play design system is the result of this project done during the FE402 – Design Systems for Interactive Applications course at Harbour.Space by Pablo Deeleman.
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.
These are the UI components that were designed for Re:Play
The Re:Play Band
Antonio Bonet – Lead Product Designer
Juan Chozas – Principal Engineer
Supatsara Rodratsa – Principal Engineer
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.
Screenshot of the various online Spotify products, which all cater to different teams and have their different look and feel.
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.
Sketches for Re:Play components
Remix, as in letting users mix pick their tunes and mix them together to compose a new Spotify product. Living inside Figma, it serves as backbone for Re:Play.
At its core, the Re:Play Design System is sustained by the principles that define the look and feel of Spotify.
It contains library of pre-built components, typography, color palettes, and other styling elements that can be easily integrated into projects.
Spotify’s voice and tone are playful, friendly, and inclusive. We strive to create a welcoming and engaging experience for our users.
Our tone is never condescending or overly formal, and we always aim to foster a sense of community and connection with our users.
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.
Re:Play Typography Guidelines
Font Weights supported on Re:Play
The Elevation components, are the shadow ones. They are to be used depending on the level and size of the element.
The different buttons currently supported on this initial release
Breakdown of the rounded green button component and its token aliases.
Table of various button states
At the core of Re:Play are two main UI primitives:
The box primitive and the text primitive.
These building blocks enable us to create consistent and visually appealing interfaces in just a couple of beats.
Our Box component is a fundamental part of our design system, serving as a versatile wrapper that can be any HTML element and customized with our token values as props.
Our Box component is an all-purpose component, with it you can pass tokens as props and pseudo-class props, in order to compose different components for the UI library.
The Text component allows you to set style properties such as font family, color, and line-height using our design tokens.
By leveraging the Text component in conjunction with the Box component, allowing us to create functional components easily.
From basic text to more complex layouts, the Text component proves itself to be a flexible toolset for crafting ready-to- use experiences.
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.
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.
SETTING THE STAGE
FOR THE FUTURE
Looking ahead, we've developed a roadmap to lead us in further improving the Spotify Re:Play design system.
By prioritizing these key areas, we ensure that the design system stays current and meets the evolving needs of our users.
To request access to the our prototype and its documentation, feel free to email me.