Quels choix stratégiques en matière d’UX et d’UI Design pour les grands projets architecturaux à but culturels ? Retour d'expérience avec le site de La Cité du Vin by Olivier Allevi

2047741c55e56804e4d2ee28a072b78a?s=47 D&B Talks
April 21, 2017

Quels choix stratégiques en matière d’UX et d’UI Design pour les grands projets architecturaux à but culturels ? Retour d'expérience avec le site de La Cité du Vin by Olivier Allevi

Comment travailler dans le contexte d’un grand chantier ?
Comment mener à bien UX et UI design avant même que la construction du futur bâtiment de La Cité du Vin ne soit achevée, que l’identité visuelle ne soit choisie, que les offres culturelles et commerciales ne soient totalement réalisées.

Chronologie d’un projet.
Les écueils à éviter, des solutions à mettre en place.

Par Olivier Allevi

Actuel directeur de la création digitale à l’agence WSB à Bordeaux (SNCF, Lascaux, Vico, D’aucy, Union des Grands crus…)
Ex directeur de création à BETC à Paris et Altima à Lille.
Ex directeur artistique senior 360° à St John’s, Monkees et La Compagnie Hyperactive à Bordeaux.

Freelance les-sherpas.com

2047741c55e56804e4d2ee28a072b78a?s=128

D&B Talks

April 21, 2017
Tweet

