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.
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.
Ă 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.
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.
Ă lire :