2025 2024 avec mon partenaire Ergogenèse pour le Groupe TDS expert conseil en développement et la gestion des risques en zones réputées difficiles d’accès

Accompagnement en ergonomie

Design d’une application de gestion des catastrophes, sur la première brique fonctionnelle concernant la prévention et la gestion des risques d’inondations

Les fonctionnalités générales attendues

Cette application est à destination de centres de commandement, postes de commandement mobiles et véhicules d’interventions de la sécurité civile dans plusieurs pays afin de planifier les actions avant (préventions, simulation, formation), pendant (coordination) et après (RETEX) les phases d’alertes catastrophes. C’est un Système d’Information Géographique (SIG) intégrant des fonctions d’agrégation et de collectes de données (météorologiques, terrains, infrastructures, moyens…), de simulations, de planification, d’aide à la décision et de coordination des équipes de commandement stratégique, tactique et opérationnel, et les équipes d’intervention.

Contexte

Ce projet fait partie du programme européen PPRD Med – Prévention, Préparation et Réponse aux catastrophes (Disasters) naturelles et d’origine humaine dans les pays partenaires dans le sud et l’est Méditerranée. Il vise à fournir des solutions et accompagner les pays afin d’améliorer la prévention et la gestion des catastrophes.

Utilisateurs finaux

Opérationnels de la sécurité civile, opérateurs humains des centres de commandements, jusqu’aux pompiers, dans les pays de l’Union Européenne, de la Méditerranée et du Moyen-Orient

Réalisation

• Accompagnement d’experts métiers dans l’identification des besoins des utilisateurs
• Design Sprint de 3 jours en atelier
• Personas des différentes typologie d’utilisateurs
• Design de scénarios d’utilisation sous forme de storymap, afin d’identifier les fonctionnalités et les interactions entre les utilisateurs et l’application
• Constitution d’une matrice de fonctionnalités
• Roadmap : priorisation et groupement des fonctionnalités en fonction des exigences fonctionnelles, de développement, sur le contenu des futures montées de version
• État de l’art des applications existantes
• Proposition de principes de design et maquettage (Figma) d’écrans types

Inspiration

https://fuselabcreative.com/our-projects/flood-damage

Contexte

Dans le cadre d’un projet de refonte système de supervision/hypervision des usines de traitement de l’eau, il s’agissait de fournir des principes de design de la nouvelle application, en conformité avec les besoins des différents métiers (opérateurs, ingénieurs…) et avec la norme ISA101 pour les Interfaces homme-machine des applications industrielles.

International Society of Automation

Réalisation

• Analyse de l’activité des opérateurs (travail posté en salle de supervision)
• Itérations avec l’équipe projet
• Réalisation d’une charte graphique et maquettes de futurs écrans

Outil de maquettage utilisé : Figma

• Réalisation de la charte graphique et de l’iconographie reprenant les principes de la norme ISA101
• Maquettage graphique de visualisation des processus applicables aux synoptiques et écrans des postes de travail

Résultat

Rupture avec l’ancienne génération d’applications de supervision fortement chargées visuellement (couleurs, réalisme et complexité des appareils) pour une représentations extrêmement simplifiée des composants du process, un enrichissement de la représentation des mesures, tendances et seuils.

Un mode graphique sombre plus reposant visuellement, diminuant la charge visuelle en permettant de se concentrer sur les informations utiles pour la supervision, dés le 1er niveau de visualisation.

Conformément à la norme ISA101, le premier niveau de visualisation est une représentation globale de la situation Situational Awareness grâce à laquelle un opérateur peut voir l’ensemble du processus à un niveau macroscopique, et peut focaliser par étage jusqu’aux composants et données d’un équipement (cuves, pompes, capteurs, etc.).

• Design d’un service connecté à usage automobile
• Méthodologie Agile / Scrum itérative et incrémentale.
• Prise en compte des personas existants et des Brand Experience Attributes
• Benchmark d’applications cibles

Phase d’émergence

Atelier d’émergence pour identifier les insights usager via des cartes d’empathie, idéation et ébauche de 3 scénarios d’usage

Phase de convergence

Atelier de convergence : détailler les scénarios ébauchés en phase d’émergence, préciser les idées sur les contenus et fonctions du service, scorer les idées en fonction de leur valeur perçue, de leur complexité de mise en oeuvre, faisabilité technique, maturité technologique

Utilisation de supports de storymapping enrichis : contexte, déroulé chronologique du scénario, tâches, sous-tâches, interactions utilisateur et interface service, push système…

