Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

7. Du Design UX au Design de la collaboration

264 views

Published on

--
Cours n°7/7 donné Master 2 Création et Communication Numérique à l'ISCOM, Année 2016/2017.

Published in: Design
  • Be the first to comment

  • Be the first to like this

7. Du Design UX au Design de la collaboration

  1. 1. Du design UX 
 au design de la collaboration ISCOM, Master 2 CCN 2016-2017 Laurent Barbat - @lbarbat
  2. 2. Aujourd’hui… 1. Outils de conception
 Principaux outils, Travaux pratiques, Livrables de conception
 2. Du design UX au design de la collaboration
 Le Brief, Préparer une réunion, Critiquer une maquette
  3. 3. Avez-vous installé Experience Design ? http://bit.ly/telechargerxd
  4. 4. Conception (suite)
  5. 5. http://www.ina.fr/video/CAB8001676901
  6. 6. Principaux 
 outils de conception
  7. 7. Outils de conception Liste non exhaustive ! D’autres outils sur : www.prototypr.io/prototyping-tools/ Prototypes Interactions Les deux Ergonomie + Interactions Wireframes Ergonomie, statique InVision Marvel POP combine très bien avec Sketch et Photoshop Experience Design Axure Proto.io à suivre de près Papier + Crayon Balsamiq Sketch Illustrator une bibliothèque d’éléments de base à utiliser toujours commencer par là ! pour s’y mettre sérieusement
  8. 8. Travaux Pratiques
  9. 9. Étude de cas
 Comment améliorer 
 l’expérience client en magasin 
 grâce à une application pour les vendeurs ?
  10. 10. Méthodologie Brief client Visites et observations en magasins Entretiens vendeurs et responsable de magasin Arborescence Sketch Wireframes Maquettes Prototype 
 + Reco… Atelier « Business Origami » Rédaction de 2 scénarios d’usage CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION
  11. 11. Manque d'information sur les produits techniques Disponibilité des produits inconnue sans passer par le vendeur Attente pour avoir un vendeur Manque d'explication de la qualité des produits Pas facile de voir rapidement tous les articles d'une même catégorie (Côté client…
  12. 12. Offre limitée par rapport à l'ensemble du catalogue Beaucoup de temps passé à aller en stocks Trous dans la relation client Outil de caisse long à charger Les vitrines n’attirent pas assez de visiteurs ( …Côté vendeur
  13. 13. Au Siège… On ne connaît pas nos clients, même pas leur date de naissance. Notre positionnement de marque évolue, on est dans une phase de transition. /
  14. 14. Atelier Business Origami
  15. 15. Arborescence LISTE CLIENTS FICHE CLIENT RECH. IDENTIF. CLIENT RBORESCENCE pplication vendeur Aigle PANIER INFOS CLIENT INFOS DE PAIEMENT INFOS DE LIVRAISON CONFIRMATION RECAP SCAN LISTE DE PRODUITS FICHE PRODUIT CONF AJOUT + CROSS-SELL MENU + RECHERCHE CONFIRMATION INSCRIPTION Catalogue Scanner Client Programme de fidélité Mon profil Commander MODULE VENDEUR LOGIN VENDEUR
  16. 16. Sketch
  17. 17. Wireframes Mr Dupont Éric 13, rue de l'écluse 59100 Lille Abonné à la newsletter dominiquedupont@mail.com 03 45 76 09 13 (Maison) Né le 13 janvier 1976 Inscrit au programme de fidélité 1/4 Informations client 2/4 Livraison Valider le mode Mr Dupont Éric 13, rue de l'écluse 59100 Lille Changer l'adresse de livra Magasin offert Domicile Valider les informations Mettre à jour ces informations Panier 45,90Sous-total Ajouter un chèque cadeau 45,90TOTAL Valider le panier x 1 46-48 Rouge 29 90 Chemise de nuit polaire Réf : 8452530 x 1 46-48 Rouge 16 00 Article 2 Réf : 8452530 au lieu de 20,00 -20%
  18. 18. Maquettes graphiques 13, rue de l'écluse 59100 Lille Abonné à la newsletter Mettre à jour les informations dominiquedupont@mail.com 03 45 76 09 13 (Maison) Infos client Profil type / 2 achats depuis 2 ans Né le 13 janvier 1976 Inscrit au programme de fidélité Historique d'achat 12/11/2013 Article 1 54,34 02/03/2013 Article 1 Article 2 213,99 Date MontantCanalArticle Web Mag : Grenelle Chargement des achats Mr Dominique DUPONT
  19. 19. Maquettes graphiques
  20. 20. Maquettes graphiques
  21. 21. Prototype https://invis.io/p/V9XP74JMWDX
  22. 22. La simplicité est la sophistication suprême. — Leonard De Vinci“ ”
  23. 23. Du design UX
 au design de la collaboration
  24. 24. Ce que le client a expliqué Ce qu'a compris le chef de projet Ce que l'analyste a conçu Ce que le développeur a fait Comment les commerciaux l'ont décrit Comment le projet a été documenté Ce que le client a été facturé Ce dont le client avait vraiment besoin Adapté de « How IT Projects really work », www.projectcartoon.com
  25. 25. Le Brief UX
  26. 26. Designer C’est avant tout une démarche. CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION
  27. 27. Mais le point de départ est…
  28. 28. LE BRIEF
  29. 29. Qu’est-ce qu’un brief ?! CDC Confidentiel Page 1 sur 86 28 novembre 2016 Request For Proposal Émetteur : Marie Hubert Rédacteur : Pierre Lemet À l’attention de (Nom société) Objet de l’appel d’offre : Exploiter les données externes pour enrichir la connaissance marché et améliorer les campagnes. 1.#LE#CONTEXTE#:# L’entreprise a réalisé un atelier collaboratif avec 3 filialeen juillet 2016. L’objectif de cet atelier était d’apporter des premières pistes de réflexion sur deux grandes problématiques. Comment, à partir de données externes, 1. enrichir notre connaissance sur le marché et les clients (particuliers) ? 2. améliorer l’efficacité des campagnes (cible, canal, message, moment de contact, …) ? Pour cet atelier, c’est le crédit immobilier qui a été retenu par les participants. Cet atelier a permis de créer en un temps limité une ébauche de visualisation de données à partir d’informations issues de la base de donnée externe. L’équipe a décidé de continuer ces premiers travaux. 2.#LA#DEMANDE# Mettre à la disposition des utilisateurs en filialeun outil leur permettant d’exploiter et de visualiser facilement des données externes selon leurs besoins. In fine, cet outil devrait leur permettre d’explorer de nouvelles pistes pour réaliser leurs campagnes et améliorer leur taux de transformation. Pour cela, la base de données devra être exploitée de manière plus approfondie et plus large. D’autres bases externes sont aussi à prévoir pour maximiser la valeur apportée. A noter : l’outil retenu est MS. 3.#LA#MISSION#:## La mission consiste à accompagner l’équipe pour : 1) Construire un prototype sur la thématique retenue avec un focus ‘campagnes’ 2) Identifier les besoins des filiales en termes de connaissance marché, définir les fonctionnalités de l’outil, concevoir et développer l’outil. …tout ceci sous la responsabilité d’un chef de projet, et en étroite collaboration avec l’équipe, les filialecandidates, (Marketing, CRM), des experts métiers. Des principes d’animation et de gouvernance innovants devront être proposés.
  30. 30. Demande 
 initiale Brief 
 final Le Brief Plus qu'un document, 
 c'est un processus en soi.
  31. 31. Demande 
 initiale Brief 
 final Le Brief Plus qu'un document, 
 c'est un processus en soi.
  32. 32. The Expert (Short) https://www.youtube.com/watch?v=BKorP55Aqvg
  33. 33. Quels sont les ingrédients du brief (UX) ?
  34. 34. Les ingrédients du brief de conception ContexteSynthèse Demande • L’Entreprise • Concurrents • État actuel du produit • Activités, Livrables • Périmètre fonctionnel • Contraintes • Interlocuteurs • Temps alloué, Planning • Résumé du projet • Objectifs business • Cible • Critères de réussite 321
  35. 35. Synthèse Résumé du projet • Décrire le projet en un paragraphe. • Quel est le travail attendu ?
 Objectifs business • Pour quelles raisons le projet est-il lancé ? • Quel est l’objectif business principal ?
 Cible • Quelles sont les grandes catégories d'utilisateurs ? • Que sait-on des utilisateurs (expérience globale, besoins, problèmes) • Lister les sources informations disponibles sur la cible. • Quel est le but des utilisateurs lorsqu’ils utilisent le produit ?
 Critères de réussite • Quels sont les résultats attendus ? • Comment sera calculé le ROI du projet ? 1
  36. 36. Contexte L’Entreprise • Décrire l'activité de l'entreprise, son offre, son modèle économique, son organisation, son positionnement de marque. Concurrents • Lister les concurrents • Positionner par rapport à l’entreprise (forces, faiblesse, critères de différenciation) • Ont-ils mené à bien des projets similaires ? Si oui, qu'en pense le client ?
 État actuel du produit • Décrire les éléments du produit qui sont positifs et en quoi ils sont satisfaisants. • Décrire les aspects du site moins réussis, et pourquoi ils sont considérés comme tels. 2
  37. 37. Demande Activités, Livrables 
 
 Périmètre fonctionnel • Lister les principaux contenus et fonctionnalités attendus • Les prioriser • Hors périmètre : Lister les éléments qui ne font clairement pas partis du périmètre du projet.
 Contraintes • Lister les contraintes techniques, métiers, ou organisationnelles
 Interlocuteurs • Équipe projet en agence, Parties prenantes (Contributeurs, Validateur, Sponsor), autres partenaires (Technique, SEO…)
 Budget/Temps alloué, Planning 3
  38. 38. Challenger le brief Une des plus grandes qualités d'un designer est d'oser demander « Pourquoi ? » (…c’est valable pour tout professionnel en fait) Quelques questions à poser : • Quels sont les objectifs initiaux du projet ? • Pourquoi ce projet est-il nécessaire ? • Pourquoi doit-il avoir lieu maintenant ? 
 (important pour évaluer le planning et l'approche) • Quelles sont les résultats attendus (ex : commerciaux…) ? • Qui sont les interlocuteurs de référence sur ce projet ? 
 (souvent plus longue qu'on ne le pense, important d'identifier le circuit de validation, avoir une idée précise des contraintes, besoins, attentes, problématiques de chaque partie prenante...)
  39. 39. Adapté de http://dilbert.com/
  40. 40. Proverbe chinois “Celui qui pose une question 
 risque d'avoir l'air bête cinq minutes. Celui qui ne pose pas de question 
 restera bête toute sa vie.”
  41. 41. Ce qui se passe si on ne pose pas les bonnes questions…
  42. 42. Adapté de « How IT Projects really work », www.projectcartoon.com Ce que le client a expliqué Ce qu'a compris le chef de projet Ce que l'analyste a conçu Ce que le développeur a fait Comment les commerciaux l'ont décrit Comment le projet a été documenté Ce que le client a été facturé Ce dont l’utilisateur avait vraiment besoin
  43. 43. Préparer une réunion
  44. 44. Problème…
  45. 45. La Méthode des « 7P » 
 pour préparer une réunion Pourquoi ?
 Mettre toutes les chances de son côté pour assurer la réussite d’une réunion ou d’un atelier. Quoi ?
 Une checklist des éléments à prendre en compte en amont. Durée
 30 à 60 minutes. Seul ou à plusieurs
  46. 46. « 7P » pour préparer une réunion Objectif de cette réunion ? Pourquoi doit-elle avoir lieu ? Le « livrable » de cette réunion. Comment s’y prendre, quelles étapes pour y arriver ? Quelles sont les personnes nécessaires pour y parvenir ? 
 …Et seulement celles qui sont nécessaires. Quels sont les risques identifiés ? 
 Et comment les éviter. Considérations pratiques 
 Date/horaire, fournitures, logistique… Que doit préparer en amont chacun des participants ? 
 Et leur communiquer suffisamment à l’avance…
  47. 47. Travaux Pratiques
  48. 48. Présenter une maquette Critiquer
  49. 49. Que pensez-vous de cette maquette ?
  50. 50. L’enjeu Créer les conditions d’une critique constructive pour faciliter l’expression des retours
  51. 51. Une session de critique en 3 temps DiscuterPrésenterContextualiser
  52. 52. Une session de critique en 3 temps DiscuterPrésenterContextualiser Objectifs 
 Business Connaissance
 utilisateurs Éléments déjà validés Objectifs commerciaux, Stratégie de marque et autres éléments du brief… Objectifs du site, de la rubrique ou du processus, de la page. Besoins et problèmes de la cible, enseignements de la phase de recherche utilisateurs. Arborescence, Principes de conception, Wireframes… qui servent de base de création des maquettes graphiques.
  53. 53. Une session de critique en 3 temps DiscuterPrésenterContextualiser Les Personas peuvent être très utiles pour rappeler les informations clés sur les utilisateurs-cible.
  54. 54. Une session de critique en 3 temps DiscuterPrésenterContextualiser Raconter une histoire 
 Considérer l’ensemble du parcours client et pas seulement la page seule. 
 Ex : Quel est son but à atteindre ? Qu’a-t-il fait avant ? Que cherche-t-il ? Expliquer les choix de conception 
 S’appuyant sur les objectifs business et les travaux de connaissance utilisateurs. —————————————————— Côté client : 
 Vous pouvez rebondisr en posant des questions, mais suspendez votre jugement dans un premier temps : des choix de conception ont été fait dans un certains but. Si quelque chose vous gêne, demandez pourquoi tel ou tel choix a été fait.
  55. 55. Une session de critique en 3 temps DiscuterPrésenterContextualiser 1. Un prospect demande des informations au vendeur sur un imperméable. Le vendeur répond au client en scannant le code barre de l’article avec sa phablet. 2. La fiche de l’article s’affiche. Le vendeur montre une vidéo de démonstration des propriétés déperlantes. Le client est convaincu et décide de prendre le produit. 3. Le vendeur suggère un article complémentaire à l’imperméable, une écharpe, en s’appuyant sur le look associé à l’article sur sa phablet. Le client décline la proposition. 4. Le vendeur demande au client s’il fait parti du programme de fidélité, il lui explique les bénéfices, dont l’offre de bienvenue. Le client accepte de s’inscrire. Le vendeur demande ses coordonnées au client. 5. Le client passe en caisse normalement et bénéficie de la réduction. 6. Le soir même, le client reçoit un email de remerciement personnalisé. On l’invite aussi à s’intéresser à l’écharpe du look sur le site e-commerce Aigle. Le client se laisse finalement tenter par l’écharpe. SCAN CODE BARRE FICHE PRODUIT CONFIRMATION INSCRIPTION EMAIL PERSONNALISÉ INSCRIPTION PROGRAMME DIAPORAMA / VIDEO 1. 2. 3. 4. 6. SCÉNARIO 1 : Un prospect demande une information sur un article au vendeur, s’inscrit au programme de fidélité, puis paie en caisse. Un Scénario d’usage est un très bon support pour préparer la présentation des maquettes.
  56. 56. Une session de critique en 3 temps DiscuterPrésenterContextualiser Une question de posture • Savoir critiquer • Savoir entendre les critiques Toujours commencer par ce qui est apprécié, 
 puis ce qui pourrait être amélioré.
 Terminer par des questions complémentaires
  57. 57. L’espace physique compte
  58. 58. L’espace physique compte https://www.flickr.com/photos/discussingdesign/with/8016524742/
  59. 59. Présenter en mode atelier La maquette est affichée en grand format (A3 ou supérieur). 1. Chaque participant note sur des post-it (laisser quelques minutes) : Ce qu’il apprécie Ce qu’il apprécie moins Questions complémentaires 2. Chacun vient placer ses post-it positifs sur la maquette, en expliquant son point de vue. 3. On répète la même chose pour ce qui est moins apprécié, puis les questions. + + + + + ▲ ▲ ▲ ▲ ▲ ▲ ? ? + ▲ ?
  60. 60. Soyez bien intentionnés
 Vous n’êtes pas là pour juger ou sanctionner, mais pour comprendre ce qui a été produit, et chercher à l’améliorer avec l’équipe de conception. Filtrez vos pensées
 Réévaluez vos premières réactions en fonction des objectifs et des autres paramètres du projet. Ne supposez pas, posez des questions
 Essayez de comprendre le cheminement qui a permis d’en arriver là, les hypothèses, les contraintes prises en compte. Conseils pour faire part d’une critique Adapté de http://www.slideshare.net/adamconnor/discussing-design-the-art-of-critique/8-Tips_for_giving_critiqueUse_a
  61. 61. Conseils pour recevoir une critique Faites preuve d’humilité et de retenue
 Demandez vous pourquoi on vous pose telle ou telle question. Écoutez et réfléchissez avant de répondre 
 Avez-vous vraiment compris ce que veut dire votre interlocuteur ? Se rappeler qu’il ne s’agit pas d’être jugé, mais de se comprendre et d’améliorer ce qui a été produit ensemble. Adapté de http://www.slideshare.net/adamconnor/discussing-design-the-art-of-critique/10-Tips_for_receiving_critiqueRemember_the
  62. 62. Je ne suis pas pas l’utilisateur. Tu n’es pas l’utilisateur. Nous ne sommes pas l’utilisat…
  63. 63. Étude de cas : 
 refonte d’un site e-commerce
  64. 64. Penser « client », puis définir le périmètre En atelier avec les parties prenantes Sur la base des Personas : - Définir les attentes et besoins de chaque cible prioritaire sur l’ensemble du parcours client. - Puis lister les contenus et fonctionnalités nécessaires à chaque étape. Persona Parcours client
  65. 65. Puis réaliser le plan de site Fiche ApartHotel Accueil Résultats de recherche Découvrez Adagio 100 aparthotels dans le monde (carte) Offres spéciales Programme de fidélité Mon compte, ma réservation Comparateur Demande de devis Long séjour Recherche Confirmation de demande de devis Informations personelles Préférences Newsletters Tableau de bord Réservations Réservations en cours Historique Mon profil FAQ Club Créer un compte Modifier une réservation Confirmation de modification Mot de passe oublié e-mail de renouvellement de mot de passe Nouveau mot de passe Confirmation de changement de mot de passe Confirmation de création de compte e-mail de confirmation de création de compte e-mail de confirmation de modification PLAN DE SITE - ADAGIO v2 Mon Dec 01 2014 LÉGENDE FAQ Contact Mentions légales + CGV, Données perso Presse Recrutement Investisseurs Franchises Landing page Destination Pays / Région / Ville Twitter Facebook Liste des marques Accor / P&V Pierre & Vacances Page de redirection vers hotel du Groupe Accor Page 404 Popin Web Callback Page Accor (gris clair) Page Adagio (gris foncé) Module (ce n'est pas une page) Pile de pages (même template) e-mail envoyé 1. Choix de l'appartement 2. Options 3. Récapitulatif 4. Paiement 5. Confirmation e-mail de confirmation Le Mag Adagio FOOTER LP Segments : Acheteurs, CE, ... e-mail de confirmation de demande de devis LP Offre : Petit prix dès 4 nuits Développement durable Consulter ou Annuler une réservation (sans connexion) Vers "réservations en cours" e-mail de partage de l'aparthotel Gammes Adagio / Adagio Access + Premium? Pour un déplacement professionnel Garantie du meilleur prix Avis clients sur Adagio Long séjour Appartements Services Localisation et Accès Galerie photo / vidéo À proximité Google+ Pinterest PAGES TRANSVERSES partenaire du site
  66. 66. Cadrer le périmètre fonctionnel 
 et la conception En atelier avec les parties prenantes
 pour lancer la phase de conception Pour chaque page principale (Accueil, Fiche produit) : Définir les besoins clients, objectifs business, origine des visiteurs, page de sortie souhaitée, contenus et fonctionnalités de la page. Diagramme de description de page
  67. 67. Le Diagramme de description de page comme brief pour la conception Core Content / Functionality Supporting Information Inward Paths Outward Paths User Goals Business Goals Trigger Words Elements of the Core Call to Action ©www.netflow-lindemann.de Pour aller plus loin : https://uxmag.com/articles/re-introducing-page-description-diagrams
  68. 68. Vers une entreprise UX
  69. 69. Considérer l’expérience utilisateur 
 n’est pas un choix, c’est une nécessité.
  70. 70. UX IS THE NEW BLACK* * Harvard Business Blog
  71. 71. Les différents niveaux de maturité L’expérience client fait partie de l’ADN et
 de la culture d’entreprise L’expérience client est le principe
 fondamental de la stratégie de l’entreprise L’expérience client est cruciale et la direction est activement impliquée L’expérience client est très importante et
 des programmes formalisés voient le jour L’expérience client est importante, mais 
 reçoit peu d’intérêt 1 2 3 4 5 Ancrée Engagée Impliquée Investie Intéressée Source : Bruce Temkin
  72. 72. Conditions de réussite Investissement de la direction Accès direct aux utilisateurs finaux Compétences en prototypage Équipe resserrée et pluridisciplinaire4 3 2 1 http://blogs.hbr.org/2013/01/scaling-your-ux-strategy/
  73. 73. L’expérience utilisateur n’est pas le rôle d’une personne ou d’un département, c’est l’affaire de toute l’entreprise.
  74. 74. Pour conclure…
  75. 75. Un œil dans le rétro… 1 Introduction à l'UX 2 Atelier : Initiation au Design Thinking 3 Recherche et Test utilisateurs 4 Atelier : Exploration > Analyse 5 Grands principes de conception 6 Atelier : Idéation > Conception 7 Design de la collaboration
  76. 76. Comprendre les enjeux liés à l'UX ————— Bien aborder un projet avec une dimension UX ————— Mettre en pratique des méthodes et outils 
 centrés utilisateurs Revue des objectifs des cours d’UX
  77. 77. Voilà, c’est fini…
  78. 78. I would rather have it said, ‘He lived usefully’ than ‘He died rich’. — Benkamin Franklin “ ” Vos retours sur cette année : http://bit.ly/feedback-ux

×