Illustration de marque for.Watt

ÉNERGIE

Une brique numérique pour la transition énergétique

Autoriser ses données énergétiques simplement et rapidement

Voir for.Watt

Aperçu

J’ai conçu un service d’autorisation qui permet aux clients particuliers et professionnels de consentir au partage de leurs données de comptage avec des fournisseurs d’énergie. J’ai porté le produit de bout en bout — de la recherche à l’UX, à l’UI et au contenu. J’ai livré un portail B2C pensé d’abord pour le mobile, un portail B2B complet et un concept d’intégration pour les gestionnaires de points de comptage dans le portail partenaires de 50Hertz.

  • Entretiens et tests avec plusieurs groupes d’utilisateurs
  • Parcours utilisateurs et flux cibles cartographiés
  • Maquettes et prototypes interactifs
  • Interface conçue dans le design system Nova (50Hertz/Elia)
  • Animation d’ateliers, rédaction UX, illustrations et dépliant produit
for.Watt sur ordinateur, tablette et smartphone

Résultat

Le service d’autorisation B2B2C, entièrement web, a été lancé avec succès en septembre 2025 et bien accueilli par la presse spécialisée.

Le service s’articule sans rupture entre tous les rôles : les clients particuliers et professionnels gèrent leurs autorisations depuis le portail for.Watt.

Les gestionnaires de points de comptage travaillent dans le portail partenaires intégré de 50Hertz, tandis que les fournisseurs de services énergétiques se connectent via une interface standardisée.

  • Retours très positifs du secteur et de la presse spécialisée.
  • Un portail public pour les particuliers et les entreprises, avec un espace réservé aux utilisateurs inscrits.
  • Des pages d’accueil dédiées aux clients finaux, aux gestionnaires de compteurs et aux fournisseurs de services, pour attirer de nouveaux utilisateurs et informer en profondeur.
  • Une expérience fondée sur les enseignements de la recherche utilisateur.
  • Des illustrations au trait semi-réalistes qui peuvent devenir un élément fort de la marque.

Enjeu

Permettre aux gestionnaires de points de comptage de vérifier les demandes de façon fiable : rapprocher identités et points de comptage, repérer les erreurs tôt et laisser une trace vérifiable — sans alourdir le travail quotidien.

Rôle

Designer UX, designer UI et visuel, rédacteur UX, chercheur utilisateur

Outils

Figma, Adobe Illustrator, Condens, Azure DevOps, Confluence

Équipe

Designer (moi), product manager, product owner, développeurs front-end et back-end, scrum master, testeur, analyste métier, agence heimrich + hannot pour le logo

Démarche

Reprise

Après avoir repris la conception initiale du designer précédent, j’ai allégé le parcours d’autorisation pour les particuliers en supprimant les cases à cocher individuelles, et j’ai refondu la vue d’ensemble pour rendre immédiatement lisibles les états des demandes et des autorisations.

Parcours de validation

J’ai conçu un parcours de validation simple pour les gestionnaires de points de comptage, articulé autour d’une vue d’ensemble et d’une page de détail. J’ai dessiné les deux écrans et construit un prototype testable qui rend les étapes de vérification explicites et rapides à traiter.

Tests de prototype

En accord avec le product owner, j’ai préparé les guides d’entretien, organisé et mené les sessions, puis consigné les résultats dans des rapports clairs. Sur cette base, j’ai fait évoluer les maquettes pour réduire les erreurs et accélérer les décisions.

Récit

J’ai planifié une arborescence en deux phases, réalisé les wireframes des pages clés et rédigé les titres et les textes principaux. Je les ai ensuite traduits en interface, avec une illustration de personnage qui explique le service sans jargon.

Portail entreprises B2B

J’ai prototypé le portail entreprises, l’ai testé avec un client professionnel et dessiné les pages principales. À l’arrivée de la nouvelle bibliothèque du design system, j’ai repris l’interface pour aligner motifs, composants et cohérence visuelle.

Ateliers

J’ai préparé et animé des ateliers internes et externes : une session parcours client pour le product management à Bruxelles, un atelier d’idéation avec des gestionnaires de compteurs lors du 50Hertz EnergieMarktDialog à Berlin, et un atelier de vision d’équipe lors de notre séminaire berlinois.

Parcours de validation

J’ai développé, à partir de la recherche, un persona de gestionnaire de points de comptage, afin de traduire les enseignements en repères clairs pour les décisions de design.

Cartographier le parcours, de l’achat à la livraison finale, a mis au jour les besoins d’information et d’accompagnement des utilisateurs. Les entretiens ont révélé les principaux points de friction et les ruptures possibles, qui ont nourri la carte de parcours client et guidé les premiers tests de prototype. De ce travail sont nés les premiers wireframes de la nouvelle solution.

Persona d’un gestionnaire de points de comptage
Persona de gestionnaire de points de comptage, issu de la recherche utilisateur
Le parcours idéal des gestionnaires de points de comptage
Parcours idéal du gestionnaire de points de comptage

Le point de vue des gestionnaires de compteurs

Pour préciser et vérifier les hypothèses de l’équipe, j’ai mené des entretiens structurés, accompagnés de deux itérations d’un prototype de service. Le service d’autorisation destiné aux gestionnaires de points de comptage figure comme rubrique à part entière dans le portail partenaires de 50Hertz, et sera également ouvert aux gestionnaires situés hors de la zone de réglage de 50Hertz.

