De l’utilité d’un Design System dans un rebranding produit 🐛

Le rebranding de Pretto du côté de l’équipe Produit

Un rebranding (en français : re-définir l’identité de sa marque) est toujours un évènement dans l’histoire d’une entreprise. De la même façon que les serpents changent de peau pour grandir ou que les chenilles se transforment en papillons, Pretto qui a grandi et a mûri pendant ses 4 premières années d’existence fait sa mue pour que son image reflète ce que nous sommes devenus.

Pour redéfinir ce qu’est Pretto aujourd’hui, nous avons décidé de faire appel à l’agence Social Club. Pendant 4 mois nous avons travaillé ensemble pour extraire et identifier les composantes de notre identité et de notre marque. Pour en savoir plus sur le cheminement qui nous a mené vers cette nouvelle identité vous pouvez lire cet article. Mais ici je vais vous raconter comment nous avons métamorphosé le Produit depuis l’intérieur de la chrysalide.

Une évolution programmée depuis la naissance

Très tôt Pretto a embauché un Product Designer pour concevoir les interfaces et les parcours utilisateurs de son produit. Anthony était alors le 4ᵉ employé quand d’autres boîtes recrutent des Designers bien plus tard, souvent “pour rendre plus beau” un produit en ligne depuis un moment.

Pour Renaud et Pierre, les fondateurs de Pretto, il était capital de s’appuyer tout de suite sur l’expérience d’un Designer Senior ayant une solide expérience produit. Anthony avait déjà participé au développement d’un service numérique par le passé et savait comment délivrer la meilleure expérience utilisateur pour concurrencer les ténors du marché. C’est ainsi que très naturellement, la culture du Design a infusée l’identité de Pretto et que la première version du Design System est née : Bricks.

Voici Bricks : Lire l’article écrit à l’époque

Un Design System pour la vie

Bricks s’est inspiré des principes de l’atomic design — une approche du design modulaire conçue par Brad Frost afin de créer des Design Systems (plus d’infos ici). Ce Design System a été co-conçu par les Designers et les développeurs Front-end de Pretto afin de trouver une solution pratique, utilisable sur le long terme, évolutive et adaptée au workflow de l’organisation de l’équipe Produit.

Chaque composant est à la fois présent dans la librairie Figma des Designers mais aussi dans la librairie React des développeurs.

Rappel de principe

Mais un Design System c’est quoi au juste ? Admettons que vous recevez une boîte de Lego® pour Noël. Vous la secouez un peu, et vous entendez toutes les pièces qui s’entrechoquent à l’intérieur. Vous ouvrez la boîte et vous découvrez un stock de pièces en plastique de formes et de couleurs différentes capables de s’assembler pour créer et construire des formes à l’infini. Eh bien dans un Design System c’est pareil, on a des éléments de base appelés “atomes” capables d’être assemblés entre eux pour créer des éléments plus complexes, les “molécules”.

La boîte de Lego® Pretto contient un certains nombre d’atomes tels que : boutons, pictos, champs de saisie, check-box, cartes etc., mais aussi des assemblages qu’on aime bien car utilisés de façon récurrente dans nos interfaces. Par exemple : modales, bannières d’alerte, listes etc.

Bref, là vous vous dites :

“ Ok, des articles comme ça j’en ai lus des dizaines, rien de nouveau”.

C’est maintenant que ça devient intéressant : Bricks ayant été mis en place dès la V1 de Pretto, quelque chose de formidable s’est produit. L’identité de Pretto a été de ce fait intégrée dans son code source, comme si on avait codé le gène de l’identité visuelle de Pretto et qu’on pouvait maintenant grâce à une simple manipulation génétique donner une nouvelle forme et une nouvelle image à notre produit.

Tout ça est très théorique et encore fallait-il se poser les bonnes questions.
De chenille à papillon il y a tout de même pas mal de changements, alors par quoi commencer ? Changer les antennes ? Les ailes ? La couleur ? D’autant qu’à ce moment de l’histoire, l’équipe technique n’est constituée que de 2 développeurs front, et qu’un seul assurera l’implémentation de la nouvelle identité.

Début décembre 2020 nous avons cherché à savoir combien de temps cela prendrait de tout changer en s’assurant qu‘il n’y aurait pas de dommages collatéraux. Et on s’est rendu compte que ce serait super long. Jamais nous ne pourrions tenir les délais avant le dévoilement de la nouvelle identité au grand public prévue pour fin janvier 2021.

L’apport partiel d’un nouveau génome

Pour permettre le lancement des campagnes publicitaires dans les temps, nous avons choisis de traiter l’univers graphique indépendamment du Design System. Il était prioritaire d’assurer la cohérence visuelle entre les publicités et les pages du site même si les guidelines de la nouvelle identité n’étaient pas strictement respectées.

Revenons à nos Lego®. Tout le monde connaît la boîte Lego® classique avec ses pièces rectangulaires jaunes, vertes et rouges. Imaginez maintenant que vous avez une boîte de Lego® en édition limitée avec les mêmes pièces mais de couleur noires, métallisées et transparentes. Et bien chez Pretto, cette différence c’est ce qu’on a appelé le “thème” et comme nous avons un produit plus technologiquement avancé que les Lego®, nous pouvons faire quelque chose que les Lego® ne peuvent pas faire :

