SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
le Rapid Prototyping,
ça marche !
FLUPA UX DAY 2015
@catarinette - www.catherineverfaillie.comwww.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. PROTOTYPE5. 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 2LOT 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
WhiteboardInVision
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.comwww.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

Contenu connexe

Tendances

FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
Flupa
 
Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016
Nicolas Samir
 

Tendances (20)

FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
 
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
FLUPA UX-Days 2016 - "Méthodes de Design UX. Révolutionnez votre toolbox !" p...
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
 
Conception par les usages pour lean startup - Conférence CARA mars 2014
Conception par les usages pour lean startup - Conférence CARA mars 2014Conception par les usages pour lean startup - Conférence CARA mars 2014
Conception par les usages pour lean startup - Conférence CARA mars 2014
 
Le Lean UX avec K2
Le Lean UX avec K2Le Lean UX avec K2
Le Lean UX avec K2
 
Design centré sur l’utilisateur et développement Agile: perspectives de réco...
Design centré sur l’utilisateur et développement  Agile: perspectives de réco...Design centré sur l’utilisateur et développement  Agile: perspectives de réco...
Design centré sur l’utilisateur et développement Agile: perspectives de réco...
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013
 
Agile/Lean UX for data - datavisualisation - Agile Nantes
Agile/Lean UX for data - datavisualisation - Agile NantesAgile/Lean UX for data - datavisualisation - Agile Nantes
Agile/Lean UX for data - datavisualisation - Agile Nantes
 
Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners  Design Thinking et UX pour les Products Owners
Design Thinking et UX pour les Products Owners
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
 
L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
 
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
 
Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
 
BAFS 2015 Genève : Frédéric Tremeau - Comment réconcilier l'IT et le métier g...
BAFS 2015 Genève : Frédéric Tremeau - Comment réconcilier l'IT et le métier g...BAFS 2015 Genève : Frédéric Tremeau - Comment réconcilier l'IT et le métier g...
BAFS 2015 Genève : Frédéric Tremeau - Comment réconcilier l'IT et le métier g...
 
Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016Lean UX - FLUPA UX Days 2016
Lean UX - FLUPA UX Days 2016
 
Sprint0
Sprint0Sprint0
Sprint0
 

En vedette

Protype and test
Protype and testProtype and test
Protype and test
roystonf
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
Martín Hoare
 

En vedette (20)

Crowdsourcing : mettre la foule à profit
Crowdsourcing : mettre la foule à profitCrowdsourcing : mettre la foule à profit
Crowdsourcing : mettre la foule à profit
 
Stocks - Biloba
Stocks - BilobaStocks - Biloba
Stocks - Biloba
 
Prototypes & test
Prototypes & testPrototypes & test
Prototypes & test
 
TWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypesTWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypes
 
50 ideas for Kev
50 ideas for Kev 50 ideas for Kev
50 ideas for Kev
 
Why Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design ThinkingWhy Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design Thinking
 
Protype and test
Protype and testProtype and test
Protype and test
 
User centered problem solving
User centered problem solvingUser centered problem solving
User centered problem solving
 
Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014
 
20080429 Epaper Update Lite
20080429 Epaper Update Lite20080429 Epaper Update Lite
20080429 Epaper Update Lite
 
Protype and test
Protype and testProtype and test
Protype and test
 
Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16
 
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateursCocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Première étude sur le testing en France
Première étude sur le testing en FrancePremière étude sur le testing en France
Première étude sur le testing en France
 
Maquettes & Prototypes
Maquettes & PrototypesMaquettes & Prototypes
Maquettes & Prototypes
 
Tests Dinterface SWT
Tests Dinterface SWTTests Dinterface SWT
Tests Dinterface SWT
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
 
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliserWireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
 

Similaire à Le Rapid Prototyping, ça marche !

Formation UX Design - Animer un Design Sprint
Formation UX Design - Animer un Design SprintFormation UX Design - Animer un Design Sprint
Formation UX Design - Animer un Design Sprint
NovUp
 
