Lean & UX pour la data / Agile Tour Rennes / Oct2016

AGILE TOUR RENNES – 14.10.2016
MATTHIEU GIOANI
Lean & UX design pour la data

Merci à nos sponsors, venez les rencontrer
Agile Rennes est également présent pour échanger sur la
communauté agile rennaise et vous faire gagner votre place
pour Agile Tour Rennes 2017.

MES ACTIVITÉS
AGILE TOUR RENNES 2016 - MATTHIEU GIOANI - CC-BY-NC-SA OCT. 20163
Enseignement (EDNA, Audencia, Université de Bretagne)
Conseil
Audit, analyse des
impacts, aide aux choix
Facilitation &
Coaching
Agilité, Design Thinking,
Startup internes
Design
Service design thinking ,
UX pour la data
Matthieu Gioani @Matt_Gio
Responsable de l’offre Datavisualisation (UX data)
Consultant digital & innovation
chez EXL Group/Talan

LE GROUPE TALAN
Créé en 2002, le groupe Talan est un acteur français, multi-spécialiste du
conseil et des services, qui accompagne ses clients dans leur
transformations agiles, digitales et opérationnelles.
Des interventions à succès résultant de la combinaison de métiers
complémentaires et d’une expertise sectorielle.
TALAN EN UN COUP D’OEIL
Conseil
opérationnel et
expertise métiers
/ conseil IT
Prise en charge
de projets
Expertise
technologique
Intégration de
solutions logicielles
Support
opérationnel

AVANT CELA, CHEZ RICH ANALYSIS
Chef de produit de Web Apps de visualisation de données

Ma conviction
La représentation des données est l’affaire de tous

DÉMÊLONS LES NOTIONS…

FORME FONCTION
DESIGN

focus sur l’utilisateur
LE DESIGN, ASSOCIER LA FORME ET LA FONCTION
OCT. 2016AGILE TOUR RENNES 2016 - MATTHIEU GIOANI - CC-BY-NC-SA8

C’EST QUOI L’UX DESIGN ?

UX DESIGN = USER EXPERIENCE DESIGN
La différence entre concevoir l’expérience et le produit
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/

LA PROFONDEUR DE L’UX
• L’aspect visuel : rendre l’ensemble plus
désirable et d’agir principalement sur nos
émotions
• Le squelette qui va définir la clarté et la
lisibilité
• La structure : l’enchaînement des pages
ou des écrans (Interaction/information
architecture)
• Les fonctionnalités de l’application ou
le contenu du site qui découlent
directement des objectifs
• La vision stratégique qui va nous
permettre de définir les besoins de
l’utilisateur et donc les objectifs
http://ux-fr.com/experience-utilisateur-definition/
http://blogdummi.fr/infographie/ux-design-comprendre-design-experience-10-images/

[Le design d’expérience], c’est un design qui se
vit, qui s’éprouve, s’expérimente. L’utilisateur en
ressent immédiatement l’effet parce que son
expérience s’en trouve instantanément
transformée, améliorée, augmentée.
Stéphane Vial, Court traité du design

ET SI ON APPLIQUE CELA À LA DONNÉE ?

DE LA DONNÉE À LA CONNAISSANCE
Dans une logique de prise de décision
Données
Brute
Information
Interprétée pour
être assimilable
Connaissance
Reliée à un
contexte pour lui
donner du sens
Action

DATAVISUALISATION : LA DÉFINITION DE COLIN WARE
AGILE TOUR RENNES 2016 - MATTHIEU GIOANI - CC-BY-NC-SA16
La Datavisualisation est l’utilisation de
représentations graphiques de données,
interactives ou statiques pour amplifier les
processus cognitifs
(attention, compréhension, mémorisation)
OCT. 2016

LA DATAVISUALISATION, À QUOI CA SERT ?
Faire comprendre en
donnant du sens à des
données complexes
Faciliter la prise de
décision sur des
informations clés
Communiquer
clairement des
données chiffrées
OCT. 2016

OÙ EST LE SENS ?

DE LA NÉCESSITÉ D’INTÉGRER
DU DESIGN DANS UN PROJET DATA

#1 L’UTILISATEUR N’EST PAS RESPECTÉ

#2 L’UTILISATEUR N’EST PAS SATISFAIT
70%
des projets BI
n’apportent pas la
valeur attendue
par les utilisateurs
(Gartner, 2013)