Vue d’ensemble, vue de détail et tiroir du motif de refus
1) Vue d’ensemble du service d’autorisation 2) Vue de détail d’une autorisation 3) Tiroir du motif de refus

Tests de prototype avec des gestionnaires de compteurs

Prototype gestionnaire, page de vue d’ensemble
Prototype gestionnaire avec la page de vue d’ensemble
Vue de détail d’une autorisation avec appel à l’action
Vue de détail d’une autorisation avec appel à l’action
Vue de détail d’une autorisation, partie haute
Vue de détail d’une autorisation, partie haute

Enseignement 1

Des tuiles qui simplifient tout

Des tuiles distinguées par la couleur présentent l’état des demandes et des autorisations, avec le nombre et un filtre rapide. Cette vue d’ensemble simple mène vite au détail. Les entretiens ont confirmé sa facilité d’usage et l’enthousiasme des utilisateurs.

Enseignement 2

Réduire les demandes évitables

Les gestionnaires veulent moins d’interruptions pour se consacrer à leur cœur de métier. Ils ont demandé un motif de refus standard, afin de ne pas répéter sans cesse les mêmes explications. La fonction a été livrée tôt : moins d’allers-retours, un traitement plus rapide.

Enseignement 3

Des obligations hors du cœur de métier

Fournir les données énergétiques est obligatoire, mais ce n’est pas le métier des gestionnaires de points de comptage. Les fournisseurs ajoutent de la pression en exigeant des réponses immédiates à des demandes par e-mail, souvent assorties de pièces jointes qui compliquent le traitement.

Pages publiques et espace privé

Pour réduire la complexité et livrer vite, l’équipe s’est d’abord concentrée sur les particuliers ayant peu de points de soutirage. L’interface a évolué en trois étapes, de la conception reprise à la version finale aux couleurs de la marque.

Le design visait une expérience agréable, avec un code couleur affirmé qui sert à la fois la marque et la lisibilité. Pour les particuliers, les demandes passent avant les autorisations, car une fois l’accès accordé, il n’y a en général plus rien à faire.

Arborescence

S’adresser précisément à chaque public

La navigation principale s’adresse aux particuliers et aux entreprises, tandis que les fournisseurs de services et les gestionnaires de compteurs sont orientés vers des pages dédiées depuis le pied de page.

Pages principales

Wireframes UX

J’ai défini une arborescence et des wireframes pour les pages publiques, qui s’adressent à des publics variés. La navigation principale vise les particuliers et les entreprises ; fournisseurs de services et gestionnaires de compteurs sont orientés vers des pages dédiées depuis le pied de page.

Arborescence des pages publiques de for.Watt
Arborescence des pages publiques pour le lancement et les étapes suivantes
Wireframe de la page d’accueil de for.Watt
Wireframe de la page d’accueil avec annotations par section

Design d’interface

Faire évoluer l’interface

Je suis parti d’une conception reprise et j’ai réalisé deux incréments supplémentaires. J’ai d’abord restructuré la vue d’ensemble, raccourci les textes, retiré le logo et convenu, avec le service juridique et le product owner, de supprimer les cases de confirmation pour gagner en clarté.

Des personnages qui montrent les liens

Les illustrations de personnages ont été retenues pour montrer les relations, les rôles et les notions abstraites. Le style est passé de visuels de banque d’images retouchés à des dessins au trait détaillés, avec des ombres discrètes et des visages plus expressifs.

La vue d’ensemble reprise, à côté de la refonte finale
1) Vue d’ensemble reprise, espace connecté, 2) Refonte finale de la vue d’ensemble
Évolution du style d’illustration des personnages
Évolution de l’illustration de personnage, du premier trait à la version ombrée finale, aux contours discrets et au visage détaillé
Les cinq pages publiques de for.Watt
1) Page d’accueil for.Watt, 2) À propos de for.Watt, 3) for.Watt pour les entreprises, 4) service d’autorisation pour les gestionnaires de compteurs, 5) service d’autorisation pour les fournisseurs d’énergie
Cinq vues mobiles du portail for.Watt
1) Vue mobile de la page d’accueil for.Watt, 2) Vue d’ensemble de l’espace connecté, 3) Vue de détail d’une autorisation, 4) Vue d’un point de soutirage, 5) Vue du profil personnel

Ateliers internes et externes

Atelier de stratégie d’approche des gestionnaires

Dans le cadre du 50Hertz EnergieMarktDialog, j’ai conçu et animé avec le product manager un court atelier d’idéation avec des gestionnaires de points de comptage : nous y avons produit et évalué des idées pour les atteindre et favoriser l’adoption du service.

Construire une vision commune

Lors d’un séminaire d’équipe à Berlin, j’ai préparé et animé avec le product owner un atelier Product Vision Box. Deux groupes ont développé et présenté leur vision du produit et du service, ce qui nous a aidés à nous accorder sur une direction commune à long terme.

Eike Otto animant l’atelier d’idéation avec les gestionnaires de compteurs
Moi, animant l’atelier d’idéation avec les gestionnaires
Vision boxes construites par l’équipe
Vision boxes avec les membres de l’équipe