[Innover avec le Design Thinking] - Virtual Event
[Innover avec le Design Thinking] - Virtual Event[Innover avec le Design Thinking] - Virtual Event
[Innover avec le Design Thinking] - Virtual Event
Friends Of Figma, Cotonou
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
NovUp
 
Une expérience de Design Thinking à Groupama - Agile en Seine 2021
Une expérience de Design Thinking à Groupama - Agile en Seine 2021Une expérience de Design Thinking à Groupama - Agile en Seine 2021
Une expérience de Design Thinking à Groupama - Agile en Seine 2021
Agile En Seine
 
Formation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product OwnerFormation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product Owner
NovUp
 

Similaire à Le Rapid Prototyping, ça marche ! (20)

UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
 
Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Appréhender son premier Design Sprint
Appréhender son premier Design SprintAppréhender son premier Design Sprint
Appréhender son premier Design Sprint
 
Formation agile - Certification Professional Scrum Developer (PSD)
Formation agile - Certification Professional Scrum Developer (PSD)Formation agile - Certification Professional Scrum Developer (PSD)
Formation agile - Certification Professional Scrum Developer (PSD)
 
Thiga - Notre retour d'expérience sur le Design sprint
Thiga - Notre retour d'expérience sur le Design sprintThiga - Notre retour d'expérience sur le Design sprint
Thiga - Notre retour d'expérience sur le Design sprint
 
jeu gestion projet
jeu gestion projet jeu gestion projet
jeu gestion projet
 
Formation UX Design - Animer un Design Sprint
Formation UX Design - Animer un Design SprintFormation UX Design - Animer un Design Sprint
Formation UX Design - Animer un Design Sprint
 
L’ergonomie et l’expérience utilisateur en contexte agile (Agile UX Masterclass)
L’ergonomie et l’expérience utilisateur en contexte agile (Agile UX Masterclass)L’ergonomie et l’expérience utilisateur en contexte agile (Agile UX Masterclass)
L’ergonomie et l’expérience utilisateur en contexte agile (Agile UX Masterclass)
 
[Innover avec le Design Thinking] - Virtual Event
[Innover avec le Design Thinking] - Virtual Event[Innover avec le Design Thinking] - Virtual Event
[Innover avec le Design Thinking] - Virtual Event
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
XebiCon'16 : AXA France et Thiga - Innover en 5 jours c'est possible ! Retour...
XebiCon'16 : AXA France et Thiga - Innover en 5 jours c'est possible ! Retour...XebiCon'16 : AXA France et Thiga - Innover en 5 jours c'est possible ! Retour...
XebiCon'16 : AXA France et Thiga - Innover en 5 jours c'est possible ! Retour...
 
Afterworkshop #4 : Appréhender son premier design sprint
Afterworkshop #4 : Appréhender son premier design sprintAfterworkshop #4 : Appréhender son premier design sprint
Afterworkshop #4 : Appréhender son premier design sprint
 
Formation Agile Scrum
Formation Agile ScrumFormation Agile Scrum
Formation Agile Scrum
 
Une expérience de Design Thinking à Groupama - Agile en Seine 2021
Une expérience de Design Thinking à Groupama - Agile en Seine 2021Une expérience de Design Thinking à Groupama - Agile en Seine 2021
Une expérience de Design Thinking à Groupama - Agile en Seine 2021
 
Formation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product OwnerFormation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product Owner
 
Web-formation | Lean Innovation & Méthode 3P
Web-formation | Lean Innovation & Méthode 3PWeb-formation | Lean Innovation & Méthode 3P
Web-formation | Lean Innovation & Méthode 3P
 
chapitre 1 SI.pdf
chapitre 1 SI.pdfchapitre 1 SI.pdf
chapitre 1 SI.pdf
 
Le Design Sprint du Géant agile
Le Design Sprint du Géant agileLe Design Sprint du Géant agile
Le Design Sprint du Géant agile
 
Gestion de projet digital
Gestion de projet digitalGestion de projet digital
Gestion de projet digital
 

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
  • 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
  • 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