Les démarches administratives nous réjouissent rarement. Les services publics tendent de plus en plus à offrir un accès en ligne pour les simplifier, mais l’expérience offerte est souvent améliorable. Nos actions sont dans ce cas guidées par une contrainte extérieure. Affrontons cette appréhension. Cartographions les expériences du service à travers plusieurs scénarios, personas, appareils. Pointons les interactions, les émotions, les points de blocage, les moments critiques, les recommandations et les pistes d’amélioration vers notre service en ligne idéal – fluide, intuitif, accueillant, efficace!

1. Experience Map
UX Days 2017
My Lê @l_myle_l

2. 1 — Introduction (15 min.)
2 — Groupes et conception (1 h)
4 — Restitution des groupes (30 min.)
· Programme ·

3. Introduction
Qu’est-ce qu’une Experience Map ?
Exemples

4. Origine
Description et objectifs
Exemples
Le cas pratique de l’atelier
· Experience Map ·
1.1
1.2
1.3
1.4

5. Origine1.1
Customers Journey Map :
parcours d’un consommateur qui interagit
avec un produit ou un service.
Ces cartes permettent d’identifier les
obstacles, les opportunités d’amélioration
et d’innovation.
· Experience Map ·
*
*

6. Description et objectifs1.2
Représentation visuelle et chronologique
des interactions entre un utilisateur cible et
un service ou produit.
Elle est basée sur les données d’exploration
relevées et les donnent à voir.
Elles pointent les besoins, les actions, les
émotions, les pensées de l’utilisateur avant,
pendant et après l’interaction.
· Experience Map ·
*
*
*

7. Description et objectifs1.2
Travail collaboratif de l’équipe de
conception, les parties prenantes peuvent y
être conviées.
Elles pointent les solutions, les opportunités
de conception, aide la génération d’idées
nouvelles, l’amélioration et l’innovation du
produit ou service.
Outil de synthèse et d’idéation
· Experience Map ·
*
*
*

8. Exemples1.3

12. Method Experience map grid
http://patternservicedesign.com/experience-mapping-tools/
Experience maps don’t have a required
template, but most share two common
elements -- stages and information.
Stages
Placed along the top (x-axis) of the
map, the experience is broken into the
steps or stages you want to map about
your customer.
Information
Placed along the side (y-axis) of the
map, the information rows outline what
you want to know about the customer.
Common sections include:
● Emotions (thinking, feeling,
doing)
● Tasks (actions)
● Questions
● Interactions (touchpoints)
Thinking
Feeling
Doing
Parking
Buying
tickets
Entering the
museum
Stages

13. Persona : nom, quelques traits principaux Objectif(s)
AvantParcours utilisateur : Pendant Après
Temps
Étape 1 Étape 3Étape 2 Étape 4
Actions
Pensées
Émotions
Expérience
+
–
Opportunités
Points de contact

14. Le cas pratique de l’atelier1.4
· Experience Map ·
Service public Ameli de l’Assurance Maladie
Service au niveau national
Utilisations variées par une grande majorité
des Français/es
Cas que vous pourrez analyser à nouveau
Lié à des situations compliquées : maladie,
hospitalisation, réclamations, etc.

15. Exemples d’étapes1.4
Commencer avant l’interaction avec le
service
Rechercher
Allumer l’ordinateur (selon le lieu et l’heure :
états d’attention, de stress, de fatigue
varient)
Ouvrir un navigateur
Trouver le site ou la page du service
· Experience Map ·
*
*

16. Se connecter
Entrer son identifiant : numéro de sécurité
sociale (carte vitale, ancienne attestation)
Cette première étape peut créer des
moments de friction.
En général, pour les services utilisés
ponctuellement, on ne se souvient pas de
son mot de passe. En cas d’oubli ou suite
à plusieurs erreurs : il faut en demander un
nouveau (courrier, email).
*

