
UI Design & UX Design
Acquise au Master ESIEA. Sortie du pilier Fullstack pour pouvoir être citée indépendamment dans le storytelling produit. Raisonner UX en amont du code : wireframes, parcours et architecture de l'information avant le premier composant React.
Chaque segment représente une période (parcours ou réalisation) où la compétence a été mobilisée. La couleur et la taille du point final reflètent le niveau atteint sur cette période.
Ma définition
Le UI design et l'UX design, dans ma pratique, c'est la discipline amont qui raisonne sur les parcours utilisateur, les wireframes et l'architecture de l'information avant le premier composant React. C'est la compétence qui permet à un CTO de pousser back sur un brief mal cadré, de produire un wireframe lisible avant le code, et de décider quand un design est suffisamment terminé pour être livré.
Je l'exerce sur 2 phases distinctes. Discovery : interviews utilisateurs, journey mapping, wireframes papier puis Figma léger validés en moins de 30 minutes par le responsable métier. Production : UI kit minimal, design tokens, accessibilité WCAG, ownership de l'implémentation front-end. Bases acquises au Master ESIEA (UX, parcours utilisateur, architecture de l'information), entretenues à chaque rôle produit successif depuis Pichet (wireframes outillage interne, 80 interlocuteurs adoptant les outils avec formation minimale) jusqu'aux storefronts Magento Enterprise (3 thèmes responsive cohérents) et au SaaS comptable solo (expérience à 6 rôles cadrée en amont).
En 2026, l'IA générative a basculé sur l'UI : l'outil de référence est v0 by Vercel, qui transforme une description en composants React production-ready avec shadcn/ui + Tailwind, intégrations base de données et déploiement, et qui revendique plus de 6 millions de développeurs sur la plateforme. Vercel détaille comment le coupler à un design system existant dans AI-powered prototyping with design systems. Le coût de production d'écrans s'effondre. mais les décisions de journey, d'architecture de l'information et d'accessibilité restent humaines, et c'est exactement là que se joue la valeur du design en 2026.
Mes éléments de preuve
Anecdote 1 : Wireframer l'outillage interne ESB pour les directions métiers
Sur le périmètre ESB du Groupe Pichet, j'avais à équiper environ 80 interlocuteurs quotidiens issus de 12 directions métier (Finance, Comptabilité, RH, Marketing, Hôtellerie, Promotion, Sécurité, DSI, etc.). Ces personnes n'étaient pas des utilisateurs techniques : elles avaient besoin de dashboards d'intégration, de visualiseurs de flux, d'outils de reporting clairs - mais sans formation technique poussée et avec une charge cognitive déjà saturée par leur métier.
J'ai refusé de plonger directement dans le code Symfony. Avant chaque écran, j'ai produit un wireframe papier puis Figma léger que je faisais valider en 30 minutes par le responsable de département concerné, en posant 3 questions : qu'est-ce qu'on cherche (l'intention utilisateur), dans quel ordre (le parcours), avec quel vocabulaire (le langage métier, pas tech). Une fois le wireframe approuvé, je passais aux controllers Symfony et à l'intégration Twig + jQuery, mais le journey était figé. Pour les flux financiers (les plus sensibles), j'ai aussi produit des journey maps documentés sur Confluence.
Environ 80 interlocuteurs ont adopté les outils avec une formation minimale, le temps de formation moyen est passé d'une demi-journée à moins d'une heure, et les directions métier ont sollicité ensuite l'équipe ESB pour cadrer 3 nouveaux outillages transverses sans repasser par une phase d'évangélisation.
Sur ce projet j'ai durablement compris qu'un wireframe lisible vaut 3 itérations de code. C'est le réflexe que je rejoue aujourd'hui sur chaque mission ACCENSEO et sur le SaaS comptable : crayonner avant d'ouvrir Figma, faire valider le journey avant la première ligne de React, et accepter qu'une feuille A4 et 10 minutes valent souvent mieux que 2 heures dans Figma.
Anecdote 2 : Concevoir 3 storefronts responsive cohérents pour Fleurance Nature
À la refonte Fleurance Nature en 2017 chez Smile, je devais redesigner 3 storefronts (Fleurance Nature France, International, Mincifine) avec une identité partagée mais des codes locaux différents. Les spécifications graphiques ont traversé 7 versions en 2 mois au fur et à mesure que les cas limites métier remontaient (groupes clients, promotions multi-site, traduction de catégories, gestion des avis). Côté responsive, je devais tenir mobile + tablette + desktop sans démultiplier les thèmes.
J'ai posé une grille responsive partagée (mobile-first, breakpoints calibrés sur les analytics existants) et un UI kit minimal qui factorisait les composants visuels critiques (catégories, fiches produit, tunnel de checkout, navigation). Pour chaque storefront, j'ai produit des wireframes responsive sur 3 breakpoints, validé itérativement les maquettes avec le client, rédigé les spécifications graphiques des 3 thèmes distincts, et porté ensuite l'ownership de l'implémentation front-end Magento. Le blog WordPress intégré via RSS a été aligné visuellement sur la même grille.
3 storefronts cohérents livrés en production sur 8 environnements différents, identité visuelle partagée préservée sans réécriture par boutique, et la garantie de 58 jours post-lancement assurée en personne sans incident UX majeur.
Cette discipline UI/UX est ce qui me permet aujourd'hui de pousser back sur un brief mal cadré chez ACCENSEO sans dépendre d'un cabinet de design externe. Sur le SaaS comptable solo, j'ai rejoué la même mécanique pour cadrer l'expérience à 6 rôles différents (Admin, Collaborateur, Consultant, Comptable, Comptabilité, Banque) avant la première ligne de code - et c'est exactement ce qui m'a fait gagner les semaines de cadrage que les itérations en post-livraison auraient coûtées.
Mon autocritique
Niveau Confirmé. Bases acquises au Master ESIEA (UX, parcours utilisateur, architecture de l'information), entretenues par tous les rôles produit successifs : wireframes d'outillage ESB (≈80 interlocuteurs adoptant les outils avec formation minimale), 3 thèmes responsive cohérents sur Magento Enterprise, expérience à 6 rôles cadrée en amont sur le SaaS comptable. Capacité à rédiger un journey map, crayonner un wireframe lisible et challenger un brief. Ce qui reste à muscler : design system token-based à grande échelle et accessibilité WCAG 2.2 AAA.
Compétence différenciante pour un CTO scale-up B2B SaaS. Sans elle, le CTO est cantonné à la couche tech et délègue toute la couche produit, ce qui éloigne du board et des clients. C'est ce qui me permet de pousser back sur un brief mal cadré, de produire un wireframe lisible avant le premier composant React, et de décider *quand un design est suffisamment terminé pour être livré*.
Mes conseils
*Crayonner avant d'ouvrir Figma*, une feuille A4 et 10 minutes valent souvent mieux que 2 heures dans Figma. Aux autres :
- ne jamais sauter la phase discovery (interviews + journey map), même quand le brief semble clair
- investir dans un design system token-based dès le deuxième écran d'un produit
- tester l'accessibilité avant le polish visuel. un site beau mais inaccessible exclut au minimum 15 % des utilisateurs
Mon évolution dans cette compétence
Le couple UI/UX est ce qui rend mes décisions CTO crédibles côté produit. Dans le projet à 24 mois, il me permet d'animer un cadrage produit sans dépendre exclusivement d'un PM, de défendre un design system devant le board comme un investissement scalable et de challenger un cabinet de design externe sur la base d'un brief précis. Sans lui, le rôle se cantonne à la couche technique et perd le levier produit.
D'ici fin 2027, l'objectif observable est triple : livrer pour la prochaine ligne SaaS un design system tokenisé (Figma + Tokens Studio), passer un audit accessibilité WCAG 2.2 AA sans non-conformité majeure, et animer un atelier discovery utilisateur en autonomie. Le glissement Confirmé → Senior se mesure à ces trois livrables.
Revues design quotidiennes avec les alternants ACCENSEO en mentoring inversé (ils maîtrisent Figma plus vite que moi, j'apporte la profondeur architecture de l'information). Participation aux workshops design system internes. Master Expert en Ingénierie du Logiciel actif.
Possible immersion accessibilité (WCAG 2.2, ARIA avancé) prévue 2026. Programme Maven Design Systems (Brad Frost ou équivalent) visé 2027 pour formaliser la pratique tokens. Possible certification ADA si le rôle cible touche le secteur public.
Veille hebdo : Nielsen Norman Group, Design Lobster, Dan Mall. Lectures piliers : *Atomic Design* (Brad Frost), *Refactoring UI* (Adam Wathan), *Don't Make Me Think* (Krug). Étude mensuelle d'un design system public de référence - Material 3, Polaris, GOV.UK.