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.).

J’ai réalisé ses missions sur une dizaine d’années à partir de 2009, leur lancée correspondant à la généralisation des smartphones, insufflée par la sortie de l’iPhone en 2007, et avec elle la multiplication de services numériques multi-canal (applications mobiles, web), aussi bien pour des usages grands publics que professionnels.

J’ai réalisé ces missions soit directement en prestation freelance à mon compte, soit en tant que consultant et directeur de projet dans des agences (UX Design, conseil, web).

Types d’applications et appareils

Applications web responsive, applications natives pour smartphones iOS, Android, Windows Phone, BlackBerry, tablettes iOS, Android, Windows, embarquées Carplay

Méthodologies utilisées

• Recherche utilisateur
• Observations ethnographiques et ateliers utilisateur
• Personas et cartographie de l’expérience (UX Maps, eXperience Map)
• Benchmark de solutions
• Idéation
• Design Sprints, démarches de conception itérative, en équipe pluridisciplinaire, au plus près des développeurs
• Test utilisateurs individuels en mode « Friends and Family », « Guérilla » et sur panels de recrutements de testeurs.
• Architecture de l’information, design d’interaction, conception ergonomique
• Storyboards, wireframes
• Prototypage UI sous Figma, Sketch, Axure RP Pro, Illustrator.
• Spécifications, chartes ergonomiques / UX et Design System
• Direction de la création visuelle et interactive

OutilS de prototypage: Figma, Sketch app

Sur les anciens projets décrits ci-dessous 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, qui est devenu mon principal outil pour l’UI Design et et les Design Systems ces dernières années.

prototype robot conversationnel Facebook Messenger pour l’aide à la géolocalisation de services bancaires à l’étranger, 2016

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

Conception UX/UI service connecté et app embarquée (CarPlay) et débarquée (iOS) pour automobile

2018 pour DS Automobiles

• 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

iDTGV Max iPhone iOS et Android apps, 2015, SNCF

Applications iPhone iOS et Android, et du site web desktop et mobile (responsive).

Parcours utilisateur client : recherche, réservation, check, modification de voyage, gestion du compte client et du profil MAXtrotter

Réalisations

• Exploitation de « Personas » utilisateur à partir des études marketings iDTGV et d’ateliers d’itération
• Réalisation de prototypes HTML dynamique avec le progiciel Axure RP Pro
• Direction de la création visuelle et du design graphique des applications

Résultats

Applications simples et efficaces

iDTGV Windows app PC Tablette et smartphone, 2013, SNCF

Contexte : Conception de 2 applications

• Première application Windows 8 sur la nouvelle interface ModernUI pour PC et tablettes
• Nouvelle version de l’application pour Smartphone Windows Phone
• Parcours e-commerce et m-commerce complets : recherche, commandes, réservation, achat et paiement, choix des places, billet

Réalisations

• Construction de « Personas » utilisateur à partir des études marketings iDTGV et d’ateliers d’itération
• Réalisation de prototypes HTML dynamique avec le progiciel Axure RP Pro
• Direction de la création visuelle et du design graphique des applications

Résultats

• Une seule itération avec le client sur la conception
• Très bonne notation dans les magasins / stores d’applications mobiles

Domaine e-banking Assurance Banque 2016 à 2017

Plusieurs projets confidentiels de refonte et de design d’applications mobiles (tablettes et smartphone) et webapp responsive pour des usages métiers et grand public en secteur Banque Finance Assurance  :

• 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.

Exemple : Nouvelle UX portail web e-banking, 2012

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

Contexte

• Projet Accueils Communs des Hôtels des Finances avec la fusion des Trésoreries Générales et des Centres Des Impôts
• Problématique spécifique aux accueils publics, à savoir gestion des flux de files d’attente, saisonnalités des processus (variation de l’activité)
• Diversité des sites du point de vue des flux, architecture, organisation
• Diversité des processus et expertises
• Projet sensible sur le plan stratégique et social

Réalisations

• Analyse de l’activité (du travail) sur plusieurs sites de références
• Observations ethnographiques shadowing, fly-on-the-wall et interviews dans les accueils, services
• Analyse des  processus, des postes de travail, outils applicatifs, organisation du travail.
• Préconisations sur l’architecture intérieure des bâtiments, l’organisation du travail, la gestion des flux d’usagers administrés