#3 L’UTILISATEUR EST MAL COMPRIS
La psychologie du dashboard : des désirs profonds et des attentes pragmatiques
Le besoin et le
sentiment de contrôle
La gestion de la
mémoire à court terme
La facilité d’utilisation
https://uxmag.com/articles/the-psychology-behind-information-dashboards

#4 SOUS LA MASSE D’INFORMATION, IL FAUT ÉCLAIRER…
Le design, un révélateur des résultats du big data
90%
du stock mondial de
données a été créé
ces 2 dernières années
(mai 2015)

Comment avoir une analyse actionnable, des meilleures
pistes à creuser et des représensations visuelles qui
traduisent l’information ?
La réponse : nous devons rendre la donnée plus humaine
[grâce à la datavisualisation].
David Hoffer, head of UX at declara
what doesbig data look like? Visualization iskey for humans, WIRED

COMMENT RENDRE LA DONNÉE
« PLUS HUMAINE ? »
 LA DÉMARCHE « UX POUR LA DATA »

ON S’INSPIRE DU LEAN UX

LEAN UX
Lean
UX
Design thinking
& UX
Développement
Agile
Logique de MVP

AGILE TOUR RENNES 2016 - MATTHIEU GIOANI - CC-BY-NC-SA MAI 201628
LA LOGIQUE DU MVP
Logique
de MVP
http://www.chrisyin.com/images/spotify-mvp.png

LES PRINCIPES DU DESIGN THINKING
Design
thinking
#1 Diverger et
converger
#3 venir d’horizons
différents et
collaborer
#5 Explorer les
extrêmes
#2 Entrer en
empathie et
questionner
#4 rendre
tangible pour
itérer

DÉVELOPPEMENT AGILE
Dvpt
Agile

LE CYCLE DU LEAN UX
Inspiration de la démarche UX for data
Schéma traduit. VO de Jeff Gothelf
Déclarer des
hypothèses/
Compréhension
initiale
Créer un MVP
Lancer une
expérimentation
Feedback et
nouvelle
recherche
1 2 3 4

UNE DÉMARCHE DE DESIGN ADAPTÉE À LA DATA
Renommée « datavisualisation » ou « UX pour la data » pour nos clients

UNE DÉMARCHE DE DESIGN ADAPTÉE À LA DATA
Renommée « datavisualisation » ou « UX pour la data » pour nos clients
ObjectifsOutils/pratiques
Objectifs métiers
Attentes
Interviews
Empathy Map
Personas
Scenarios
Hypothèses
Besoins
Cas d’usages
Architect. Inf.
Interactions
Écrans
Prototypes
Storyboards
Arborescence
Framework responsive
Charte graphique
Applications/sites
Interfaces
DÉFINIREXPLORER CONCEVOIR DÉLIVRER

POINT D’ENTRÉE : LA PROBLÉMATIQUE
Départ d’un existant
Comment améliorer le reporting des ventes de
Cola pour aider les commerciaux, sur le terrain
et au siège, à prendre les bonnes décisions sur
les activités quotidiennes ?

ELLE SE DIVISE EN QUESTIONS…
QQOQCCP
Qui
Quoi
Où
Quand
Combien
Comment
Pourquoi

ELLE SE DIVISE EN QUESTIONS…
Liée à des cas d’usages
Dans quels magasins de la région Ouest les
bouteilles de Cola de 1,5l ne sont plus
disponibles et depuis quand ?
Combien ? Quand ?Où ?

… QUI IMPLIQUE DES ACTIONS À EFFECTUER
Ci-dessous le processus actuel
1. Se coordonner avec mes commerciaux terrains
dans l’heure pour agir vite sur les magasins clés
2. Lancer les réapprovisionnements avec l’entrepôt
et la centrale d’achats
3. Rassurer mes interlocuteurs sur les comptes-clés

41
Karim, 34 ans
Chef des Ventes Régionales (CVR)
Direction des ventes
Ses préoccupations au quotidien
• Les produits sont-ils tous en rayon ?
• Les ventes sont-elles meilleures
qu’avant ? (Année, mois, semaine)
• Les commerciaux se déplacent-ils
pour remonter des infos fraîches ?
Les décisions qu’il doit prendre
• Quel magasin privilégier par rapport
aux autres ?
• Quels produits privilégier par rapport
à d’autres ?
Rôle : coordonner l’activité des
responsables de secteurs
« Plus les produits
sont présents, plus les
clients sont contents »
Ce qui compte pour lui Moment et fréquence
d’utilisation du support
• Être le meilleur des CVR et le
savoir (si les autres peuvent le
savoir, c’est bien aussi ;-)
• Avoir la confiance de ses
clients et de ses collaborateurs
• Tous les matins, jours
ouvrés, à 8h
Support de lecture

