Concilier désir et efficacité

Les images, les contenus éditoriaux et les détails graphiques occupent une place centrale dans l’expérience Diptyque. L’enjeu de la refonte était de préserver cette richesse tout en donnant des repères clairs pour découvrir les produits et progresser vers l’achat.

Le travail associait conception des parcours desktop et mobile, prototypage et structuration du design system. Ces dimensions se nourrissaient mutuellement : les besoins des parcours orientaient les composants à concevoir, tandis que le référentiel commun assurait leur cohérence.

Avant cette intervention, aucun référentiel structuré ne réunissait les éléments graphiques et interactifs de la marque. Le travail sur le design system consistait à organiser ces éléments en une base commune, utilisable dans les différents parcours du site.

Les styles, les composants et leurs états étaient structurés et documentés pour faciliter leur réutilisation et leur développement. Les layouts éditoriaux illustrent cette démarche : définir des compositions adaptées aux contenus de la Maison et préciser leurs déclinaisons responsive.

La conception des parcours associait maquettes, prototypes et spécifications pour relier les intentions d’expérience aux détails de l’interface. Le parcours de gravure illustre cette démarche : organiser les choix de personnalisation, rendre leur enchaînement lisible et préciser les interactions à chaque étape.

Le flow donne une vue d’ensemble du parcours. Les spécifications détaillent ensuite les règles nécessaires à son développement : actualisation de l’aperçu, limites de saisie et navigation entre les étapes. Cette continuité permet de transmettre les décisions de conception avec les comportements attendus.

La refonte du checkout couvrait l’identification, la livraison, le paiement et la confirmation de commande. La conception portait sur la continuité entre ces étapes : hiérarchiser les informations, rendre les actions lisibles et permettre de suivre la progression du parcours.

Les maquettes desktop et mobile précisaient la place des formulaires, des récapitulatifs et des choix proposés. Les prototypes permettaient d’examiner leurs enchaînements avant le développement, en considérant le tunnel comme un parcours complet.

Certaines pistes de conception étaient déclinées en variantes, puis transmises aux équipes dédiées aux A/B tests. Les maquettes et les prototypes rendaient les alternatives concrètes pour permettre leur comparaison.

L’analyse des résultats contribuait à orienter les itérations suivantes. Le travail de conception se prolongeait ainsi au-delà de la livraison des maquettes, avec des choix affinés à partir des usages observés.

Les solutions retenues avaient vocation à enrichir le référentiel commun. Le visuel des filtres illustre ce lien entre expérimentation et design system : une variante identifiée comme gagnante devient une référence à intégrer pour les usages suivants.

La maintenance du design system prolongeait ainsi le travail sur les parcours. Elle permettait de faire évoluer les composants à partir des besoins du site et des enseignements des tests, tout en préservant la cohérence de l’expérience.