Webdesign · 2023

Loc' Trotteur

Louer son matériel de voyage plutôt que de l'acheter pour trois usages : Loc' Trotteur est une plateforme de location entre particuliers, pensée comme une réponse concrète à la surconsommation. Le projet a été mené en équipe de six, de l'idéation au prototype, dans le cadre de My Digital Project à MyDigitalSchool : étude de marché, modèle économique, identité, design et développement. J'y étais responsable webdesign.

De l'arborescence au prototype

J'ai pris en charge la conception de l'interface de bout en bout, dans cet ordre précis : arborescence et parcours utilisateur d'abord, zoning et wireframes ensuite pour valider la structure sans se laisser distraire par les couleurs, design system après, et seulement à la fin les maquettes haute fidélité et le prototype interactif sous Figma, en versions bureau et mobile. J'ai également contribué à la charte graphique et à sa déclinaison sur les supports du projet.

Cet ordre n'est pas une coquetterie de méthode. Chaque étape sert à ne trancher qu'une question à la fois, et à ne pas découvrir un problème de structure alors qu'on est déjà en train de choisir une nuance de vert.

Le design system comme langage commun

Je ne codais pas le site : d'autres membres de l'équipe l'ont développé à partir de mes maquettes. C'est ce qui a rendu le design system utile bien au-delà du confort de maquettage. Couleurs, typographies, pictogrammes et composants centralisés, nommés une fois pour toutes, ont donné à l'équipe un vocabulaire partagé. On ne discutait plus « ce bouton-là, sur cet écran-là », mais un composant que tout le monde savait nommer.

C'est ce que j'en retiens : un design system n'est pas une élégance de designer, c'est un outil de coordination.

Ce que la passation m'a appris

Le site livré ne ressemblait pas tout à fait aux maquettes. Rien de dramatique, mais des écarts un peu partout : des marges, des états de survol, des comportements non prévus sur les cas limites. Je l'ai d'abord pris pour un défaut d'exécution. C'était un défaut de spécification.

Une maquette montre un état idéal. Elle ne dit pas ce qui se passe quand la liste est vide, quand le titre tient sur quatre lignes, quand l'image manque. Faute de réponse, l'intégrateur tranche à ta place, et il tranche pour ce qui est le plus simple à coder. Depuis, je documente les états et les cas limites au même titre que les écrans.

D'un projet à l'autre

L'année précédente, sur 8ravo Éducation, j'étais exactement de l'autre côté : l'intégrateur qui reçoit les maquettes de quelqu'un d'autre et doit combler les trous tout seul. Avoir tenu les deux rôles à un an d'intervalle est la meilleure chose qui pouvait m'arriver.

C'est de là que vient ma façon de travailler sur YouVent : le design system avant les écrans, et les cas limites traités en même temps que le cas idéal, parce que je sais maintenant qui paie l'addition quand on les oublie.

Galerie (cliquer pour agrandir)