Design Rush

Epitech Digital

baptiste@roullin.net

Diapositives : mode d’emploi

  • Naviguer verticalement et horizontalement avec les flèches du clavier

  • Vue d’ensemble des slides : appuyer sur ÉCHAP

  • Menu de navigation : appuyer sur M

  • Menu de navigation : appuyer sur CTRL + SHIFT + F

Pour les curieux : Ces supports sont écrits dans le format AsciiDoc et convertis en diapos avec Reveal.js.

Un design rush c’est quoi ?

Non vraiment c’est quoi ? À votre avis ?

design rush

Une méthode pour affronter un problème vicieux

Problème vicieux (wicked problem) ?

  • Pas de solution évidente

  • Chaque problème est unique

  • On ne comprend vraiment le problème qu’après avoir trouvé une solution

  • La solution est un effort continu

  • Plein de facteurs interdépendants

converger diverger before after

Exemple : Netflix

netflix

Histoire de Netflix

Exemple : Kodak

kodak

Kodak, splendeur et décadence d’un empire

"We’re more of a chemical company than a camera brand"

Exemple : un moniteur pour bébés

vpd bébé

Design rush : le principe

  • Affronter un sujet difficile

  • Réunir tous les acteurs : technique, commerce, design, décideur…​

  • Compresser toutes les étapes d’un projet en cinq jours en immersion totale

  • Résultat final :

    • Une vision plus claire de votre service

    • Un prototype validé…​ ou non

marathon

Les étapes

design sprint steps

Ça vous rappelle rien ?

  • C’est grosso modo la méthode UX

  • Deux différences avec le cours d’intro :

    • Un même projet du début à la fin

    • Plus orienté "business"

loewy

design rush ≈ design sprint

Un format qui bouscule les habitudes de l’entreprise

design sprint schedule
design sprint schedule2

Ça vient d’où ? (1)

Google Ventures, investisseur et incubateur de startups

Méthode développée dans les années 2010 et publiée en 2016

design sprint cover

Ça vient d’où ? (2)

"Faire charrette"

charrette

Les étapes et le plan de la semaine

  1. Lundi : Cadrer la semaine en comprenant le brief et vos utilisateurs

  2. Mardi : Explorer des solutions puis en choisir une

  3. Mercredi et jeudi : Prototyper

  4. Vendredi : Tester

Jalons et notes

Les oraux

  • Mardi : pitch

  • Jeudi : présentation du prototype

  • Vendredi : présentation finale

Notation :

  • 1/3 sur l’implication pendant toute la semaine

  • 1/3 sur les oraux

  • 1/3 sur un compte-rendu à faire la semaine suivante

J1 : Comprendre un brief pour cadrer la suite

Programme de la journée

  1. Comprendre le brief et les clients

  2. Cadrer avec un canevas

A. Comprendre le brief et les clients

  1. Présentation du brief

  2. EXO : Phase de questions/réponses avec le commanditaire

  3. EXO : Immersion dans le sujet et documentation

  4. EXO : entretiens utilisateurs

  5. Présentation du brief complété

C’est quoi un brief ?

  • Une description assez courte des intentions et d’un besoin d’un commanditaire

  • ≈ Expression de besoin

  • ≠ Cahier des charges (qui a une portée contractuelle et donc souvent plus détaillé)

  • ≠ Spécification (encore plus détaillé)

Un brief est souvent trop flou

brief0

…Ou trop détaillé

brief

Dans un brief il y a souvent

  • Des détails inutiles ou prématurés

  • Des oublis

  • Des mauvaises idées

  • Des hypothèses implicites

  • Des fonctionnalités détaillées sans réflexion sur leur usage réel

Il faut toujours creuser et questionner un brief

…sans prétendre apprendre la vie au commanditaire

Le brief

Je suis le créateur de Toretto Caisses, un réseau de cinquante concessionnaires. Ces concessions sont en mauvaise posture, on aimerait les faire passer à la vente en ligne pour inventer la concession de demain.

On imagine un service où on puisse consulter le catalogue détaillé en ligne, simuler les offres de financement des différents constructeurs et prendre rdv pour essayer le véhicule.

Je cherche une agence pour concevoir ce nouveau service. Les candidats doivent me présenter un prototype et un pitch ce vendredi.

EXO | Interrogez-moi

Tous ensemble, posez-moi des question en vous attardant sur chaque mot du brief

Soyez critiques !

interrogatoire

EXO | Renseignez-vous en ligne

brief1
brief2

