1.
Du design UX
au design de la collaboration
ISCOM, Master 2 CCN 2016-2017
Laurent Barbat - @lbarbat

2.
Aujourd’hui…
1. Outils de conception
Principaux outils, Travaux pratiques, Livrables de conception
2. Du design UX au design de la collaboration
Le Brief, Préparer une réunion, Critiquer une maquette

3.
Avez-vous installé
Experience Design ?
http://bit.ly/telechargerxd

4.
Conception (suite)

5.
http://www.ina.fr/video/CAB8001676901

6.
Principaux
outils de conception

7.
Outils de conception
Liste non exhaustive ! D’autres outils sur : www.prototypr.io/prototyping-tools/
Prototypes
Interactions
Les deux
Ergonomie + Interactions
Wireframes
Ergonomie, statique
InVision
Marvel
POP
combine très bien avec Sketch et Photoshop
Experience Design
Axure
Proto.io
à suivre de près
Papier + Crayon
Balsamiq
Sketch
Illustrator
une bibliothèque d’éléments de base à utiliser
toujours commencer par là !
pour s’y mettre sérieusement

8.
Travaux Pratiques

9.
Étude de cas
Comment améliorer
l’expérience client en magasin
grâce à une application pour les vendeurs ?

10.
Méthodologie
Brief client
Visites et
observations en
magasins
Entretiens
vendeurs et
responsable de
magasin
Arborescence
Sketch
Wireframes
Maquettes
Prototype
+ Reco…
Atelier « Business Origami »
Rédaction de 2 scénarios d’usage
CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION

11.
Manque d'information sur les produits
techniques
Disponibilité des produits inconnue sans
passer par le vendeur
Attente pour avoir un vendeur
Manque d'explication de la qualité des
produits
Pas facile de voir rapidement tous les
articles d'une même catégorie
(Côté client…

12.
Offre limitée par rapport à l'ensemble du
catalogue
Beaucoup de temps passé à aller en stocks
Trous dans la relation client
Outil de caisse long à charger
Les vitrines n’attirent pas assez de
visiteurs
(
…Côté vendeur

13.
Au Siège…
On ne connaît pas nos clients, même pas
leur date de naissance.
Notre positionnement de marque
évolue, on est dans une phase de
transition.
/

14.
Atelier Business Origami

15.
Arborescence
LISTE CLIENTS
FICHE CLIENT
RECH. IDENTIF.
CLIENT
RBORESCENCE
pplication vendeur Aigle
PANIER
INFOS CLIENT
INFOS DE
PAIEMENT
INFOS DE
LIVRAISON
CONFIRMATION
RECAP
SCAN
LISTE DE
PRODUITS
FICHE PRODUIT
CONF AJOUT +
CROSS-SELL
MENU +
RECHERCHE
CONFIRMATION
INSCRIPTION
Catalogue
Scanner
Client
Programme
de fidélité
Mon profil
Commander
MODULE
VENDEUR
LOGIN
VENDEUR

16.
Sketch

17.
Wireframes
Mr Dupont Éric
13, rue de l'écluse
59100 Lille
Abonné à la newsletter
dominiquedupont@mail.com
03 45 76 09 13 (Maison)
Né le 13 janvier 1976
Inscrit au programme de fidélité
1/4 Informations client 2/4 Livraison
Valider le mode
Mr Dupont Éric
13, rue de l'écluse
59100 Lille
Changer l'adresse de livra
Magasin offert Domicile
Valider les informations
Mettre à jour ces informations
Panier
45,90Sous-total
Ajouter un chèque cadeau
45,90TOTAL
Valider le panier
x 1
46-48
Rouge
29 90
Chemise de nuit polaire Réf : 8452530
x 1
46-48
Rouge
16 00
Article 2 Réf : 8452530
au lieu de 20,00
-20%

18.
Maquettes graphiques
13, rue de l'écluse
59100 Lille
Abonné à la newsletter
Mettre à jour les informations
dominiquedupont@mail.com
03 45 76 09 13 (Maison)
Infos client
Profil type / 2 achats depuis 2 ans
Né le 13 janvier 1976
Inscrit au programme de fidélité
Historique d'achat
12/11/2013 Article 1 54,34
02/03/2013 Article 1
Article 2
213,99
Date MontantCanalArticle
Web
Mag : Grenelle
Chargement des achats
Mr Dominique DUPONT

19.
Maquettes graphiques

20.
Maquettes graphiques

21.
Prototype
https://invis.io/p/V9XP74JMWDX

22.
La simplicité est la sophistication suprême.
— Leonard De Vinci“ ”

23.
Du design UX
au design de la collaboration

24.
Ce que le client a
expliqué
Ce qu'a compris le
chef de projet
Ce que l'analyste a
conçu
Ce que le
développeur a fait
Comment les
commerciaux l'ont
décrit
Comment le projet a
été documenté
Ce que le client a
été facturé
Ce dont le client avait
vraiment besoin
Adapté de « How IT Projects really work », www.projectcartoon.com

25.
Le Brief UX

26.
Designer
C’est avant tout une démarche.
CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION

27.
Mais le point de départ est…

28.
LE BRIEF

29.
Qu’est-ce qu’un brief ?! CDC
Confidentiel Page 1 sur 86
28 novembre 2016
Request For Proposal
Émetteur : Marie Hubert
Rédacteur : Pierre Lemet
À l’attention de (Nom société)
Objet de l’appel d’offre :
Exploiter les données externes pour enrichir la connaissance marché et améliorer les campagnes.
1.#LE#CONTEXTE#:#
L’entreprise a réalisé un atelier collaboratif avec 3 filialeen juillet 2016.
L’objectif de cet atelier était d’apporter des premières pistes de réflexion sur deux grandes
problématiques. Comment, à partir de données externes,
1. enrichir notre connaissance sur le marché et les clients (particuliers) ?
2. améliorer l’efficacité des campagnes (cible, canal, message, moment de contact, …) ?
Pour cet atelier, c’est le crédit immobilier qui a été retenu par les participants.
Cet atelier a permis de créer en un temps limité une ébauche de visualisation de données à partir
d’informations issues de la base de donnée externe.
L’équipe a décidé de continuer ces premiers travaux.
2.#LA#DEMANDE#
Mettre à la disposition des utilisateurs en filialeun outil leur permettant d’exploiter et de visualiser
facilement des données externes selon leurs besoins. In fine, cet outil devrait leur permettre d’explorer de
nouvelles pistes pour réaliser leurs campagnes et améliorer leur taux de transformation.
Pour cela, la base de données devra être exploitée de manière plus approfondie et plus large. D’autres
bases externes sont aussi à prévoir pour maximiser la valeur apportée.
A noter : l’outil retenu est MS.
3.#LA#MISSION#:##
La mission consiste à accompagner l’équipe pour :
1) Construire un prototype sur la thématique retenue avec un focus ‘campagnes’
2) Identifier les besoins des filiales en termes de connaissance marché, définir les fonctionnalités
de l’outil, concevoir et développer l’outil.
…tout ceci sous la responsabilité d’un chef de projet, et en étroite collaboration avec l’équipe, les
filialecandidates, (Marketing, CRM), des experts métiers.
Des principes d’animation et de gouvernance innovants devront être proposés.

