le Rapid Prototyping,
ça marche !
FLUPA UX DAY 2015
@catarinette - www.catherineverfaillie.comwww.ekino.com
Catherine Verf...
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 conseiller...
« 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 group...
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 co...
Une étape clé…
9
…du process d’UX Design
1. RECHERCHE
UTILISATEUR
2. ANALYSE
3. DESIGN
4. PROTOTYPE5. TESTS
UTILISATEURS
•  Générer des idées et à tester rapidement plusieurs concepts
•  Moins d’erreurs d’interprétation
•  Facilite les échange...
Plein d’outils connus…
11
… et un casse-tête annoncé
Axure
Fireworks
Balsamiq
Sketch
Edge animate
Bootstrap Framework
HTML...
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
Espri...
Par quoi commencer ?
14
Plannification du projet
15
…organisée en sprints Lean UX
2 sprints
d’1 semaine
LOT 2LOT 1 ?
= 1 parcours
utilisateur
5 spr...
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éthodo...
Une équipe
17
… de profils complémentaires
Edouard
Proxy Product
Owner
Camille
SCRUM Master
Carole
Cliente &
Product Owner
...
Choix d’outils adaptés…
18
…au développement rapide d’une application tablette
Outils d’idéation
& co-création
Outils de
f...
Notre méthodologie
19
Plannification du sprint 1
(1ère semaine)
LUNDI MARDI MERCREDI JEUDI VENDREDI
Organisation
Equipe / Locaux
•  Installation ...
•  Comprendre :
•  méthodes de vente
•  l’environnement
•  processus de prise en charge du client
•  Les besoins des clien...
•  Personae :
•  Définir le profil d’un
client cible
•  Comprendre ses
besoins spécifiques
•  Use Case :
•  Identifier le user...
•  Sketchs :
•  Tri de cartes & Gamestorming
•  Sketching des écrans clés sur support papier
•  Moodboards :
•  Présentati...
•  Ecrans clés :
•  Présentation des maquettes graphiques
•  Prise en compte Live de retours UI Design rapides à intégrer
...
Plannification du sprint 2
(2ème semaine)
LUNDI MARDI MERCREDI JEUDI VENDREDI
Développements
& maquettage
•  Production du
...
Atelier UX #5 - Revue finale UI Design
26
•  Valider les écrans clés & les écrans
secondaires :
•  Passage en revue de l’en...
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 ...
1.  Tu dois raconter une histoire avec ton prototype
2.  Tu devras toujours avoir des utilisateurs sous la main
3.  Un pro...
•  Le prototype a permis de valider le projet
•  9 mois qu’on travaille ensemble
•  3ème version de l’application
•  Notre...
32
Merci !
N’hésitez pas à me partager vos impressions
et à me faire part de vos remarques sur @catarinette
@catarinette -...
Articles sur le sujet :
http://newflux.fr/10-outils-pour-faire-vos-wireframe-web-et-mobile/
http://www.smashingmagazine.com...
Prochain SlideShare
Chargement dans…5
×

Le Rapid Prototyping, ça marche !

7 870 vues

Publié le

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.

Publié dans : Design

Le Rapid Prototyping, ça marche !

  1. 1. le Rapid Prototyping, ça marche ! FLUPA UX DAY 2015 @catarinette - www.catherineverfaillie.comwww.ekino.com Catherine Verfaillie
  2. 2. Je suis Catherine Verfaillie Senior UX Designer chez Ekino 10 ans d’expérience en agences digitales Hello ! 2
  3. 3. Pourquoi je viens vous parler de Rapid Prototyping aujourd’hui ? 3
  4. 4. Un client + un besoin 4 = ?
  5. 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. 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. 7. D’ailleurs… … le Rapid Prototyping, quésaco ? 7
  8. 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. 9. Une étape clé… 9 …du process d’UX Design 1. RECHERCHE UTILISATEUR 2. ANALYSE 3. DESIGN 4. PROTOTYPE5. TESTS UTILISATEURS
  10. 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. 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. 12. Pourquoi... …faire du Rapid Prototyping sur notre projet ? 12
  13. 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. 14. Par quoi commencer ? 14
  15. 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. 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. 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. 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. 19. Notre méthodologie 19
  20. 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. 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. 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. 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. 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. 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. 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. 27 Démo finale prototype sprint 2
  28. 28. Ce que j’en retiens 28
  29. 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. 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. 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. 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. 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

×