UI Design, conception itérative maquette application

Production dans Sketch d’une maquette graphique illustrant le scénario d’usage le plus riche, en détaillant les enchaînements des affichages en alternance entre la version débarquée sur iPhone (système iOS) et la version embarquée sur l’affichage du véhicule (iOS Carplay)

Le maquettage graphique était statique et le plus réaliste possible en se référant aux Guidelines iOS et Carplay et la charte graphique de la marque

Atelier de conception itérative avec les équipes métier, les UX Designers et les Directeurs de création

• L’état de l’art
• Études ethnographiques
• Prospective des usages
• Prototypage et tests utilisateurs des concepts

Le projet vise à :

• Anticiper et étudier les problématiques et les solutions liées aux niveaux de délégation intermédiaires : passage des modes de conduites manuelles aux modes semi autonomes
• Anticiper de futurs usages et solutions en terme de services et d’interactions hommes-machines dans les futurs habitacles des véhicules autonomes

Voir également mon billet : La fin de la relation fusionnelle du conducteur avec l’automobile ?

Les 5 niveaux de délégation de conduite

0 (eyes on), aucune aide ou fonctions automatisées et l’ensemble de la conduite du véhicule est déléguée au seul conducteur.

1 à 3 : délégation partielle de la conduite, ou conduite semi-assistée

Niveau 1

Les yeux sur la route – Eyes On – il s’agit du premier niveau d’aide à la conduite automobile (en anglais Advanced driver-assistance systems ou ADAS), typiquement le régulateur de vitesse.

Niveau 2

Les yeux sur la route – Eyes On – ajout de dispositifs contrôlant la dynamique longitudinale et latérale du véhicule. Par rapport au niveau 1, le véhicule bénéficie d’un régulateur de vitesse adaptatif (exemple :  Renault Megane GT avec régulateur adaptatif) maintenant le véhicule à une vitesse programmée et à une distance constante du véhicule qui le précède. Dans le même temps, le véhicule reste sur sa voie sans que le conducteur ait à corriger la trajectoire du véhicule en reprenant le volant en main. Cette fonction de maintien du véhicule dans sa file notamment sur autoroute est bien entendu déjà proposée mais, conformément à la réglementation actuelle, le système impose que le conducteur reprenne le volant au bout de quelques secondes.

 Niveau 3

Pas d’obligation d’avoir les yeux sur la route – Eyes Off – autorise une conduite automatisée dans des situations définies sans contrôle du conducteur, avec reprise en main par le conducteur si nécessaire. Avec ce niveau d’automatisation, on autorise le conducteur à faire autre chose à bord de son véhicule, c’est-à-dire visionner un film, consulter ses mails, etc. Le véhicule décide de lui-même de dépasser un autre véhicule et demande au conducteur de reprendre le volant lorsque l’état de l’infrastructure routière par exemple n’autorise plus le bon fonctionnement de la conduite automatisée.

4 et 5 : délégation totale de la conduite, ou véhicule autonome

Niveau 4

Pas de contrôle, sous conditions – Mind Off – autorise une conduite automatisée sans contrôle et sans reprise en main par le conducteur, dans des situations définies, c’est à dire sur un parcours précis, circonscrit dans une zone restreinte soumise à des conditions particulières. A partir de ce niveau la conduite est donc automatisée et totalement déléguée. Les passagers et le conducteur peuvent s’assoupir, celui-ci lâche les mains et son attention n’est pas requise (mind off). Lorsque le véhicule ne contrôle plus la situation, celui-ci va de lui-même se mettre en sécurité, notamment en s’arrêtant, warnings allumés, sur la bande de voie d’urgence. A ce stade volant et pédales peuvent donc être éliminés, mais dans ce cas les passagers seront potentiellement immobilisés en cas d’arrêt d’urgence.

Niveau 5

Pas de contrôle – Mind Off – le degré ultime de l’automatisation du véhicule puisque non seulement la conduite est automatisée, mais en plus du niveau 4, l’autonomie est permanente, sur tous types de trajets. Elle se substitue donc complètement au conducteur en étant capable de faire face à tout type de situation.

Fin de relation fusionnelle conducteur-auto | Pierre Lannes

Innovation du véhicule autonome, nature fusionnelle du rapport entre homme et automobile, risques de la conduite semi-automatique, ADAS

Pierre Lannes

