Estudio de caso2026BoliviaPreservación cultural
Junto a otras personas, limpiando un producto con identidad fracturada, tokens desconectados y un blog sin salida. Lo audité, lo investigué con usuarios, lo rediseñé.
| Antes | Después |
|---|---|
| Logo diferente por sección | Identidad visual consistente |
| Tokens fuera del archivo de compilación | Sistema de tokens migrado y documentado |
| Navegación con href="#" - sin funcionalidad | Navegación funcional con ARIA semántico |
| Blog sin estructura - dead ends al final | Grid responsivo + navegación contextual |
| lang="es" unilateral | lang="qu" explícito + ARIA en componentes clave |
| Usuario | Edad / Dispositivo | Tarea 1 - Descubribilidad | Tarea 2 - Interfaz | Tarea 3 - Compartir |
|---|---|---|---|---|
| Belén | 26 / Desktop | Éxito rápido - ruido visual | Menú sobredimensionado | Fracaso - flujo inexistente |
| Juan Pablo | 20 / Mobile | Éxito tardío - alta fricción | Bugs críticos presentes | Fracaso - distracción |
| Pedro | 25 / Desktop | Abandono - recurrió a Google | Enrutamiento roto | Éxito manual - copió URL |
| Camila | 23 / Desktop | Éxito intermedio - fatiga | Sin estructura editorial | Abandono - densidad textual |
| Diego | 28 / Mobile | Alta fricción cognitiva | Sin resúmenes visibles | Bajo engagement |
"Tuve que buscarlo en Google porque desde la app no encontraba cómo volver al blog."
- Pedro, 25, usuario técnico avanzado
Sin navegación contextual al final de cada artículo. Única salida: el botón "atrás".
Tarjetas sin jerarquía generaban fatiga de decisión antes de que el usuario llegara a leer.
Ningún participante logró compartir un artículo desde la interfaz. Uno copió la URL manualmente.
Logos distintos, tokens incorrectos, favicon ausente. Sin coherencia visual sostenida.
Migré la paleta oficial al archivo correcto, eliminé los hexadecimales manuales y documenté la paleta formal. La paleta qumir, caramel, yawar - ahora como tokens, no como valores sueltos.
Grid responsivo con breakpoints (1/2/3 columnas), contenedores de aspecto fijo 16:10, extracto de ~140 caracteres y tiempo estimado de lectura visible en cada tarjeta.
Web Share API con fallback al portapapeles en browsers sin soporte nativo. Toast accesible con role="status" como confirmación. Un participante había copiado la URL manualmente de la barra de direcciones.
Migración a rutas slug-based con navegación contextual al final de cada artículo. Beneficio doble: usabilidad y SEO. Los dead ends quedaron eliminados.
Etiquetado explícito con lang="qu" en bloques de contenido quechua, ARIA labels y roles semánticos en navegación. Preservar una lengua originaria implica que sea accesible para todos - incluyendo quienes usan tecnología asistiva.
"Preservar una lengua originaria implica que sea accesible para todos - incluyendo quienes usan lectores de pantalla."
- Decisión de diseño n°05