30.
Demande
initiale
Brief
final
Le Brief
Plus qu'un document,
c'est un processus en soi.

31.
Demande
initiale
Brief
final
Le Brief
Plus qu'un document,
c'est un processus en soi.

32.
The Expert (Short)
https://www.youtube.com/watch?v=BKorP55Aqvg

33.
Quels sont les ingrédients du brief (UX) ?

34.
Les ingrédients du brief de conception
ContexteSynthèse Demande
• L’Entreprise
• Concurrents
• État actuel du produit
• Activités, Livrables
• Périmètre fonctionnel
• Contraintes
• Interlocuteurs
• Temps alloué, Planning
• Résumé du projet
• Objectifs business
• Cible
• Critères de réussite
321

35.
Synthèse
Résumé du projet
• Décrire le projet en un paragraphe.
• Quel est le travail attendu ?
Objectifs business
• Pour quelles raisons le projet est-il lancé ?
• Quel est l’objectif business principal ?
Cible
• Quelles sont les grandes catégories d'utilisateurs ?
• Que sait-on des utilisateurs (expérience globale, besoins, problèmes)
• Lister les sources informations disponibles sur la cible.
• Quel est le but des utilisateurs lorsqu’ils utilisent le produit ?
Critères de réussite
• Quels sont les résultats attendus ?
• Comment sera calculé le ROI du projet ?
1

36.
Contexte
L’Entreprise
• Décrire l'activité de l'entreprise, son offre, son modèle économique, son
organisation, son positionnement de marque.
Concurrents
• Lister les concurrents
• Positionner par rapport à l’entreprise (forces, faiblesse, critères de
différenciation)
• Ont-ils mené à bien des projets similaires ? Si oui, qu'en pense le client ?
État actuel du produit
• Décrire les éléments du produit qui sont positifs et en quoi ils sont
satisfaisants.
• Décrire les aspects du site moins réussis, et pourquoi ils sont considérés
comme tels.
2