• Refonte de l’application CRM portable (sur tablette Windows) des conseillers commerciaux (France)
• Conception d’une application (mobile native iOS/Android et desktop web responsive) de déclaration rapide de sinistre pour les assurés et les télé-experts (France)
• Refonte d’applications boursières (mobile native iOS/Android et desktop web responsive) pour usagers grand public (marché Europe)

Dans le cadre des études et refonte d’applications métier j’ai eu recours à la méthode de l’analyse du travail (observations et et entretiens ethnographiques) en m’immergeant en situation réelle d’usage. Par exemple en accompagnant des experts en assurances durant leur journée travail, en déplacement dans son véhicule, en expertise de sinistre chez les assurés, au bureau.

Pour les services et applications grand public, je réalise la phase de design le plus souvent via une conception itérative (ateliers de conceptions, échanges sur les fonctionnalités et maquettes) avec des experts métiers, en lançant des questionnaires et des tests utilisateurs individuels auprès du grand public.

Outil de prototypage: Sketch app

Sur ces anciens projets, pour le design d’interfaces utilisateur (maquettage, prototypage) j’utilisais le plus souvent l’application Sketch. Grâce au plugin Craft, les éléments d’interfaces pouvaient être dynamisés et mis en ligne sous forme de prototype web.

L’application Sketch à beaucoup évolué depuis, et d’autres outils ont émergé, comme Figma.

Exemple de projet : conception d’un prototype robot conversationnel Facebook Messenger pour l’aide à la géolocalisation de services bancaires à l’étranger

Définition des logiques d’interactions conversationnelles, parcours et définition des contenus : message, cartographie et iconographie

Le projet a été mené en mode agile sur un sprint de 3 semaines

L’équipe est composé d’un product owner, de 2 développeurs (front et back) et moi en tant qu’UX Designer

Ce projet s’inscrit dans le cadre d’une cellule innovation en mesure de tester rapidement des concepts sous forme de preuve de concept POC (de l’anglais : proof of concept)

Pour ma partie j’ai réalisé :

• L’architecture de l’information avec XMind
• Le design et maquettage UI avec le logiciel Sketch

Exemple de projet 2012 : Nouvelle UX portail web e-banking

Contexte

Pour une startup à la recherche de principes pour une nouvelle eXperience Utilisateur sur les produits portail e-Banking

Design d’une nouvelle eXperience Utilisateur sur les produits portail e-Banking. Conseil et conception en innovation ergonomique et design d’expérience utilisateur

Réalisations

• Animation d’ateliers de créativité
• Design d’eXpérience Utilisateur, Wireframe et storyboard réalisés sous Apple Keynote
• Direction de la création visuelle et graphique

Résultats

Adhésion du client aux nouveaux concepts proposés

Contexte

MyTF1 gère toute la production, la programmation et la distribution de contenus Multicanal en temps réel et différé du groupe TF1 : sites web, applications mobiles, box internet, programmes, vidéos à la demande, animation et informations, etc.

Plusieurs systèmes de back-office ont vu le jour au fur et à mesure que se diversifiaient les modes et les supports de diffusion des contenus, aboutissant à un parc hétérogène en terme d’interfaces utilisateurs, complexe à prendre en main, avec des redondances entre applications, parfois des fonctionnalités lourdes pour la réalisation de certaines tâches par les utilisateurs, un parc applicatif lourd à maintenir.

Réalisations

• Prise de connaissance et analyse des études précédentes sur les expressions de besoin
• Analyse de l’activité des utilisateurs pendant la réalisation des tâches, recueil les besoins utilisateurs, identification des problématiques rencontrées sur les différentes business units avec les outils backoffice existants : journalistes, rédacteurs programmateurs, community managers, etc.
• Rapport d’évaluation ergonomique avec des recommandations d’ergonomie, les points d’attention
• Production d’une maquette dynamique wireframe sans design graphique réalisée sous Axure RP Pro
• Animation des ateliers de conception itérative

Résultats

• Design d’un concept d’IHM backoffice unifié
• Adhésion des utilisateurs
• Gains de productivité et de performance des tâches réalisées avec le nouvel outil
• Amélioration de l’expérience utilisateur

L’application est utilisée par des techniciens, sur des ordinateurs PC portables, qu’ils connectent sur les armoires techniques des voitures de train RER afin de réaliser des diagnostics d’équipements.

L’application existante était de conception ancienne, difficile à prendre en main et peu performante.

