AXA DS

Lead Designer - UX - Choix tech

Créer un design system pour le leader des assurances.

Permettre aux équipes de production digitale du monde entier d’accéder aux ressources design indispensables pour créer de nouveaux services et produits.

Suite à une refonte de la plateforme de marque du groupe, AXA nous (l'agence Haigo) a sollicité sur les moyens de déploiement de cette nouvelle identité digitale et sa diffusion au sein des entités du groupe.

Nous avons recommandé la conception d’une plateforme permettant aux designers et développeurs du monde entier d’accéder à des ressources digitales validées par le groupe, sous forme de composants design pour sites et applications, ainsi que leurs bonnes pratiques d’utilisation.

Le Challenge

Mettre à disposition du groupe un service facilitant et accélérant la conception de nouveaux produits digitaux, tels que des sites et applications. Créer une communauté de designers et de développeurs partageant les bonnes pratiques sur leurs projets.


Le Resultat

30 sites web ont été réalisés en utilisant les guidelines conçues par l'équipes, plus de 250 éléments graphiques sont aujourd’hui disponibles pour la création d’interfaces, 500 membres actifs sur Slack accompagnés et conseillés au quotidien

AXA guidelines
Capture d'écran d'une partie du UIkit sketch.

Le projet AXA digitale guideline a été lancé en 2016, j'ai rejoint l'équipe produite AXA en 2018.


Lorsque j'ai rejoint cette mission, mon objectif a été de transformer les guidelines s'adressent aux designers en une plateforme plus large nous permettant d'accompagner tous les membres des équipes digitales de toutes les entités AXA dans le monde.



Création des AXA Digital Guidelines

Notre équipe a mis en place la première brique menant à un design system, les AXA digital guidelines. L’objectif premier de ces guidelines a été de réduire la production d’éléments graphiques digitaux redondants un peu partout dans le monde, afin de limiter les coûts de production et d’augmenter la cohérence de marque quel que soit le pays.

image

De nombreuses économies d’échelle devenaient ainsi possibles, comme par exemple un alignement d’utilisation de polices d’écriture (Google Font gratuite) permettant de limiter des coûts importants pour certaines entités à travers le monde.

En parallèle nous nous sommes rapprochés des designers, développeurs, managers sensibles à cette problématique afin de former une communauté et leur permettre de donner leur avis et commentaires pour nous aider à faire évoluer les guidelines sur des éléments à forte valeur ajoutée pour les équipes de production.


Showreel que j'ai réalisé en 2019 pour le Brand Summit AXA 2019. Voir la vidéo avec l'audio

Mise en place du Design System

Nous avons proposé au groupe AXA de mettre en place une démarche de fond vers la création d’un Design System afin de permettre aux designers de concentrer leur temps à solutionner des problématiques de conception plutôt que de réaliser des interfaces optimisées et déjà existantes.

Par exemple, pourquoi demander à un prestataire externe de concevoir des éléments basiques indispensables d’un site comme un header, un footer ou une icône d’application mobile alors que le groupe détient ces éléments déjà optimisés et validés par d’anciens projets du même type ?

Des outils et contenus co-conçus avec les designers et développeurs

Nous avons travaillé en collaboration avec des développeurs afin de mettre en place une version des guidelines adaptée à leur métier et leur permettre d’accéder à des composants graphiques d’un site web directement dans une version codée prête à être “copié-collée” au sein de leurs projets.

Notre objectif principal fut de mettre en place une version beta techniquement fonctionnel et un User Interface Kit. Ce type de kit vise à regrouper les éléments graphiques d’un site ou d’une application (éléments de navigation, boutons…), et de les rendre disponibles en téléchargement direct.

Lors de ces étapes de projet, nous nous sommes accordés sur la même hiérarchie d’éléments et de nomenclature. Nous utilisons pour l’organisation du UI kit un découpage technique sur le principe “atomic”.

Schéma explicatif du Design Atomique ©Brad Frost
Schéma explicatif du Design Atomique © Brad Frost.

Cette démarche créée par le designer Brad Frost vise à penser les éléments d’un site ou application comme un élément biologique et de raisonner en “atomes d’interface” qui auront leur comportement individuel ou de groupe.

Exemple, des atomes “animation” “couleur de bouton” et “texte de bouton” vont créer la molécule “bouton d’action” qui aura un comportement cohérent et similaire sur chaque site du groupe.

Cette démarche nous a permis de proposer des sections de site complètes ou des éléments unitaires isolés avec la même facilité d’accès tout en préservant la cohérence de marque.

Une première version beta du design system est aujourd’hui live sur le réseau interne AXA, afin de collecter les premiers retours utilisateurs avant le lancement d’une version officielle. Une communauté de presque 500 designers et développeurs comme de nouveaux porteurs de projet dans le groupe nous permettent de récolter de nouveaux apprentissages et besoins pour faire évoluer la plateforme.


Nous somme entrains de travailler avec les AXA à la refonte de la plateforme design.axa.com afin de fournir un accompagnement plus complet lors de la refonte des produits digitaux par toutes les entités AXA dans le monde.

Exemple de ce que pourrait être la futur plateforme design.axa.com
Exemple de ce que pourrait être la futur plateforme design.axa.com

Que retenir du projet

Le resultat en
quelques points

Accompagner les filiales AXA partout dans le monde

Plus de 30 pays et entités utilisent et travaillent avec les guidelines AXA.

Outils méthodologique, Assets design, Assets code.

Des composants web modulaires pour créer les projets digitaux d’une manière efficace et alignée avec l’identité de la marque AXA.

Intégration des contraintes techniques

Mise en place d’une plateforme web qui résume les bonnes pratiques digitales et les partis liés à la marque AXA.