INGENIERÍA UX
UI / UX — Diseño Orientado a la Conversión
Diseño de producto medible que une research, information architecture, design system, prototipado, usability testing, accessibility y dev handoff en una sola disciplina.
UX ya no es 'pantallas bonitas'; es la ingeniería donde research + IA + design system + prototype + test + accessibility + performance + handoff se convierten en una única operación.
El comportamiento del usuario ha cambiado: los tiempos de decisión se acortaron, el umbral de espera cayó, la accessibility ya es obligatoria y las interfaces IA han dejado atrás la lógica de wireframes estáticos. La mayoría de los equipos todavía sigue con la rutina de 'abrir Figma sin research' y 'producir pantallas one-off en lugar de design system'. La operación UX de Roibase se levanta sobre seis principios; para cada uno hay árboles de métricas escritas para medir, reportar e iterar.
METODOLOGÍA
Operación de ingeniería UX de 6 capas
Discover → Define → System → Design → Validate → Handoff. Cada capa se entrega con deliverable + responsable + SLA.
01
DISCOVER
Business goal, stakeholder interview, 5-8 entrevistas de usuario en profundidad, competitive audit, revisión de analytics + session replay.
02
DEFINE
Persona + JTBD, problem statement, IA con card-sort / tree-test, content audit, user flow + mapa de wireframes.
03
SYSTEM
Design token library, component inventory, pattern atlas, principios de motion + a11y; pipeline Figma variables → código.
04
DESIGN
Pantallas high-fidelity + prototipo interactivo + spec de micro-interacciones; breakpoints responsive + dark mode.
05
VALIDATE
Usability test (moderated + remote), auditoría de accessibility, control de performance budget, review de stakeholders + iteración.
06
HANDOFF
Storybook + MDX doc, matriz de props/variant, pipeline de design QA, sesiones de formación para dev, 90 días de soporte.
— COMPARACIÓN
UX freelance vs agencia vainilla vs ingeniería UX Roibase
Diferencia de los tres enfoques en research, sistema, accessibility, dev handoff y ROI.
| Dimensión | UX freelance | Agencia vainilla | Ingeniería UX Roibase |
|---|---|---|---|
| Research | Ausente o breve | 1-2 entrevistas | 5-8 entrevistas + analytics + JTBD |
| Design system | Pantallas ad-hoc | Biblioteca de estilos en Figma | Token-first + component + pattern atlas |
| Usability testing | Habitualmente ausente | Una sola ronda | Moderated + remote + informe SUS/SEQ |
| Accessibility | Normalmente ignorada | Control de contrast | WCAG 2.2 AA + objetivo AAA + axe-core |
| Dev handoff | Link de Figma | Inspect + style guide | Storybook + MDX + matriz de props/variant |
| Integración CRO | Ausente | Ausente | Sistema de variantes A/B-ready desde el diseño |
| Performance | LCP ignorado | Control esporádico | Presupuesto de font/motion/image definido antes |
| TCO al mes 12 | Entrada barata, cargo repetido por pantalla | Media pero fragmentada | Media + sistema vivo + disciplina de proceso |
PROOF
Outcomes, measured
Media tras el user testing al 6.º mes; SUS 72 → 84.
90 días después del rediseño de IA + onboarding.
Impacto del rediseño de form + error state + empty state.
Tasa de aprobación axe-core en todas las pantallas entregadas.
El presupuesto de performance se fija en la fase de diseño.
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
Entrevistas a stakeholders, 5-8 entrevistas en profundidad con usuarios, competitive audit + mapeo jobs-to-be-done; el espacio de problema se aclara primero.
Information architecture
Card sort + tree test + first-click test para navegación realmente comprendida; la taxonomía se construye 'desde fuera, no desde dentro'.
Design system (token-first)
Tokens Studio + Style Dictionary → Figma variables → código; color, tipografía, spacing, motion, radius, shadow y state desde una sola fuente.
Component library + pattern atlas
Button, form, nav, card, table, modal, toast, empty state; mapa de props + variant + a11y state + breakpoint responsive.
Prototipo high-fidelity
Prototipo interactivo en Figma + spec de micro-interacciones; prototipado de motion con Rive/Lottie; tech brief para Lenis/Framer Motion.
Operación de usability testing
Serie moderated de 5 usuarios + remote (Maze/Useberry/UserTesting); métricas de SUS, SEQ, task completion y time-on-task.
Auditoría de accessibility (WCAG 2.2)
axe-core + contrast manual + auditoría de keyboard y screen reader (NVDA/JAWS/VoiceOver); baseline AA, objetivo AAA; cumplimiento KVKK/EAA.
Design QA + visual regression
Chromatic / Percy / Playwright para visual regression; emparejamiento pixel Figma ↔ código + QA de anatomía de component.
Integración CRO
Sistema de variantes A/B-ready: 2-3 variantes de hipótesis por component listas en la fase de diseño; export para VWO/Optimizely.
Dev handoff + Storybook
Matriz de props/variant/state, spec de comportamiento, timing de motion, breakpoint responsive; Storybook + MDX doc vivos.
— BENEFICIOS
El cambio concreto en la experiencia de tu producto
Cuando research + sistema + test + accessibility + handoff se integran, el ROI no depende de una sola métrica.
Las barreras del usuario caen
Task completion sube, los support tickets bajan; el producto se vuelve 'comprensible' y la pérdida en onboarding disminuye.
La conversión crece
Con el sistema de variantes A/B-ready, la disciplina CRO empieza desde el diseño; los drop del funnel se corrigen de antemano.
Dev es más rápido
Token-first + Storybook + MDX handoff bajan claramente el tiempo de desarrollo por pantalla y reducen los errores.
Baja el riesgo legal de accessibility
Conformidad con WCAG 2.2 AA + EAA (European Accessibility Act 2025); cuando llega la auditoría, la evidencia está lista.
La consistencia de marca sube
Con el design system, la misma identidad + comportamiento en cada canal (web, app, email, social, sales deck); la confianza de marca crece.
Escalar es más fácil
Añadir nuevo producto / locale / mercado se mide en días, no en semanas, gracias al component library.
ENTREGABLES
Lo que recibes en cada engagement de UX
Paquete de setup + operación de 6 meses con una lista de entregables fija; cero sorpresas de coste extra.
Informe de diagnóstico UX
Analytics + session replay + heuristic audit + competitive benchmark; 40-60 páginas.
Hallazgos de user research
Transcripción + thematización de 5-8 entrevistas en profundidad, mapa de persona + JTBD.
Paquete de information architecture
Resultados de card-sort / tree-test, site map, user flow, libro de wireframes.
Biblioteca de design tokens
Color, type, spacing, motion, shadow, radius, z-index; Tokens Studio + Style Dictionary + export de código.
Component library (Figma + Storybook)
Button, form, nav, card, table, modal, toast, empty state + dark mode + breakpoint responsive + a11y state.
Pattern atlas + motion spec
Patrones de onboarding, search, filter, checkout, dashboard + ficheros de motion spec Rive/Lottie.
Prototipo high-fidelity
Prototipo interactivo en Figma + micro-interacciones; grabación + versión PDF para stakeholder review.
Informe de usability test
5-8 participantes moderated + 15+ remote, SUS/SEQ/task completion, insights + lista de acciones priorizada.
Auditoría de accessibility + remediation
Auditoría WCAG 2.2 AA/AAA, axe-core + test manual, plan de remediation, informe AR.
Presupuesto de performance
Objetivos LCP/INP/CLS, presupuesto de font + image + motion, estrategia de render + plan de monitoring.
Paquete de dev handoff
Storybook + MDX doc, matriz de props/variant/state, breakpoint responsive, checklist QA.
Runbook + formación + 3 meses de soporte
Runbook del design system, proceso de actualización de tokens, sesiones de formación Figma + code, 90 días de soporte.
— ALCANCE
Qué hacemos, qué no hacemos
El scope de ingeniería UX está escrito; evita sorpresas y facturas extra a posteriori.
Sí hacemos
- User research (interview + JTBD + analytics)
- Information architecture (card sort + tree test)
- Design token + component + pattern library
- Pipeline Figma variables → Style Dictionary → código
- Prototipo high-fidelity + spec de micro-interacciones
- Usability testing (moderated + remote)
- Auditoría WCAG 2.2 AA/AAA de accessibility + remediation
- Performance budget + objetivos LCP/INP/CLS
- Design QA + visual regression (Chromatic/Percy)
- Dev handoff Storybook + MDX + formación
- Sistema de variantes CRO (diseño A/B-ready)
- Runbook + 90 días de soporte
No hacemos
- Desarrollo front-end de la aplicación (con equipos partner)
- Diseño back-end / DB (se queda en el equipo de software)
- Estrategia de marca / logo (equipo de branding / engagement aparte)
- Copywriting / producción de contenido (sí hacemos UX copy review)
- Producción de icons / illustrations (bibliotecas de licencia + partner)
- Producción de fotografía / vídeo
- Producción mensual de pantallas a largo plazo (montamos el sistema y lo internalizas)
- Gestión del panel de user research o pago de incentivos (lab partner)
HOW WE WORK
Setup de 12-16 semanas, luego operación mensual del sistema
Semanas 1-2: discovery + stakeholder kickoff
Business goal, stakeholder interview, revisión de analytics/session replay, cierre del alcance y de las métricas objetivo.
Semanas 3-4: user research + JTBD
5-8 entrevistas en profundidad, transcripción + thematización, mapa de persona + jobs-to-be-done.
Semanas 5-6: IA + content audit
Card sort + tree test, user flow, mapa de wireframes, content audit + estrategia de copy.
Semanas 7-8: design system + token + component
Biblioteca de tokens, component inventory + pattern atlas, export Figma variables + Style Dictionary.
Semanas 9-10: diseño high-fidelity + prototype
Diseño high-fi de las pantallas principales + prototipo interactivo, spec de micro-interacciones + motion.
Semanas 11-12: usability test + auditoría a11y
User testing moderated + remote, auditoría WCAG 2.2 + remediation, control del performance budget.
Semanas 13-14: iteración + sign-off de stakeholders
Iteración a partir de los hallazgos del test, review final de stakeholders, preparación del Storybook + dev handoff.
Semana 15+: handoff + dev pipeline + soporte
Entrega de Storybook + MDX doc, sesiones de formación para dev, pipeline de design QA, sistema de variantes CRO + 90 días de soporte.
— STACK DE HERRAMIENTAS
Herramientas que usamos — vendor-agnósticas pero con criterio
Elegimos lo adecuado para cada cliente; mantenemos nuestra independencia no cobrando comisión.
DESIGN & PROTOTYPING
RESEARCH & TESTING
ACCESSIBILITY & QA
HANDOFF & ANALYTICS
QUESTIONS
Frequently asked
— GLOSARIO
Conceptos base de la ingeniería UX
El idioma común para tus equipos de diseño, desarrollo y producto.
- Jobs-to-be-Done (JTBD)
- Framework para definir el trabajo (job) concreto que el usuario quiere realizar al usar un producto; en lugar de persona, orientado a comportamiento y contexto.
- Information Architecture (IA)
- Organización del contenido y las funciones de un producto para que encajen con el modelo mental del usuario; se valida con card sort + tree test.
- Design Token
- Expresión en variables platform-agnostic de decisiones de diseño (color, tipografía, spacing, motion); se distribuye desde una sola fuente con el pipeline Figma variables + Style Dictionary + código.
- Design System
- Conjunto de capas de token + component + pattern + guideline + governance; única fuente de verdad para diseño y desarrollo.
- WCAG 2.2
- Web Content Accessibility Guidelines 2.2; criterios de éxito en niveles A, AA y AAA; 9 criterios nuevos (2023) en teclado, focus, drag y target size; AA como baseline del sector.
- System Usability Scale (SUS)
- Escala que puntúa la usabilidad de una interfaz de 0 a 100 mediante un cuestionario estándar de 10 ítems; > 68 por encima de la media, > 80 umbral de excelencia.
- Single Ease Question (SEQ)
- Métrica de una sola pregunta que mide la dificultad percibida en una escala de 1-7 justo después de completar una tarea; complementa al SUS a nivel de tarea.
- Largest Contentful Paint (LCP)
- Momento en el que el contenido visual principal de la página se vuelve visible al usuario (Core Web Vitals); < 2.5s bueno. En la fase de diseño se controla con el presupuesto de font + image + render.
- Interaction to Next Paint (INP)
- Valor pico del tiempo hasta el siguiente procesamiento tras una interacción de usuario (Core Web Vitals); < 200ms bueno. Sucesor de FID desde 2024.
- Storybook
- Herramienta para desarrollar + documentar + QA de components en entorno aislado; con MDX, la documentación del handoff diseño-desarrollo vive en tiempo real.
- Visual Regression Testing
- Verificación automatizada con Chromatic / Percy / Playwright de que los componentes UI siguen siendo visualmente iguales tras cambios de código; previene el design drift.
- European Accessibility Act (EAA)
- Directiva de accesibilidad de la UE que entró en vigor el 28 de junio de 2025; obliga a cumplir WCAG 2.2 AA en e-commerce, banca, transporte y telco.
— ÁRBOL DE DECISIÓN
¿Es adecuada para ti la operación de ingeniería UX?
Responde 4 preguntas con Sí/No; que el resultado quede claro.
01 / 04
¿Tienes un producto digital live (web/app/SaaS) o un plan de lanzamiento en 3-6 meses?
Umbral mínimo para que la operación research + sistema + test + handoff tenga ROI.
— LET'S BEGIN
Pasemos el diseño de la suposición al aprendizaje.
En un diagnostic UX de 1 hora analizamos tu flujo actual con las lentes de analytics + heurística + a11y, y te enseñamos los supuestos más arriesgados y los quick-wins.