Emmy Decoursière - Portfolio

emmydecoursière

Accueil

À propos

Accueil

À propos

emmydecoursière

Accueil

À propos

Design system et gouvernance

Refonte de l'Espace client avec la mise en place d'un design système et harmonisation de l'Espace client.

Project brief

Client

Compagnie canadienne du secteur énergétique

Rôle

Product designer

Année

2024/2025

Cette compagnie canadienne du secteur énergétique est un acteur majeur dans le domaine de l'énergie au Québec, se positionne comme un leader dans la transition énergétique et l'innovation.

À la suite des ateliers de vision et de stratégie, l'équipe a choisi de poursuivre la refonte de l'Espace client avec nous. Un processus agile a été mis en place, débutant par la création de maquettes conceptuelles, et s'étendant à la mise en place d'un design system afin d'assurer la cohérence visuelle et fonctionnelle tout au long des parcours, tout en anticipant les besoins futurs.

Mon rôle dans ce projet est marqué par une forte implication à chaque étape du processus. Cela me permet d'avoir une vue d'ensemble du projet et de m'assurer de la cohérence de l'expérience utilisateur. Aux côtés de l'équipe, j'ai contribué à la création des trois maquettes conceptuelles, priorisées comme projet pilote du développement du design system, ainsi qu'aux différents parcours qui ont suivi. Parallèlement, je suis co-responsable du design système : nous avons défini ses bases et gérons actuellement l'élaboration des différents composants, en garantissant leur modularité, leur réutilisabilité et leur capacité à évoluer en fonction des besoins futurs.

Processus de travail/projet

Ce projet vise à mettre en place un processus structuré en trois phases principales : la découverte des enjeux business, l’anticipation des besoins et la proposition de solutions structurantes. Il a permis d'établir un cadre clair et documenté, avec des critères de validation, des rôles définis et des phases de design distinctes.

À chaque étape, des personnes clés valident les concepts avant le passage en développement, garantissant ainsi des décisions réfléchies et documentées. L'intégration du design system et la transition fluide de Sketch à Figma ont permis une méthodologie parfaitement en phase avec l’équipe, assurant une collaboration optimale et un suivi rigoureux à chaque étape toujours dans le but d'atteindre leur objectif de décarbonation.

D'un UI kit à un design system

Faisant face à des défis de cohérence entre leurs différents projets, nous avons saisi cette opportunité pour proposer une approche pédagogique et les éduquer sur les avantages d'un design system, en l'adaptant spécifiquement à leur niveau de maturité et à leur réalité organisationnelle.

Unification

Standardiser les composants et styles pour éviter la duplication de comportements dans l'Espace client et ailleurs.

Productivité

Réduire le temps de développement en réutilisant des composants prêts à l’emploi et documenté selon les use cases.

Collaboration et documentation

Faciliter la communication entre de design et de développement grâce à une source unique de vérité.

Processus de gouvernance

Dans un contexte agile et avec une contrainte de temps forte, la gouvernance actuelle repose sur les principes suivants :

Priorisation de maquettes

création des maquettes validées par le PO de l’Espace client - projet pilote autour de 4 écrans (80% des composants).

Alignement avec le design system

vérification que chacun des élément des maquettes soit un composant du Design System si cela fait du sens.

Vérification des composants

réutilisabilité, accessibilité, présence des différents états, comportement adapté à plusieurs cas d'usage et documentation.

Préparation au développement

les composants validés sont marqués en “ready to dév.” et communiqués lors de points hebdomadaires.

Maintenance et évolutions

des branches du design system sont créées pour la mise à jour / maintenance des composants.

Développement et suivi de qualité

suivi des composants en production au travers d'un QA afin de s'assurer de la cohérence de celui-ci.

Axes d’amélioration :

Tester systématiquement les composants pour détecter et corriger les bugs en amont.
Améliorer le processus de validation pour fluidifier l’intégration des composants.
Optimiser la documentation pour garantir une adoption rapide des nouvelles mises à jour.

Axes d’amélioration :

Tester systématiquement les composants pour détecter et corriger les bugs en amont.
Améliorer le processus de validation pour fluidifier l’intégration des composants.
Optimiser la documentation pour garantir une adoption rapide des nouvelles mises à jour.

Maquettes conceptuelles

En collaboration avec l'équipe, nous avons identifié trois écrans clés comme priorités pour établir les bases de la refonte UI de l'espace client, tout en respectant la brand existante. Parallèlement, nous avons initié la création du design system, structuré autour de ces différents écrans principaux : tableau de bord, consommation et facturation.

Ces trois pages en desktop et mobile regroupaient l’essentiel des composants susceptibles d’être réutilisés sur l'ensemble de la plateforme. Elles ont donc servi à établir les fondations d’une source de vérité commune, garantissant ainsi la cohérence de la plateforme et des différents produits.

Contenu destiné à une présentation en entretien, non destiné à une diffusion en ligne.

Structure du
design system

Structure du design system

Gouvernance

Usage, maintenance et documentation

Accessibilité

Editorial content

Visual asset

Design kit

Dév. kit

Com. kit

Fondations