FORMULATION D’HYPOTHÈSES
Nous croyons que les Chefs des Ventes Régionales ont
besoin d’un tableau de bord à double niveau (synthèse +
détails) pour savoir quel produit ils doivent privilégier.
Nous saurons que nous avons raison avec leur feedback
lors de l’atelier du 2 octobre 2016
Nous croyons [faire ça] pour [ses personnes] pour atteindre [ce résultat]. Nous
saurons que nous avons [raison / tort] avec [du feedback qualitatif, quantitatif, des
changements de KPI].
http://www.ux-republic.com/integrer-lux-design-environnement-agile/

VALIDATION D’HYPOTHÈSES
Cas d’usage Hypothèses Choix

LA PERCEPTION VISUELLE, COMMENT CA MARCHE ?
La chaîne complète
Compréhension MémorisationAttention
OCT. 2016

EXEMPLE : FACILITER LE TRAVAIL DU CERVEAU
Les sériés de données commencent-t-elles en même temps ? Il y a-t-il des corrélations ?

EXEMPLE : FACILITER LE TRAVAIL DU CERVEAU
Et celui-là ? Qu’en pensez-vous ?

CONCEPTION D’UNE RESTITUTION DE DONNÉES
Travail solitaire ou en atelier
AFFICHAGE
DES DONNÉES
ASPECTS
COGNITIFS
ERGONOMIE
& GRAPHISME
ARCHITECTURE
DE L’INFORMATION
.Attention
.Mémorisation
.Bruit visuel
.Couleurs
.Polices
.Ecran/papier
.Choix des
composants
.Validité
.Pertinence
.Objectifs
.Structure
.Mise en valeur

LA PUISSANCE DE LA CONTRAINTE : BIEN CONNAÎTRE SON OUTIL
Créer un binôme expert/designer sur votre outil
Visualisations et
structure
Personnalisation
graphique
Interactions et
animations
• Visualisations classiques
• Visualisations avancées
• Bubble chart
• Sun burst
• Waterfall chart
• Sankey Diagram
• Cartes
• Intégration de
visualisations de librairies
externes (D3.js, cross
filters, …)
• Couleurs
• Modèles
• Une à une
• Icônes
• Polices
• Fond
• Images
• Définitions des
interactions
• Clic
• Survol
• Swipe
• Ajout d’animations
• Ouverture
• Fermeture
• Mise à jour
• Personnalisation des
tooltips

Option 1
202 180
9080
15
Appels
24 500
13 500
12 65410 541
7 500
Ventes
Appels
Volume de ventes
Option 2
DÉFI
Quelle représentation choisir pour afficher les données ?
OCT. 2016

Option 1
+ Type de graphique
répandu
- Difficile de lire les
étiquettes
- Difficile de comparer les
données entre elles
202 180
9080
15
Appels
24 500
13 500
12 65410 541
7 500
Ventes
Appels
Volume de ventes
+ Données lisibles
+ Comparaison facilitée
par la représentation
Option 2
DÉFI
Quelle représentation choisir pour afficher les données ?
OCT. 2016

UTILISER UN TABLEAU OU UN GRAPHIQUE ?
Données quantitatives et précises et les comparer entre
elles : tableau
Identifier des tendances, des patterns ou des exceptions :
graphique
Identifier des corrélations : graphique ou tableau

LES DIFFÉRENTS TYPES DE PROTOTYPAGE
Prototypage
papier
Prototypage
logiciel
Outil final
Objet de prototypage :
• Architecture de l’information
• Choix des composants
graphiques
• Grandes lignes graphiques
• Interactions et enchaînement
d’actions
• Emplacement relatif des
éléments
• Interactions fines
• Ergonomie finale
• Graphisme final

PROTOTYPONS SUR PAPIER

POP PERMET DE RENDRE SES PROTOTYPES PAPIER INTERACTIFS
POP - Prototyping on Paper (AppStore & Play Store)

Le prototypage logiciel
Prototypage
papier
Prototypage
logiciel
Outil final
graphiques
d’actions
éléments
• Graphisme final

LES LOGICIELS UTILISABLES
Et autres Omnigrafle, Axure, …
VisioInVision

ET POWERPOINT !! LE KIT DE PROTOTYPAGE
Ou Keynote pour les Mac-Addicts

Prototypage
papier
Prototypage
logiciel
Outil final
graphiques
d’actions
éléments
• Graphisme final

