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