Du design à la prod, en deux semaines

Contexte

La refonte de la homepage de Geev accompagnait le lancement d’une nouvelle plateforme de marque, créée avec l’agence 4uatre : plus colorée, plus symbolique, faite de stickers, de tracés et de couleurs vives qui évoquent à la fois les objets et les relations humaines au cœur de l’application.

La page devait sortir avec la nouvelle marque. Mais l’intégrer dans le site, construit sur Angular, représentait un chantier trop long, et l’équipe de développement était mobilisée sur l’application.

Le problème

Un contexte classique : le design est prêt, ou presque, mais personne n’est disponible pour l’implémenter. Deux options s’offraient à nous : attendre qu’un développeur se libère, ou réduire l’ambition de la page pour qu’elle tienne dans le temps disponible.

Aucune des deux ne convenait. La landing était la première vitrine de la nouvelle marque, et la décaler revenait à décaler la marque avec elle.

Design

J’ai conçu la page en itérant directement avec la PM et le CEO. Pour traduire la plateforme de marque en page web, je me suis inspiré de landing pages reprenant le courant néo-brutaliste : Formes géométriques marquées, couleurs franches, éléments cliquables soulignés par des contours affirmés.

Le tracé principal de la page illustre le don et la circulation des objets entre utilisateurs. Les pictogrammes adoptent des contours francs et colorés, et le titre, gras et massif, se détache nettement du reste.

Livrer soi-même

Une fois le design validé, nous avons décidé que je l’intégrerais moi-même, avec Cursor. J’ai eu accès à la codebase et j’ai pris en charge le sujet de bout en bout : intégration, vérification, mise en production.

Le MCP Figma comme pont. Plutôt que de décrire la maquette à l’IA, Cursor lisait directement le fichier Figma grâce au MCP. Parmi les modèles testés, Claude a donné les meilleurs résultats : des choix d’implémentation pertinents et le plus fidèles à la maquette.

Un cadre technique partagé. Je n’ai pas contourné l’équipe tech. Le CTO a pris en charge l’intégration du nouveau code dans l’architecture existante, ce qui m’a laissé la main sur le rendu tout en gardant la base saine.

Savoir quoi changer, et où. L’IA produit vite, mais elle ne sait pas toujours juger ce qui est juste visuellement. C’est là que ma double compétence a compté : mon expérience d’intégration CSS me permettait de naviguer dans le code, et mon œil de designer me disait quoi corriger. Sans l’une ou l’autre, l’exercice aurait tourné court.

2 semaines

Du design à la mise en prod

Design, intégration et tests compris.

Voir le résultat

Et ensuite

Nous avons réutilisé ce processus pour améliorer ponctuellement la web app de Geev : des corrections d’interface qui n’auraient probablement pas été priorisés dans le backlog passaient directement sous ma responsabilité.

Ce que j’en retiens

L’IA déplace la frontière du rôle de designer. Sur des sujets d’interfaces bien délimités, le designer devenir owner transverse, et ainsi libérer l’équipe tech pour ce qui demande vraiment son expertise.