LES PLATES-FORMES DE BI OU LE DÉVELOPPEMENT WEB
Angular + D3.js
Tableau Cognos
Qlikview

VOTRE RESTITUTION EST UN SERVICE !
Pensez « scénarios d’usage »

NOS RÔLES ET POSTURES
À TRAVERS DES EXEMPLES PROJETS

UN CHERCHEUR
Chercheur de pépites d’or : imaginer des services autour des données

EXEMPLE : PROJET DANS LA SANTÉ
Projet pour un acteur national de la santé

UN ÉDITEUR

EDITEUR : PROJET INPI – DÉPÔTS DES BREVETS
Tableau de bords de gestion des dépôts de brevets

La perfection est atteinte,
non pas lorsqu'il n'y a plus rien à ajouter,
mais lorsqu'il n'y a plus rien à retirer.
Antoine de Saint-Exupéry

L’ACTIVISTE : RIGUEUR & TRANSPARENCE
La transparence pour poser les bases de la discussion et de l’analyse

EXEMPLE SNCF RESEAU : TRANSPARENCE & CLARTÉ

EXEMPLE : GROUPE BANQUE POPULAIRE

UN ÉDUCATEUR
Redonner le pouvoir d’agir et faire gagner en autonomie : re-capacitation

OUTIL INTERNE : LE JEU DE CARTES UX DATA

LES 24 CARTES

UNE CARTE - 2 FACES

UNE CARTE - RECTO
Consultation rapide
Cas d’usages :
• Étaler les cartes et sélectionner
rapidement une visualisation
• Présenter son vote suite au
PokerViz

UNE CARTE - VERSO
Compréhension et prise de décision
Cas d’usages :
• Comprendre une visualisation
et son usage
• Préparer son vote pour le
PokerViz

OUTIL INTERNE : LE JEU DE CARTES UX DATA

UN MÉDIATEUR

EXEMPLE GRDF : LES ENTITÉS DU PROJET
4 équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design

EXEMPLE GRDF : LE DESIGN EN TANT QUE MÉDIATEUR
L’UX design et la visualisation de données, support au dialogue entre les équipes
Les représentants des utilisateurs (PO)
Les PO proxy et coordinateurs
L’équipe reporting
L’équipe Data
UX design

EXEMPLE : L’UX DESIGN CHEZ GRDF
Challenger MûrirDéfinir TesterDévelopperConcevoir
Etudier les macros
besoins;
Chiffrer le macro coût
de réalisation;
Découper en
fonctionnalités ou en
lots le projet (Analyse
par valeur);
Planifier les
possibilités de
réalisation du projet.
Initialiser le Backlog;
Plan de release;
Définir les Persona;
Détecter et définir les
sources.
Construire le modèle
de données.
Transformer la
maquette crayonnée
en maquette
graphique;
Ecrire les
spécifications
techniques détaillées;
Développer les User
Stories;
Préparer les
documents de mise
en recette;
Mettre en recette les
user stories.
Corriger les retours
sur recette;
Suivre l’avancement
de la recette.
Définir les
indicateurs;
Définir les règles de
calcul et de gestion;
Faire une maquette
crayonnée;
Définir et prioriser les
User stories.
KANBAN AGILE SCRUM
1 2 3 4 5 6
UX design

MÉDIATEUR : VOUS AVEZ LES SOLUTIONS, ENSEMBLE

CONCLUSION

TOUT LE MONDE N’EST PAS CHEF ÉTOILÉ MAIS TOUT LE MONDE CUISINE…
“Le design est trop important pour être
laissé aux seules mains des designers”
Tim Brown, co-fondateur d’IDEO

QUELQUES PISTES POUR RÉVEILLER LE DESIGNER QUI EST EN VOUS…
Pensez votre restitution
comme un service/produit
en soulignant le Why
Accordez-vous sur
l’expression visuelle de
vos besoins
Priorisez la réponse aux
objectifs (What) aux
modalités de la
représentation visuelle (How)

La représentation des données est l’affaire de tous

Merci à tous !
Matthieu Gioani  Responsable de l’offre Datavisualisation
matthieu.gioani@exl-group.com  @Matt_Gio

Lean & UX pour la data / Agile Tour Rennes / Oct2016

Lean & UX pour la data / Agile Tour Rennes / Oct2016

Contenu connexe

Tendances

Similaire à Lean & UX pour la data / Agile Tour Rennes / Oct2016

Dernier

Lean & UX pour la data / Agile Tour Rennes / Oct2016