Nous pouvons appliquer un thème à la volée sur tous les éléments contenus dans notre Design System.

Étape 1 : Opération coup de peinture

Pour appliquer un nouveau thème à nos composants déjà assemblés, nous avons décidé d’utiliser un feature-flag. Cette petite commande permet d’activer une donnée stockée dans le navigateur qui modifie un paramètre du code de la page visitée.

Exemple pour changer une couleur :

$primary-1: var(--primary-1);
body {
--primary-1: #35ae77;
}
body.theme--new {
--primary-1: #0c806b;
}

Bien sûr la réalité n’est pas aussi simple. Comme tout produit, Pretto a accumulé un peu de dette technique au fil des années et le thème n’est pas appliqué de la même manière sur tous nos composants.

Les plus anciens composants, intégrés aux prémices de Pretto utilisent encore le langage SCSS tandis que les composants plus récents utilisent React et les styled-components. Mais avec un peu d’astuce et quelques tableaux de correspondances voici le résultat :

Désormais nous pouvons voir en prod, l’impact du thème sur toutes les pages de notre service. Autant vous dire que faire de la recette avec un feature-flag, devient un jeu d’enfant.

Étape 2 : Ajustements et intégration des premiers atomes spécifiques

La mise en place du feature-flag à permis de basculer l’intégralité de la plateforme sur le nouveau thème en seulement 4 jours. Fin décembre, il restait encore 1 mois pour faire une sortie de chrysalide réussie. Nous avons listé les écrans sur lesquels le thème ne fonctionnait pas. En cause : les images ou certains contrastes typographiques. Mais comme la nature de Pretto est bien faite, sur plus d’une centaine de pages, notre tableau de recette ne comportait qu’une vingtaine de lignes !

En parallèle de ce travail d’ajustement nous avons lancé l’intégration de la nouvelle page d’accueil. Cette page comporte certains nouveaux atomes spécifiques à la nouvelle identité de Pretto tels que les CTA (Call to Action), les champs de saisie, le logo ou des molécules telles que le module d’avis Trustpilot. Ils sont alors progressivement ajoutés à une nouvelle librairie de composants, c’est l’embryon de notre futur Design System.

La nouvelle Home : pretto.fr

À l’issue de cette étape, nous sommes prêt à dévoiler la nouvelle identité de Pretto au grand public ! Notre site est raccord en terme d’univers coloré, illustratif et typographique avec les campagnes publicitaires. Il s’est passé à peine 1 mois entre les premières validations avec l’agence et la mise en ligne de ces modifications.

Évidement la transformation n’est pas complète. Même si en apparence Pretto a changé, il reste beaucoup d’éléments à implémenter.

De nouveaux gènes architectes

Maintenant que la nouvelle identité de Pretto est dévoilée, que les affiches sont dans le métro et derrière les bus, arrive le temps du redesign des interfaces et de l’expérience utilisateur. Jusqu’à présent je ne vous ai pas parlé de Product Design (Conception Produit), mais de rebranding et d’identité visuelle. Mais Pretto n’est plus une chenille et se présente aux yeux du monde comme étant un papillon. Il faut que l’équipe Produit s’approprie ces nouvelles caractéristiques en mettant en place le nouveau Design System à proprement parlé. Cela implique de nouvelles règles d’espacements, de hiérarchies de textes ou encore de nouvelles grilles de mise en page. Alors que notre stratégie visait le court terme, nous pouvons désormais planifier à moyen et long terme.

Un nouveau Design System : Zen

À moyen terme nous allons transformer l’ensemble des pages dites d’acquisition (landings, articles, guide, simulateur…) ainsi que les emails, newsletters et documents PDF en leur appliquant les règles du nouveau Design System.

Ces pages ne nécessitent pas de redesign important sur le plan UX (expérience utilisateur), car elles sont pour la plupart informatives. Cependant elles représentent la majorité du trafic sur nos sites et sont par conséquent les vitrines de notre image de marque.

L’application du Design System sur ces pages nous permet d’affiner et d’identifier les composants clés pour l’ensemble de nos interfaces :

• bannières
• encart
• menus
• chat
• grilles
• timelines
• etc.

Aperçu du nouveau Design System sur Figma

Redesign et itération continue

Sur le plus long terme, l’objectif est simple. Il faut que l’ancienne identité disparaisse totalement des interfaces de Pretto, y compris sur la partie dite applicative, et que l’ensemble soit construit et régi d’après le nouveau Design System : Zen.

Ce redesign va venir impacter des pages beaucoup plus critiques sur le plan de l’expérience utilisateur en intervenant sur des composants liés aux fonctionnalités de l’espace client (téléchargement des documents, suivi de dossier, prise de RDV avec un expert crédit…).

Pour anticiper les effets qu’aurait notre nouveau Design System sur les enjeux UX et business, Zen se déploiera au fur et à mesure des itérations produit de l’année à venir. Ce travail ne s’inscrit plus tant dans un rebranding que dans l’amélioration continue de notre plateforme.

Merci pour votre lecture 🙏

À lire :

Qu'est-ce qu'un Design System ? Définition Design System UX

Atomic Design

Scalabilité, UX & Design system : enjeux au cœur des interfaces