Web-UX / Agile avec UX

65
Agile avec UX grâce à la méthodologie PIA Emmanuel Levi-Valensi. Directeur Associé Philippe Chaurand. Ingénieur IHM Yoan Maman. Designer

Transcript of Web-UX / Agile avec UX

Page 1: Web-UX / Agile avec UX

Agile avec UXgrâce à la méthodologie PIA

Emmanuel Levi-Valensi. Directeur AssociéPhilippe Chaurand. Ingénieur IHMYoan Maman. Designer

Page 2: Web-UX / Agile avec UX

Emmanuel Levi-Valensi

0+12(32(+(42 #%&'(

)* "++,-./,+

!"#$!"#

@PIA_Emmanuel

Page 3: Web-UX / Agile avec UX

!"#$%&'()*%+,-"#.)()%-"//*01%

!"#$% &!'()*"!$% +,-.%/0!$%!"'*1%2*"31$$#$%0)&+1 %+*%-"0-*21("0%*1%+,.*3"22*/*01

Notre objectif

Page 4: Web-UX / Agile avec UX

Présentation de PIA

Page 5: Web-UX / Agile avec UX

PIA est un cabinet de conseil en système d'information,

spécialiste de l'expérience utilisateur et des usages innovants.

Nous réalisons des développements sur mesure et accompagnons nos clients dans toutes les phases de leurs projets web et mobile.

Page 6: Web-UX / Agile avec UX

Nos principales référencesFrance

International

Partenaires

Page 7: Web-UX / Agile avec UX

Agile avec UX

Page 8: Web-UX / Agile avec UX

Le manifeste agile

Page 9: Web-UX / Agile avec UX

Les 4 valeurs de l’agile

Lʼinteraction avec les personnes plus que les processus et les outils.

Un produit opérationnelplus qu'une documentation pléthorique.

La réactivité face au changementplus que le suivi d'un plan.

La collaboration avec le clientplus que la négociation de contrat.

Page 10: Web-UX / Agile avec UX

Scrum

Page 11: Web-UX / Agile avec UX

Encore plus loin

avec le lean

Page 12: Web-UX / Agile avec UX

Le lean est une démarche qui vise :

Source : «Processus et Entreprise 2.0» - Yves Caseau

une meilleure satisfaction des clients

tout en réduisant lʼutilisation des ressources

au moyen de processus améliorés et surtout de collaborateurs qui travaillent mieux

Page 13: Web-UX / Agile avec UX

« Plus avec moins, tous ensemble »

Le lean

Page 14: Web-UX / Agile avec UX

Le lean

Se concentrer sur la valeur pour le client

Allez sur le terrain

Sʼaméliorer continuellement par la mesure

Livrer des lots de taille réduite

// L’UX40%/(50*361%31!'*(1%$#*%

+,#7+&$0'1#*8%+,&52"*'0!31%/#%3"!'1!#

4,"9$1*:07"!8%+1$%'1$'$%#7+&$0'1#*$

41$%$'0'$%;198%<=>%'1$7!)

?"3@1'%$#*)1*A%50/1%10$AB

Page 15: Web-UX / Agile avec UX

Le cercle vertueux

Améliorati

on continue

Page 16: Web-UX / Agile avec UX

Mise en oeuvre sur un cas pratique

Page 17: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Cas pratique

Un groupe hôtelier souhaite améliorer la qualité dans ses établissements répartis dans toute la France.

Page 18: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Les 5 pourquoi ?

4"#$%."#+)("0$%'/,3(")*)%3'%

5#'3(1,%+*%0"$%671*3$8

C"#*D#"&%E9')-*%5#*%$*#3*/*01%:;%+*%0"$%

-3(*01$%)*.(*00*018%<'%/"=8%3"-'3*%

*$1%>%?@;8C"#*D#"&%E9')-*%5#A(3$%0*%$"01%2'$%$'B$&'(1$

C"#*D#"&%E9')-*%5#*%0"#$%0*%2)*0"0$%2'$%*0%

-"/21*%3*#)$%)*/')5#*$

C"#*D#"&%E9')-*%5#*%0"#$%0*%3*$%

-"00'($$"0$%2'$ C"#*D#"&%E

9')-*%5#*%0"#$%0*%3*#)%

+*/'0+"0$%2'$

Page 19: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Critères de succès

:; ?C;1!%FG%5"&$

Doubler le taux de rétention

Page 20: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Retours

Mise en place d’un processuspour recueillir et analyser les avis client

Actions

<'%3(1*)(*%*$1%*D-*33*01*

<'%-3(/A%,1'(1%-'$$,*

<'%1,3,%0*%/')-6'(1%2'$

Page 21: Web-UX / Agile avec UX

567.22,+8$+,12($9$32,:(1$;$<

Page 22: Web-UX / Agile avec UX

E0'3=$* F*$(G0%+*$%(01*)&'-*$ !($#'3%F*$(G0 F*.

E0'3=$*)%3*$%

),$#31'1$

L*-#*(33()%3*%

&**+K'-M

E%&'()* H0%-"#)$ E%&'()* H0%-"#)$ E%&'()* H0%-"#)$

I($*%*0%23'-*%+#%J'0K'0

E%&'()*

Page 23: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Analyse / Recueillir du feedback

Page 24: Web-UX / Agile avec UX

E0'3=$* F*$(G0%+*$%(01*)&'-*$ !($#'3%F*$(G0 F*.

E%&'()* H0%-"#)$ E%&'()* H0%-"#)$ E%&'()* H0%-"#)$ E%&'()*

L*-#*(33()%3*%

&**+K'-M

E0'3=$*)%3*$%

),$#31'1$

N#(.(%$#)%3*%J'0K'0

Page 25: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

@anomes

!"#$!"#

Design des interfacesPhilippe Chaurand, ingénieur IHM

Page 26: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Je monte à bord

Les enjeux

Inciter les clients à donner leur avis

Grâce à une interface innovante

Page 27: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Une réunion de co-design

Page 28: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

:($12.-.&''($842=(8$32,1,1>3(8

),#0("0%+*%-"O+*$(G0

Page 29: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Architecture de l’information

CinématiquesZoningsPatterns

Page 30: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Des prototypes papier

Page 31: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

J’en discute avec d’autres

#-(?$@,.+$<#-(?$'($?'&(+1$<

Page 32: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Résultat : 3 propositions

Page 33: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

0"#$%1*$1"0$%3*$%2)"2"$(B"0$

:($12.-.&''($842=(8$32,1,1>3(8

),#0("0%+*%-"O+*$(G0

Page 34: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Testons les propositions ...

Page 35: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Propal 1 livre d’or

Page 36: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Propal 2 quizz

Page 37: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Propal 3 visite interactive

Page 38: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Propal 1livre d’or

Laquelle préférez-vous ?

Propal 2quizz

Propal 3visite intéractive

Page 39: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Analyse desrésultats en direct

?P ?Q P? PQ Q? QP

Page 40: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

AB

C4&DD

:&$&'1%&!'1*037:1

+&:*1%/,"*

Page 41: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

0"#$%1*$1"0$%3*$%2)"2"$(B"0$

Valeur

:($12.-.&''($842=(8$32,1,1>3(8

),#0("0%+*%-"O+*$(G0

Utilisabil

ité

Idées Idées

Itération

Réactivité

Page 42: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

prototyper, c’est ...

! donner une vision du futur produit

! en tester la valeur et l’utilisabilité

! et partager cette vision !

à moindre coût ...

Page 43: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Mettre au propre

Page 44: Web-UX / Agile avec UX

E0'3=$* F*$(G0%+*$%(01*)&'-*$ !($#'3%F*$(G0 F*.

Analyser les

résultats

E%&'()* H0%-"#)$ E%&'()* H0%-"#)$ E%&'()* H0%-"#)$

%N#(.(%$#)%3*%J'0K'0

E%&'()*

Recueillir le feedback

Page 45: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Yoan MAMAN

Design Visuel

@yoanmaman

Designer Interactif

Page 46: Web-UX / Agile avec UX

Avant de commencer

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Page 47: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Qu’apporte le Design Visuel ?

La reconnaissance des valeurs de l’hôtel

L’envie d’utiliser l’application

Le confort d’utilisation

Page 48: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Valeurs, Etude cible et Planches de tendances

Esthétique intelligente

Page 49: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Analyse et étude des couleursEsthétique intelligente

Page 50: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Prototype haute-fidélité

Esthétique intelligente

Planches de tendances

Etude Valeurs / Cible

Charte chromatique

Etude des contrastes

Page 51: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Proposition 02Visite interactive

Proposition 01Livre d’Or

Prototype haute-fidélité

Page 52: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Proposition 02Visite interactive

Proposition 01Livre d’Or

Prototype haute-fidélité

Page 53: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

On va avoir besoin de vous.

Vous êtes de potentiels futurs utilisateurs

Page 54: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

On vote pourcon!rmer la prise de décision

Proposition 01Livre d’Or

Page 55: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

On vote pourcon!rmer la prise de décision

Proposition 02Visite interactive

Page 56: Web-UX / Agile avec UX

:($12.-.&''($842$=(832,1,1>3(8$F.41(GH=6'&16

3(.)'K3*$%2),'3'K3*$

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

0"#$%1*$1"0$%3*$%2)"2"$(B"0$

Valeurs

Confort

Envie

Idées

Idées

Idées

Et ensuite ?

Page 57: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Proposition élueLivre d’or

Page 58: Web-UX / Agile avec UX

E0'3=$* F*$(G0%+*$%(01*)&'-*$ !($#'3%F*$(G0 F*.

Analyser les résultats

E%&'()* H0%-"#)$ E%&'()* H0%-"#)$ E%&'()* H0%-"#)$

N#(.(%$#)%3*%J'0K'0

E%&'()*

Recueillir le feedback

Page 59: Web-UX / Agile avec UX

!"!#$%& '&%()"*'&%*("-&./!0&% '&%()"*+(%,&#

Page 60: Web-UX / Agile avec UX

12 MOIS PLUS TARD

:;

?C;

Doubler le taux de rétention

R;

M0 M0+12 M0+24

Page 61: Web-UX / Agile avec UX

Inspirons-nous de l’agile et du lean.

1(23"%*'&%*345&06/%*0#!(.%*&-*

7&%,.!4#&%

8.3-3-$93"%

:&%-3"%*"3%*%3#,63"%*!,9.;%*

'&%*,6#(%!-&,.% <(+.3"%*/.=>,&77&"-*'&%*#3-%*

'&*-!(##&*.=',(-&

?&%,.3"%*"3-.&*&@0!0(-=

A#(7("3"%*#&%*)!%9(##!)&%*

(",6#&%

Page 62: Web-UX / Agile avec UX

01$8421,41$3,42$26488&2$4+$32,:(1III

Page 63: Web-UX / Agile avec UX

La clé du succès est

dans la collaboration entre

Expert métier DéveloppeurErgonome Designer

Page 64: Web-UX / Agile avec UX

B(4#(3).!9C(&

CD9EFFGGGH("%6-,-I!)(#&H/.F