Le Rapid Prototyping, ça marche !
12 j'aime8,710 vues
La présentation aborde le concept de rapid prototyping dans les projets UX, mettant en avant son efficacité pour tester des idées et garantir leur viabilité au sein d'une méthode agile. Elle détaille les étapes et outils nécessaires pour mettre en œuvre cette approche, ainsi que les bénéfices qu'elle apporte en termes d'efficacité et de communication. Enfin, plusieurs enseignements clés sont partagés pour réussir un prototype, soulignant l'importance de la collaboration et de l'adaptabilité tout au long du processus.
Contenu connexe
Le Rapid Prototyping, ça marche !
- 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
- 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