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

Transcript

1. XTU ARCHITECTS/ P. DESMAZIÈRES
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
3. LE PITCH Comment travailler dans le contexte d’un grand chantier ? D&B Talks Bordeaux #29 - Mars 2017 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
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
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
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
8. 2009 ~ 2015 DE LA GENÈSE À L’APPEL D’OFFRE DIGITAL D&B Talks Bordeaux #29 - Mars 2017 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
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
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
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
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
15. LE CONTEXTE Un grand projet ? D&B Talks Bordeaux #29 - Mars 2017 15
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
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
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
19. La vidéo de Casson Mann Ressource client #1 D&B Talks Bordeaux #29 - Mars 2017 19 LE FILM
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
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
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
23. LE CADRE DE L’APPEL D’OFFRE Le principe de réalité D&B Talks Bordeaux #29 - Mars 2017 23
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
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
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
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
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
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
30. Good news :p LE 8 JUIN 2015, L’OFFRE DE L’AGENCE WSB EST RETENUE ! D&B Talks Bordeaux #29 - Mars 2017 30
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
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
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
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
35. mi-juin 2015 LE PROJET DIGITAL DÉMARRE ! D&B Talks Bordeaux #29 - Mars 2017 35
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
37. Un choix opportuniste D&B Talks Bordeaux #29 - Mars 2017 37
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
39. Un choix pragmatique D&B Talks Bordeaux #29 - Mars 2017 39
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
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
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
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
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
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
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
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
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
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
50. D&B Talks Bordeaux #29 - Mars 2017 50 Les plans 3D de XTU Architects Ressource client #2
51. Les images 3D de Casson Mann Ressource client #3 D&B Talks Bordeaux #29 - Mars 2017 51
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
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
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
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
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
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
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
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
60. mi-octobre 2015 LA NOUVELLE IDENTITÉ EST OFFICIELLEMENT LÀ ! D&B Talks Bordeaux #29 - Mars 2017 60
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
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
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
64. LES VECTEURS DIGITAUX Le site de La Cité du Vin Cible visiteur D&B Talks Bordeaux #29 - Mars 2017 64
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
75. LES VECTEURS DIGITAUX Le site de don D&B Talks Bordeaux #29 - Mars 2017 75
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
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
79. avril/mai 2016 DERNIÈRES LIGNES DROITES D&B Talks Bordeaux #29 - Mars 2017 79
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
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
82. Merci à vous ! D&B Talks Bordeaux #29 - Mars 2017 82