Il est loin le temps des wireframes et des kilomètres de spécifications fonctionnelles. Inspiré des méthodes de Lean UX, nous avons souhaité tester et vérifier la faisabilité de la méthode du Rapid Prototyping pour une application tablette avec un de nos clients du milieu bancaire français. Il s'agira de présenter la méthodologie employée et de partager un retour d'expérience concret sur ce qui nous a permit de réussir à concevoir et à développer, en 10 jours chez le client, un prototype cliquable d'application tablette avec une petite équipe constituée d'une UX, d'une UI designer, de développeurs front et d'un scrum master. Nous verrons également la manière dont l'équipe a été constituée et ferons un état des lieux de ce qui a fonctionné ou non sur le projet.

1. le Rapid Prototyping,
ça marche !
FLUPA UX DAY 2015
@catarinette - www.catherineverfaillie.comwww.ekino.com
Catherine Verfaillie

2. Je suis Catherine Verfaillie
Senior UX Designer chez Ekino
10 ans d’expérience en agences digitales
Hello !
2

3. Pourquoi je viens vous parler de
Rapid Prototyping aujourd’hui ?
3

4. Un client + un besoin
4
= ?

5. • Contrainte de temps
• Un budget limité
• Manque de visibilité de notre client
• Un outil de plus pour les conseillers
• Rendre digeste un sujet complexe et sensible
• Convaincre le client sur la méthode agile
• Pouvoir enchainer rapidement si le « projet » est validé
Une feuille de route complexe…
5
…et autant d’embuches à surmonter

6. « Permettre de tester l’idée et défendre l’intérêt du projet
auprès de ses utilisateurs cibles et de la direction du groupe
pour débloquer un budget visant à sa concrétisation
dans un temps très limité »
Un enjeu (relativement) clair
6
Solution = Prototyper du faux
mais sans faire du jetable

7. D’ailleurs…
… le Rapid Prototyping, quésaco ?
7

8. « The goal of prototyping is to convince
yourself and others of an idea. »
« The value of an idea is 0
unless it can be communicated. »
Aza Raskin
Définition
8
Ça sert à quoi déjà ?

9. Une étape clé…
9
…du process d’UX Design
1. RECHERCHE
UTILISATEUR
2. ANALYSE
3. DESIGN
4. PROTOTYPE5. TESTS
UTILISATEURS

10. • Générer des idées et à tester rapidement plusieurs concepts
• Moins d’erreurs d’interprétation
• Facilite les échanges et la prise de décision
• Permet de discuter de certains aspects de design de l’UX
• Identifier rapidement des erreurs ou des zones de risques
• Mise à jour rapide
• Amélioration de notre compréhension du besoin
• Guerilla testing possible
Les avantages du rapid prototyping
10
= -(temps) – (coûts) – (efforts)

11. Plein d’outils connus…
11
… et un casse-tête annoncé
Axure
Fireworks
Balsamiq
Sketch
Edge animate
Bootstrap Framework
HTML, CSS
& Javascripts
Papier + Crayon
Whiteboard
MockingBird
WireframeCC
Moqups
UXpin
JustInMind
InVision
Proto.io
Gliffy
Framer
Protoshare Protonotes
visio
omnigraffle
Dev Frameworks
Power-Point
InDesign
Keynote
Posts-its
Sharpi
Post-its

12. Pourquoi...
…faire du Rapid Prototyping sur notre projet ?
12

13. Parce que !
13
Design
Thinking
Mode
Startup
Réalisation
itérative
méthodo
centrée sur
les retours
utilisateurs
Temps
Esprit agile
Co-création &
collaboration

14. Par quoi commencer ?
14

15. Plannification du projet
15
…organisée en sprints Lean UX
2 sprints
d’1 semaine
LOT 2LOT 1 ?
= 1 parcours
utilisateur
5 sprints
de 2 semaines
= +++