En parallèle des maquettes, nous avons défini les bases du design system en adaptant l'identité de la marque au digital, via des variables (primitives + sémantique) comme les couleurs, la typographie, les radius, le spacing et les effets visuels.

Composants

Les composants, conçus pour être modulables et fonctionnels, garantissent une expérience fluide tout en intégrant les contraintes techniques grâce à une collaboration étroite avec les développeurs.

Documentation

En binôme, j'ai contribué à la création des variables et composants issus des maquettes, en collaboration étroite avec l’équipe de développement. Mon rôle a consisté à garantir que ces éléments soient intégrés de manière cohérente dans le design system, tout en documentant chaque étape pour assurer une utilisation optimale de l'outil. Cette documentation est cruciale pour cadrer et guider l'équipe dans l'implémentation, en garantissant l'homogénéité visuelle et la cohérence des parcours utilisateurs, tout en respectant l'image de marque de la compagnie.

L'objectif était également garder les choses simples et flexibles afin garantir qu'elles soient réellement utilisées et scalable pour les futurs features à intégrer dans l'espace client.

Création de

composants

Création de composants

Pour créer les composants, nous avons d’abord conçu des éléments simples comme des boutons, des tags ou des icons, en utilisant les fondations définies au préalable. Ces éléments ont ensuite été combinés pour former des blocs plus complexes, tels que des cartes ou des tableaux, assurant une cohérence visuelle et fonctionnelle sur l’ensemble de l'expérience.

En quelques chiffres

32 composants

Nous avons conçu et intégré environ 32 composants clés, allant des boutons et formulaires aux tableaux et cartes, garantissant une base modulable et cohérente pour l'ensemble des interfaces.

9 refonte de flows

Nous avons mis à jour les parcours clés, tels que les 3 écrans prioritaire, le flow emménagement / déménagement tout en développant des flows de vision pour la biénergie et l'efficacité énergétique.

4 designers

Dans notre équipe de 4 designers. Ensemble, nous définissons et maintenons le design system, en s'assurant qu'il soit appliqué aux maquettes et garantir des interfaces cohérentes.

3 développeurs

Nous collaborons régulièrement avec une équipe de 3 développeurs afin garantir la faisabilité technique et s'assurer de la qualité des éléments développés avant leur intégration finale auprès des utilisateurs.

Récapitulatif et suite

Récapitulatif de mes missions :

Création de maquettes conceptuelles priorisées, servant de base pour la refonte de l'interface utilisateur de l'Espace client et pour la mise en place du design système.
Adaptation des parcours utilisateurs selon le nouveau design, et intégrant quelques améliorations de l'expérience, à plus ou moins long terme.
Mise en place du design system en établissant les fondations construitent grâce aux variables, tout en créant et en actualisant les composants de manière progressive, en fonction de l'évolution du projet.
Élaboration et gestion de processus agiles clairs et définis pour la validation des concepts avec les clients et pour l'actualisation du design system en interne
Collaboration forte avec les développeurs pour garantir une intégration efficace du design system.

Récapitulatif de mes missions :

Création de maquettes conceptuelles priorisées, servant de base pour la refonte de l'interface utilisateur de l'Espace client et pour la mise en place du design système.
Adaptation des parcours utilisateurs selon le nouveau design, et intégrant quelques améliorations de l'expérience, à plus ou moins long terme.
Mise en place du design system en établissant les fondations construitent grâce aux variables, tout en créant et en actualisant les composants de manière progressive, en fonction de l'évolution du projet.
Élaboration et gestion de processus agiles clairs et définis pour la validation des concepts avec les clients et pour l'actualisation du design system en interne
Collaboration forte avec les développeurs pour garantir une intégration efficace du design system.

Apprentissages :

Compréhension des processus de validation au sein d’une grande équipe, avec une gestion structurée des priorités à chaque étape et pour chaque fonctionnalité.
Mise en place d’une gouvernance efficace pour le design system, incluant la gestion des mises à jour, la documentation des composants et l’alignement avec les équipes produit et développement.
Importance de la collaboration continue avec les développeurs pour assurer la faisabilité, l’optimisation et l’évolution du design system.

Apprentissages :

Compréhension des processus de validation au sein d’une grande équipe, avec une gestion structurée des priorités à chaque étape et pour chaque fonctionnalité.
Mise en place d’une gouvernance efficace pour le design system, incluant la gestion des mises à jour, la documentation des composants et l’alignement avec les équipes produit et développement.
Importance de la collaboration continue avec les développeurs pour assurer la faisabilité, l’optimisation et l’évolution du design system.

Projet suivant

REFONTE UX/UI

MULTI-DEVICES

REFONTE UX/UI

MULTI-DEVICES

MÉDICAL

REFONTE UI

MÉDICAL

REFONTE UI

MÉDICAL

REFONTE UI

Travaillons ensemble

Que diriez-vous de commencer à construire quelque chose d'incroyable ensemble ? Si vous vous identifiez au travers de mes projets, n'hésitez pas à me contacter afin que nous puissions organiser une rencontre !

Nous pouvons nous connecter via

e-mail

Travaillons ensemble

Nous pouvons nous connecter via

e-mail

Travaillons ensemble

Nous pouvons nous connecter via

e-mail