Negocio
Qué necesita conseguir la marca: leads, reservas, ventas, solicitudes, claridad, retención o confianza.
KOA · UX Estratégico
De detectar fricción a diseñar una experiencia con criterio.
Este documento ordena la teoría, los pasos y los recursos internos para convertir una web, app o producto digital confuso en un sistema claro: qué se analiza, cómo se decide, qué se diseña y qué recibe el cliente.
AuditarMirar la experiencia actual con criterio, no con gustos.
DiagnosticarTraducir fricciones en decisiones priorizadas.
EstructurarOrdenar contenidos, flujos, jerarquía y navegación.
WireframearDiseñar la lógica antes de embellecer la interfaz.
SistematizarConvertir decisiones en componentes, estados y reglas.
00 · Base del servicio
UX Estratégico no es hacer pantallas bonitas. Es diseñar decisiones.
La experiencia de usuario se trabaja antes de diseñar la estética final. Sirve para conectar objetivos de negocio, necesidades reales del usuario, contenido y comportamiento de interfaz.
Usuario
Qué necesita entender, comparar, decidir o sentir la persona que entra en la página o producto.
Contenido
Qué información aparece, en qué orden, con qué jerarquía y con qué nivel de detalle.
Interfaz
Cómo se materializa todo: navegación, componentes, microcopy, estados, CTA, formularios y ritmo visual.
Idea interna KOA: cuando una pantalla no funciona, casi nunca es solo por estética. Puede fallar la promesa, el orden, el contexto, la confianza, el esfuerzo cognitivo o la acción esperada.
01 · Principios UX que usamos como filtro
Antes de opinar, pasamos la interfaz por principios.
Esto evita discusiones del tipo “me gusta / no me gusta”. La pregunta correcta es: ¿ayuda a la persona a entender, decidir y avanzar con menos esfuerzo?
La interfaz debe reducir incertidumbre
Una persona entra con una tarea, una duda o una intención. El UX ordena el camino para que no tenga que adivinar: dónde está, qué puede hacer, qué significa cada opción, qué pasará después y cómo corregir si se equivoca.
Traducción KOA: cuanto más tenga que pensar el usuario en la mecánica de la página, menos energía le queda para decidir si confía, compra o contacta.
Visibilidad del estado
El usuario debe saber qué está pasando: carga, progreso, error, éxito, paso actual o disponibilidad.
Lenguaje humano
La interfaz debe hablar como habla la persona, no como habla el equipo interno o el plugin.
Control y salida
Volver atrás, editar, cancelar o corregir no debería dar miedo ni perder información.
Consistencia
Los patrones se repiten: mismo estilo de CTA, mismos estados, misma lógica de navegación.
Prevención de errores
Mejor prevenir que explicar después. Formularios claros, restricciones visibles y ayudas contextuales.
Reconocimiento > memoria
No obligamos a recordar datos, pasos o categorías. Lo importante debe estar disponible cuando hace falta.
Jerarquía y foco
Una pantalla no puede pedir cinco decisiones importantes a la vez. Hay una prioridad por tramo.
Ayuda útil
La ayuda aparece donde se necesita: FAQ, microcopy, estados de error, ejemplos o explicación de opciones.
Usabilidad
¿Se entiende y se puede usar sin esfuerzo innecesario?
Utilidad
¿Resuelve una necesidad real o solo ocupa espacio?
Deseabilidad
¿La experiencia transmite confianza, valor y personalidad?
Viabilidad
¿Se puede mantener, implementar y escalar sin volverse un monstruo?
02 · Investigación ligera
No siempre hace falta un gran estudio. Sí hace falta evidencia.
En proyectos de KOA, muchas veces trabajamos con investigación ligera: suficiente para tomar mejores decisiones sin bloquear el proyecto durante meses.
Qué nos dice el comportamiento
- Páginas de entrada y salida.
- Eventos de conversión.
- Dispositivos principales.
- Búsquedas internas, scroll, clics o formularios.
- Consultas de Search Console si hay intención orgánica.
Qué dudas se repiten
- Preguntas frecuentes reales.
- Mensajes de WhatsApp, emails o DM.
- Objeciones comerciales.
- Comentarios de soporte.
- Reseñas, quejas o testimonios.
Qué condiciona la decisión
- Precio y nivel de riesgo percibido.
- Urgencia de la necesidad.
- Comparación con alternativas.
- Complejidad del servicio o producto.
- Confianza previa en la marca.
Regla práctica: si no tenemos usuarios para entrevistar, buscamos señales. Si no hay datos, usamos hipótesis explícitas. Lo importante es no disfrazar de certeza lo que todavía es intuición.
03 · Ruta completa
Del problema difuso al sistema diseñado.
Esta es la ruta madre. No todos los proyectos necesitan recorrerla entera, pero nos sirve para explicar qué hacemos y dónde empieza o termina cada modalidad.
Auditoría UX
Miramos lo que existe: estructura, navegación, mensajes, flujos, conversión, accesibilidad y fricción.
Diagnóstico
Convertimos observaciones en hallazgos, severidad, oportunidades y prioridades.
Estrategia UX
Definimos objetivo, usuarios, tareas, promesa, journey, arquitectura y criterios de decisión.
Wireframes
Diseñamos el flujo y la jerarquía antes de vestir visualmente la interfaz.
UI system
Ordenamos componentes, estados, reglas visuales, microcopy y patrones reutilizables.
Briefing operativo
Dejamos el sistema listo para diseñar, desarrollar, medir y evolucionar sin improvisar.
04 · Auditoría UX
La auditoría no es una opinión estética. Es una lectura estructurada de la experiencia.
Sirve para saber qué está pasando ahora, qué impide avanzar al usuario y qué cambios tendrían más impacto antes de rediseñar todo.
A01Recogida de contextoObjetivos, público, canales, datos, limitaciones y expectativas.
Qué pedimos
- Objetivo principal de la página o producto.
- Acceso a Analytics/Search Console si aplica.
- Brief de negocio, campañas, embudos o histórico.
Qué buscamos
- Desalineaciones entre negocio y experiencia.
- Promesas poco claras.
- Fricciones ya detectadas por el equipo.
Salida
Mapa inicial de hipótesis: qué creemos que puede estar fallando y qué necesitamos comprobar.
A02Revisión heurísticaEvaluación experta de usabilidad, claridad, consistencia y control.
Criterios
- Visibilidad del estado.
- Consistencia y estándares.
- Prevención de errores.
- Reconocimiento antes que memoria.
- Ayuda, recuperación y claridad.
Preguntas
- ¿El usuario sabe dónde está?
- ¿Sabe qué puede hacer ahora?
- ¿Entiende qué pasará después?
- ¿Puede corregir o volver atrás?
Salida
Listado de hallazgos con evidencia, severidad y recomendación de mejora.
A03Análisis de flujoDe entrada a conversión: dónde se corta el camino.
Miramos
- Primer impacto y promesa.
- Secuencia de información.
- CTA y puntos de decisión.
- Formularios, checkout o reserva.
Detectamos
- Saltos lógicos.
- Información fuera de lugar.
- Demasiadas decisiones a la vez.
- Acciones sin contexto.
Salida
Mapa de flujo actual con puntos de fricción, abandono o duda.
A04Accesibilidad y UI básicaLectura funcional: contraste, tamaños, estados, foco, legibilidad.
Checklist
- Contraste suficiente en textos y CTA.
- Tamaños legibles en móvil.
- Estados hover, focus, error y éxito.
- Tap targets cómodos.
No es
No es una auditoría legal completa de accesibilidad, salvo que se contrate como alcance específico.
Salida
Recomendaciones UI prácticas para evitar que la interfaz sea bonita pero incómoda.
05 · Diagnóstico
Un buen diagnóstico no dice “esto está mal”. Dice qué cambiar, por qué y en qué orden.
Aquí transformamos el análisis en decisiones. Es la parte que más valor percibe el cliente porque deja de sentir caos y empieza a ver un plan.
| Severidad | Qué significa | Ejemplo | Prioridad |
|---|---|---|---|
| 0 | No es problema UX. | Preferencia estética sin impacto funcional. | Baja |
| 1 | Molestia menor. | Texto largo pero comprensible. | Cuando haya margen |
| 2 | Fricción moderada. | CTA poco visible o sección mal ordenada. | Próxima iteración |
| 3 | Problema importante. | El usuario no entiende qué contratar o cómo avanzar. | Alta |
| 4 | Bloqueo crítico. | Formulario roto, checkout confuso, acción clave invisible. | Urgente |
Alto impacto / Bajo esfuerzo
Quick wins. Cambios que deberían entrar primero.
Alto impacto / Alto esfuerzo
Proyecto. Requiere planificación, diseño o desarrollo.
Bajo impacto / Bajo esfuerzo
Mejoras de limpieza. Se agrupan por eficiencia.
Bajo impacto / Alto esfuerzo
No prioritario. Se evita salvo que haya una razón estratégica.
Regla interna: no entregamos una lista infinita de problemas. Entregamos un mapa de decisiones: qué arreglar ya, qué rediseñar, qué medir y qué dejar fuera.
06 · Diseño UX Estratégico
Cuando la auditoría detecta el problema, el UX Estratégico diseña el nuevo camino.
Aquí ya no estamos solo evaluando. Estamos tomando decisiones sobre estructura, flujo, contenidos, jerarquía y sistema de interfaz.
Objetivo de experiencia
Qué tiene que conseguir la persona usuaria y qué necesita conseguir la marca. Si hay varios objetivos, se jerarquizan.
Secuencia de comprensión
Qué se cuenta primero, qué se demuestra después y cuándo aparece la conversión.
Modelo de navegación
Cómo se moverá el usuario: menú, rutas internas, filtros, pasos, categorías, buscador o navegación contextual.
Diseñar por bloques sueltos
Cada sección debe responder a una función dentro del recorrido, no a “meter algo bonito”.
Copiar referencias sin criterio
Una referencia visual puede inspirar, pero no sustituye al análisis de necesidad, contexto y uso.
Confundir conversión con insistencia
Un CTA repetido sin contexto no convierte mejor. La conversión necesita confianza y claridad.
Contenido real
Promesa, servicios, precios orientativos, objeciones, pruebas, recursos y límites de lo que se puede contar.
Datos o señales
Analytics, feedback comercial, preguntas frecuentes, mensajes de clientes, sesiones grabadas o comportamiento del equipo de ventas.
Decisor claro
Alguien que pueda validar prioridades. Si todo el mundo decide, nadie decide.
07 · Contenido y microcopy
La experiencia también se diseña con palabras.
Muchas fricciones no están en el layout, sino en el texto: promesas vagas, botones genéricos, formularios fríos, etiquetas confusas o información clave escondida.
Qué debe resolver el contenido
Momento
Entrada
Comprensión
Confianza
Decisión
Acción
Pregunta
¿Estoy en el sitio correcto?
¿Qué ofrecen exactamente?
¿Por qué debería creerlo?
¿Esto encaja conmigo?
¿Qué hago ahora?
Contenido
Promesa clara
Oferta y estructura
Prueba, casos, proceso
Precios, alcance, FAQ
CTA y siguiente paso
Palabras pequeñas, impacto grande
EtiquetaDebe explicar qué dato se pide. Evitar placeholders como única etiqueta.
AyudaAclara formato, criterio o expectativa: “Te responderemos en 24–48h”.
ErrorDebe decir qué ha pasado y cómo corregirlo, no “campo inválido”.
BotónDebe anticipar la acción: “Enviar solicitud”, “Reservar llamada”, “Descargar guía”.
ÉxitoConfirma la acción y explica el siguiente paso.
Regla KOA: si un texto no ayuda a entender, confiar, comparar o actuar, probablemente es decoración verbal.
05 · Arquitectura y flujos
Antes de diseñar pantallas, diseñamos el mapa mental.
La arquitectura de información decide cómo se agrupa, nombra, ordena y conecta el contenido para que el usuario no tenga que adivinar.
Mapa de flujo ejemplo
Entrada
GoogleInstagramNewsletterRecomendación
Comprensión
HeroPropuesta poco claraPrueba socialServicios
Decisión
ComparativaFAQCTA tardeFormulario
Salida
LeadReservaDescargaAbandono
Checklist de arquitectura
09 · Wireframes
El wireframe es la conversación incómoda antes de maquillar el problema.
Nos permite validar orden, jerarquía, intención, ritmo y acciones sin distraernos con colores, fotos o detalles finales.
Landing: promesa, prueba, objeciones, CTA.
Ficha: información, confianza, decisión.
Formulario: pasos, claridad, error, éxito.
Regla KOA: un wireframe no es un boceto bonito. Cada bloque debe poder defenderse con una frase: “esto está aquí porque…”
10 · Criterio UI
La UI debe acompañar la decisión, no competir con ella.
Aquí recogemos reglas internas para que la parte visual sea usable, coherente y elegante. Nada de tipografías gigantes si no ayudan. Nada de efectos que tapen el contenido.
Tamaños contenidos
- H1: potente, pero legible.
- H2: editorial sin ocupar media pantalla.
- Texto: mínimo 15–16 px en desktop.
- Line-height cómodo: 1.45–1.65.
Que se vea siempre
- No texto gris sobre fondos lavados.
- CTA con contraste real.
- Estados visibles: hover, focus, error.
- No depender solo del color.
Menos ruido visual
- Un recurso visual por idea.
- Sombras suaves, no “cartoon”.
- Fondos con intención, no decoración vacía.
- Animación ligera y funcional.
11 · Accesibilidad como criterio base
Accesible no es “extra”. Es que la interfaz funcione para más personas.
No todos los proyectos incluyen una auditoría legal completa de accesibilidad, pero el criterio UX/UI debe respetar mínimos: legibilidad, contraste, navegación, foco, errores y alternativas.
Perceptible
La información debe poder percibirse: texto legible, contraste, alternativas para imágenes y contenido no dependiente solo del color.
Operable
La interfaz debe poder usarse: teclado, foco visible, targets cómodos, formularios navegables y sin trampas.
Comprensible
El contenido y la interacción deben ser claros: etiquetas, instrucciones, errores, orden lógico y lenguaje humano.
Robusta
La experiencia debe aguantar distintos dispositivos, navegadores, tecnologías de asistencia y cambios futuros.
Checklist mínimo KOA: contraste real, foco visible, texto no demasiado pequeño, formularios con labels, errores comprensibles, botones con estados, navegación móvil clara y no ocultar información esencial en animaciones.
12 · Métricas UX
Lo que no se mide se convierte en debate eterno.
Las métricas no sustituyen al criterio, pero ayudan a comprobar si las decisiones mejoran la experiencia. No todo proyecto necesita medirlo todo: elegimos 3–5 señales útiles.
ResultadoLeads, ventas, reservas, solicitudes, altas, descargas o llamadas.
FlujoAvance por pasos, abandono de formulario, checkout, búsqueda o reserva.
ComprensiónClics en FAQ, scroll hasta secciones clave, uso de filtros, interacción con comparativas.
CalidadErrores, campos fallidos, rebotes cualificados, consultas repetidas o tickets.
PercepciónFeedback comercial, encuestas breves, objeciones, reseñas o comentarios directos.
No mirar una métrica sola
- Más tiempo en página puede ser interés o confusión.
- Más clics puede ser exploración o dificultad para encontrar algo.
- Menos leads puede ser peor conversión o mejor filtrado.
- Una mejora visual no siempre mejora negocio si no cambia el flujo.
- Las métricas deben leerse junto a contexto, dispositivo, fuente y objetivo.
Regla KOA: antes de rediseñar, definir qué señal demostraría que la experiencia ha mejorado.
13 · Entregables
Qué recibe el cliente según el alcance.
Esto ayuda a presupuestar y explicar valor. El entregable no debe ser “un PDF bonito”, sino una herramienta para decidir y ejecutar.
Diagnóstico accionable
- Resumen ejecutivo.
- Mapa de fricciones.
- Evaluación heurística.
- Mapa de flujo actual.
- Matriz severidad / impacto.
- Quick wins priorizados.
- Sesión de devolución.
Sistema de experiencia
- Todo lo anterior.
- Objetivos UX y criterios de decisión.
- Arquitectura de información.
- Journey y flujos clave.
- Wireframes comentados.
- Microcopy base.
- Briefing para diseño/desarrollo.
Base visual operativa
- Componentes principales.
- Estados de botones/formularios.
- Jerarquía tipográfica.
- Reglas de espaciado.
- Patrones responsive.
- Notas de accesibilidad.
- Guía de uso interno.
14 · Recursos visuales
Plantillas internas para pensar mejor.
Estos recursos pueden copiarse a Notion, Figma, Canva o a un documento de propuesta. Sirven para reuniones, auditorías y devolución al cliente.
NegocioObjetivo, conversión, prioridad, restricciones, métricas.
UsuarioNecesidades, tareas, dudas, nivel de conocimiento, objeciones.
ContenidoMensajes, jerarquía, prueba, FAQ, llamadas a la acción.
InterfazNavegación, componentes, estados, accesibilidad, responsive.
Rojo · bloquea
Impide entender, avanzar, comprar, reservar, contactar o confiar.
Ámbar · frena
Genera dudas, esfuerzo extra o decisiones poco claras.
Verde · ayuda
Hace el camino más claro, comprensible, cómodo o persuasivo.
Lo visibleColor, tipografía, tarjetas, animaciones, composición.
Lo estructuralArquitectura, navegación, jerarquía, contenido, componentes.
Lo estratégicoObjetivo, usuario, intención, restricciones, confianza, decisión.
Heurísticas
Reglas de usabilidad para revisar interfaces sin quedarnos en opinión estética.
WCAG
Principios de accesibilidad para contrastes, foco, formularios y comprensión.
Service Design
Mirar la experiencia completa: antes, durante y después de la pantalla.
Design Systems
Componentes, estados, patrones y reglas para no diseñar cada pieza desde cero.
15 · Cómo explicarlo al cliente
Frases útiles para venderlo sin sonar a humo.
El cliente no compra “UX”. Compra claridad, conversión, orden, menos improvisación y una web/producto que tenga sentido.
La auditoría UX nos permite saber qué está fallando antes de proponer soluciones. No se trata de rediseñar por rediseñar, sino de detectar dónde hay fricción y qué cambios pueden tener más impacto.
El Diseño UX Estratégico convierte esa lectura en una estructura clara: qué debe ver el usuario, en qué orden, con qué mensajes y qué acciones necesita para avanzar sin perderse.
Antes de diseñar visualmente, definimos la lógica de la experiencia. Así evitamos invertir en una interfaz bonita que luego no convierte o no se entiende.
No entregamos un documento decorativo. Entregamos decisiones, flujos, wireframes y criterios para que el proyecto pueda ejecutarse con menos dudas y más foco.
Cierre interno
El valor no está en “hacer UX”. Está en pensar antes de diseñar.
Este manual debe servir para explicar el servicio, preparar reuniones, auditar proyectos, presupuestar alcances y construir entregables que el cliente pueda entender y ejecutar.