Define a design system strategy

As part of the overhaul of Deezer's design system, we had to implement a strategy to move efficiently from an old design system that was rarely applied to a more modern and flexible design system, whether for mobile, web, TV or weartech.

Timeline

4 months

My roles

Design system manager

Goals

Clean and prepare the old design system for a rebranding

Constraints

Was no communication between designers and developpers

Deezer is

DESIGNERS

DEVELOPPERS

10M

USERS

Design system audit in early 2023

- Shared between all stacks but not often contributed
- Alignements errors between the final product and what is drawn in Figma
- Communication problems between designers and developpers
- Some components intended for the desktop were used on mobile and vice versa
- Problems integrating colors, spacing etc. without a token system
- Exploding file sizes

Implementing the new strategy

- Assessment of designers' and developers' needs
- Work on the relationship between team size and ease of use of the design system
- Development of specification deliverables to be handed in with the PMs, to save designers time without reducing rendering quality.
- Separation of the general library of the old design system into different structures according to platforms (mobile, desktop, TV, weartech...).
- Setting up routines for designers, such as having their files checked by the design system team before showing mock-ups to developers, or systematically optimizing the size of visuals.
- Frequent monitoring of component usage and regular feedback on blocking points and areas for improvement by designers and developers.