17. Naviguer et trouver la page correspondant à
votre objectif.
Action
Terminer après l’interaction (envoi de
doucments, réclamation, se déplacer, etc.)
*
*
*

18. Conception
Groupes et collaboration
Personas et scénarios
Méthodologie

19. · Conception ·
Organisation des groupes
Ice-breaker
Conception des cartes (1 h)
Restitution (30 min.)
2.1
2.2
2.3
2.4

20. Méthodologie2.3
Répartition des groupes et tâches :
– 1 pers. joue le scénario en commantant à haute voix
(pensez à votre persona)
– les autres participants notent : réactions, étapes,
blocages
– tests sur plusieurs appareils et navigateurs

21. Méthodologie2.3
Carte
– 2/3 participants posent les étapes
– 2/3 participants remplissent la carte d’empathie
qui pourra être reportée sur la carte
– ensemble construire la carte
– ‘Expérience’ représentée par des smileys (visuel)
– ajouter des picto (devices, connexion, transports) si besoin
– repérer les points de blocage, critique, de rupture
– proposer des opportunités d’amélioration, d’innovation

22. “Il y a toujours une solution.”
Âge: 70 ans
Emploi: facteur à la retraite
Famille: marié, 2 enfants, 3 petits-
enfants
Lieu: Montélimar
Caractère: sociable
Introverti Extraverti
Analytique Créatif
​Pensée ​Émotion
Passif Actif
​Gai ​Sociable ​Optimiste Patient
Il a effectué des examens et radios en novembre dernier, il ne
se souvient pas d’avoir reçu la part de la mutuelle.
Il vérifie ses relevés de compte bancaires des derniers mois,
puis contacte sa mutuelle qui lui indique n'avoir pas de trace
des examens mentionnés.
Il doit leur transmettre son décompte de sécurité sociale pour
cet acte médical.
11h00 – Le service client Ameli devrait être accessible
Desktop – Safari – Fibre
Henri est chez lui, consultant son ordinateur portable.
[Canaux privilégiés] Téléphone et présentiel
[Point d’attention] Peu Technophile
Temps pris précédemment pour les vérifications
Sa famille lui a offert un iPhone pour l'appeler avec Facetime, il
voit ainsi ses petits-enfants. Il oublie parfois comment l’utiliser,
alors il note régulièrement les instructions de ses enfants.
Il prend de leurs nouvelles également avec Whatsapp.
Ses enfants lui ont enregistrés en favoris : La Parisien, Le Monde,
France Télévision et TF1 Replay, laposte.net pour sa messagerie,
et faciliter son utilisation d'internet.
Il a pour habitude de faire ses démarches administratives en
version papier, il peut prendre le temps de lire l'entièreté du
document, les annexes, de revenir sur certaines pages, de
rassembler les documents utiles, de les cocher lorsqu’il les a.
In​itiative
​Crainte
Ac​complissement
​Co​nfiance
Social
​​Internet
​Réseaux sociaux
​App mobile
​Software
Henri
Personnalité
​Objectifs
​C​ontexte d'utilisation
Bio
Motivation
​​Réseaux et ​applications
​Technologies