16. 1. Convenir d’un périmètre en 3D
2. Définir un niveau de fidélité
3. Choisir les outils adaptés
4. Construire la méthodologie
5. Partager une checklist de ses
besoins avec son client
6. A t’on besoin d’implémenter d’une
solution technique (ou pas)
Les questions à se poser…
16
…avant de commencer
• Scope
(distinct aspect à entire product)
• Form
(abstract à tangible)
• Fidelity
(rough à exact representation)
• Visual design
• Interaction
• content
• code
• Espace de travail
• Matériel
• Logiciels
• Accès et internet
Axure
HTML, CSS &
Javascripts
Papier
+ Crayon
WhiteboardInVision
Dev Frameworks
Posts-its

17. Une équipe
17
… de profils complémentaires
Edouard
Proxy Product
Owner
Camille
SCRUM Master
Carole
Cliente &
Product Owner
Catherine
Senior UX Senior
Maelle
UI Designer
Mickael
Senior Front End
Developer
Julien
Front End
Developer

18. Choix d’outils adaptés…
18
…au développement rapide d’une application tablette
Outils d’idéation
& co-création
Outils de
formalisation
& de design
Outils de
développement
Apache Cordova
APIs
AngularJS Framework
Ionic Framework
Papier
Whiteboard
Posts-its
Axure
InVision
Crayons
Photoshop

19. Notre méthodologie
19

20. Plannification du sprint 1
(1ère semaine)
LUNDI MARDI MERCREDI JEUDI VENDREDI
Organisation
Equipe / Locaux
• Installation dans les
locaux
• Présentation des
membres de
l’équipe
Découverte
utilisateurs
• Appréhender le
métier et
l’environnement
Comité
d’architecture
• Planification des
réunions techniques
• Rencontrer les
interlocuteurs
techniques
Mise en place des
outils de dev
• Configurer et
stabiliser
l’environnement de
développement
Démonstration
• Présentation des
premières
maquettes d’écrans
clés correspondant
au parcours client
Master
Présentation
Agile / Planning
• Présentation des
différents rôles
• Présentation du
planning et des
différents jalons de
la méthodologie
agile
Personae & Use
Case
• Co-création de
profils de clients
(personae) avec
leurs besoins et
attentes
• Co-création du
parcours client
Master du prototype
Sketch &
Moodboards
• Co-création en
séance de premiers
zonings d’écrans
• Présentation des
moodboards
• Finalisation du
parcours client
Master
Réalisation des
Maquettes
• Création des
Maquettes
principales du
parcours client
Master
Rétrospective
& Planification
• Centralisation des
retours
• Définition des
tâches du sprint
suivant

21. • Comprendre :
• méthodes de vente
• l’environnement
• processus de prise en charge du client
• Les besoins des clients
• Quid du support tablette avec des
assureurs
• Simuler un rendez-vous avec un
conseiller en mode jeu de rôle
Atelier UX #1 – Découverte client en agence
21

22. • Personae :
• Définir le profil d’un
client cible
• Comprendre ses
besoins spécifiques
• Use Case :
• Identifier le user flow
global de l’application
• En extraire un
parcours clé
Atelier UX #2 – Personae & Use Case
22

23. • Sketchs :
• Tri de cartes & Gamestorming
• Sketching des écrans clés sur support papier
• Moodboards :
• Présentation de planches de moodboards
• Choix d’une des pistes en séance
Atelier UX #3 – Sketchs & Moodboards
23

24. • Ecrans clés :
• Présentation des maquettes graphiques
• Prise en compte Live de retours UI Design rapides à intégrer
• Ecrans secondaires :
• Définition et échanges autour des écrans secondaires à réaliser
Atelier UX #4 – Maquettes graphiques
+ Démonstration sprint 1
24