EXO Renseignez-vous en ligne

1 - Recherche | ⌛50 minutes

  • marché : évolutions, spécificités, canaux de vente, types de contrat…​

  • consommateurs : habitudes d’achat, utilisation de la voiture…​

  • chiffres, citations, témoignages…​

  • exemples de sites dans le même secteur

2 - Partage des résultats | ⌛ 10 minutes

Prenez des notes

Le brief complet

C’est ici

1. Pourquoi il faut se confronter au réel

Rappels

Exo | Entretien utilisateur

Objectif :

  • Apprendre à préparer des questions

  • Recueillir des infos sur la manière dont les gens achètent ou imaginent acheter un véhicule

Consignes

  1. Complétez le guide d’entretien — ⌛20 minutes

  2. Allez dans les étages du bâtiment et alentours pour interroger au moins 6 personnes | ⌛ 60 minutes

Entre vous, l’un joue plutôt le rôle d’animateur, l’autre plutôt le rôle de scribe. Alternez à chaque entretien.

Guide d’entretien : une partie du protocole

Le guide détaille le déroulement indicatif

  1. Présentation et objectifs

  2. Corps de l’entretien : liste des questions avec relance et embranchements possibles

  3. Rétrospective et conclusion

Conseils

L’entretien doit être semi-dirigé :

  • L’objectif est de recueillir des infos intéressantes, pas de suivre à la lettre les questions

  • La liste de questions est une trame de base, un outil

  • Ce n’est pas grave si vous ne pouvez pas poser toutes les questions

Aller du général au particulier, du subjectif au factuel. Exemple :

  1. "Pouvez-vous me dire comment vous révisez, en général ?"

  2. "Avez-vous une idée de combien de temps vous avez révisé la semaine dernière ? …​ 2h ? 3h ?"

Écueuils

  • Etre trop froid ou trop familier

  • Utiliser des formulations biaisées

  • Sur-interpréter

  • Juger, conseiller, réconforter

Relances

  • Silence

  • Clarification ou demande de précision

  • Question sur l’attitude

  • Répétition

  • Interprétation

  • Résumé

  • Question de confrontation

  • Onomatopée ou encouragement

B. Cadrer avec un canevas de valeur

  1. Construire un profil de client

  2. Construire une proposition de valeur

Canevas ?

canvas

Exemple : canevas d’affaire

vpd3

Canevas de valeur

vpd4

Canevas de valeur

La partie "expérience client" du canevas d’affaires. Deux parties :

  1. Votre proposition de valeur proprement dit

  2. Vos segments de clientèle

⇒ Ce que votre service va apporter à une clientèle spécifique

1. Proposition de valeur

Ce que va apporter votre service, globalement, au-delà du prix et de la liste des features

vpd gauche vide

La valeur d’un service

valeur1
valeur2

1. Proposition de valeur

Proposition de valeur du livre "Proposition Value Design"

vpd gauche

2. Profil / segment d’un client

vpd droite vide

2. Profil / segment d’un client

Profil de cinéphile. Même personne, différent profil suivant le contexte.

vpd droite

Rencontre entre un service et un client

vpd fit

Récapitulatif

  • Canevas d’affaires

    • Canevas de valeur

      • Proposition de valeur

      • Profil/segment client

La source : le livre Value proposition design

Basé sur le livre Value Proposition Design, disponible intégralement ici.

vpd2

EXO | proposition de valeur

Partie 1 : construire deux profils de personnes

Partie 2 : construire une proposition de valeur par client

EXO | Profils client | ⌛ 30 minutes

En vous basant sur le brief, vos connaissances et vos recherches, définissez deux profils de personnes qui seraient prêt à acheter un véhicule par Internet.

Ils doivent être complémentaires mais pas contradictoires

EXO | Proposition de valeur | | ⌛ 20 minutes

Définissez les contours du service de vente de voitures idéal, une pour chaque profil.

Exemple de corrigé

vpd corrigé

J2 : Diverger / converger

Les étapes et le plan de la semaine

  1. Lundi : Cadrer la semaine en comprenant le brief et vos utilisateurs

  2. Mardi : Explorer des solutions puis en choisir une

  3. Mercredi et jeudi : Prototyper

  4. Vendredi : Tester

Il faut diverger pour mieux converger

converger diverger before after
converger diverger chaise1
converger diverger chaise2
converger diverger1
converger diverger4

source

converger diverger5
converger diverger3
converger diverger2

Converger

À un moment il faut savoir choisir

converger1
converger2
converger3

