INGÉNIERIE UX
UI / UX — Design orienté conversion
Un design produit mesurable qui réunit en une seule discipline la recherche, l'information architecture, le design system, le prototypage, l'usability testing, l'accessibility et le dev handoff.
L'UX n'est plus « un bel écran » ; c'est l'ingénierie où recherche + IA + design system + prototype + test + accessibility + performance + handoff sont transformés en une seule opération.
Le comportement utilisateur a changé : les temps de décision se sont raccourcis, le seuil d'attente a baissé, l'accessibility est désormais obligatoire et les interfaces AI dépassent la logique des wireframes statiques. La plupart des équipes conservent encore l'habitude d'« ouvrir Figma sans recherche » et de « produire des écrans one-off à la place d'un design system ». L'opération UX de Roibase repose sur six principes ; pour chacun, des arbres de métriques écrits permettent de mesurer, reporter et améliorer de manière itérative.
MÉTHODOLOGIE
Une opération d'ingénierie UX en 6 couches
Discover → Define → System → Design → Validate → Handoff. Chaque couche est livrée avec un deliverable + un responsable + un SLA.
01
DISCOVER
Business goal, stakeholder interview, 5 à 8 entretiens utilisateurs approfondis, competitive audit, examen analytics + session replay.
02
DEFINE
Persona + JTBD, problem statement, IA card-sort / tree-test, content audit, carte user flow + wireframe.
03
SYSTEM
Design token library, component inventory, pattern atlas, principes motion + a11y ; pipeline Figma variables → code.
04
DESIGN
Écrans high-fidelity + prototype interactif + spec micro-interaction ; breakpoints responsive + dark mode.
05
VALIDATE
Usability test (modéré + remote), audit accessibility, contrôle du performance budget, stakeholder review + itération.
06
HANDOFF
Storybook + doc MDX, matrice props/variants, pipeline design QA, sessions de formation dev, 90 jours de support.
— COMPARAISON
Freelance UX vs agence vanille vs ingénierie UX Roibase
La différence entre trois approches sur la recherche, le système, l'accessibility, le dev handoff et le ROI.
| Dimension | Freelance UX | Agence vanille | Ingénierie UX Roibase |
|---|---|---|---|
| Recherche | Absente ou brève | 1 à 2 entretiens | 5 à 8 entretiens + analytics + JTBD |
| Design system | Écrans ad-hoc | Bibliothèque de styles Figma | Token-first + component + pattern atlas |
| Usability testing | Généralement absent | Un seul tour | Modéré + remote + rapport SUS/SEQ |
| Accessibility | Souvent ignorée | Contrôle de contrast | WCAG 2.2 AA + cible AAA + axe-core |
| Dev handoff | Lien Figma | Inspect + style guide | Storybook + MDX + matrice props/variants |
| Intégration CRO | Absente | Absente | Système de variantes A/B-ready dès le design |
| Performance | LCP ignoré | Contrôle rare | Budget font/motion/image fixé à l'avance |
| TCO au 12e mois | Entrée faible, coût par écran récurrent | Moyen mais fragmenté | Moyen + système vivant + discipline de process |
PROOF
Outcomes, measured
Moyenne au 6e mois après user test ; SUS 72 → 84.
90 jours après la refonte IA + onboarding.
Impact de la refonte form + error state + empty state.
Taux de réussite axe-core sur tous les écrans livrés.
Le performance budget est fixé dès la phase de design.
Color, type, spacing, radius, shadow, motion, z-index, breakpoint, opacity, blur, transition, duration.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Discovery + user research
Stakeholder interview, 5 à 8 entretiens utilisateurs approfondis, competitive audit + cartographie jobs-to-be-done ; l'espace problème se clarifie d'abord.
Information architecture
Une navigation vraiment comprise grâce au card sort + tree test + first-click testing ; la taxonomy est construite « de l'extérieur vers l'intérieur ».
Design system (token-first)
Tokens Studio + Style Dictionary → Figma variables → code ; couleur, typographie, spacing, motion, radius, shadow, state depuis une seule source.
Component library + pattern atlas
Button, form, nav, card, table, modal, toast, empty state ; carte props + variants + a11y state + breakpoints responsive.
High-fidelity prototype
Prototype interactif Figma + spec micro-interaction ; prototypage motion avec Rive/Lottie ; tech brief pour Lenis/Framer Motion.
Opération usability testing
Série modérée de 5 utilisateurs + remote (Maze/Useberry/UserTesting) ; métriques SUS, SEQ, task completion, time-on-task.
Audit accessibility (WCAG 2.2)
axe-core + contrast manuel + keyboard + audit screen reader (NVDA/JAWS/VoiceOver) ; baseline AA, cible AAA ; conformité KVKK/EAA.
Design QA + visual regression
Chromatic / Percy / Playwright visual regression ; correspondance pixel Figma ↔ code + QA component anatomy.
Intégration CRO
Système de variantes A/B-ready : 2 à 3 variantes d'hypothèse prêtes pour chaque component dès la phase design ; export pour VWO/Optimizely.
Dev handoff + Storybook
Matrice props/variants/states, spec de comportement, motion timing, breakpoint responsive ; Storybook + doc MDX vivante.
— BÉNÉFICES
Le changement concret de l'expérience produit
Quand recherche + système + test + accessibility + handoff sont intégrés, le ROI ne dépend plus d'une seule métrique.
Les frictions utilisateur diminuent
Le task completion augmente, les support tickets diminuent ; le produit devient « compréhensible », les pertes en onboarding baissent.
La conversion progresse
Avec le système de variantes A/B-ready, la discipline CRO démarre dès le design ; les drops du funnel sont corrigés en amont.
La vitesse dev augmente
Avec handoff token-first + Storybook + MDX, le temps de développement par écran baisse sensiblement et les erreurs diminuent.
Le risque juridique accessibility baisse
Conformité WCAG 2.2 AA + EAA (European Accessibility Act 2025) ; quand un audit arrive, l'evidence est prête.
La cohérence de marque augmente
Avec le design system, la même identité + comportement sur chaque canal (web, app, email, social, sales deck) ; la confiance dans la marque grandit.
Le passage à l'échelle est facilité
L'ajout d'un nouveau produit / locale / marché se mesure en jours plutôt qu'en semaines grâce à la component library.
LIVRABLES
Ce que vous recevez à chaque engagement UX
Liste de livrables fixe pour la mise en place + pack opération de 6 mois ; pas de surprise de facture additionnelle.
Rapport de UX diagnostic
Analytics + session replay + heuristic audit + competitive benchmark ; 40 à 60 pages.
Résultats de user research
Transcription + thématisation de 5 à 8 entretiens approfondis, carte persona + JTBD.
Kit information architecture
Résultats card-sort / tree-test, plan de site, user flow, livre des wireframes.
Bibliothèque de design tokens
Color, type, spacing, motion, shadow, radius, z-index ; Tokens Studio + Style Dictionary + export code.
Component library (Figma + Storybook)
Button, form, nav, card, table, modal, toast, empty state + dark mode + breakpoint responsive + a11y state.
Pattern atlas + motion spec
Patterns onboarding, search, filter, checkout, dashboard + fichiers motion spec Rive/Lottie.
Prototype high-fidelity
Prototype interactif Figma + micro-interaction ; enregistrement + version PDF pour stakeholder review.
Rapport usability test
5 à 8 participants modérés + 15+ remote, SUS/SEQ/task completion, insights + liste d'actions priorisées.
Audit accessibility + remediation
Audit WCAG 2.2 AA/AAA, axe-core + test manuel, remediation plan, rapport AR.
Performance budget
Objectifs LCP/INP/CLS, budget font + image + motion, render strategy + monitoring plan.
Pack dev handoff
Storybook + doc MDX, matrice props/variants/states, breakpoint responsive, checklist QA.
Runbook + formation + 3 mois de support
Runbook design system, processus de mise à jour des tokens, sessions de formation Figma + code, 90 jours de support.
— PÉRIMÈTRE
Ce que nous faisons, ce que nous ne faisons pas
Le périmètre de l'ingénierie UX est écrit ; il prévient les surprises et la facture additionnelle a posteriori.
Nous faisons
- User research (interview + JTBD + analytics)
- Information architecture (card sort + tree test)
- Design token + component + pattern library
- Pipeline Figma variables → Style Dictionary → code
- Prototype high-fidelity + spec micro-interaction
- Usability testing (modéré + remote)
- Audit accessibility WCAG 2.2 AA/AAA + remediation
- Performance budget + cibles LCP/INP/CLS
- Design QA + visual regression (Chromatic/Percy)
- Dev handoff Storybook + MDX + formation
- Système de variantes CRO (design A/B-ready)
- Runbook + 90 jours de support
Nous ne faisons pas
- Développement front-end applicatif (via équipes partenaires)
- Conception back-end / DB (reste dans l'équipe software)
- Stratégie de marque / logo (équipe branding / engagement distinct)
- Copywriting / production de contenu (nous faisons la UX copy review)
- Production d'icônes / illustrations (bibliothèques sous licence + partenaires)
- Production photo / vidéo
- Production mensuelle d'écrans à long terme (le système est bâti puis internalisé)
- Gestion de panel user research ou de paiement d'incentive (partner lab)
HOW WE WORK
Mise en place de 12 à 16 semaines, puis opération système mensuelle
Semaines 1-2 : discovery + stakeholder kickoff
Business goal, stakeholder interview, examen analytics/session replay, verrouillage du périmètre et des métriques cibles.
Semaines 3-4 : user research + JTBD
5 à 8 entretiens approfondis, transcription + thématisation, carte persona + jobs-to-be-done.
Semaines 5-6 : IA + content audit
Card sort + tree test, user flow, carte des wireframes, content audit + stratégie copy.
Semaines 7-8 : design system + token + component
Bibliothèque de tokens, component inventory + pattern atlas, export Figma variables + Style Dictionary.
Semaines 9-10 : design high-fidelity + prototype
Design high-fi des écrans principaux + prototype interactif, spec micro-interaction + motion.
Semaines 11-12 : usability test + audit a11y
User test modéré + remote, audit WCAG 2.2 + remediation, contrôle du performance budget.
Semaines 13-14 : itération + stakeholder sign-off
Itération à partir des résultats de test, stakeholder final review, préparation Storybook + dev handoff.
Semaines 15+ : handoff + dev pipeline + support
Livraison Storybook + doc MDX, sessions de formation dev, pipeline design QA, système de variantes CRO + 90 jours de support.
— STACK OUTILS
Les outils que nous utilisons — vendor-agnostiques mais choix déterminés
Nous choisissons ce qui convient à chaque client ; nous préservons notre indépendance en ne prenant aucune commission.
DESIGN & PROTOTYPING
RESEARCH & TESTING
ACCESSIBILITY & QA
HANDOFF & ANALYTICS
QUESTIONS
Frequently asked
— GLOSSAIRE
Concepts-clés de l'ingénierie UX
La langue commune de vos équipes design, développement et produit.
- Jobs-to-be-Done (JTBD)
- Cadre qui définit le travail concret (job) que l'utilisateur souhaite accomplir en utilisant un produit ; axé sur le comportement et le contexte plutôt que sur la persona.
- Information Architecture (IA)
- Organisation du contenu et des fonctions d'un produit pour correspondre au modèle mental de l'utilisateur ; validée par card sort + tree test.
- Design Token
- Expression des décisions de design (couleur, typographie, spacing, motion) sous forme de variables indépendantes de la plateforme ; distribuée depuis une source unique via pipeline Figma variables + Style Dictionary + code.
- Design System
- Assemblage des couches token + component + pattern + guideline + governance ; source unique de vérité pour le design et le développement.
- WCAG 2.2
- Web Content Accessibility Guidelines 2.2 ; critères de réussite niveaux A, AA et AAA ; 9 nouveaux critères (2023) autour de keyboard, focus, drag, target size ; AA est le baseline du secteur.
- System Usability Scale (SUS)
- Échelle standard à 10 items qui note l'utilisabilité d'une interface de 0 à 100 ; > 68 au-dessus de la moyenne, > 80 seuil d'excellence.
- Single Ease Question (SEQ)
- Métrique à une seule question qui mesure, juste après l'exécution d'une tâche, la difficulté perçue sur une échelle 1-7 ; complément au niveau tâche du SUS.
- Largest Contentful Paint (LCP)
- Temps au bout duquel le principal contenu visuel de la page devient visible pour l'utilisateur (Core Web Vitals) ; < 2,5 s est bon. Contrôlé en phase de design via le budget font + image + render.
- Interaction to Next Paint (INP)
- Valeur de pointe du délai entre l'interaction utilisateur et le prochain paint le plus long (Core Web Vitals) ; < 200 ms est bon. Successeur de FID depuis 2024.
- Storybook
- Outil de développement + documentation + QA des components en environnement isolé ; avec MDX, la documentation de handoff design-développement est vivante.
- Visual Regression Testing
- Vérification automatisée, via Chromatic / Percy / Playwright, que les composants UI restent visuellement identiques après des changements de code ; évite le design drift.
- European Accessibility Act (EAA)
- Directive européenne d'accessibility entrée en vigueur le 28 juin 2025 ; rend WCAG 2.2 AA obligatoire pour e-commerce, bancaire, transport, télécom.
— ARBRE DE DÉCISION
L'opération d'ingénierie UX vous convient-elle ?
Répondez par Oui/Non à 4 questions ; le résultat sera net.
01 / 04
Disposez-vous d'un produit digital en production (web/app/SaaS) ou prévoyez-vous un launch dans 3 à 6 mois ?
Seuil minimal pour le ROI d'une opération recherche + système + test.
— LET'S BEGIN
Transformons le design de la supposition à l'apprentissage.
Avec un UX diagnostic d'1 heure, nous examinons votre flux actuel sous l'angle analytics + heuristic + a11y et montrons les hypothèses les plus risquées et les quick-win.