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.

1. L’expérience utilisateur,
plus importante que
jamais: le cas STM.info
Boomerang la conférence, 1er mai 2014

2. Bonjour !
Jan-Nicolas Vanderveken
Associé fondateur, TP1
@nvanderv, @TP1
Nicole Gruslin
Conseillère corporative web, STM
@ngruslin
#BoomConfSTM
2

3. Aujourd’hui
Contexte
App ou site?
La carte
Mobilité
Tests
Résultats
Questions ?
3

4. Contexte
4

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. Dans ce contexte, pourquoi
créer un nouveau site?
6

7. App ou site?
7

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

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

18. La carte
18

19. Google Map vs OpenStreetMap
19

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

22. Mobilité
22

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

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

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

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

41. Tests
41

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

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

44. Tests
utilisateurs
sur maquettes
fonctionnelles
Yu Centrik
Betapublic
TP1
Tests
utilisateurssur
versionalpha
YuCentrik
Focus
group
surle
design
C
allosum
Tride
cartes
TP1
/Adviso

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

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

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

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

49. Beta panel
clients (8000)
TP1
Betapublic
TP1
ur
ha
rik
Tests
d’accessibilité
AccessibilitéWeb
Yu Centrik
Betapanel
employés(2000)STM
Tr
TP

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

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

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

53. Résultats
53

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

55. Applications natives téléchargées
55
* Valeurs projetées pour 2014
0
250000
500000
750000
1000000
2011 2012 2013 2014 *
iOS
Android

56. Satisfaction de la clientèle
!
Printemps 2013 (ancien site) : 94 %
Été 2013 (déploiement) : 94 %
Automne 2013 (nouveau site) : 96 %
56

57. Merci !
57