Plan du jour

  1. Benchmark

  2. Parcours existant

  3. Exercice de brainstorming

  4. Sketching

  5. Arborescence cible

  6. Oral sur les deux jours

Quand est-ce qu’on converge ?

converger diverger

EXO : Benchmark | ⌛ 45 minutes

Objectifs

  • Explorer les solutions existantes et voir les conventions, ce qui marche ou pas, d’un point business et expérience utilisateur.

  • Analyser ~4 sites conccurentiels

  • Analyser ~2 sites non-concurentiels mais avec des enjeux similaires

Thèmes

  • Comment renseigner

  • Comment conseiller

  • Comment rassurer

  • Comment vendre

  • …​

Exemple

renault

Parcours

Rappels : représentation globale d’une séquence de vie

Permet de représenter visuellement et synthétiquement

  • Des enchainements d’étapes, des ellipses, des embranchements

  • Des actions et leur contexte

  • Des canaux : discussion par téléphone, mobile, desktop, face à face…​

  • Interactions entre acteurs et entre canaux

  • Émotions et raisonnements

  • Opportunités pour de nouvelles fonctions

  • Contenu détaillé du service

Plusieurs méthodes selon l’objectif

  • carte d’expérience (experience map)

  • service blueprint

  • Parcours client (customer journey)

Customer journey

Parcours d’un client : acquisition, navigation sur le site, conversion.

parcours

EXO : parcours existant | ⌛ 30 minutes

Consignes

  1. Représenter le parcours d’achat existant d’une de vos cibles :

    • achat d’une voiture d’occasion avec demande de financement. Je passe par un concessionnaire qui a juste une adresse mail et un catalogue en ligne.

  2. Identifier les opportunités de simplification : moins d’étapes, moins de choix, moins d’attente…​

EXO : parcours existant | ⌛ 30 minutes

parcours existant

Techniques de prise de décision

Vote

dot

Chapeaux de Bono

bono

Matrice

matrix

Modèle de Kano

kano

EXO : brainstorming | ⌛ 30 minutes

Inventez le site de vente de voitures de 2030… ou de 2022 ce sera déjà pas mal

Consignes

  1. Reprenez votre canevas. Ajoutez un aspect plus innovant en s’inspirant des mots-clés et besoins fondamentaux

  2. Individuellement et silencieusement, notez des idées de concept sur des post-its (5 minutes)

  3. Rassemblez et organisez les idées. Discutez, critiquez, améliorez, mélangez…​

  4. Gardez une seule idée

    • La plus porteuse

    • Celle qui répond le plus aux différents besoins fondamentaux

Exemples

  • Un site pour écolos acharnés

  • Un site pour pimper votre future voiture

  • Un site pour acheter une voiture à plusieurs

  • …​

Mots-clés

  • Visioconférence

  • Développement durable

  • Transparence

  • Consommacteur

  • Autonomie

  • Économie circulaire

  • Accessoires

  • Portefeuille virtuel

  • QR code

  • Réalité augmentée

  • Réalité virtuelle

  • 3D

  • Phygital

  • Collaboratif

  • Interfaces vocales …​

Besoins psychologiques fondamentaux

Source

  • Relationnel / appartenance

  • Sécurité / contrôle

  • Plaisir / stimulation

  • Autonomie / indépendance

  • Réalisation de soi / sens

  • Compétence / efficacité

  • Influence / popularité

EXO : Croquis "De 6 à 1"

Pourquoi prototyper ou maquetter ?

  • Se projeter dans le résultat final

  • Itérer facilement

Pourquoi prototyper ou maquetter ?

Plus fondamentalement, c’est un moyen de réfléchir

alt

EXO : Croquis "De 6 à 1"

Dessinez la page d’accueil de votre site en intégrant l’idée que vous avez gardé du brainstorming

Objectifs

  • Rentrez dans le détail du service

  • Imaginez comment votre service se présente au visiteur

Consignes

  1. Individuellement, dessinez de 6 manière différente la même interface | ⌛ 20 minutes

  2. Présenter entre vous les pistes les plus intéressantes

  3. Individuellement, inspirez vous de ces idées pour créez une seule piste | ⌛ 5 minutes

  4. Discutez et choisissez une des pistes

Exemples

sketch

Exemples

sketch2

Le pitch

pitch

Savez-vous pitcher ?

pitch2

Présentation devant Dominic Toretto

  1. Préparation : ⌛ 20 minutes

  2. Passage : ⌛ 5 minutes