23. “Tout doit être fluide, intuitif, fun
et abordable.”
Âge: 20 ans
Situation: étudiante en Droit
Famille: célibataire
Ville: Tours
Caractère: joyeuse
Introvertie Extravertie
Analytique Créative
Conservatrice Libérale
Passive Active
​Joyeuse ​Investie Généreuse
Elle constate auprès de sa mutuelle étudiante, que la feuille de
soin de sa consultation dentaire annuelle – comprenant des
radios, d'un montant de 200€ – n’a toujours pas été prise en
compte. (Remboursement Sécurité sociale : 32€.)
La mutuelle lui réclame le relevé des frais de cette consultation
de novembre 2016.
12h – Le service client Ameli n’est peut-être pas accessible à
l’heure du déjeuner
Téléphone Mobile – Chrome – 3G
Pendant ses cours elle consulte le site Ameli pour télécharger
le relevé sur son téléphone, et l’envoyer par mail à sa
mutuelle.
Sinon elle devra le faire sur son ordinateur portable en rentrant
à la résidence universitaire.
Ce remboursement est nécessaire pour équilibrer son
budget.
[Canaux privilégiés] Mail et sms
[Point d’attention]
Petit écran, 3G (la connexion n’est pas toujours correcte),
amphi plein, entre présentation du cours et bruit de fond
(bavardages avant déjeuner, perte de patience)
Jeune internaute, qui a l’habitude des réseaux sociaux.
Elle commence des études de droit à Tours. L’autonomie : le
studio mais aussi toutes les démarches administratives, qu’elle
déclare indépendamment de ses parents.
In​itiative
​Crainte
Ac​complissement
​Co​nfiance
Social
​Internet
​Réseaux sociaux
​App mobile
​Software
Anna
Personnalité
​Objectifs
​Contexte d'utilisation
Bio
Motivation
​Réseaux et applications
​Technologies

24. “Mon engagement est très fort
pour accomplir mes objectifs.”
Âge: 38 ans
Emploi: cadre à la SNCF
Famille: marié, 2 enfants
Lieu: Paris
Caractère: engagée
Introvertie Extravertie
Analyti​que Créative
Conservat​rice Libérale
Passive Active
Active Exigeante Drôle
Son fils a eu la jambe plâtrée l’hiver dernier, elle se rend
compte que la transmission entre la mutuelle et le centre de
sécurité sociale n’a pas fonctionné.
Le remboursement tarde donc à arriver, et la mutuelle lui
demande de prouver ces frais avancés en octobre 2016.
19h – Le service client Ameli n’est plus accessible
iPad – App mobile – Safari – 3G
Dans le train de retour depuis Bordeaux connectée à la 3G sur
sa tablette, elle profite du trajet pour effectuer la démarche et
ainsi rentrer et profiter de sa famille.
[Canaux privilégiés]
Mail, chat et sms
[Point d’attention]
Le train (passage, bruit), la connexion (pas toujours correcte)
Rapidité, technophile
Cadre à la SCNF, elle est chargée de mettre en place un
nouveau service numérique pour améliorer la prise en compte
des clients en gare et en boutique, l’attente, l’achat, les
mécontentements des usagers, et de cette manière améliorer
l’image de la SNCF.
Elle est amenée à se déplacer plusieurs fois par an, dans les
villes françaises.
En déplacement, elle fait un point visio avec son équipe.
Le midi, en fin d’après-midi et le soir, le moment pour contacter la
famille et les proches.
Exigeante, tout doit rouler, le service est primordial, et les
services proposés doivent être de qualité.
In​itiative
​Crainte
A​ccomplissement
​Co​nfiance
Social
​Internet
​Réseaux sociaux
​App mobile
​Software
Victoire
Personnalité
​Objectifs
​C​ontexte d'utilisation
Bio
Motivation
​Réseaux et ​applications
​Technologies

