OBJECTIF ET ENJEUX

Créer un écosystème numérique cohérent à la marque SBM Offshore Un Design System est un référentiel de composants réutilisables dans divers applications numériques et une documentation de bonnes pratiques pour les designer et développeurs de ces produits et services digitaux.

Cette solution permet de:

  • Faciliter le travail des équipes qui peuvent ainsi piocher parmi les composants prêts et écrits dans un langage commun (ce qui facilite la communication);
  • Réduire la « dette technique » (temps et budget) des projets digitaux;
  • Créer un écosystème de marque cohérent, respectant l’identité de l’entreprise pour offrir une meilleure expérience aux utilisateurs et aux clients finaux.

Ce dernier point a été l’objectif initial de SBM Offshore.

Design System

Intervention

Responsabilités

UX Designer, UI Designer

Durée du projet

5 mois

Client

SBM Offshore

Méthodologies appliquées

  • Mode Agile (8 sprints)
  • Ateliers
  • Personas
  • Analyse de parcours utilisateurs
  • Tests utilisateurs
  • Création de librairie de composants sous Adobe XD
  • Création de pages Sharepoint de documentation (avec iframes Adobe XD)
  • Rédaction de procédures de maintenance

LIVRABLES

livrables du Design System

CONTEXTE

Manque de consistance

Au contraire de la communication papier du groupe, les services numériques manquent d’une cohérence graphique et expérientielle pouvant nuire à l’image de la marque. Le but de ce projet était donc de réduire les inconsistantes entre les différentes applications en créant une Design System qui sera la base de tout nouveau développement applicatif à destination des clients finaux.

Atelier en visioconférence sur Miro

MÉTHODOLOGIE

Recherche en ateliers

Le projet a été mené en mode Agile avec des sprints de 2 semaines. Les premiers sprints ont été dédiés à la réalisation de 4 ateliers pour me permettre de mieux connaitre les utilisateurs de 2 applications web et 1 plateforme marché représentatives de l’activité du groupe. Grâce à l’implication des participants, cette étude m’a permis de bien définir les besoins, les attentes et les motivations des utilisateurs actuels. Le reporting a été réalisé sous la forme de fiches Personas et d’analyses des parcours utilisateurs des outils étudiés.

Conclusion des ateliers

Ces ateliers ont permis de conclure que:

  • Les utilisateurs actuels étaient des experts, avec un profil fort d’ingénieur: leurs besoins sont la centralisation des informations, la confiance en les outils et les données qu’ils présentent.
  • Les utilisateurs ont appris à maitriser ses interfaces par eux-mêmes (en interagissant avec, sans formation) et ils s’en contentent: ils ne remarquent pas qu’ils perdent parfois du temps à rechercher une information, ils n’ont pas conscience de l’intérêt d’une expérience fluide (affichage adapté à l’écran, interface facile et agréable à utiliser). Ce constat ne remettait pas en cause les bons résultats opérationnels des applications étudiées mais leur expérience était améliorable.
  • Les utilisateurs ne se sentaient pas légitimes et en mesure d’apprécier l’image représentée par les interfaces: image ne représentant pas l’identité de la marque (couleurs et niveau d’expérience non optimales).
  • A noter que ces différentes interfaces n’ont pas été conçues pour des clients finaux, et en l’état elles ne le pouvaient pas: d’un point de vue visuel (image de la marque) et d’un point de vue de l’expérience (facilité d’utilisation, rapidité à trouver l’information) ces interfaces ne répondraient pas aux exigences de clients finaux.

Cette phase de recherche a permis de conforter le besoin d’un Design System avec une image de marque consistante et de pouvoir mieux définir ce Design System sur base des besoins, des comportements et des motivations des utilisateurs actuels et futurs (clients finaux) des applications de SBM Offshore.

Témoignage client

« [le Design System] va professionnaliser nos développements. C’est le futur de notre communication. »

Directeur de la transformation
Perception initiale des utilisateurs Perception initiale des utilisateurs
Composants Adobe XD
Zoom

Inventaire et Design

Parallèlement aux ateliers, j’ai réalisé un inventaire des composants utilisés dans les applications étudiées pour adapter le périmètre du Design System.

