le rapid prototyping, ça marche !
TRANSCRIPT
le Rapid Prototyping, ça marche !
FLUPA UX DAY 2015
@catarinette - www.catherineverfaillie.com www.ekino.com Catherine Verfaillie
Je suis Catherine Verfaillie Senior UX Designer chez Ekino 10 ans d’expérience en agences digitales
Hello !
2
Pourquoi je viens vous parler de Rapid Prototyping aujourd’hui ?
3
Un client + un besoin
4
= ?
• 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
« 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
D’ailleurs… … le Rapid Prototyping, quésaco ?
7
« 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à ?
Une étape clé…
9
…du process d’UX Design
1. RECHERCHE UTILISATEUR
2. ANALYSE
3. DESIGN
4. PROTOTYPE 5. TESTS UTILISATEURS
• 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)
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
Pourquoi... …faire du Rapid Prototyping sur notre projet ?
12
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
Par quoi commencer ?
14
Plannification du projet
15
…organisée en sprints Lean UX
2 sprints d’1 semaine
LOT 2 LOT 1 ?
= 1 parcours utilisateur
5 sprints de 2 semaines
= +++
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
Whiteboard InVision
Dev Frameworks
Posts-its
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
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
Notre méthodologie
19
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
• 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
• 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
• 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
• 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
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
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
Démo finale prototype sprint 2
Ce que j’en retiens
28
• 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
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
• 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
Merci ! N’hésitez pas à me partager vos impressions
et à me faire part de vos remarques sur @catarinette
@catarinette - www.catherineverfaillie.com www.ekino.com Catherine Verfaillie
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