Deezer

Design system
Year

2018

Duration

4 months

Context & role

Deezer is a cross-platform music streaming service.
My responsibility as a product designer was to work on the homogenization of the design across all platforms in the product.

In the parisian offices, 350 employees work together every day. Several professions (developers, designers, PO, PM, BA…) work on the same product, often by using the same tools.

 

Problem statement

Lack of consistency, a design difficult to maintain and develop.

Business needs lead up designers to build more, faster and better but without guidelines in place, each new employee will slow down the process even further.

It was really important to find a solution to restore consistency and facilitate the use of resources.

The solution

Design System

My mission

Prove the usefulness of a design system by carrying out an inventory & an audit.

The inventory identified more than 60 pages including fonts, colors, icons, buttons, cells…
The realization of the audit made it possible to highlight all visible inconsistencies on each platform.

This step is essential for several reasons :

Build a sense of belonging
Develop a shared vocabulary
Understand, align and maintain

btn-deezer
My mission

Evangelize to create a full adherence

“Shared vision, Collaboration, Productivity”.
“Digital ecosystem, Solid foundations, Fast time to market”.
“Unified experience, Relationship with the brand, Quality of the experience”.

The early involvement of the team and taking in consideration their points of view facilitated the adoption of the design system.
Presentation google slide to all teams.

Design-system-representation
My mission

Create fundamentals and components

Integrate in the sketch library the layout of pages and the general identity of the product. (colors, typography, icons…).
Creation of all existing components and templates by using the Atomic design.

Creation of two scalable platforms, the first one dedicated to the rules for using components, the second one a open source tool for developers where they can directly take the code of components.

iPhone-design system
To sum it up

The creation of a design system had several impacts within the company.

Removal of many unused elements and the homogenization of specific components.
A huge time saver for designers and developers.
A rooted design culture

Next steps :
Implementation of metrics
Suggest an evolution of many components in order to improve the user experience of the product.

02