INGEGNERIA UX
UI / UX — Design orientato alla conversione
Design di prodotto misurabile che unisce in un'unica disciplina ricerca, information architecture, design system, prototipazione, usability testing, accessibility e dev handoff.
L'UX non è più 'una bella schermata'; è l'ingegneria in cui ricerca + IA + design system + prototype + test + accessibility + performance + handoff diventano un'unica operazione.
Il comportamento dell'utente è cambiato: i tempi di decisione si sono accorciati, la soglia di attesa è scesa, l'accessibility è ormai obbligatoria, le interfacce AI hanno superato la logica del wireframe statico. Molti team sono ancora nell'abitudine di 'aprire Figma senza research' e 'produrre schermate one-off al posto di un design system'. L'operazione UX di Roibase si costruisce su sei principi; per misurarne, riportarne e iterarne ciascuno esistono per iscritto i metric tree.
METODOLOGIA
Operazione di ingegneria UX a 6 livelli
Discover → Define → System → Design → Validate → Handoff. Ogni livello viene consegnato con deliverable + responsabile + SLA.
01
DISCOVER
Business goal, interviste stakeholder, 5-8 interviste utente in profondità, competitive audit, analisi analytics + session replay.
02
DEFINE
Persona + JTBD, problem statement, IA card-sort / tree-test, content audit, mappa user flow + wireframe.
03
SYSTEM
Design token library, component inventory, pattern atlas, principi di motion + a11y; pipeline Figma variables → codice.
04
DESIGN
Schermate high-fidelity + prototype interattivo + spec di micro-interaction; varianti responsive + dark mode.
05
VALIDATE
Usability test (moderated + remote), audit di accessibility, controllo del performance budget, stakeholder review + iterazione.
06
HANDOFF
Storybook + MDX doc, matrice props/variant, design QA pipeline, sessioni di formazione dev, 90 giorni di supporto.
— CONFRONTO
Freelance UX vs agenzia generalista vs ingegneria UX Roibase
Differenza dei tre approcci su ricerca, sistema, accessibility, dev handoff e ROI.
| Dimensione | Freelance UX | Agenzia generalista | Ingegneria UX Roibase |
|---|---|---|---|
| Ricerca | Assente o breve | 1-2 interviste | 5-8 interviste + analytics + JTBD |
| Design system | Schermate ad-hoc | Libreria di stili Figma | Token-first + component + pattern atlas |
| Usability testing | Generalmente assente | Un solo round | Moderated + remote + report SUS/SEQ |
| Accessibility | Per lo più ignorata | Controllo del contrasto | WCAG 2.2 AA + AAA come obiettivo + axe-core |
| Dev handoff | Link Figma | Inspect + style guide | Storybook + MDX + matrice props/variant |
| Integrazione CRO | Assente | Assente | Sistema di varianti A/B-ready già in design |
| Performance | LCP ignorato | Verifica rara | Budget di font/motion/image in anticipo |
| TCO al 12° mese | Ingresso basso, ritariffazione per schermata | Medio ma frammentato | Medio + sistema vivo + disciplina di processo |
PROOF
Outcomes, measured
Media a 6 mesi dopo i test utente; SUS 72 → 84.
90 giorni dopo IA + redesign onboarding.
Effetto del redesign di form + error state + empty state.
Tasso di superamento axe-core su tutte le schermate consegnate.
Il budget di performance viene fissato in fase di 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
Interviste stakeholder, 5-8 interviste utente in profondità, competitive audit + mappatura jobs-to-be-done; lo spazio del problema si chiarisce per primo.
Information architecture
Navigazione realmente compresa con card sort + tree test + first-click test; la tassonomia si costruisce 'da fuori, non da dentro'.
Design system (token-first)
Tokens Studio + Style Dictionary → Figma variables → codice; colore, tipografia, spacing, motion, radius, shadow, state da un'unica fonte.
Component library + pattern atlas
Button, form, nav, card, table, modal, toast, empty state; mappa di props + variant + a11y state + responsive.
Prototipo high-fidelity
Prototype interattivo Figma + spec di micro-interaction; prototipazione motion con Rive/Lottie; tech brief per Lenis/Framer Motion.
Operazione di usability testing
Serie moderated da 5 utenti + remote (Maze/Useberry/UserTesting); metriche SUS, SEQ, task completion, time-on-task.
Audit di accessibility (WCAG 2.2)
axe-core + verifica manuale di contrasto + tastiera + screen reader (NVDA/JAWS/VoiceOver); AA come baseline, AAA come obiettivo; conformità KVKK/EAA.
Design QA + visual regression
Visual regression con Chromatic / Percy / Playwright; pixel match Figma ↔ codice + QA dell'anatomia dei component.
Integrazione CRO
Sistema di varianti A/B-ready: 2-3 varianti hypothesis di ogni component pronte già in fase di design; export per VWO/Optimizely.
Dev handoff + Storybook
Matrice props/variant/state, behavior spec, motion timing, breakpoint responsive; Storybook + MDX doc viva.
— VANTAGGI
Il cambiamento concreto della tua product experience
Quando ricerca + sistema + test + accessibility + handoff sono integrati, il ROI non resta legato a una sola metrica.
Le barriere utente diminuiscono
La task completion sale, i ticket di supporto scendono; il prodotto diventa 'comprensibile', il drop-off in onboarding cala.
La conversion cresce
Con il sistema di varianti A/B-ready la disciplina CRO inizia già in fase di design; i drop di funnel si correggono in anticipo.
La velocità dev aumenta
Con handoff token-first + Storybook + MDX il tempo di sviluppo per schermata cala in modo netto e gli errori si riducono.
Il rischio legale di accessibility scende
Conformità WCAG 2.2 AA + EAA (European Accessibility Act 2025); quando arriva l'audit, la evidence è pronta.
La coerenza del brand aumenta
Con il design system, su ogni canale (web, app, email, social, sales deck) stessa identità + comportamento; cresce la fiducia nel brand.
La scalabilità diventa più facile
Aggiungere un nuovo prodotto / locale / mercato si misura in giorni invece che in settimane grazie alla component library.
DELIVERABLE
Cosa ricevi in ogni engagement UX
Lista di deliverable fissi nel pacchetto setup + 6 mesi di operazioni; nessuna sorpresa di costo aggiuntivo.
Report UX diagnostic
Analytics + session replay + heuristic audit + benchmark competitivo; 40-60 pagine.
Insight di ricerca utente
Trascrizione + tematizzazione di 5-8 interviste in profondità, mappa persona + JTBD.
Set di information architecture
Risultati card-sort / tree-test, sitemap, user flow, libro di wireframe.
Libreria di design token
Color, type, spacing, motion, shadow, radius, z-index; Tokens Studio + Style Dictionary + export di codice.
Component library (Figma + Storybook)
Button, form, nav, card, table, modal, toast, empty state + dark mode + breakpoint responsive + a11y state.
Pattern atlas + spec di motion
Pattern di onboarding, search, filter, checkout, dashboard + file di motion spec Rive/Lottie.
Prototipo high-fidelity
Prototipo interattivo Figma + micro-interaction; per la stakeholder review, registrazione + versione PDF.
Report di usability test
5-8 partecipanti moderated + 15+ remote, SUS/SEQ/task completion, insight + lista di azioni prioritarie.
Audit + remediation di accessibility
Audit WCAG 2.2 AA/AAA, axe-core + test manuale, piano di remediation, report AR.
Performance budget
Obiettivi LCP/INP/CLS, budget di font + image + motion, render strategy + monitoring plan.
Pacchetto di dev handoff
Storybook + MDX doc, matrice props/variant/state, breakpoint responsive, checklist QA.
Runbook + formazione + supporto 3 mesi
Runbook del design system, processo di aggiornamento token, sessioni di formazione Figma + code, 90 giorni di supporto.
— PERIMETRO
Cosa facciamo, cosa non facciamo
Lo scope dell'ingegneria UX è scritto; previene le sorprese e la fatturazione aggiuntiva successiva.
Facciamo
- Ricerca utente (interview + JTBD + analytics)
- Information architecture (card sort + tree test)
- Design token + component + pattern library
- Pipeline Figma variables → Style Dictionary → codice
- Prototipo high-fidelity + spec di micro-interaction
- Usability testing (moderated + remote)
- Audit + remediation di accessibility WCAG 2.2 AA/AAA
- Performance budget + obiettivi LCP/INP/CLS
- Design QA + visual regression (Chromatic/Percy)
- Storybook + MDX dev handoff + formazione
- Sistema di varianti CRO (design A/B-ready)
- Runbook + 90 giorni di supporto
Non facciamo
- Sviluppo applicativo front-end (con team partner)
- Back-end / design DB (resta nel team software)
- Strategia di brand / logo (team branding / engagement separato)
- Copywriting / produzione di contenuti (facciamo review della UX copy)
- Produzione di icone / illustrazioni (librerie con licenza + partner)
- Photography / produzione video
- Produzione mensile di schermate a lungo termine (il sistema viene costruito e interiorizzato dal team)
- Pannello di user research o gestione pagamento incentive (lab partner)
HOW WE WORK
Setup di 12-16 settimane, poi operazioni di sistema mensili
Settimana 1-2: discovery + stakeholder kickoff
Business goal, interviste stakeholder, analisi analytics/session replay, blocco di scope e metriche obiettivo.
Settimana 3-4: user research + JTBD
5-8 interviste in profondità, trascrizione + tematizzazione, mappa persona + jobs-to-be-done.
Settimana 5-6: IA + content audit
Card sort + tree test, user flow, mappa di wireframe, content audit + strategia di copy.
Settimana 7-8: design system + token + component
Libreria di token, component inventory + pattern atlas, export Figma variables + Style Dictionary.
Settimana 9-10: design high-fidelity + prototipo
Design high-fi delle schermate principali + prototype interattivo, micro-interaction + spec di motion.
Settimana 11-12: usability test + a11y audit
Test utente moderated + remote, audit WCAG 2.2 + remediation, controllo del performance budget.
Settimana 13-14: iterazione + sign-off stakeholder
Iterazione dai risultati dei test, final review stakeholder, preparazione Storybook + dev handoff.
Settimana 15+: handoff + dev pipeline + supporto
Consegna Storybook + MDX doc, sessioni di formazione dev, design QA pipeline, sistema di varianti CRO + 90 giorni di supporto.
— STACK STRUMENTI
Strumenti che usiamo — vendor-agnostic ma scelti con criterio
Per ogni cliente scegliamo quello adatto; difendiamo l'indipendenza non incassando commissioni.
DESIGN & PROTOTYPING
RICERCA & TESTING
ACCESSIBILITY & QA
HANDOFF & ANALYTICS
QUESTIONS
Frequently asked
— GLOSSARIO
Concetti chiave dell'ingegneria UX
La lingua comune dei tuoi team di design, sviluppo e prodotto.
- Jobs-to-be-Done (JTBD)
- Cornice che definisce il lavoro concreto (job) che l'utente vuole svolgere usando un prodotto; al posto della persona, focus su comportamento e contesto.
- Information Architecture (IA)
- Organizzazione di contenuti e funzioni di un prodotto in modo da combaciare con il modello mentale dell'utente; validata con card sort + tree test.
- Design Token
- Espressione di decisioni di design come colore, tipografia, spacing, motion in variabili indipendenti dalla piattaforma; distribuite da un'unica fonte tramite pipeline Figma variables + Style Dictionary + codice.
- Design System
- Unione dei livelli token + component + pattern + guideline + governance; unica fonte di verità per design e sviluppo.
- WCAG 2.2
- Web Content Accessibility Guidelines 2.2; criteri di successo a livello A, AA e AAA; 9 nuovi criteri (2023) su tastiera, focus, drag, target size; AA è la baseline di settore.
- System Usability Scale (SUS)
- Scala che valuta l'usabilità di un'interfaccia da 0 a 100 con un questionario standard di 10 item; > 68 sopra la media, > 80 soglia di eccellenza.
- Single Ease Question (SEQ)
- Metrica a singola domanda che, subito dopo il completamento di un task, misura la difficoltà percepita su scala 1-7; complemento a livello task del SUS.
- Largest Contentful Paint (LCP)
- Tempo in cui il principale contenuto visivo della pagina diventa visibile all'utente (Core Web Vitals); < 2.5s buono. Si controlla in fase di design con il budget di font + image + render.
- Interaction to Next Paint (INP)
- Picco del tempo che intercorre tra l'interazione dell'utente e l'elaborazione successiva più lunga (Core Web Vitals); < 200ms buono. Successore del FID dal 2024.
- Storybook
- Strumento di sviluppo + documentazione + QA dei component in ambiente isolato; con MDX la documentazione di handoff design-sviluppo vive in modo dinamico.
- Visual Regression Testing
- Verifica automatica con Chromatic / Percy / Playwright che i componenti UI restino visivamente identici dopo modifiche di codice; previene il design drift.
- European Accessibility Act (EAA)
- Direttiva di accessibilità dell'UE in vigore dal 28 giugno 2025; rende WCAG 2.2 AA obbligatorio per e-commerce, banking, trasporti, telco.
— ALBERO DECISIONALE
L'operazione di ingegneria UX è adatta a te?
Rispondi Sì/No a 4 domande; che il risultato sia chiaro.
01 / 04
Hai un prodotto digitale live (web/app/SaaS) o un piano di lancio in 3-6 mesi?
Soglia minima per il ROI dell'operazione research + sistema + test.
— LET'S BEGIN
Trasformiamo il design da congettura ad apprendimento.
Con un UX diagnostic di 1 ora analizziamo il tuo flusso attuale con la lente analytics + heuristic + a11y, ti mostriamo le ipotesi più rischiose e i quick-win.