37.
Demande
Activités, Livrables
Périmètre fonctionnel
• Lister les principaux contenus et fonctionnalités attendus
• Les prioriser
• Hors périmètre : Lister les éléments qui ne font clairement pas partis du
périmètre du projet.
Contraintes
• Lister les contraintes techniques, métiers, ou organisationnelles
Interlocuteurs
• Équipe projet en agence, Parties prenantes (Contributeurs, Validateur,
Sponsor), autres partenaires (Technique, SEO…)
Budget/Temps alloué, Planning
3

38.
Challenger le brief
Une des plus grandes qualités d'un designer est d'oser demander
« Pourquoi ? » (…c’est valable pour tout professionnel en fait)
Quelques questions à poser :
• Quels sont les objectifs initiaux du projet ?
• Pourquoi ce projet est-il nécessaire ?
• Pourquoi doit-il avoir lieu maintenant ?
(important pour évaluer le planning et l'approche)
• Quelles sont les résultats attendus (ex : commerciaux…) ?
• Qui sont les interlocuteurs de référence sur ce projet ?
(souvent plus longue qu'on ne le pense, important d'identifier le circuit de
validation, avoir une idée précise des contraintes, besoins, attentes,
problématiques de chaque partie prenante...)

39.
Adapté de http://dilbert.com/

40.
Proverbe chinois
“Celui qui pose une question
risque d'avoir l'air bête cinq minutes.
Celui qui ne pose pas de question
restera bête toute sa vie.”

41.
Ce qui se passe si on ne pose
pas les bonnes questions…

42.
Adapté de « How IT Projects really work », www.projectcartoon.com
Ce que le client a
expliqué
Ce qu'a compris le
chef de projet
Ce que l'analyste a
conçu
Ce que le
développeur a fait
Comment les
commerciaux l'ont
décrit
Comment le projet a
été documenté
Ce que le client a
été facturé
Ce dont l’utilisateur
avait vraiment besoin

43.
Préparer une réunion

44.
Problème…

45.
La Méthode des « 7P »
pour préparer une réunion
Pourquoi ?
Mettre toutes les chances de son
côté pour assurer la réussite
d’une réunion ou d’un atelier.
Quoi ?
Une checklist des éléments à
prendre en compte en amont.
Durée
30 à 60 minutes.
Seul ou à plusieurs

46.
« 7P » pour préparer une réunion
Objectif de cette réunion ? Pourquoi doit-elle avoir lieu ?
Le « livrable » de cette réunion.
Comment s’y prendre, quelles étapes pour y arriver ?
Quelles sont les personnes nécessaires pour y parvenir ?
…Et seulement celles qui sont nécessaires.
Quels sont les risques identifiés ?
Et comment les éviter.
Considérations pratiques
Date/horaire, fournitures, logistique…
Que doit préparer en amont chacun des participants ?
Et leur communiquer suffisamment à l’avance…

47.
Travaux Pratiques

48.
Présenter une maquette
Critiquer

49.
Que pensez-vous de
cette maquette ?

50.
L’enjeu
Créer les conditions d’une critique constructive
pour faciliter l’expression des retours

51.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser

52.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser
Objectifs
Business
Connaissance
utilisateurs
Éléments déjà
validés
Objectifs commerciaux, Stratégie de marque et autres
éléments du brief…
Objectifs du site, de la rubrique ou du processus, de la
page.
Besoins et problèmes de la cible, enseignements de la
phase de recherche utilisateurs.
Arborescence, Principes de conception, Wireframes… qui
servent de base de création des maquettes graphiques.

53.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser
Les Personas peuvent être très utiles
pour rappeler les informations clés
sur les utilisateurs-cible.

54.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser
Raconter une histoire
Considérer l’ensemble du parcours client et pas seulement la page seule.
Ex : Quel est son but à atteindre ? Qu’a-t-il fait avant ? Que cherche-t-il ?
Expliquer les choix de conception
S’appuyant sur les objectifs business et les travaux de connaissance
utilisateurs.
——————————————————
Côté client :
Vous pouvez rebondisr en posant des questions, mais suspendez votre jugement
dans un premier temps : des choix de conception ont été fait dans un certains
but. Si quelque chose vous gêne, demandez pourquoi tel ou tel choix a été fait.

55.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser
1. Un prospect demande des informations au vendeur
sur un imperméable.
Le vendeur répond au client en scannant le code
barre de l’article avec sa phablet.
2. La fiche de l’article s’affiche.
Le vendeur montre une vidéo de démonstration des
propriétés déperlantes.
Le client est convaincu et décide de prendre le
produit.
3. Le vendeur suggère un article complémentaire à
l’imperméable, une écharpe, en s’appuyant sur le
look associé à l’article sur sa phablet.
Le client décline la proposition.
4. Le vendeur demande au client s’il fait parti du
programme de fidélité,
il lui explique les bénéfices, dont l’offre de bienvenue.
Le client accepte de s’inscrire.
Le vendeur demande ses coordonnées au client.
5. Le client passe en caisse normalement et bénéficie
de la réduction.
6. Le soir même, le client reçoit un email de
remerciement personnalisé.
On l’invite aussi à s’intéresser à l’écharpe du look sur
le site e-commerce Aigle.
Le client se laisse finalement tenter par l’écharpe.
SCAN CODE
BARRE
FICHE PRODUIT
CONFIRMATION
INSCRIPTION
EMAIL
PERSONNALISÉ
INSCRIPTION
PROGRAMME
DIAPORAMA /
VIDEO
1.
2.
3.
4.
6.
SCÉNARIO 1 :
Un prospect demande une information sur un article au vendeur,
s’inscrit au programme de fidélité, puis paie en caisse.
Un Scénario d’usage est un très bon
support pour préparer la
présentation des maquettes.

56.
Une session de critique en 3 temps
DiscuterPrésenterContextualiser
Une question de posture
• Savoir critiquer
• Savoir entendre les critiques
Toujours commencer par ce qui est apprécié,
puis ce qui pourrait être amélioré.
Terminer par des questions complémentaires

57.
L’espace physique compte

58.
L’espace physique compte
https://www.flickr.com/photos/discussingdesign/with/8016524742/

59.
Présenter en mode atelier
La maquette est affichée en grand format
(A3 ou supérieur).
1. Chaque participant note sur des post-it
(laisser quelques minutes) :
Ce qu’il apprécie
Ce qu’il apprécie moins
Questions complémentaires
2. Chacun vient placer ses post-it positifs
sur la maquette, en expliquant son point
de vue.
3. On répète la même chose pour ce qui est
moins apprécié, puis les questions.
+
+
+
+
+
▲
▲
▲
▲
▲
▲
?
?
+
▲
?

60.
Soyez bien intentionnés
Vous n’êtes pas là pour juger ou sanctionner, mais pour
comprendre ce qui a été produit, et chercher à l’améliorer avec
l’équipe de conception.
Filtrez vos pensées
Réévaluez vos premières réactions en fonction des objectifs et
des autres paramètres du projet.
Ne supposez pas, posez des questions
Essayez de comprendre le cheminement qui a permis d’en
arriver là, les hypothèses, les contraintes prises en compte.
Conseils pour faire part d’une critique
Adapté de http://www.slideshare.net/adamconnor/discussing-design-the-art-of-critique/8-Tips_for_giving_critiqueUse_a

61.
Conseils pour recevoir une critique
Faites preuve d’humilité et de retenue
Demandez vous pourquoi on vous pose telle ou telle question.
Écoutez et réfléchissez avant de répondre
Avez-vous vraiment compris ce que veut dire votre
interlocuteur ?
Se rappeler qu’il ne s’agit pas d’être jugé, mais de se
comprendre et d’améliorer ce qui a été produit ensemble.
Adapté de http://www.slideshare.net/adamconnor/discussing-design-the-art-of-critique/10-Tips_for_receiving_critiqueRemember_the

62.
Je ne suis pas pas l’utilisateur.
Tu n’es pas l’utilisateur.
Nous ne sommes pas l’utilisat…

63.
Étude de cas :
refonte d’un site e-commerce

64.
Penser « client », puis définir le périmètre
En atelier avec les parties prenantes
Sur la base des Personas :
- Définir les attentes et besoins de chaque cible prioritaire sur
l’ensemble du parcours client.
- Puis lister les contenus et fonctionnalités nécessaires à chaque étape.
Persona
Parcours client

65.
Puis réaliser le plan de site
Fiche ApartHotel
Accueil
Résultats de recherche
Découvrez Adagio
100 aparthotels dans le monde (carte)
Offres spéciales Programme de fidélité Mon compte, ma réservation
Comparateur
Demande de devis
Long séjour
Recherche
Confirmation de
demande de devis
Informations
personelles
Préférences
Newsletters
Tableau de bord
Réservations
Réservations
en cours
Historique
Mon profil FAQ Club
Créer un compte
Modifier
une réservation
Confirmation
de modification
Mot de passe oublié
e-mail de renouvellement
de mot de passe
Nouveau mot de passe
Confirmation de
changement de mot de passe
Confirmation de
création de compte
e-mail de confirmation
de création de compte
e-mail de confirmation
de modification
PLAN DE SITE - ADAGIO v2
Mon Dec 01 2014
LÉGENDE
FAQ
Contact
Mentions légales
+ CGV, Données perso
Presse
Recrutement
Investisseurs
Franchises
Landing page Destination
Pays / Région / Ville
Twitter
Facebook
Liste des marques Accor / P&V
Pierre & Vacances
Page de redirection vers hotel
du Groupe Accor
Page 404
Popin Web Callback
Page Accor
(gris clair)
Page Adagio
(gris foncé)
Module
(ce n'est pas une page)
Pile de pages
(même template)
e-mail envoyé
1. Choix de l'appartement
2. Options
3. Récapitulatif
4. Paiement
5. Confirmation
e-mail de confirmation
Le Mag Adagio
FOOTER
LP Segments :
Acheteurs, CE, ...
e-mail de confirmation
de demande de devis
LP Offre :
Petit prix dès 4 nuits
Développement durable
Consulter ou Annuler une réservation
(sans connexion)
Vers
"réservations
en cours"
e-mail de partage de l'aparthotel
Gammes Adagio / Adagio Access
+ Premium?
Pour un déplacement professionnel
Garantie du meilleur prix
Avis clients sur Adagio
Long séjour
Appartements
Services
Localisation et Accès
Galerie photo / vidéo
À proximité
Google+
Pinterest
PAGES TRANSVERSES
partenaire
du site

66.
Cadrer le périmètre fonctionnel
et la conception
En atelier avec les parties prenantes
pour lancer la phase de conception
Pour chaque page principale (Accueil, Fiche produit) :
Définir les besoins clients, objectifs business, origine des visiteurs, page
de sortie souhaitée, contenus et fonctionnalités de la page.
Diagramme de
description de page

67.
Le Diagramme de description de page
comme brief pour la conception
Core Content / Functionality
Supporting Information
Inward Paths Outward Paths
User Goals Business Goals
Trigger Words Elements of the Core Call to Action
©www.netflow-lindemann.de
Pour aller plus loin : https://uxmag.com/articles/re-introducing-page-description-diagrams

68.
Vers une entreprise UX

69.
Considérer l’expérience utilisateur
n’est pas un choix, c’est une nécessité.

70.
UX IS
THE NEW
BLACK*
* Harvard Business Blog

71.
Les différents niveaux de maturité
L’expérience client fait partie de l’ADN et
de la culture d’entreprise
L’expérience client est le principe
fondamental de la stratégie de l’entreprise
L’expérience client est cruciale et la
direction est activement impliquée
L’expérience client est très importante et
des programmes formalisés voient le jour
L’expérience client est importante, mais
reçoit peu d’intérêt
1
2
3
4
5 Ancrée
Engagée
Impliquée
Investie
Intéressée
Source : Bruce Temkin

72.
Conditions de réussite
Investissement de la direction
Accès direct aux utilisateurs finaux
Compétences en prototypage
Équipe resserrée et pluridisciplinaire4
3
2
1
http://blogs.hbr.org/2013/01/scaling-your-ux-strategy/

73.
L’expérience utilisateur n’est pas le rôle d’une
personne ou d’un département,
c’est l’affaire de toute l’entreprise.

74.
Pour conclure…

75.
Un œil dans le rétro…
1 Introduction à l'UX
2 Atelier : Initiation au Design Thinking
3 Recherche et Test utilisateurs
4 Atelier : Exploration > Analyse
5 Grands principes de conception
6 Atelier : Idéation > Conception
7 Design de la collaboration

76.
Comprendre les enjeux liés à l'UX
—————
Bien aborder un projet avec une dimension UX
—————
Mettre en pratique des méthodes et outils
centrés utilisateurs
Revue des objectifs des cours d’UX

77.
Voilà,
c’est fini…

78.
I would rather
have it said,
‘He lived usefully’
than
‘He died rich’.
— Benkamin Franklin
“
”
Vos retours sur cette année :
http://bit.ly/feedback-ux