Archi / Protos / Tech : comment synthétiser
la complexité UX pour vos clients.
J’ai pu constater au fil des années qu’il était de plus en plus compliqué/complexe de communiquer la masse et l’ensemble des documents qui constituent un projet web. Plan de site, prototypes, fonctionnalités, personas, résultats de recherche, workflows, wireflows, etc. La liste des documents de références qui suivent un projet est souvent longue et opaque pour les clients.
Depuis quelques années, nous avons testé une méthodologie de transmission qui permet aux clients de visualiser en un ensemble, l’architecture du site, les prototypes ainsi que les fonctionnalités liées à certaines pages. Selon les clients, on peut également travailler directement avec eux les wireflows et y attacher les personas.
Cette méthode (qui demande beaucoup de post-it et un grand mur) donne aux clients une vision plus « entière » du travail que vous effectuez. Cela permet également de l’impliquer directement dans la construction de l’outil et accélère certaines étapes de validation. Nous continuons à améliorer cette méthode en nous appuyant particulièrement sur les méthodes lean.
Que Du Web 2017 - Archi / Protos / Tech : synthétiser la complexité UX
1. Archi / Protos / Tech
Synthétiser la complexité UX pour vos clients
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
2. MC Casal
UX Strategist
Relax In The Air
relaxintheair.com
@mccasal
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
3. « Life is hard, it’s harder if you’re stupid. »
John Wayne
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
5. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Votre rôle
Pédagogie
Conseil
Validation
Communication
Réassurance
6. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
ClientUX designer Développeur
Audit
Pré-requis et contraintes
Stratégie d’entreprise
Stratégie UX
Recherche
Ressources
Contenus
Prototypes
Wireframes
…
Pré-requis et contraintes
Contenus
Architecture
Wireframes
Cahier des charges
Fonctionnalités
Charte d’interaction
…
?
8. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Gouvernance
9. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Personne ne lit
les documents
10. Audit
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
11. Planning
Vision commune et gouvernance
Périmètre du projet
Pré-requis et contraintes
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
15. Cahier des
charges technique
Pré-requis techniques
Fonctionnalités
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
19. Tests utilisateur
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
20. Design
Moodboards
Web design / Maquettage
Charte d’interaction
Charte typographique
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
21. Développement
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
22. Web analytics
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
23. Contrôle qualité - QA
Compatibilité
Débuggage
Consistence
404
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
24. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
26. Stratégie Recherche
Cahier des charges
Architecture
Prototypage
Design Développement
Relax In The Air
Initiation au UX et Web Design
Copyright @ Relax In The Air Sàrl 2017
Audit Planning
Contenus
Tests utilisateur
Web analytics QA
Ressources
27. Travail collaboratif
Proximité
Joli mur
Toutes sortes de Post-it
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
28. Personas
Plan de site
Workflows back-office
Fonctionnalités
Contenus
Wireframes / Prototypes / Maquettes
Wireflows
Documents
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
30. Mur
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
31. Informations personnelles
Profession
Lieu
Age
Revenus
Status familial
Informations pertinentes
Prénom
Geekiness
Capacités à utiliser le matériel /
outils
Usage des médias:
Email marketing
Mobile
Médias sociaux
Matériel à disposition
Ordinateur, tablette,
smartphone…
Objectifs clés / Besoins
primaires
• .
• .
Envies / Bénéfices
• .
• .
Objectifs stratégiques
• .
• .
Freins / Problèmes
• .
• .
0% 100%
0% 100%
0% 100%
Typologie d’utilisateur
Logistique et fonctionnalités
• .
• .
• .
• .
• .
• .
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Persona
Groupe d’utilisateurs/consommateurs qui présentent des
comportements similaires dans leurs décisions d’achat,
utilisation de la technologie, de produits…
Fondé sur une recherche rigoureuse, la récolte et l’analyse
de statistiques, des interviews et de l’observation.
32. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Informations personnelles
Profession
Lieu
Age
Revenus
Status familial
Informations pertinentes
Prénom
Geekiness
Capacités à utiliser le matériel /
outils
Usage des médias:
Email marketing
Mobile
Médias sociaux
Matériel à disposition
Ordinateur, tablette,
smartphone…
Objectifs clés / Besoins
primaires
• .
• .
Envies / Bénéfices
• .
• .
Objectifs stratégiques
• .
• .
Freins / Problèmes
• .
• .
0% 100%
0% 100%
0% 100%
Typologie d’utilisateur
Logistique et fonctionnalités
• .
• .
• .
• .
• .
• .
33. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
36. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
Panier
37. Workflow 4 Site institutionnel Blog XXX
Inscription newsletter Inscription newsletter
Page de qualification (site institutionnel)
http://institutions.ville-geneve.ch/fr/xxxxxxxxxxxxxxx
Détails: voir workflow 2
VALIDER
BASE DE DONNEES
EMAILS
Données liées à la newsletter updatent
le profil sur la base de données (type de newsletter)
BOÎTE EMAIL
L’email est inscrit sans validation
dans la base de données email marketing
Données liées à l’abonnement
au XXXX et aux invitations aux
vernissages envoient un email
formaté à
….@nomdedomaine.ch
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflows back-office
Les workflows identifiés lors de l’analyse des ressources
internes permet de cartographier les besoins des
utilisateurs back. Cela permet d’optimiser le back-office
lors du développement technique, de mettre en place des
workflows ou processus de mises à jour et de faciliter le
travail et la collaboration internes.
38. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflow 4 Site institutionnel Blog XXX
Inscription newsletter Inscription newsletter
Page de qualification (site institutionnel)
http://institutions.ville-geneve.ch/fr/xxxxxxxxxxxxxxx
Détails: voir workflow 2
VALIDER
BASE DE DONNEES
EMAILS
Données liées à la newsletter updatent
le profil sur la base de données (type de newsletter)
BOÎTE EMAIL
L’email est inscrit sans validation
dans la base de données email marketing
Données liées à l’abonnement
au XXXX et aux invitations aux
vernissages envoient un email
formaté à
….@nomdedomaine.ch
39. Workflow 1
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
Panier
Workflow 2 Workflow 3 Workflow 4 Workflow 5
40. Workflow 1
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
PanierW1 W1
W2
W5
W3
W4
Workflow 2 Workflow 3 Workflow 4 Workflow 5
41. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Fonctionnalités
Listes des développements front et back office qui vont
aider les utilisateurs dans leurs tâches sur le site. Ces
fonctionnalités sont généralement listées sur un roadmap
donnant la priorité d’implémentation.
42. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
43. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflow 1 Workflow 2 Workflow 3 Workflow 4 Workflow 5
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
PanierW1 W1
W2
W5
W3
W4
44. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflow 1 Workflow 2 Workflow 3 Workflow 4 Workflow 5
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
PanierW1 W1
W2
W5
W3
W4
Fonctionnalité 1
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 14
Fonctionnalité 4
Fonctionnalité 5
Fonctionnalité 7
Fonctionnalité 9
Fonctionnalité 1
Fonctionnalité 3
Fonctionnalité 14
Fonctionnalité 3
Fonctionnalité 4
Fonctionnalité 7
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 3
Fonctionnalité 13
45. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflow 1 Workflow 2 Workflow 3 Workflow 4 Workflow 5
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
PanierW1 W1
W2
W5
W3
W4
Fonctionnalité 1
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 14
Fonctionnalité 4
Fonctionnalité 5
Fonctionnalité 7
Fonctionnalité 9
Fonctionnalité 1
Fonctionnalité 3
Fonctionnalité 14
Fonctionnalité 3
Fonctionnalité 4
Fonctionnalité 7
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 3
Fonctionnalité 13
F1
F3
F3
F3
F3
F3
F9
F7
F4
F5
F8 F2
46. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Contenus
Tous les contenus!
47. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
48. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
49. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Workflow 1 Workflow 2 Workflow 3 Workflow 4 Workflow 5
Deals du jour Deals actuels Mon compte Anciens deals
Accueil
Kids
Lifestyle
Voyage
Restaurants
Sports
Deal Sport détail
Profil
Crédits
Achats
Search
Résultats
PanierW1 W1
W2
W5
W3
W4
Fonctionnalité 1
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 14
Fonctionnalité 4
Fonctionnalité 5
Fonctionnalité 7
Fonctionnalité 9
Fonctionnalité 1
Fonctionnalité 3
Fonctionnalité 14
Fonctionnalité 3
Fonctionnalité 4
Fonctionnalité 7
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 4
Fonctionnalité 9
Fonctionnalité 12
Fonctionnalité 2
Fonctionnalité 3
Fonctionnalité 13
F1
F3
F3
F3
F3
F3
F9
F7
F4
F5
F8 F2
51. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Prototypes / Wireframes / Maquettes
Les prototypes et les wireframes sont des guides visuels basiques
ou HD qui suggèrent la structure des pages.
La maquette est la concrétisation graphique des dits guides visuels.
52. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
54. La Maison
Les pièces d’exception
Les instruments d’écriture
Haute Ecriture
La Maison La Maison
Les pièces d’exception Les instruments d’écriture
La Maison
Artistes & professionnels
Loisirs
Les Beaux Arts
Maison
La Maison
Artistes & professionnels
La Maison
Histoire
Savoir-faire
Shops
Contacts
La Maison
afdsdfasdfsdfasdfa
fadsfjalskdf alkdsfj lkaj
dflkadsjf lkajd flkaj dfslkaj
flkadsjf lkajdf lkadj flkadjf
lakjdf alkdsjf lakdsjgokv
okmcklmealk jaeiowv
clkml cmaoie aomeoc-
Sous-menu pastel / choix des différents
pastels
Switch entre les deux univers:
Haute Ecriture & Beaux Arts
Pastels
Liste roulante de tous les produits du
sous-menu
Catégories: Pastels, Crayons de couleur,
Pinceaux & Peintures
Pastels
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Wireflows
Les wireflows représentent l’organisation interactive des pages
entre-elles. Ils montrent la logique des liens essentielle au
développement pour la compréhension des connexions inter-pages.
55. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
La Maison
Les pièces d’exception
Les instruments d’écriture
Haute Ecriture
La Maison La Maison
Les pièces d’exception Les instruments d’écriture
La Maison
Artistes & professionnels
Loisirs
Les Beaux Arts
Maison
La Maison
Artistes & professionnels
La Maison
Histoire
Savoir-faire
Shops
Contacts
La Maison
afdsdfasdfsdfasdfa
fadsfjalskdf alkdsfj lkaj
dflkadsjf lkajd flkaj dfslkaj
flkadsjf lkajdf lkadj flkadjf
lakjdf alkdsjf lakdsjgokv
okmcklmealk jaeiowv
clkml cmaoie aomeoc-
Sous-menu pastel / choix des différents
pastels
Switch entre les deux univers:
Haute Ecriture & Beaux Arts
Pastels
Liste roulante de tous les produits du
sous-menu
Catégories: Pastels, Crayons de couleur,
Pinceaux & Peintures
Pastels
67. Intérêt du projet
Mesurer Tester
Améliorer
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
68. La vulgarisation aide à la compréhension
La compréhension aide à l’appropriation
L’appropriation aide à la validation
Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
69. Relax In The Air
MC Casal - Archi / Protos / Tech : synthétiser la complexité UX
Copyright @ Relax In The Air Sàrl 2017
Bonheur