UX Audit Dashboard
Auditoría UX integral de las webs mobile del Ministerio de Agricultura Pesca y Alimentación (MAPA.es, Caminos Naturales, Alimentos de España). Una plataforma que es a la vez herramienta de análisis y fuente única de verdad para todas las incidencias detectadas.
- Incidencias documentadas
- 75+
- Webs auditadas
- 3
- Pantallas analizadas
- 47
- Métodos de análisis
- 4
Contexto
Auditoría UX desde cero: crear la metodología y el tool
El cliente pidió una auditoría UX integral de las versiones mobile de tres webs del Ministerio: MAPA, Alimentos de España y Caminos Naturales. .
Necesitábamos:
- Una metodología clara para auditar de forma consistente
- Una herramienta que fuera parte del análisis en sí mismo, no solo un repositorio
- Un lugar de verdad único donde recopilar todas las incidencias
- Capacidad de auditar automáticamente y manualmente
- Categorización y priorización estructurada de cada issue
- Acceso controlado para usuarios del ministerio
Así nació el dashboard: una plataforma que es simultáneamente herramienta de análisis (ejecuta auditorías automáticas), repositorio central (Notion como fuente de verdad) y interfaz de seguimiento (tracking de estados de resolución).
El desafío
De la auditoría ad-hoc a un proceso sostenible y escalable
El cliente necesitaba una auditoría UX integral de 3 webs móviles, pero el reto iba más allá: no existía precedente, metodología ni documentación previa. Era necesario construir desde cero un proceso auditable, documentado y escalable.
Las 5 preguntas estratégicas que definieron el alcance:
1. ¿Qué vamos a analizar?
Definir el alcance y criterios de auditoría:
- Accesibilidad: WCAG 2.1 Level AA (navegación, contraste, semántica ARIA)
- UX: flujos, arquitectura de información, jerarquía visual, microinteracciones
- UI: consistencia visual, sistemas de componentes, espaciado, tipografía
- Funcional: comportamientos, errores, estados especiales, validaciones
- Performance: carga percibida, renderizado, interactividad
2. ¿Cuál será el proceso de análisis?
Establecer una metodología dual eficiente:
- Análisis automático: ejecutado por scripts en paralelo (4 métodos simultáneos)
- Análisis manual: usuarios autorizados enriquecen con contexto y capturas
- Screenshots estandarizados (390×844px mobile, consistentes)
- Priorización basada en impacto: crítica (bloquea), alta (afecta flujo), media (mejora)
3. ¿Qué MCPs y APIs usaremos?
Seleccionar herramientas que automaticen el análisis:
- axe-core: detecta violaciones WCAG 2.1 en el DOM
- Claude AI (Anthropic): análisis visual y heurístico de UX/UI
- Playwright: automatiza capturas mobile consistentes
- Notion API: centraliza datos sin depender de herramientas externas
- Vercel Blob: almacena capturas con acceso seguro y controlado
4. ¿Cómo documentar de forma estructurada?
Crear un esquema consistente y auditable:
- ID único: UX-001, UX-002... (rastreable, ordenado)
- Campos obligatorios: título, categoría, prioridad, URL, captura, problema, solución, impacto
- Nomenclatura consistente (ej: "Form Input / Focus state / WCAG contrast")
- Historial completo de cambios y estados (Notion audita automáticamente)
5. ¿Cómo hacer que sea útil, sostenible y escalable?
Diseñar una solución que el cliente pueda mantener independientemente:
- Plataforma integrada: Next.js + Notion (sin herramientas adicionales)
- Autenticación y roles: solo usuarios autorizados del ministerio
- Dashboard de seguimiento: visualizar estado de cada issue en tiempo real
- Scripts reutilizables: para auditar nuevas versiones en el futuro
- Transferencia de propiedad: documentación interna y entrenamiento del equipo
Objetivos
Centralizar, priorizar y comunicar
- Una fuente única de verdad para todas las incidencias
- Clasificación estructurada (categoría, prioridad, estado)
- Captura de pantalla y descripción detallada de cada issue
- Vista de dashboard: resumen visual del estado general
- Integración con Notion como base de datos compartida
- API para conectar con herramientas de desarrollo
Solución
Un dashboard conectado a Notion
Construí un dashboard web conectado a la Notion API que actúa como interfaz unificada para gestionar auditorías UX de múltiples proyectos.
Arquitectura del sistema
Dashboard Web
Next.js + React. Interfaz para ver, crear y editar incidencias.
Notion API
Base de datos centralizada. Única fuente de verdad para todas las incidencias.
Almacenamiento
Vercel Blob para capturas de pantalla con acceso seguro.
Auditoría automática
Scripts para ejecutar auditorías con Lighthouse, axe-core, Playwright.
Dos modos de auditoría: automática y manual
Auditoría automática
El usuario introduce la URL de la página a analizar en el formulario. El sistema ejecuta automáticamente un script que analiza la pantalla en múltiples capas simultáneamente:
- Accesibilidad (axe-core): detecta violaciones WCAG 2.1 (colores, contraste, labels, estructura)
- Análisis visual (Claude AI): evalúa la interfaz, jerarquía visual, espaciado, alignment
- Análisis de código fuente: revisa la estructura HTML, atributos semánticos, data attributes
- Heurísticas de usabilidad: aplica principios de Nielsen, consistencia, visibilidad de estado
El script toma screenshots de 390×844px (mobile), ejecuta todos los análisis en paralelo, genera un ID único para cada issue (UX-001, UX-002...) y envía todo directamente a Notion.
Análisis manual
Los usuarios administradores del ministerio pueden crear incidencias manualmente, enriqueciendo el análisis automático con contexto específico y observaciones de UX:
- Acceder con autenticación de rol (solo usuarios autorizados del ministerio)
- Subir incidencias manualmente con captura de pantalla
- Llenar campos estructurados: título, categoría, prioridad, problema, solución, impacto
- Ver y actualizar el histórico de cambios
Sistema de categorización
Cada incidencia se clasifica en 4 categorías:
- UX: flujos de navegación, arquitectura de información, mental models
- UI: componentes, colores, tipografía, espaciado, consistencia visual
- Accesibilidad: WCAG, contraste, navegación por teclado, screen readers
- Funcional: bugs, comportamientos inesperados, errores de interacción
Priorización y seguimiento
Cada incidencia tiene:
- Prioridad: Crítica (bloquea uso), Alta (afecta flujo), Media (mejora)
- Estado modificable: to-do → in-progress → done (permite seguimiento de resolución)
- Impacto: usuarios afectados, gravedad de la barrera
- Resolución objetivo: 390×844 (solo mobile) o ambas (mobile + desktop)
Stack tecnológico: herramientas especializadas para cada análisis
Frontend
Next.js 16 + React 19 — Interfaz server-rendered. Tabla de incidencias, filtros, forms estructurados.
Screenshots
Playwright — Captura 390×844 (iPhone mobile). Ejecutado en CLI, genera imágenes para análisis.
Accesibilidad
axe-core — Detecta violaciones WCAG 2.1. Analiza DOM, estructura, atributos ARIA, contraste.
IA Visual
Claude AI (Anthropic) — Analiza screenshots para UX/UI: jerarquía, espaciado, consistencia, usabilidad.
Análisis de código
DOM Parser — Extrae estructura HTML, semántica, data attributes. Identifica problemas estructurales.
Base de datos
Notion API — Base de datos centralizada. Fuente única de verdad. Integración nativa con dashboard.
Almacenamiento
Vercel Blob — Screenshots privados con acceso controlado. URLs seguras para cada incidencia.
Autenticación
NextAuth.js — Control de acceso por rol. Solo usuarios del ministerio pueden crear/editar issues.
Evolución
Del concepto al producto usado en producción
Fase 1: Definición de metodología
Establecimiento de la metodología de auditoría. Definición de categorías, priorización y criterios de análisis. Configuración de Notion como fuente única de verdad para el ministerio.
Fase 2: Auditorías automáticas + manuales
Desarrollo de scripts de auditoría automática: axe-core, Claude AI, análisis de código fuente, heurísticas. Integración de formulario manual para que el ministerio suba incidencias directamente con capturas.
Fase 3: Auditoría de las 3 webs
Ejecución de auditoría UX integral de MAPA.es, Alimentos de España y Caminos Naturales (versión mobile 390×844). Generación de 75+ issues categorizados y priorizados.
Fase 4: Transferencia al ministerio
Dashboard activo en producción. El ministerio tiene acceso total: puede ver, actualizar estados, añadir análisis manual. Notion centraliza todo. Sistema listo para seguimiento de resolución y futuras auditorías.
Impacto
De cero documentación a auditoría integral y sostenible
Para el Ministerio
- 75+ incidencias documentadas en una plataforma única (no hojas de cálculo)
- Acceso controlado: solo usuarios autorizados del ministerio
- Visión clara de qué está resuelto, en progreso, o pendiente
- Metodología reproducible para futuras auditorías
Para el equipo de desarrollo
- Claridad sobre prioridades (crítica, alta, media)
- Contexto completo: problema + solución + impacto en cada issue
- Seguimiento de resolución: pueden actualizar el estado conforme avanzan
- Capturas de pantalla y detalles técnicos en cada incidencia
Para sostenibilidad futura
- Plataforma escalable: auditorías automáticas + análisis manual
- Análisis en profundidad: 4 métodos simultáneos (visual, código, accesibilidad, heurística)
- WCAG 2.1 medible: cada incidencia de accesibilidad está documentada
- Reutilizable para otros ministerios o proyectos públicos
«Una auditoría UX de cero requiere tres cosas: metodología clara (qué y cómo auditar), herramienta que sea parte del análisis (no solo repositorio), y acceso controlado (para que el cliente sea dueño del resultado).»
¿Necesitas auditar tu producto?
Cuéntame el reto y diseñamos la solución.