SECTEUR :
LUXE
MAISON :
TAITTINGER
ANNÉE :
2021
RÔLE :
LEAD PRODUCT DESIGNER
Contexte & problématique
Contexte : La Maison de Champagne Taittinger souhaitait moderniser sa présence digitale et son expérience client sur plus-de-bulles.com, son principal revendeur e-commerce. Le site, très performant commercialement, ne reflétait ni le positionnement premium de Taittinger, ni ses standards graphiques.
L'objectif était de convaincre ce partenaire de missionner ses développeurs sur la refonte des pages Taittinger pour augmenter la valeur perçue et donc les ventes, en lui présentant des prototypes.
Missions
Créer le brand system Taittinger sur Figma : bibliothèque de composants etc.
Maintenir la cohérence de la charte graphique luxe de Taittinger en digital en prenant compte des contraintes techniques du site e-commerce.
Concevoir des maquettes & prototypes animés UX/UI précis au pixel près et itérer en A/B tests sur Figma.
Poursuivre l'itération sur d'autres cas d'usage en multi-device et responsive design : ci-dessous la refonte du template de newsletters.
Cadrage mission, diagnotic et audit de maturité :
Design process & challenges
Le défi principal : créer un brand system Figma multi-device from scratch qui traduit un univers premium dans un cadre e-commerce contraint.
Pour cela, j'ai collaboré avec différentes métiers (DA, PM, digital, marketing) pour intégrer les contraintes techniques et leurs feedbacks en continue.
Construction du brand system sur Figma
Création des composants, styles typographiques, grilles, layout, nuancier.
Audit HTML/CSS pour comprendre les contraintes d’intégration du site.
Exploration UX/UI & prototypage
Travail mobile-first, puis déclinaison tablette & desktop.
Itérations rapides, déclinaison de plusieurs pages produits.
A/B test utilisateurs pour évaluer : taux de rebond, conversion CTA etc.
Animation des prototypes avec transitions pour démo.
Choix final
V1 épurée sans navigation latérale (voir ci-dessous).
Navigation simplifiée → moins de friction → conversion plus forte.
Optimisée pour une intégration front rapide par l’équipe du revendeur.
Hand-off design-dev
Zeplin : export maquette avec specs, CSS, assets.
Maquettes :
Prototype Figma WIP :
Prototype final :
Resultats & takeaways
Résultats
+15 % de ventes des gammes Taittinger sur plus-de-bulles.com après mise en ligne.
Le design retenu est toujours en ligne depuis 2021, preuve de sa performance durable.
Le site a étendu la refonte au header et au footer, convaincu de l’impact du design sur la performance.
Adoption interne forte du système sur Figma → meilleure cohérence visuelle en 360.
Taweaways
Travailler en équipe pluridisciplinaire de la discovery à la delivery sans créer de silos.
Convaincre différents métiers de l'intérêt d'utiliser Figma et d'y créer un brand system.
D'assurer la cohérence du brand system sur tout support, en documentant les pratiques pour les équipes internes sur un brand book digital pour expliquer les règles d'usage et faciliter l'adoption en interne.
Témoignage
Les prototypes de Caroline ont aidé l'expérience digitale de Taittinger en conciliant performance e-commerce et esthétisme premium.