Transcript

  1. 2.

    Quels choix stratégiques en matière d’UX et d’UI design pour

    les grands projets architecturaux à but culturel ? RETOUR D’EXPÉRIENCE AVEC LE SITE DE LA CITÉ DU VIN
  2. 3.
  3. 4.

    Comment mener à bien UX et UI design avant même

    que la construction du futur bâtiment de La Cité du Vin ne soit achevé, que l’identité visuelle ne soit choisie, que les offres culturelles et commerciales ne soient totalement réalisées. Chronologie d’un projet. Les écueils à éviter, des solutions à mettre en place. D&B Talks Bordeaux #29 - Mars 2017 4
  4. 5.

    Qui suis-je ? Actuel directeur de la création digitale à

    l’agence WSB à Bordeaux (SNCF, Lascaux, Vico, D’aucy, Union des Grands crus de Bordeaux…) Ex-directeur de création à BETC à Paris et Altima à Lille. Ex-directeur artistique senior 360° à St John’s, Monkees et La Compagnie Hyperactive à Bordeaux. Freelance les-sherpas.com D&B Talks Bordeaux #29 - Mars 2017 5
  5. 6.

    Ma formation Diplôme Sup. Arts Appliqués, École Estienne BA (Hons)

    Honours Degree Graphic Design Leeds Metropolitan University Licence d’ethnologie, Université Michel-de-Montaigne DUT InfoCom, Université Michel-de-Montaigne D&B Talks Bordeaux #29 - Mars 2017 6
  6. 7.

    L’agence WSB 15 ans d’existence. Au début, une agence digitale

    seulement. Depuis 2015, l’agence est de plus en plus globale. Une équipe de 15/20 personnes. 5 pôles : ADMINISTRATIF, COMMERCIAL ET STRATÉGIQUE (4 associés) ; CRÉATIF (3 designers UX/UI + DA « classique ») ; GESTION DE CONTENU (3 rédac- teurs) ; GESTION DE PROJET (1 directeur de projet + 3 chefs de projet) ; DÉVELOPPEMENT (3 développeurs back et front-end) Des clients divers et variés. La Cité du Vin, Vico, D’aucy, Lascaux, DoList, Union des Grands Crus de Bordeaux, Vins du Médoc, Adapei, Utoppie, Lécuiller, Essilor, Cottage… D&B Talks Bordeaux #29 - Mars 2017 7
  7. 8.

    2009 ~ 2015 DE LA GENÈSE À L’APPEL D’OFFRE DIGITAL

    D&B Talks Bordeaux #29 - Mars 2017 8
  8. 9.

    Un centre culturel et touristique du vin Le projet de

    construction est né en 2009. Une association de préfiguration de La Cité du Vin fut créée à cet effet, compo- sée de la région Aquitaine, de Bordeaux Métropole, de la ville de Bordeaux, du conseil Interprofessionnel du Vin de Bordeaux et de la chambre de commerce et d’industrie de Bordeaux. Son but était d’assurer, par la construction d’un monument, intermédiaire entre l’univers du musée et celui du parc à thème, « la transmission, la valorisation et la sauvegarde du patrimoine culturel, universel et vivant du vin ». (WIKIPEDIA & SITE DE LA CITÉ DU VIN, JANVIER 2016) D&B Talks Bordeaux #29 - Mars 2017 9
  9. 10.

    Des ambitions importantes Devenir la référence internationale autour des cultures

    du Vin dans la ville dont le nom, Bordeaux, est quasiment le synonyme du vin. Attirer 450 000 visiteurs par an. D&B Talks Bordeaux #29 - Mars 2017 10
  10. 11.
  11. 12.

    Un projet en mouvement dès sa création Architecture, nom de

    marque, identité... D&B Talks Bordeaux #29 - Mars 2017 12 2009 Le Centre Culturel et Touristique du Vin 2013 La Cité des Civilisations du Vin octobre 2015 La Cité du Vin
  12. 13.

    CONSEIL #1 Une identité et un nom en gestation sont

    de forts risques de dérapages. Il est nécessaire d’obtenir un accord écrit du client afin que ces dérapages soient rémunérés. → Mesurer et communiquer régulièrement les temps passés. D&B Talks Bordeaux #29 - Mars 2017 13
  13. 14.

    29 avril ~ 18 mai 2015 12 JOURS OUVRÉS POUR

    RÉPONDRE À L’APPEL D’OFFRE DIGITAL D&B Talks Bordeaux #29 - Mars 2017 14
  14. 16.

    Des acteurs à l’aura internationale Ce grand projet architectural à

    but culturel doit son existence à la volonté, à la concertation et aux intérêts de multiples intervenants : - acteurs du monde politique, - acteurs économiques, - acteurs du monde la culturel, … D&B Talks Bordeaux #29 - Mars 2017 16
  15. 17.

    Une architecture singulière La structure a une forme de cep

    de vigne noueux « pour rappeler à la fois un vin tournant dans un verre et les remous de la Garonne, qui borde le site » Une architecture signée XTU Architects, Anouk Legendre/Nicolas Desmazières D&B Talks Bordeaux #29 - Mars 2017 17
  16. 18.

    Une scénographie « expérientielle » La visite de La Cité

    du Vin (2 heures 30 à 3 heures), s’effectue avec un compagnon de visite numérique conçu par Tonwelt pour l’occasion et équipé d’un casque. Tout du long des 22 expériences interactives imaginées et mises en scène par l’agence anglaise Casson Mann le visiteur est plongé au cœur des « cultures du vin ». D&B Talks Bordeaux #29 - Mars 2017 18
  17. 19.

    La vidéo de Casson Mann Ressource client #1 D&B Talks

    Bordeaux #29 - Mars 2017 19 LE FILM
  18. 20.

    Des investissements colossaux pour y parvenir Au final ce sont

    81 millions d’euros H.T. investis portés par : La Ville de Bordeaux (31,1 M€) ; Bordeaux Métropole (8,5 M€) ; La Région Aquitaine (5,5 M€) ; L’État (2 M€) ; Le Conseil général de la Gironde (1 M€) ; Le CIVB (5,5 M€) ; Le mécénat (15 M€) ; La CCI de Bordeaux (500 000 €) ; Le Feder (12 M€). D&B Talks Bordeaux #29 - Mars 2017 20
  19. 21.

    LE CONTEXTE Un grand projet ! Mais un grand projet

    au budget mesuré. Moins d’1/1000e du coût total sera consacré à la création et à la mise en place de ses vecteurs digitaux. D&B Talks Bordeaux #29 - Mars 2017 21
  20. 22.

    CONSEIL #2 Être certain de travailler avec une équipe client

    réellement en capacité de décider. Ce type de projet étant long, il exige une mémoire écrite pour réduire les risques de conflits et être en mesure d’en sortir. → Après chaque présentation orale ou démo, faire un compte rendu de présentation. D&B Talks Bordeaux #29 - Mars 2017 22
  21. 23.
  22. 24.

    Les besoins exprimés Un site internet avant tout grand public.

    Informer/ Donner envie / Convertir Un site internet destiné aussi aux partenaires de La Cité du Vin Des entrées vers des pages dédiées aux partenaires : professionnels du tourisme de loisir et d’affaire, jeunes publics, mécènes, la Fondation... Un site de réservation en ligne Réserver ses billets en ligne : billets simples, couplés (ex. : visite + atelier dégustation). D&B Talks Bordeaux #29 - Mars 2017 24
  23. 25.

    Module de la suite logicielle de billetterie Un site avec

    des liens vers partenaires commerciaux Présenter des offres packagées (ex. : billet + visite vignoble) Un site en lien avec les réseaux sociaux et parfaitement référencé Un site collaboratif Susciter et initier des échanges collaboratifs autour des thèmes que soutient et défend la Fondation de La Cité du Vin. D&B Talks Bordeaux #29 - Mars 2017 25
  24. 26.

    Un site qui prolonge la visite de la Cité des

    civilisations du vin Créer un espace personnel accessible avec identifiant et mot de passe pour re- trouver des moments forts de sa visite et découvrir de nouveaux contenus et informations complémentaires en relation avec ses centres d’intérêts. Un site conçu pour connaître les centres d’intérêts du visiteur unique Un tracking du parcours visiteur sur le site internet est essentiel. Un site en responsive design Un site proposant une activité de e-commerce Un site qui présente la Fondation de La Cité du Vin (sa mission, ses activités) D&B Talks Bordeaux #29 - Mars 2017 26
  25. 27.

    CONSEIL #3 S’assurer que toute l’équipe a lu et compris

    le cahier des charges du client. → Au début du projet, celui-ci sert de référentiel tant que le cahier des charges fonctionnel et technique n’a pas été rédigé et validé. D&B Talks Bordeaux #29 - Mars 2017 27
  26. 28.

    LE CALENDRIER PRÉVISIONNEL Consultation : du 29 avril 2015 au

    18 mai 2015 Oraux de présentation : entre le 26 mai et le 3 juin 2015 D&B Talks Bordeaux #29 - Mars 2017 28
  27. 29.

    12 jours pour répondre à la consultation ? C’est jouable

    ! En réalité, ces 12 jours se sont transformés en beaucoup moins pour l’équipe. Normal, Dieu n’a mis que 7 jours pour créer le monde. Et là, il ne faut créer qu’une suite de zéros et de un... D&B Talks Bordeaux #29 - Mars 2017 29
  28. 30.

    Good news :p LE 8 JUIN 2015, L’OFFRE DE L’AGENCE

    WSB EST RETENUE ! D&B Talks Bordeaux #29 - Mars 2017 30
  29. 31.

    CONSEIL #4 Fêter la victoire pour mobiliser ses troupes et

    partir la fleur au fusil. → Une fois le planning dévoilé personne ne voudra plus faire la fête ;) D&B Talks Bordeaux #29 - Mars 2017 31
  30. 32.

    Bad news :o LE MÊME JOUR, L’ÉQUIPE DÉCOUVRE LE PLANNING

    PRÉVISIONNEL DU CLIENT D&B Talks Bordeaux #29 - Mars 2017 32
  31. 33.

    un planning de 5 mois Etude et conception : juin

    à mi-juillet 2015 Réalisation : mi-juillet à fin septembre 2015 Tests et recette : octobre à mi-novembre 2015 Date de mise en ligne du site : 16 novembre 2015 D&B Talks Bordeaux #29 - Mars 2017 33
  32. 34.

    CONSEIL #5 Oublier le planning prévisionnel. → Le stress qu’il

    engendre fait faire les mauvais choix ! Pour autant, il ne faut pas prendre un an de retard. Il faut donc communiquer régulièrement sur l’avancement du projet. Et faire des points internes. D&B Talks Bordeaux #29 - Mars 2017 34
  33. 36.

    Une remise à plat nécessaire Arrivé depuis 15 jours, je

    découvre le projet et décide malgré un planning prévisionnel très tendu, d’abandonner l’axe graphique pris et de repenser la conception. Pour atteindre un objectif agence : faire du site une référence rayonnante et donner envie à d’autres clients d’entamer une collaboration avec l’agence. D&B Talks Bordeaux #29 - Mars 2017 36
  34. 38.

    Côté client → Le nom de marque est remis en

    cause : « La Cité des Civilisations du Vin » devient « La Cité du Vin » → Le territoire de la nouvelle marque n’existe pas et doit faire l’objet d’une nouvelle consultation. → Le projet est en gestation, il évolue au gré du temps avec de nouvelles arrivées à La Cité du Vin. Autant s’adapter et coller au plus proche. D&B Talks Bordeaux #29 - Mars 2017 38
  35. 40.

    Côté agence Le timing laissé pour l’étude du cahier des

    charges et la réponse n’a pas permis à l’agence : → d’effectuer des choix UX totalement pertinents faute d’un wireframing global et multi-devices, → de prendre un parti pris graphique réaliste faute de ressources côté du client. Le bâtiment sort juste de terre, les seuls éléments structurants sont les quelques vues architecturales et scénographiques. D&B Talks Bordeaux #29 - Mars 2017 40
  36. 41.

    CONSEIL #6 Trouvez des alliés ! → Pour remettre en

    question des choix agences, vous devez convaincre et mettre très clairement en avant les bénéfices à venir pour l’agence (financiers par exemple) pour au final emporter l’adhésion. Diplomatie obligatoire ! D&B Talks Bordeaux #29 - Mars 2017 41
  37. 42.

    Un « noyau dur » agence est mis en place

    Seront en charge du projet en relation : Clémence puis Adeline, pour la gestion globale et quotidienne du projet. Olivier, pour la direction de création. Kim, en tant qu’UX/UI designer. Bruno puis Arnaud, pour la direction technique (Drupal+Irec+Tonwelt). Toute l’équipe sera sous la supervision de Jean-Christophe, directeur associé. D&B Talks Bordeaux #29 - Mars 2017 42
  38. 43.

    Plus forts ensemble La conception auparavant issue de personnes seules,

    devient de la co-conception. → de la confrontation d’idées naît une richesse essentielle à l’UX. D&B Talks Bordeaux #29 - Mars 2017 43
  39. 44.

    La volonté d’avancer tous ensemble L’équipe opérationnelle en général ne

    participe pas à toutes les réunions avec l’équipe client. Sur ce projet ce sera toutes les réunions. → chacun des choix évalués, pris, puis validés au cours de ces réunions l’auront été d’une manière plus fluide qu’à l’habitude. D&B Talks Bordeaux #29 - Mars 2017 44
  40. 45.

    Croiser les ambitions de chacun Les ambitions des équipes projet

    client et agence doivent se croiser sous peine de difficultés. → deux contraintes : sortir en temps et en heure, rester dans le budget. D&B Talks Bordeaux #29 - Mars 2017 45
  41. 46.

    La co-conception 1/2 Mi-juillet, après avoir retravaillé sur l’arborescence et

    les fonctionnalités, nous présentons à un collège de 12 représentants de La Cité du Vin notre nouvelle vision conceptuelle. Sous inVision. Une première pour l’agence. D&B Talks Bordeaux #29 - Mars 2017 46
  42. 47.

    CONSEIL #7 Ne pas laisser le client s’imaginer quoi que

    ce soit. → Des clients devant un prototype inVision sont déjà des clients spectateurs. La plupart pensent voir leur futur site. Il est utile, en introduction, d’expliquer ce qu’est un prototype et ce qu’il vont découvrir et devoir juger. D&B Talks Bordeaux #29 - Mars 2017 47
  43. 48.

    La co-conception 2/2 Pour l’appel d’offres, 3 écrans avaient été

    présentés. A cette étape, 43 écrans sont prêts. Pour éviter le sentiment d’un grand retour en arrière, le choix de faire des prototypes au plus près du rendu final a été pris. Pour l’équipe agence, les masses sont quasi-définitives. D&B Talks Bordeaux #29 - Mars 2017 48
  44. 49.

    L’inspiration Pour la structure du site, nous puisons dans la

    seule matière disponible : l’architecture de XTU Architects et les images de Casson Mann. L’aspérité retenue pour la structure du site sera celle des grandes verticales. Les courbes seront elles à l’honneur au moment de l’UI. D&B Talks Bordeaux #29 - Mars 2017 49
  45. 50.

    D&B Talks Bordeaux #29 - Mars 2017 50 Les plans

    3D de XTU Architects Ressource client #2
  46. 51.

    Les images 3D de Casson Mann Ressource client #3 D&B

    Talks Bordeaux #29 - Mars 2017 51
  47. 52.

    Comment faire sans identité et territoire de marque défini mais

    qui arrivera un jour ou l’autre ? D&B Talks Bordeaux #29 - Mars 2017 52
  48. 53.

    CONSEIL #8 Penser simple et neutre. → Choisir une typographie

    linéale à multiples graisses pour don- ner de la hiérarchie et du contraste. Cela permet des change- ments plus faciles par la suite. Et puis croire ou être assez fou pour croire, que la future identité sera telle, qu’elle pourra s’intégrer à l’ensemble par un simple copié-collé… → Passer par la fenêtre et proposer une identité et un territoire de marque. D&B Talks Bordeaux #29 - Mars 2017 53
  49. 54.

    Les 43 écrans Accueil et principe de navigation (2), Parcours

    utilisateur (17), Module de don (7), Espace personnel (7) Modélisation des wireframes sous Photoshop… pour tenter de ensuite de poursuivre et finaliser l’UI avec le même outil. Sketch dont je dispose depuis juin (thxs les DBTalks et leur quiz) présente trop d’investissement temps vu les échéances à venir. A postériori, son usage nous aurait fait gagner pas mal de temps ! D&B Talks Bordeaux #29 - Mars 2017 54 LA DÉMO. INVISION
  50. 55.

    CONSEIL #9 Réfléchir avant d’agir. → Plus vous mesurez de

    risques dans un projet, plus vous devez penser avant de vous lancer. Construire vos fichiers intelligem- ment (Atomic design ou autre) dans une optique de gestion des modifications aisées est alors une obligation. Sketch et Figma via les symboles, styles, bibliothèques font partie aujourd’hui des bons choix. D&B Talks Bordeaux #29 - Mars 2017 55
  51. 56.

    L’UI design Une fois passées toutes les étapes de validation

    des wireframes, cap est mis sur l’UI. Toujours sans identité visuelle. Et sans visuel définitif car si la construction avance, seules les vues imaginaires réalisées en 3D par Casson Mann peuvent être utilisés. Le travail d’UI via Photoshop se concentre sur la mise en scène des contenus même si ces derniers n’existent pas encore dans leurs formes définitives. D&B Talks Bordeaux #29 - Mars 2017 56
  52. 57.

    Le design collaboratif avec le client Le client demande plus

    d’interactions au jour le jour. inVision est alors choisi. Pour ses capacités de commentaires et d’état de versionning notamment. Sauf que... l’expérience tourne court. Le temps que la correspondante chez le client fasse des commentaires via Invi- sion et que je lui réponde. Les 97 notifications auront été de trop pour quelqu’un qui devait faire l’écho vers 10 autres personnes. Les réunions reprennent ! D&B Talks Bordeaux #29 - Mars 2017 57
  53. 58.

    CONSEIL #10 Un outil est avant tout un outil. →

    Essayez des solutions pour améliorer votre quotidien mais n’hésitez pas à en sortir si les bénéfices sont nuls. Et n’écoutez pas forcément la voie de la modernité. Ces outils ne remplacent pas une bonne réunion. Ce sont des outils sans psychologie. Et même doublés d’un coup de téléphone, préférez lui les relations hu- maines directes :) D&B Talks Bordeaux #29 - Mars 2017 58
  54. 59.

    Jusqu’en octobre, l’équipe projet avance sur l’UI de plus de

    40 gabarits ! Une version non validée de l’identité nous a été présentée en réunion début septembre par le client. Son intégration à notre travail est évidente :) D&B Talks Bordeaux #29 - Mars 2017 59
  55. 61.

    L’agence Inoxia, qui a remporté l’appel d’offres sur l’identité visuelle

    la dévoile lors d’une soirée dans les salons de la Mairie de Bordeaux. La typographie d’accompagnement choisie, la Supra. D&B Talks Bordeaux #29 - Mars 2017 61 P Cool gray 11 C P 100 C P 132 C
  56. 62.

    Alerte planning ! → Le déroulement prévu n’est plus réaliste.

    Les équipes sont contraintes de revoir leurs ambitions et la date de mise en ligne. Deux lots sont donc prévus. D&B Talks Bordeaux #29 - Mars 2017 62
  57. 63.

    octobre/novembre 2015 LES DÉCLINAISONS / LOT 1 janvier/février 2016 LES

    DÉCLINAISONS / LOT 2 D&B Talks Bordeaux #29 - Mars 2017 63
  58. 64.

    LES VECTEURS DIGITAUX Le site de La Cité du Vin

    Cible visiteur D&B Talks Bordeaux #29 - Mars 2017 64
  59. 65.
  60. 66.
  61. 67.
  62. 68.
  63. 69.
  64. 70.
  65. 71.
  66. 72.

    LES VECTEURS DIGITAUX Le site de la Fondation de La

    Cité du Vin Cible mécènes D&B Talks Bordeaux #29 - Mars 2017 72
  67. 73.
  68. 74.
  69. 76.
  70. 77.

    Le travail avec le dev. front-end Étape 1 / la

    bonne transmission L’intérêt des PSD nommés, classés. Un test grandeur nature pour Specctr et le catalogue stylistique par modules. D&B Talks Bordeaux #29 - Mars 2017 77 LA DÉMO. SPECCTR LE GUIDE PAR MODULES
  71. 78.

    Le travail avec le dev. front-end Étape 2 / la

    recette graphique Les captures en side to side via un iMac 5k. La rédaction d’un document accompagnateur. D&B Talks Bordeaux #29 - Mars 2017 78
  72. 80.

    12 mois après la consultation, le site est en ligne

    ! MERCI À EUX ! Côté agence : Clémence, Kim, Adeline, Arnaud, Bruno, Jean-Christophe sans oublier Julien, Adrien & Corentin. Côté client : Philippe, Laurence, Olivier, Eric & Eric, Bénédicte, Géraldine, Alexandra, Aurélie et Mélodie. D&B Talks Bordeaux #29 - Mars 2017 80
  73. 81.

    10 MOIS APRÈS LA MISE EN LIGNE, QUELQUES CHIFFRES !

    3,2 millions de vues 877 000 utilisateurs 3,7 pages par session D&B Talks Bordeaux #29 - Mars 2017 81