Tout en tenant en compte des contraintes techniques et de budget, le partis pris en terme d’expérience utilisateur a consisté à mettre à disposition des systèmes de visualisations de jauges analogiques, dans un tableau de bord personnalisable via des widgets, tout en laissant à disposition un système d’affichage de logs et de commandes textuelles.

Direction du design de l’eXpérience Utilisateur (sur avant-vente et projet gagné)

• Architecture de l’information
• Maquette statique « file de fer /wireframe » (définition du zoning / emplacement des composants de l’interface utilisateur
• Prototypage avec l’application Axure RP Pro
• Direction de la création graphique

Prototype présenté au Salon du Bourget

Utilisateurs finaux

• Opérateurs métiers des contrôles sécurité disposant de nouveaux équipements de contrôle des passagers et de leurs effets personnels : applications sur écrans tactiles
• Usagers PAX passagers, personnel navigant et autres métiers des contrôles de sécurité (accompagnement, guidage, identification…) avec de nouveaux dispositifs d’identification biométrique : reconnaissance faciale, rétinienne, empreintes digitales

Méthode et réalisations

• Etude de l’existant (utilisateurs, produit), benchmark de solutions
• Idéation (brainstorming, ateliers d’idéation) et définition de l’architecture de l’information, design d’interfaces utilisateurs et d’ interactions
• Prototypage des applications en HTML via le progiciel Axure RP Pro
• Direction de la production visuelle et graphique (design graphique, intégration CSS/HTML)
• Itérations utilisateur : tests utilisateurs individuels, ateliers utilisateur
• Réalisation et rédaction de la charte ergonomique et graphique des interfaces utilisateur, contenant les maquettes graphiques et les spécifications ergonomiques générales

Direction eXpérience Utilisateur UX, direction de projet et accompagnement AMOA (assistance à maîtrise d’ouvrage)

Contexte

Projet de design d’un dispositif digital interactif innovant pour l’orientation des passagers et usagers de l’aéroport

Réalisations

• Direction de projet
• Direction de l’équipe UX : un Designer UX, une experte interfaces naturelles, une directrice artistique

• Recherche utilisateur
• Capitalisation sur les études marketing utilisateur existantes
• Observations fly-on-the-wall en aéroport
• Jeux de rôle parcours usagers en aéroport
• Inventaire et analyse de l’information passagers existante : signalétiques, affichages, annonces, agents, bornes….
• Exploitation des données d’études utilisateur, personas, cartographies de l’expérience (eXperience Maps), diagrammes d’alignement (utilisateurs/services)
• Idéations
• Benchmark et État de l’art
• Ateliers d’idéations
• Réalisations de croquis et maquettes graphiques (sous Illustrator, sans design graphique).
• Préconisations sur l’implantation géographique indoor du réseau de « bornes »

Assistance à Maîtrise d’Ouvrage

Rédaction du cahier des charges et spécifications fonctionnelles détaillées

Résultats

Concept d’un monolithe / glace transparente interactive et tactile, utilisation de la réalité augmentée

Depuis 2008 – Avant-vente, Production et Direction de projets de design, refonte, évaluation, études et recherche utilisateur (User research) sur sites web e-commerce, avec une approche multicanal, omnicanal, phygital (parcours physique et digital / numérique) : prise en compte de l’expérience globale de l’utilisateur avec les services et la marque, comportant des points de contacts pouvant varier (applications, web, téléphone, magasin…) et des multiples possibilité de parcours d’achats interruptibles, web-to-store, mobile to store, drive-to-store, drive-to-shop… A ce sujet, lire mon article « Les quatre piliers d’une expérience utilisateur cross-canal réussie« .

2010  easyvoyage.com

Pure-player comparateur voyage

Avant vente gagnée et lancement du projet de refonte du site e-commerce

• Cadrage stratégique
• Revue experte du site web
• Architecture de l’information
• Storyboard
• Tests utilisateurs
• Charte ergonomique et graphique

2010 AGPM Association Générale de Prévoyance Militaire

Etude complète et design UX dans le cadre de la refonte d’une site web e-commerce pour le développement du canal internet :

• Webanalytique site web existant
• Questionnaire en ligne
• Enquête téléphonique
• Focus Group utilisateur adhérents
• Tests utilisateurs individuels avec eye-tracking sur le site web existant (sur scénarios de tâches)

Itérations et intégration de l’étude dans la stratégie marketing produit.
Conception ergonomique et encadrement de la conception graphique et de l’intégration.

Voir la présentation que j’ai réalisé en novembre 2010 « Études utilisateur et ROI » à l’occasion du Word Usability Day :