Ce qu’il doit contenir

  • Vos cibles, ce que vous avez appris sur elles

  • Votre service : ce qu’il fait, ce qu’il apporte, sa proposition de valeur

  • Comment il va améliorer le parcours existant du client et se différencier

  • Votre page d’accueil

  • l’évolution de votre réflexion sur ces deux jours

3. Prototyper

  1. Lundi : Cadrer la semaine en comprenant le brief et vos utilisateurs

  2. Mardi : Explorer des solutions puis en choisir une

  3. Mercredi et jeudi : Prototyper

  4. Vendredi : Tester

Déroulement

  1. Arborescence

  2. Navigation

  3. Zonings

  4. wireframes

  5. Prototype

Arborescence

arbo

EXO : Arborescence cible | ⌛ 30 minutes

  • Organisez et le cas échéant décomposez ces pages

  • Signalez les pages "à part" et potentiellement une idée de leur emplacement (footer…​)

  • Accueil

  • À propos

  • Concessions

  • Comment ça se passe

  • Simulateur / devis

  • Tunnel de commande (avec ou sans financement) et prise de RDV

  • Recherche

  • listes produit

  • Fiche produit

  • Reprise

  • Espace client

  • FAQ

  • Recrutement

  • Contact

  • Mentions légales

  • CGU

  • CGV

  • Confidentialité

  • Comparateur

  • …​

Maquettage

Objectifs :

  1. Utiliser Figma pour des wireframes

  2. Prototyper en fonction des décisions précédentes

  3. Se poser des questions d’ergonomie

Il y a plusieurs types de fidélité

proto7

Il y a plusieurs styles de wireframes

proto3

Format attendu

Juste assez détaillé pour qu’on se puise projeter

  1. Contenu :

    1. "réservoir : 1.2L", pas "lorem ipsum"

    2. "une petite voiture pleine de charme pour la ville lorem ipsum bla bla bla", pas juste "lorem ipsum"

  2. style

    1. pas de couleur, typo par défaut…​

    2. Pictogrammes pour les icônes ou si ça aide à la compréhension

    3. styles basiques pour suggérer la hiérarchie du contenu et les interactions

  3. Interactions : liens principaux, exemples de comportement…​

Proposition de scénario

  • Je découvre le service, je veux qu’on me l’explique avant d’acheter une ocasion

  • Je parcours le catalogue

  • On m’a parlé de la Citroën Ë-C4, je vais vouloir l’essayer en concession

Pages à faire

Pages desktop, 1280px de large

  1. Accueil

  2. Choix de concession

  3. Liste de voitures avec bloc de "push" bien visible mais pas intrusif ("essayez notre comparateur etc.")

    1. Liste complète

    2. Liste filtrée

  4. Fiche produit de voiture d’occasion Ë-C4

    1. Deux CTA (boutons principaux) à déterminer

    2. D’autres idées qu’une barre de lien-ancre pour naviguer dans la page ?

Bonus

  1. Liste de produits en mobile

  2. Prise de RDV

Infos

Marques

  1. Renault

  2. Alpine

  3. Citroën

  4. DS

  5. Nissan

  6. Peugeot

  7. Dacia

  8. Mercedes-Benz

alt

Visuels :

  • format paysage

  • Qualité et nombre variable

Tableau de données

Oral jeudi après-midi

5 minutes de présentation d’une des pages

  • en vous mettant à la place de l’utilisateur

  • puis en expliquant et en justifiant chaque bloc

5 minutes de discussion avec l’auditoire

  • L’auditoire doit trouver des compliments et des interrogations sur la page

4. Tester

  1. Lundi : Cadrer la semaine en comprenant le brief et vos utilisateurs

  2. Mardi : Explorer des solutions puis en choisir une

  3. Mercredi et jeudi : Prototyper

  4. Vendredi : Tester

Déroulement

  1. Auto-audit

  2. Finition du prototype

  3. Rédaction du protocole de test

  4. Tests

  5. Itération

  6. Présentation finale

Audit

Audit : consignes | ⌛ 20 minutes

  • Parcourez chaque wireframe et cherchez des problèmes correspondant à chaque critère

  • Le cas échéant, faites des ajustements

C’est l’occasion de prendre du recul

  • détecter des problèmes d’ergonomie

  • détecter des oublis

Les heuristiques (simplifiées) de bastien et scapin

  1. Guidage : incitation, regroupements, feedback

  2. Lisibilité

  3. Charge de travail : brièveté, densité d’information

  4. Contrôle et liberté

  5. Adaptabilité

  6. Gestion des erreurs : protection, qualité des messages, retour en arrière

  7. Homogénéité et cohérence

  8. Signifiance des codes et dénominations

