Un producto propio para auditorías UX rápidas y basadas en evidencia
Impacto: Auditoría UX completa en menos de 10 minutos
Stack
- Figma
- VS Code
- GitHub
Resumen del proyecto
Los diseñadores suelen dejar la accesibilidad, la heurística y la psicología del diseño para el final, o directamente las ignoran. No existe una herramienta rápida para consultar estos fundamentos de forma contextualizada al tipo de producto que se está diseñando. UX QuickAudit resuelve esto: selecciona el tipo de producto y el foco, y obtén argumentos técnicos listos para copiar y pegar en cualquier documento. Sin registro, sin plugins, sin fricción, 96 puntos de auditoría únicos que combinan heurística, accesibilidad WCAG y psicología del diseño.
Reto
La capa visual suele acaparar toda la atención en el proceso de diseño, así que la accesibilidad y la usabilidad a menudo se posponen o se omiten. Falta de herramientas contextualizadas: aunque existen las reglas de NNGroup o W3C, no están organizadas por tipo de producto ni en un formato directamente utilizable. El objetivo no era solo informar, sino capacitar al diseñador para justificar decisiones con una base técnica, no solo estética.
Mi rol · Diseño de producto y desarrollo Front-End · En solitario: definición del framework, diseño de UI, construcción.
Objetivos
Objetivos de producto
- Crear una herramienta de consulta rápida sin fricción
- Demostrar criterio UX y capacidades de desarrollo frontend
- Lanzar un producto funcional y escalable
Objetivos de usuario
- Obtener puntos de auditoría relevantes para su tipo de producto en segundos
- Justificar decisiones de diseño con una base técnica en presentaciones
- Copiar argumentos directamente sin tener que redactarlos desde cero
Herramientas
- HTML, CSS, JavaScript: manipulación del DOM y gestión de estado con JSON.
- Enfoque modular: estructura de componentes reutilizable y escalable.
- Despliegue: publicado y disponible en GitHub Pages.
1. Decisiones de producto
Se eligieron cuatro tipos de producto (landing page, ecommerce, dashboard y formulario) por ser los más comunes en el mercado UX/UI y tener necesidades de usabilidad distintas.
Las tres categorías de auditoría (heurística y usabilidad, accesibilidad WCAG y psicología del diseño) cubren los aspectos que más se pasan por alto en el día a día.
El informe copiable fue una funcionalidad central desde el inicio para garantizar utilidad real: no solo un sitio de referencia pasivo, sino una herramienta que los diseñadores pueden usar directamente en presentaciones y documentación.
| Problema identificado | Decisión de diseño | Impacto esperado |
|---|---|---|
| Las herramientas genéricas no contextualizan las reglas | 4 tipos de producto × 3 focos = 96 puntos de auditoría únicos | Resultados relevantes para cada contexto de diseño |
| Las fuentes de referencia están dispersas | Cada punto enlaza directamente a NNGroup, Laws of UX o W3C | Base científica y credibilidad para cada argumento |
| El resultado debe poder usarse fuera de la herramienta | Informe "Copiar al portapapeles" con un solo clic | Utilidad real: el diseñador usa el resultado directamente |
| Mantener el proyecto ligero | JavaScript puro sin frameworks: arquitectura data.js + app.js | Rendimiento instantáneo y código mantenible |
2. Flujo de usuario
- Paso 1: Selección de producto: El usuario elige el tipo de producto (landing page, ecommerce, dashboard o formulario). Cada selección filtra el contenido al instante.
- Paso 2: Selección de foco: El usuario selecciona el área de auditoría. La combinación de producto + foco determina el contenido (8 tarjetas específicas por combinación, 96 puntos en total).
- Paso 3: Revisión de tarjetas: Se renderizan 8 tarjetas dinámicamente. El usuario marca las relevantes para incluirlas en el informe.
- Paso 4: Generación del informe: Al hacer clic en "Copiar informe seleccionado" se copia solo el contenido marcado al portapapeles, incluyendo categoría, título y argumento técnico.
3. Estructura de las tarjetas
- Cada tarjeta combina una regla de usabilidad aplicada al producto, puntos relevantes de accesibilidad WCAG y un argumento técnico listo para copiar.
- Las fuentes enlazan directamente a Nielsen Norman Group, Laws of UX y W3C.
- La estructura es modular: añadir nuevos productos o categorías no requiere reescribir la lógica.
4. Desarrollo técnico
El mayor reto fue la lógica de filtrado y la adaptación responsive para todos los dispositivos.
Se eligió una arquitectura de componentes escalable en JavaScript puro para mantener el proyecto ligero y demostrar dominio del lenguaje base.
- index.html: estructura semántica del sitio.
- style.css: hoja de estilos principal con diseño responsive.
- app.js: lógica de interacción y gestión del DOM.
- data.js: objeto estructurado con todo el contenido de auditoría.
- assets/: iconos SVG y recursos visuales.
- README.md + LICENSE: documentación y licencia MIT.
- Separación de responsabilidades: El contenido vive en data.js como un objeto JS exportado, no está hardcodeado en el HTML. app.js escucha eventos y renderiza las tarjetas dinámicamente.
- Rendimiento: Los datos se cargan al inicio, haciendo que las transiciones entre productos y focos sean instantáneas sin peticiones asíncronas.
a) Entregables clave
UX QuickAudit es una herramienta funcional y en producción que permite auditar la experiencia de usuario de cualquier producto digital en menos de 10 minutos, cubriendo 96 puntos de evaluación organizados por categoría. Construida enteramente con HTML, CSS y JavaScript puro sin frameworks, demuestra que el criterio de diseño y la ejecución técnica pueden convivir sin depender de stacks tecnológicos complejos.
b) Aprendizajes de diseño
Construir una herramienta que yo misma uso cambió mi forma de entender el diseño de producto. La decisión de evitar frameworks no fue solo técnica, fue una cuestión de disciplina de diseño: si no puedes controlarlo sin React, no lo entiendes del todo. También aprendí que documentar tu propio proyecto es más difícil que documentar el de un cliente: es fácil asumir contexto que el lector no tiene, lo que te obliga a ser más explícita y honesta sobre las decisiones tomadas.
c) Próximos pasos
- Integrar analítica para medir el uso real y validar si los 96 puntos de evaluación se distribuyen de forma equilibrada o si ciertas categorías se ignoran.
- Desarrollar una función de informe exportable (PDF o JSON) para que los resultados de auditoría se puedan compartir fácilmente con equipos o clientes.
- Añadir una capa de priorización de hallazgos (crítico / alto / mejora) para que el resultado sea más accionable y no solo diagnóstico.
Resultado
Herramienta funcional, publicada y accesible sin instalación ni registro. Cubre los 4 tipos de producto digital más frecuentes en el mercado UX/UI. Genera argumentos técnicos basados en NNGroup, Laws of UX y W3C listos para usar. Próxima iteración: buscador de recursos, directorio ampliado y analítica para medir el uso real.