25. "Je donne ma confiance à condition
de me prouver que vous êtes
fiables."
Âge: 44 ans
Emploi: producteur
Famille: en couple, sans enfant
Location: Paris et Toronto
Caractère: réfléchi
Introverti Extraverti
Analytique Créatif
Conservateur Libéral
Passif Actif
Réfléchi Logique Engagé Fiable
Il a rejoint une société de production française, et a ouvert un
compte ING pour son salaire, et redirige tous les mouvements
bancaires vers ce nouveau compte.
Dans sa liste, il doit contacter le centre de sécurité sociale
pour adresser son nouveau RIB.
8h15 – Le service client Ameli n’est pas encore accessible
Ordinateur portable – Firefox – ADSL
[Canaux privilégiés] Téléphone, mail, sms
[Points d’attention]
Connaît-il ce nom Ameli? Cherche-t-il dans le navigateur
comment accéder au service de sécurité sociale?
Il a besoin de temps pour comprendre correctement la
syntaxe des phrases.
Le site existe-il dans d’autres langues? Comment se repère
les non-francophones?
Producteur de film canadien originaire de Toronto. Il a rejoint sa
compagne (elle est ingénieur du son) à Paris il y a quelques
mois, et démarre une nouvelle carrière en Europe.
Anglophone, il maîtrise le français pour des discussion simples
dont le rythme est suffisamment lent pour lui permettre de
comprendre, mais les démarches administratives françaises sont
complexes pour lui, d’autant plus habitué au système canadien.
Les interfaces doivent être claires, intuitives, donner les
informations correctes rapidement.
Initiative
Crainte
Accomplissement
Co​nfiance
Social
Internet
Réseaux sociaux
App Mobile
Software
Jeong
Personnalité
Objectifs
Contexte d'utilisation
Bio
Motivation
Réseaux et applications
Technologies

26. “J'aime travailler en équipe
et accompagner les élèves.”
Âge: 51 ans
Emploi: employée administrative
Famille: mariée, deux enfants
Ville: Quimper
Caractère: patiente et pédagogue
Introvertie Extravertie
Analytique Créative
Conservatrice Libérale
Passive Active
Anxieuse Organisée Sociable
Généreuse
Sa fille s’est blessée à la cheville en randonnée, elle doit
rediriger les remboursements des examens vers le nouveau
compte ouvert il y a quelques jours.
Elle doit modifier ses coordonnées bancaires auprès de la
sécurité sociale.
15h30 – Le service client Ameli est accessible, ferme-t-il à
16h?
Ordinateur – Internet Explorer ou Chrome – ADSL
[Point d’attention]
Utilisatrice stressée et anxieuse.
Peu technophile.
Employée à l’accueil dans un lycée général de Quimper. Gaie et
appliquée dans ses tâches, elle aime échanger avec l’équipe
pédagogique, ainsi qu’avec les élèves sur leur vie quotidienne et
leur futur.
Initiative
Crainte
Acccomplissement
Co​nfiance
Social
Internet
Réseaux sociaux
Application mobile
Software
Michèle
Personnalité
Objectifs
Contexte d'utilisation
Bio
Motivation
Réseaux et applications
Technologies

27. “Montrer le dynamisme
et l’innovation français.”
Âge: 31 ans
Emploi: développeur back-end
Famille: en couple
Ville: Lyon
Caractère: réfléchi et dynamique
Introverti Extraverti
Analytique Créatif
Conservateur Libéral
Passif Actif
Fonceur Exigeant Précis Réfléchi
Il a retiré sa nouvelle monture et ses verres chez l’opticien, et
réglé la facture.
Il se rend compte plusieurs jours après, que son compte de
sécurité sociale doit être lié à un compte bancaire qu’il vient
de fermer.
Il souhaite modifier le RIB enregistré pour les
remboursements médicaux.
19h – Le service client Ameli n’est plus accessible
Téléphone Android – Firefox – 3G
[Canaux privilégiés] Mail, chat et téléphone
[Point d'attention]
Il quitte son lieu de travail pour rejoindre un meetup Javascript
qu’il co-organise.
En déplacement dans les transports : rapide, mauvaise
connexion, excédé par les heures de pointe, stressé par
l’organisation (avoir tout en tête). Peu de patience.
Développeur back-end pour une startup lyonnaise d’objets
connectés.
Technophile et exigeant sur les services et interfaces. La France
pourrait être bien mieux placée en terme de technologies et
d’innovation.
Initiative
Crainte
Accomplissement
Co​nfiance
Social
Internet
Réseaux sociaux
Application mobile
Software
Ahmed
Personnalité
Objectifs
Contexte d'utilisation
Bio
Motivation
Réseaux et applications
Technologies