Les définitions et composants ont été créés dans Adobe XD (pour s’accorder à l’écosystème logiciels de SBM Offshore) sous forme d’une librairie à partager aux designers des projets du groupe. Il suffit ainsi aux designers de demander l’accès à la librairie pour qu’elle soit ajoutée automatiquement à son compte Adobe et qu’ils puissent ainsi piocher parmi les composants pré-définis pour construire leurs interfaces et proposer des prototypes interactifs d’applications.

Documentation du Design System

La documentation du Design System a été rédigée sur SharePoint: les différentes pages ont été illustrées grâce à des exports de maquettes liés à la librairie Adobe XD créée. Ainsi les illustrations SharePoint sont synchronisées avec la librairie Adobe XD pour une maintenance facilitée.

Un Design System est un outil vivant: ce Design System sera donc amené à évoluer pour répondre aux nouveaux besoins et défis des utilisateurs et à l’évolution de SBM Offshore. Des règles de gouvernance ont donc été établies et intégrées au modèle de gestion de projets de l’entreprise.

Quelques pages SharePoint de la documentation du Design System
Zoom

CONCLUSION

Livraison du Design System et sa documentation

Livrables du projet de Design System
Zoom
 
Le Design System a été livré sous forme de: * Un site SharePoint de plus d’une quarantaine de pages illustrées des composants incluant les bonnes pratiques et concepts de la démarche UX. * Une librairie Adobe XD de composants à partager avec les designers pour leur utilisation dans leurs différents projets. * Des règles de gouvernance pour soutenir l’équipe détentrice du Design System. * Des procédures de maintenance illustrées pour l'équipe responsable du Design System.
Témoignage client

« Dans le cadre de la transformation digitale de SBM Offshore, Adeline a mis en place un design system. Le mode projet etait 100% en distanciel, dans un environnement international et dans un contexte nouveau pour SBM Offshore. Ce fut un immense plaisir de collaborer ensemble ! Adeline a fait preuve de professionnalisme, utilisant le Design Thinking pour comprendre le besoin des utilisateurs et la methode Agile pour garder le contact constant avec eux ainsi qu’avec les sponsors. Le resultat a ete de suite adopte par les utilisateurs. Les elements du design system sont de qualite et exhaustifs. Un grand merci a toi Adeline pour ton formidable travail et ta bonne humeur tout au long du projet ! J’espere que nous aurons l’occasion de collaborer a nouveau ensemble prochainement. »

Aline Gallo
Digital Transformation Manager
Témoignage client

« J’ai eu la chance de travailler récemment avec Adeline sur notre projet de Design System, son expertise et ses compétences techniques nous ont permis de progresser rapidement et surtout très très sereinement, ce qui est essentiel pour moi dans ce genre de projet ou des dizaines de personnes sont impliquées. Adeline a su aussi être extrêmement pédagogue et disponible afin de transmettre ses connaissances dans le domaine du digital a des personnes qui comme moi découvrait cet univers et ces nouvelles façon de travailler. Bref, que du bon tout au long de ce projet, Adeline est une personne à qui j accorde toute ma confiance et qui a une réelle maîtrise de son sujet. »

Jean Caraglio
Communication Director

Votre écosystème digital est-il consistant?

Les services digitaux proposés à vos clients se doivent de représenter l’image de votre entreprise et rappeler la confiance qui lie vos clients à votre marque. Un Design System apporte cette rigueur et des règles d’usage nécessaires aux équipes et aux fournisseurs pour atteindre cette qualité attendue par vos clients dans vos services numériques. Discutons de vos besoins.

Contactez-moi

🌱 Ce site est éco-conçu.
Il est éco-responsable et basse consommation.

  • Sa notation moyenne A est maximale, obtenue selon l'outil de performance environnementale www.ecoindex.fr. Pour un ordre de grandeur, 100 visites par mois consomment 2.02 l d’eau bleue et émettent 135 gCO2e de gaz à effet de serre.
  • Le poids moyen des pages du site est de moins de 500 Ko.
  • Scores Lighthouse: Performance 95%, Accessibilité 94%, Bonnes pratiques 100%, SEO 92%
  • Hébergement vert chez www.infomaniak.ch.