Keran Gouineaud

Contexte : Refonte intégrale du site e-commerce d'une marque française de vêtements premium écoresponsables (pièces intemporelles, fabrication européenne, matières certifiées), positionnée sur une double audience B2C et B2B. Le site existant, développé sous Squarespace, présentait plusieurs points bloquants identifiés en audit : mélange des parcours B2C et B2B dès la page d'accueil, architecture de navigation inadaptée à la structure réelle du catalogue, absence de valorisation de l'engagement environnemental de la marque, et incohérences de la charte graphique rendant l'identité inexploitable en interface. Mission couvrant l'intégralité de la chaîne UX/UI, de la phase de découverte client jusqu'à la livraison d'un design system documenté et transmissible aux développeurs, dans la perspective d'une refonte technique (arbitrage plateforme entre développement sur-mesure, solution tout-en-un et site vitrine adossé à la boutique existante). RÉALISATIONS : Découverte & cadrage stratégique • Audit UX du site existant et benchmark concurrentiel du secteur mode responsable (Veja, Asphalte, Picture) • Conception d'un guide d'entretien client et conduite de l'entretien de découverte avec le dirigeant • Rédaction du brief stratégique et construction du persona principal, incluant l'arbitrage argumenté entre la cible identifiée en recherche et celle décrite par le client • Structuration et priorisation d'un backlog produit de 27 items (P1/P2/P3) qualifiés par type, cible et statut Architecture de l'information & parcours • Conception de l'arborescence complète et de la carte des URLs (règles de nommage, redirections 301, structure bilingue FR/EN) • Modélisation du parcours utilisateur en un flux unique à deux entrées (achat B2C / partenariat B2B) • Arbitrage structurant sur la navigation : organisation par collection plutôt que par genre, le genre étant traité en variante produit et en filtre, évitant la duplication intégrale du catalogue • Définition de la stratégie responsive et des points de rupture Wireframes • Production de 12 pages en desktop et mobile 375 (24 écrans) : accueil, listing, fiche produit, tunnel de commande, journal éditorial, pages engagement et partenariats, contact, compte, 404, menu Design system • Construction d'un système de tokens à racine unique : l'échelle d'espacement sert de source de vérité à toutes les dimensions du produit (tailles de police, rayons, gouttières, cibles tactiles y aliasent), garantissant l'impossibilité d'une dérive silencieuse • Extension de la charte client (4 couleurs) en 47 primitives et 29 tokens sémantiques, avec calcul systématique des contrastes selon la formule WCAG 2.1 de luminance relative, révélant notamment que la couleur d'accent de la marque était inutilisable en texte (2,15:1) et imposant une règle d'usage documentée • Définition d'une échelle typographique de 24 styles (desktop/mobile) et sélection d'un couple typographique titre/corps sur la base d'un comparatif rendu et argumenté • Conception des composants et de leurs états : bouton (12 variantes), carte produit, champ de formulaire (repos, focus, erreur, désactivé) • Documentation exhaustive de chaque décision (choix retenu, justification, alternatives écartées) en vue de la transmission au développement Interface & prototypage • Conception de la page d'accueil haute-fidélité et prototypage front-end animé : révélations au défilement, curseur interactif, micro-interactions, parallaxe, écran de chargement • Intégration des exigences d'accessibilité : prefers-reduced-motion, états de focus visibles, cibles tactiles de 44 px, dégradation gracieuse sans JavaScript Gestion des risques & conseil • Identification d'un risque juridique sur la police pressentie (fonte commerciale non licenciée) et substitution par une alternative libre de droits à rendu équivalent • Identification d'un risque de greenwashing : détection de données environnementales non sourcées dans les maquettes, retrait des mentions non justifiables et reformulation des libellés dans un registre juridiquement défendable • Cadrage de la contrainte technique plateforme : analyse comparative de trois scénarios avec implications en coût, autonomie et maintenance ENVIRONNEMENT TECHNIQUE / FONCTIONNEL Conception & prototypage Figma (variables et modes, styles de texte, composants et variantes, auto-layout, contraintes responsive) · FigJam (parcours utilisateur, sitemap) · Figma Plugin API (automatisation de la création de tokens et de l'application des styles) Front-end HTML5 · CSS3 (custom properties, grid, flexbox, container queries, animations et transitions) · JavaScript (IntersectionObserver, animations au défilement, interactions personnalisées) · Web fonts auto-hébergées (WOFF2) Production assistée par IA Claude Code piloté via connecteurs MCP (Figma Plugin API, Notion), automatisation de la création des variables et styles de design system, calcul systématique des ratios de contraste WCAG, génération de spécimens typographiques comparatifs, prototypage front-end animé. Conception, arbitrages et validation conservés en propre. Documentation & pilotage Notion (base de données de backlog, spécifications de design system, documentation des décisions) · Suivi de projet et communication client Normes & méthodes WCAG 2.1 niveau AA (contrastes calculés, cibles tactiles, navigation clavier, mouvement réduit) · Design tokens et architecture primitives → sémantique · Design system orienté transmission développeur · Approche mobile-first · Design system piloté par l'assemblage (validation des tokens par la construction des composants) Fonctionnel E-commerce (catalogue, variantes produit, tunnel de commande, compte client) · Double parcours B2C / B2B · Contenu éditorial · Internationalisation FR/EN · Valorisation d'engagement environnemental (traçabilité, certifications)

- Designer sur plusieurs projets clients simultanés, prise en charge complète du cycle de conception, de la discovery jusqu'au handoff développeurs. - Conduit des entretiens utilisateurs et formalisé des User Stories structurées avec critères d'acceptation pour cadrer les besoins en amont du design. - Conçu wireframes, maquettes haute fidélité et prototypes exploitables par les équipes dev, en assurant la cohérence des solutions à travers tous les points de contact utilisateur. - Animé des ateliers de cadrage UX avec parties prenantes métiers et techniques, présenté et défendu les choix de conception auprès des clients, de l'idéation jusqu'à la validation des solutions. - Structuré un design system complet : bibliothèque de composants Atomic Design, tokens sémantiques, documentation, conforme WCAG AAA et réutilisable sur l'ensemble des projets agence. - Participé aux phases de recette et d'ajustements post-livraison en collaboration directe avec les développeurs front-end.

- Stratégie éditorial en communuication - Web design : Gestion, création, maquettage, optimisation Wordpress, SEO, SEA - Magazine design : Création d'un catalogue sur InDesign - Effectuer du reporting sur les actions mises en place - Événementiel (salons : Global Industrie & Santexpo) - Print design : Création d'affiches, flyers pour les différents salons sur InDesign, - Gestion des réseaux sociaux, compte pro et personal branding (création de visuels, montage vidéo...).