L’expérience utilisateur, 

plus importante que
jamais: le cas STM.info
Boomerang la conférence, 1er mai 2014
Bonjour !
Jan-Nicolas Vanderveken

Associé fondateur, TP1

@nvanderv, @TP1
Nicole Gruslin

Conseillère corporative web, ST...
Aujourd’hui
Contexte
App ou site?
La carte
Mobilité
Tests
Résultats
Questions ?
3
Contexte
4
Des utilisateurs satisfaits
Site développé en 1996 - 1997
En ligne depuis 1997
90 % de satisfaction
STM.info doit avant to...
Dans ce contexte, pourquoi
créer un nouveau site?
6
App ou site?
7
IMAGE EN-TÊTE - Facultative.
Utiliser le gabarit prévu
(voir détails plus bas).
ANCRES - Possibilité d’ajouter une ancre p...
Ce qu’on a appris
Le choix entre une approche applicative ou plus traditionnelle se
fait en fonction de la nature du conte...
La carte
18
Google Map vs OpenStreetMap
19
Ce qu’on a appris
Les solutions open source présentent un haut niveau de
flexibilité et de personnalisation et un coût moi...
Mobilité
22
Les grands objectifs
Optimiser les activités de déplacement pour les téléphones
intelligents (itinéraires, horaires, tarif...
La solution
Optimisation mobile, en mode adaptatif, pour les sections
informationnelles du site.
Développer une applicatio...
ACCUEIL ET
THÈMES DE DÉPLACEMENT
(ADAPTATIF)
ordinateur + tablette
PAGES DE CONTENU
(ADAPTATIF)
ordinateur + tablette + té...
Ce qu’on a appris
Il faut faire des compromis : tout n’est pas noir ou blanc / adaptatif ou
optimisé mobile. Une solution ...
Tests
41
42
Tests
utilisateurssur
maquettes
fonctionnelles
YuCentrik
Betapanel
clients(8000)
TP1
Beta public
TP1
Tests
utilisateurs...
Tests
utilisateurs
surm
aquettes
fonctionnelles
Yu
C
entrik
B
eta
public
TP1
Tests
’accessibilité
ccessibilitéWeb
YuCentri...
Tests
utilisateurs
sur maquettes
fonctionnelles
Yu Centrik
Betapublic
TP1
Tests
utilisateurssur
versionalpha
YuCentrik
Foc...
Tests
utilisateurs
surm
aquettes
fonctionnelles
Yu
C
entrik
Tests
utilisateurs
sur
version
alpha
Yu
C
entrik
Focus group 
...
Tests
utilisateurs
urmaquettes
onctionnelles
YuCentrik
Betapanel
clients(8000)
TP1
Tests
utilisateurs sur
version alpha
Yu...
B
eta
panel
clients
(8000)
TP1
Tests
utilisateurs
sur
version
alpha
Yu
C
entrik
Tests
d’accessibilité
AccessibilitéWeb
YuC...
Beta panel
clients (8000)
TP1
Betapublic
TP1
Tests
tilisateurssur
versionalpha
YuCentrik
Tests
d’accessibilité
Accessibili...
Beta panel
clients (8000)
TP1
Betapublic
TP1
ur
ha
rik
Tests
d’accessibilité
AccessibilitéWeb
Yu Centrik
Betapanel
employé...
B
eta
panel
clients
(8000)
TP1
B
eta
public
TP1
Tests
d’accessibilité
AccessibilitéWeb
Yu Centrik
Betapanel
employés
(2000...
Tests
utilisateurs
surmaquettes
fonctionnelles
YuCentrik
Betapanel
clients(8000)
TP1
Beta public
TP1
Tests
d’accessibilité...
Ce qu’on a appris
Privilégier des tests sur des composantes fonctionnelles (mais ce n’est pas
toujours possible!)
Faire ap...
Résultats
53
Déplacement du trafic
54
2011
2012
2013
2014*
0% 25% 50% 75% 100%
Site web
Site mobile
Téléphone et SMS
* Valeurs projetées...
Applications natives téléchargées
55
* Valeurs projetées pour 2014
0
250000
500000
750000
1000000
2011 2012 2013 2014 *
iO...
Satisfaction de la clientèle
!
Printemps 2013 (ancien site) : 94 %
Été 2013 (déploiement) : 94 %
Automne 2013 (nouveau sit...
Merci !
57
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
Upcoming SlideShare
Loading in...5
×

L’expérience utilisateur, 
plus importante que jamais: le cas STM.info

895

Published on

Alors que tablettes et téléphones intelligents s’imposent comme les nouveaux écrans de référence pour beaucoup de consommateurs, comment penser l’interface et l’expérience utilisateur? Comment s’assurer que les efforts déployés seront durables, et que les résultats seront au rendez-vous?

Lors de cette présentation, Jan-Nicolas Vanderveken de TP1 et Nicole Gruslin de la STM détailleront l’exercice stratégique derrière le projet stm.info, partageront leurs analyses sur l’impératif mobile, en plus de démontrer les leçons retenues de ce redesign d’envergure.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
895
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

L’expérience utilisateur, 
plus importante que jamais: le cas STM.info

  1. 1. L’expérience utilisateur, 
 plus importante que jamais: le cas STM.info Boomerang la conférence, 1er mai 2014
  2. 2. Bonjour ! Jan-Nicolas Vanderveken
 Associé fondateur, TP1
 @nvanderv, @TP1 Nicole Gruslin
 Conseillère corporative web, STM
 @ngruslin #BoomConfSTM 2
  3. 3. Aujourd’hui Contexte App ou site? La carte Mobilité Tests Résultats Questions ? 3
  4. 4. Contexte 4
  5. 5. Des utilisateurs satisfaits Site développé en 1996 - 1997 En ligne depuis 1997 90 % de satisfaction STM.info doit avant tout faciliter les déplacements des usagers et être disponible en tout temps, même dans les périodes de pointe et de crise. 5
  6. 6. Dans ce contexte, pourquoi créer un nouveau site? 6
  7. 7. App ou site? 7
  8. 8. IMAGE EN-TÊTE - Facultative. Utiliser le gabarit prévu (voir détails plus bas). ANCRES - Possibilité d’ajouter une ancre pour chaque TITRE H2 présent dans la page. TITRE H2 - Préconiser les titres courts. titre et une ancre en haut de page. SOUS-TITRE H3 PARAGRAPHE Possibilité de mettre des mots en gras ou en italique. Les différents liens sont listés plus bas. Possibilité de centrer le texte. BOUTON Privilégier des boutons avec des textes courts. Ajouter un sous-titre au bouton pour indiquer une information secondaire. les différents styles graphiques 690 x 200 px
  9. 9. Ce qu’on a appris Le choix entre une approche applicative ou plus traditionnelle se fait en fonction de la nature du contenu. Le transfert de l’environnement applicatif à l’environnement informatif doit être fluide pour le client. Il faut développer des outils de gestion efficaces pour maintenir l’intégrité du site après le lancement. Nous avons, tout au long du projet, considéré STM.info comme un service, et non comme un site web. 17
  10. 10. La carte 18
  11. 11. Google Map vs OpenStreetMap 19
  12. 12. Ce qu’on a appris Les solutions open source présentent un haut niveau de flexibilité et de personnalisation et un coût moindre. Faire appel à des experts (Mapgears, dans ce cas). OpenStreetMap nous a permis de créer une carte designée à l’image de la STM et respectant les codes graphiques auxquels sont habitués les usagers. 21
  13. 13. Mobilité 22
  14. 14. Les grands objectifs Optimiser les activités de déplacement pour les téléphones intelligents (itinéraires, horaires, tarifs et état du service métro et autobus). Obtenir un design de marque cohérent, pour les trois environnements ciblés par la STM : ordinateurs, tablettes 
 et téléphones intelligents. Rendre la carte disponible sur les téléphones intelligents. Créer une solution évolutive tenant compte des grandes tendances du marché et pouvant s’adapter. 23
  15. 15. La solution Optimisation mobile, en mode adaptatif, pour les sections informationnelles du site. Développer une application mobile web optimisée pour le plus d’appareils mobiles intelligents possible. Mettre à profit les API et le CMS développés à ce jour. Offrir à la clientèle une expérience optimisée et unifiée pour les téléphones intelligents sur l’ensemble du site. 24
  16. 16. ACCUEIL ET THÈMES DE DÉPLACEMENT (ADAPTATIF) ordinateur + tablette PAGES DE CONTENU (ADAPTATIF) ordinateur + tablette + téléphone intelligent ACCUEIL ET THÈMES DE DÉPLACEMENT téléphone intelligent
  17. 17. Ce qu’on a appris Il faut faire des compromis : tout n’est pas noir ou blanc / adaptatif ou optimisé mobile. Une solution hybride peut s’avérer un choix judicieux. Une app web mobile doit être ultra-légère : la performance est primordiale dans un contexte de mobilité et les impacts ne touchent pas que le UX, le code est aussi impacté. Chaque fois que c’est possible, effectuer les opérations au niveau du serveur, et non du client. Prendre les décisions importantes comportant un haut niveau d’incertitude le plus tard possible dans le projet. 40
  18. 18. Tests 41
  19. 19. 42 Tests utilisateurssur maquettes fonctionnelles YuCentrik Betapanel clients(8000) TP1 Beta public TP1 Tests utilisateurssur versionalpha YuCentrik Tests d’accessibilité AccessibilitéW eb Yu C entrik Focus group 
 surle design C allosum B eta panel em ployés (2000) STM Tride cartes TP1 /Adviso
  20. 20. Tests utilisateurs surm aquettes fonctionnelles Yu C entrik B eta public TP1 Tests ’accessibilité ccessibilitéWeb YuCentrik Focusgroup
 surledesign Callosum Tri de cartes TP1 / Adviso
  21. 21. Tests utilisateurs sur maquettes fonctionnelles Yu Centrik Betapublic TP1 Tests utilisateurssur versionalpha YuCentrik Focus group 
 surle design C allosum Tride cartes TP1 /Adviso
  22. 22. Tests utilisateurs surm aquettes fonctionnelles Yu C entrik Tests utilisateurs sur version alpha Yu C entrik Focus group 
 sur le design Callosum Betapanel employés (2000) STM Tridecartes TP1/Adviso
  23. 23. Tests utilisateurs urmaquettes onctionnelles YuCentrik Betapanel clients(8000) TP1 Tests utilisateurs sur version alpha Yu CentrikFocus group 
 surle design C allosum B eta panel em ployés (2000) STM
  24. 24. B eta panel clients (8000) TP1 Tests utilisateurs sur version alpha Yu C entrik Tests d’accessibilité AccessibilitéWeb YuCentrik Focusgroup
 surledesign Callosum Beta panel employés (2000) STM
  25. 25. Beta panel clients (8000) TP1 Betapublic TP1 Tests tilisateurssur versionalpha YuCentrik Tests d’accessibilité AccessibilitéW eb Yu C entrik B eta panel em ployés (2000) STM
  26. 26. Beta panel clients (8000) TP1 Betapublic TP1 ur ha rik Tests d’accessibilité AccessibilitéWeb Yu Centrik Betapanel employés(2000)STM Tr TP
  27. 27. B eta panel clients (8000) TP1 B eta public TP1 Tests d’accessibilité AccessibilitéWeb Yu Centrik Betapanel employés (2000) STM Tridecartes TP1/Adviso
  28. 28. Tests utilisateurs surmaquettes fonctionnelles YuCentrik Betapanel clients(8000) TP1 Beta public TP1 Tests d’accessibilité AccessibilitéW eb Yu C entrik Tride cartes TP1 /Adviso
  29. 29. Ce qu’on a appris Privilégier des tests sur des composantes fonctionnelles (mais ce n’est pas toujours possible!) Faire appel à des experts des tests. Mettre à profit le personnel de la STM, ce qui a aussi eu comme bénéfice de les mobiliser et de créer un buzz dans l’entreprise. Miser sur une stratégie de déploiement graduelle. Impliquer chaque fois que possible les utilisateurs afin d’obtenir leurs commentaires, mais aussi pour faciliter l’acceptation de la nouvelle plateforme lors de son déploiement. 52
  30. 30. Résultats 53
  31. 31. Déplacement du trafic 54 2011 2012 2013 2014* 0% 25% 50% 75% 100% Site web Site mobile Téléphone et SMS * Valeurs projetées pour 2014
  32. 32. Applications natives téléchargées 55 * Valeurs projetées pour 2014 0 250000 500000 750000 1000000 2011 2012 2013 2014 * iOS Android
  33. 33. Satisfaction de la clientèle ! Printemps 2013 (ancien site) : 94 % Été 2013 (déploiement) : 94 % Automne 2013 (nouveau site) : 96 % 56
  34. 34. Merci ! 57
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×