Explication des critères

Usabilis

Capian

Tester ses choix : comment, pourquoi

Pourquoi tester ?

Pourquoi tester ?

Vérifier la validité de vos choix

test einstein

Un levier de négociation

test4

Quand est-ce qu’on teste ?

Tout le temps

Quand est-ce qu’on teste ?

test7

Avec quel format on teste ?

  1. Test sur papier

  2. Test sur arborescence

  3. Test sur wireframe

  4. Test sur maquette graphique

  5. Test sur prototype fonctionnel

  6. Test d’une version beta

  7. Test A/B

Qu’est-ce qu’on teste ?

  • Le concept

  • L’identité de marque

  • L’utilisabilité

  • Les fonctions

Selon quel déroulement ?

Scénario

test8 2

Test des cinq secondes

Pour tester :

  • La compréhension du concept

  • L’impression générale

S’utilise souvent en conjonction des autre méthodes.

Test ouvert

Test d’alternative

test7 1

Modéré : en présentiel ou à distance

En présentiel

test8

À distance, par exemple avec l’outil Lookback

test5

Modéré : en labo

test8

Non modéré

Exemple avec l’outil Maze

test9
test10

L’intérêt des tests non-modérés ? Des stats !

test10 1

Ok et concrètement ?

Préparer le test

  • Avoir des objectifs clairs

  • Ecrire le protocole

  • Recruter les participants

  • Prévoir une récompense

  • Préparer un formulaire de consentement (si enregistré)

  • Prévoir 2 personnes pour effectuer le test :

    • Un animateur

    • Un observateur

Combien de participants

test15

Rédiger le protocole

Au début du test

  • Remerciez le participant d’avoir voulu participer

  • Expliquez le cadre de l’étude et l’objectif du test

  • Expliquez que l’interface à tester est seulement un prototype pour l’instant

  • Rassurez le participants sur le fait que nous ne sommes pas là pour le juger, il peut faire des erreurs

  • Invitez le participant à penser à voix haute

  • Faites signer le consentement (en cas d’enregistrement)

Pendant le test

  • Ne donnez pas la réponse dans vos questions

  • Si vous voyez que le participant hésite ou semble perdu ne l‘aidez pas mais demandez lui de s’exprimer !

  • Soyez patients

Prise de notes

test1

Prise de notes

test2

Prise de notes

test3

Après le test

  • Invitez le participant à faire un retour global

  • Remerciez le participant

  • Donnez la récompense (si applicable)

  • Interprétez avec prudence les réactions. La majorité des personnes manquent souvent de recul sur les raisons de leurs actions

Test : consignes

  1. Finir le wireframe

    1. Navigation page d’accueil ⇒ liste de voitures ⇒ fiche produit ⇒ et plus si affinités

    2. Vrai contenu quand c’est important (présentation, liste de voitures)

  2. Rédiger protocole

  3. Vous entrainer entre vous

  4. Faire passer le test

    • dans l’idéal : 4 personnes et pas juste vos amis

Test : base de guide

Exemple

Paramétrage Figma

figma

Itération | ⌛ 20 minutes

  • Listez tous les retours que vous avez recueilli

  • Décidez ce que vous allez prendre en compte et comment

Interprétez avec prudence les réactions.

Présentation finale | ⌛ 15 minutes

  1. Rappel de votre pitch, potentiellement modifié

  2. Parcours dans l’interface

  3. Les tests

    • Ce que vous avez testé

    • Comment ça s’est passé, ce que vous avez appris

    • Ce que vous avez modifié

  4. Comment vous imaginez la suite pour le site

    • Vendre une voiture en ligne : bonne idée ou pas ?

    • positionnement, ambiance graphique, expansions possibles…

En guise de conclusion

Design sprint : intérêt et limite

Intuition fondamentale du design sprint : les contraintes peuvent être libératrices

Limites

slowux

Vous en avez pensé quoi ?

Dites-le moi à tête reposée

À rendre avant vendredi 13 à midi à baptiste@roullin.net

  • Votre analyse de la méthode :

    • ce qui marche, ce qui marche moins

    • Cela vous parait-il applicable dans la vraie vie ?

    • …​

  • Ce que vous avez appris

  • Un moment ou une idée qui vous a marqué, en bien ou en mal

  • Une de vos actions ou idées dont vous êtes content·e. Pourquoi ?