25. Plannification du sprint 2
(2ème semaine)
LUNDI MARDI MERCREDI JEUDI VENDREDI
Développements
& maquettage
• Production du
prototype
• Production des
maquettes
secondaires
Développements
& maquettage
• Production du
prototype
• Production des
maquettes
secondaires
Revue finale UI
Design
• Finalisation des
maquettes avec
modification en
séance
Développements
• Production du
prototype
Démonstration
• Présentation des
maquettes du
parcours client
Master
• Présentation du
prototype interactif
Développements
• Production du
prototype
Rétrospective
& Planification
• Centralisation des
retours
• Définition des
tâches du sprint
suivant

26. Atelier UX #5 - Revue finale UI Design
26
• Valider les écrans clés & les écrans
secondaires :
• Passage en revue de l’ensemble des écrans du use
case
• Prise en compte en séance des retours UI Design les
plus rapides à intégrer

27. 27
Démo finale prototype sprint 2

28. Ce que j’en retiens
28

29. • Une 1ère phase de recherche exploratoire indispensable (même courte)
• Moins de formalisation = plus de communication et d’échanges
• Le challenge du timing nous a « aidé » à être focus et à tenir nos objectifs
• Impliquer son équipe dans le processus de création apporte de la valeur
au projet et soude les gens
• Le rapid prototyping n’est pas le bon moment pour innover à moins que
le but du prototype soit celui-ci
• Un prototype cliquable de 3 écrans vaut mieux que 100 maquettes
statiques
Les enseignements
29

30. 1. Tu dois raconter une histoire avec ton prototype
2. Tu devras toujours avoir des utilisateurs sous la main
3. Un product owner et des experts (métiers et SI) seront présents
4. Tu travailleras en war room avec ton équipe, idéalement chez ton client
5. Tu feras intervenir les membres de ton équipe au bon moment
6. Tu devras maitriser les outils que tu souhaites employer (ou en changer)
7. Tu devras rester sur tes premières hypothèses pour en tirer un enseignement
8. Tu garderas toujours ton prototype à portée de main, prêt à être montré
9. Tu seras toujours prêt à recueillir des feedbacks
10. Tu ne mettras pas trop d’affection dans ton premier prototype car…
Les conditions de succès…
30
…ou les 10 commandements d’un bon Rapid Prototyping

31. • Le prototype a permis de valider le projet
• 9 mois qu’on travaille ensemble
• 3ème version de l’application
• Notre client est convaincu par l’agile
• J’ai volé dans un biturbopropulseurs pour
aller faire des tests utilisateurs en province
Happy Ending
31

32. 32
Merci !
N’hésitez pas à me partager vos impressions
et à me faire part de vos remarques sur @catarinette
@catarinette - www.catherineverfaillie.comwww.ekino.com
Catherine Verfaillie

33. Articles sur le sujet :
http://newflux.fr/10-outils-pour-faire-vos-wireframe-web-et-mobile/
http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
http://uxmag.com/articles/rapid-prototyping-for-early-stage-start-ups
https://hackdesign.org/lessons/10
http://www.uxforthemasses.com/rapid-prototyping/
http://www.cooper.com/journal/2011/03/more_better_faster_ux_design
http://blog.invisionapp.com/building-better-products-through-prototype-validation/
Slideshare et publications :
http://keynotopia.com/fakeitmakeit/
http://fr.slideshare.net/steve_denning/rapid-prototyping-in-ux-design
http://fr.slideshare.net/azaraskin/how-to-prototype-and-influence-people
http://fr.slideshare.net/ranliron/prototyping-for-effective-ux
Ressources pour faire du prototyping :
http://blog.invisionapp.com/the-big-list-40-rock-solid-design-prototyping-resources/
Illustrations :
• Toutes les icones utilisées dans cette présentation proviennent de : icons8.com
• Les avatars des membres de l’équipe sont issus de Freepik.com :
http://www.freepik.com/free-vector/people-avatars-collection_777191.htm
• Les photos proviennent du site : https://unsplash.com
Crédits
33
Pour retrouver les sources graphiques de cette présentation