Qué es Design Thinking y cómo aplicarlo al diseño web

Hay una escena que se repite con bastante frecuencia durante el diseño de una página web.

Presentamos una propuesta, explicamos por qué el servicio principal aparece primero, por qué hemos reducido el menú y por qué el formulario se ha colocado después de responder las dudas más habituales.

Entonces alguien dice:

A mí me gusta más el otro diseño.

La opinión importa, por supuesto. El cliente conoce su empresa y debe sentirse representado por su web. El problema aparece cuando el proyecto se decide únicamente según los gustos de quienes están dentro del negocio y nadie se pregunta qué necesita la persona que llega desde fuera.

Una página puede encantarle a su propietario y resultar confusa para sus clientes. Puede tener unos colores preciosos, unas animaciones magníficas y un menú que solo entiende quien lleva quince años trabajando en la empresa.

Ahí es donde el Design Thinking aplicado al diseño web aporta una mirada muy útil: antes de decidir cómo quedará la página, debemos entender qué problema tiene que resolver, para quién la estamos construyendo y cómo comprobaremos que realmente funciona.

Qué es Design Thinking

Design Thinking es un enfoque utilizado para resolver problemas teniendo en cuenta tres dimensiones:

• lo que necesitan o desean las personas;
• lo que resulta técnicamente posible;
• lo que puede sostenerse dentro del negocio.

No consiste únicamente en crear diseños bonitos ni pertenece en exclusiva al diseño gráfico.

Puede aplicarse a productos, servicios, procesos y experiencias. En una página web sirve para ordenar decisiones que afectan a la estructura, los contenidos, la navegación, el diseño visual y las funciones.

IDEO lo define como un enfoque humano para resolver problemas complejos, equilibrando las necesidades de las personas, la viabilidad de la organización y las posibilidades de la tecnología. Puedes ampliar esta definición en su introducción oficial al Design Thinking.

Por qué encaja tan bien con el diseño web

Una web se encuentra en el punto de unión entre el negocio, la tecnología y las personas.

La empresa necesita presentar sus servicios, generar contactos, vender, informar o agilizar determinados procesos.

El usuario necesita comprender rápidamente:

• qué ofrece la empresa;
• si resuelve su necesidad;
• qué confianza merece;
• cuánto puede costar;
• qué tiene que hacer después;
• cómo contactar, comprar, reservar o solicitar información.

La tecnología debe conseguir que todo funcione desde distintos dispositivos, cargue correctamente, pueda mantenerse y no convierta cada pequeño cambio en una reparación.

Cuando una de estas tres partes se ignora, aparecen problemas.

Si solo pensamos en…	Qué puede ocurrir
Los gustos de la empresa	La web representa al propietario, pero el cliente no encuentra lo que necesita.
El usuario sin mirar el negocio	Se plantean soluciones atractivas que no ayudan a cumplir objetivos reales.
La tecnología	La página funciona, pero resulta fría, compleja o difícil de comprender.
El diseño visual	La presentación llama la atención, pero carece de contenido, estructura o recorrido.

La web no se diseña para que le guste al dueño

Esta frase puede sonar algo brusca, pero evita muchos errores.

El propietario debe reconocer su empresa en el diseño y aprobar el proyecto. Lo que no conviene es utilizar su gusto personal como único criterio.

Puede preferir:

• un carrusel con cinco mensajes;
• letras pequeñas porque parecen más elegantes;
• un vídeo ocupando toda la primera pantalla;
• un menú con cada departamento de la empresa;
• la historia completa del negocio antes de presentar los servicios;
• botones discretos que no alteren la composición.

El cliente que llega a la web puede necesitar justo lo contrario: un mensaje claro, una navegación sencilla, textos legibles y una forma evidente de avanzar.

El trabajo profesional no consiste en ignorar al cliente. Consiste en explicarle qué decisiones responden a preferencias personales y cuáles afectan a la comprensión o al funcionamiento de la página.

Las cinco fases de Design Thinking aplicadas a una web

La representación más conocida del proceso incluye cinco fases: empatizar, definir, idear, prototipar y probar.

No tienen que ejecutarse siempre como una cadena rígida. Podemos volver atrás, revisar una hipótesis o probar una idea antes de cerrar otra parte del proyecto.

Fase	Aplicación en diseño web
Empatizar	Comprender quién visita la web, qué busca y qué dificultades encuentra.
Definir	Concretar qué problema debe resolver la página.
Idear	Plantear distintas estructuras, contenidos y funciones.
Prototipar	Representar las soluciones antes de construirlas completamente.
Probar	Comprobar qué ocurre, detectar fallos y corregir.

Stanford d.school utiliza estos cinco modos como una forma práctica de trabajar, pero permite comenzar en distintos puntos y combinarlos según el problema. Puedes consultar su Design Thinking Bootleg.

1. Empatizar: comprender al usuario antes de dibujar la página

Empatizar no significa imaginar un personaje ficticio y atribuirle gustos al azar.

Significa investigar qué necesita la persona que utilizará la web y en qué contexto lo hará.

Podemos revisar:

• preguntas habituales de los clientes;
• correos y llamadas recibidas;
• consultas de Search Console;
• búsquedas internas;
• formularios abandonados;
• grabaciones y mapas de calor;
• páginas más visitadas;
• motivos por los que una propuesta se acepta o rechaza;
• dificultades que encuentra el equipo comercial.

También conviene distinguir entre lo que dice el usuario y lo que hace.

Una persona puede afirmar que quiere leer toda la información antes de contactar y, en la práctica, buscar el teléfono en cuanto entiende que la empresa ofrece el servicio.

Preguntas útiles durante esta fase

• ¿Qué problema trae al visitante hasta la web?
• ¿Qué sabe antes de llegar?
• ¿Qué palabras utiliza para describir su necesidad?
• ¿Qué dudas pueden impedirle avanzar?
• ¿Qué información necesita para confiar?
• ¿Desde qué dispositivo suele entrar?
• ¿Qué acción esperamos que complete?

2. Definir: pasar de una petición vaga a un problema concreto

Muchos proyectos comienzan con frases como:

Queremos una web más moderna.

Eso describe una preferencia, pero no define el problema.

Una formulación más útil sería:

Los visitantes no distinguen nuestros tres servicios principales y desde móvil tienen dificultades para encontrar el formulario.

Ahora podemos trabajar.

Otro ejemplo:

Petición inicial: necesitamos más movimiento y animaciones.

Problema posible: la página no establece una jerarquía clara y todos los bloques parecen tener la misma importancia.

La solución podría ser una animación. También podría consistir en eliminar contenido, cambiar el orden o escribir un título más preciso.

3. Idear: buscar alternativas antes de elegir una

Idear no significa añadir recursos llamativos porque la página parece demasiado sencilla.

Consiste en plantear distintas formas de resolver el problema definido.

Podríamos valorar:

• reorganizar el menú;
• agrupar servicios relacionados;
• crear una página específica;
• cambiar el orden de los bloques;
• reducir campos del formulario;
• mostrar precios orientativos;
• incorporar casos reales;
• simplificar las llamadas a la acción;
• explicar mejor el proceso;
• añadir un comparador o filtro;
• eliminar elementos que compiten entre sí.

En esta fase conviene permitir varias posibilidades antes de decidir.

La primera idea suele ser la más evidente, no necesariamente la mejor.

4. Prototipar: comprobar la idea antes de construirla entera

Un prototipo permite representar una solución con un nivel de detalle suficiente para revisarla sin haber desarrollado todavía todo el proyecto.

Puede ser:

• un esquema en papel;
• un wireframe;
• un mockup;
• una navegación simulada;
• una versión básica de una landing;
• un formulario sencillo;
• un bloque montado dentro de WordPress.

El nivel de detalle dependerá del riesgo y del tamaño del proyecto.

Un wireframe web ayuda a revisar estructura, orden y jerarquía. Un mockup web permite valorar colores, imágenes, tipografías y componentes.

No siempre hay que preparar una documentación enorme. En ocasiones es más rápido probar directamente una sección básica y revisarla con contenido real.

5. Probar: observar lo que ocurre y corregir

Una propuesta aprobada no se convierte automáticamente en una buena solución.

Hay que comprobar:

• si el usuario entiende el mensaje;
• si encuentra los servicios;
• si puede navegar desde móvil;
• si los botones explican su destino;
• si completa el formulario;
• si aparecen errores;
• si el contenido mantiene la atención;
• si las búsquedas que llegan son las adecuadas.

Las pruebas pueden realizarse antes y después de publicar.

Podemos utilizar:

• revisiones con usuarios;
• pruebas de tareas;
• Search Console;
• analítica web;
• mapas de calor;
• grabaciones de sesiones;
• formularios y conversiones;
• comparaciones antes y después;
• tests A/B cuando existe tráfico suficiente.

Nuestra guía sobre mapas de calor web explica cómo utilizar esos datos sin asumir que todas las zonas rojas son buenas y todas las frías sobran.

Ejemplo de Design Thinking aplicado a una página web

Imaginemos una empresa de reformas que solicita:

Una web moderna con movimiento y todos nuestros servicios.

Empatizar

Al revisar las llamadas y consultas descubrimos que sus clientes necesitan saber:

• si realizan reformas integrales o pequeñas reparaciones;
• en qué zonas trabajan;
• si preparan proyecto y permisos;
• cómo solicitar una visita;
• qué tipo de trabajos han realizado.

Definir

El problema no es que la web anterior parezca antigua.

El problema es que mezcla veinte servicios, no diferencia tipos de reforma y obliga a llamar para preguntar cosas básicas.

Idear

Se plantean distintas soluciones:

• agrupar servicios por tipo de proyecto;
• crear una página para reformas integrales;
• mostrar zonas de trabajo;
• añadir proyectos reales;
• simplificar el formulario;
• explicar cómo se prepara un presupuesto.

Prototipar

Se crea un wireframe de la portada y una maqueta de la página principal de servicio.

El cliente puede revisar el orden, los mensajes y el estilo antes de montar el resto.

Probar

Después de publicar se comprueba:

• qué servicios reciben visitas;
• dónde hacen clic los usuarios;
• si llegan al formulario;
• qué preguntas continúan repitiéndose;
• qué consultas aparecen en Search Console.

La web no se da por terminada porque el diseño haya sido aprobado. Se observa y se mejora.

Design Thinking no significa hacer todo lo que pide el usuario

Colocar a la persona en el centro no significa obedecer literalmente cada petición.

Los usuarios pueden:

• pedir una solución concreta sin conocer otras alternativas;
• decir una cosa y comportarse de otra forma;
• preferir aquello que ya conocen;
• no saber explicar qué les está bloqueando;
• confundir el síntoma con la causa.

Un visitante puede decir que quiere “más información”, cuando lo que necesita es una explicación más clara.

También puede pedir un chat inmediato, aunque el problema real sea que el teléfono aparece oculto y el formulario resulta interminable.

Escuchar significa investigar y comprender. No convertir cada comentario individual en una modificación automática.

El cliente del proyecto tampoco representa siempre al usuario

Dentro de la empresa se manejan palabras, procesos y estructuras que pueden resultar desconocidos para quien llega por primera vez.

Por eso aparecen webs organizadas según:

• departamentos internos;
• nombres técnicos de productos;
• abreviaturas;
• categorías que solo entiende el equipo;
• prioridades políticas dentro de la organización.

El usuario no necesita comprender el organigrama. Necesita localizar la solución adecuada.

Esto no significa borrar la identidad de la empresa. Significa traducirla para que pueda ser entendida desde fuera.

Cuándo aporta más valor este enfoque

Los principios de Design Thinking resultan especialmente útiles en:

• rediseños de webs que no están funcionando;
• negocios con varios tipos de cliente;
• servicios difíciles de explicar;
• tiendas online;
• procesos de reserva;
• formularios complejos;
• áreas privadas;
• plataformas con distintos perfiles de usuario;
• proyectos en los que deciden muchas personas;
• webs que han crecido sin una estructura planificada.

En una página corporativa sencilla no hace falta organizar un taller de tres días y repartir quinientos pósits.

Puede bastar con escuchar, ordenar el problema, plantear una estructura, preparar una propuesta y probarla.

Cuándo Design Thinking se convierte en teatro

La metodología pierde sentido cuando se utiliza para aparentar actividad sin tomar decisiones.

Algunas señales:

• reuniones interminables sin un problema definido;
• perfiles de usuario inventados sin datos;
• dinámicas creativas que no cambian nada;
• prototipos que nadie prueba;
• documentación más grande que el propio proyecto;
• palabras inglesas utilizadas para justificar retrasos;
• decisiones importantes tomadas antes del taller;
• cientos de ideas sin ningún criterio para elegir.

La herramienta debe ayudar a avanzar. No convertirse en otro servicio decorativo que consume presupuesto y produce una presentación muy bonita.

Design Thinking, SEO y contenido

Design Thinking no posiciona una web por sí solo.

Sí puede ayudar a tomar mejores decisiones relacionadas con:

• la intención de búsqueda;
• las preguntas del usuario;
• la arquitectura;
• las páginas necesarias;
• el lenguaje utilizado;
• los recorridos internos;
• la jerarquía de la información;
• la mejora posterior basada en datos.

Una empresa puede querer hablar de su experiencia, su equipo, su tecnología y sus valores.

El usuario puede estar buscando precio, zona de trabajo, plazo, ejemplos o una solución concreta.

El contenido debe conectar ambos mundos.

La inteligencia artificial puede ayudar, pero no conocer el proyecto por nosotros

La IA puede servir para:

• generar alternativas;
• resumir entrevistas;
• agrupar comentarios;
• crear textos provisionales;
• preparar variaciones de una pantalla;
• detectar patrones dentro de muchos datos;
• acelerar prototipos.

Pero no conoce automáticamente:

• las prioridades reales de la empresa;
• las conversaciones con los clientes;
• qué objeciones aparecen durante una venta;
• qué puede construir el equipo;
• qué presupuesto existe;
• qué hipótesis se han comprobado;
• por qué una propuesta anterior no funcionó.

Puede producir una pantalla impecable y completamente equivocada.

La rapidez para generar opciones no sustituye el trabajo de decidir cuál resuelve mejor el problema.

Una filosofía muy cercana a la forma de trabajar de ideaWeb

No aplicamos una ceremonia cerrada de Design Thinking a todos los proyectos. Sería absurdo tratar igual una pequeña web corporativa y una plataforma con varios tipos de usuario.

Sí compartimos muchos de sus principios:

• escuchar antes de diseñar;
• entender el negocio y al cliente real;
• definir el problema antes de elegir herramientas;
• trabajar estructura, contenido y diseño conjuntamente;
• probar ideas antes de construir demasiado;
• explicar las decisiones;
• medir después de publicar;
• corregir cuando los datos contradicen nuestras suposiciones.

No buscamos que la web impresione únicamente durante la presentación.

Buscamos que meses después siga explicando el negocio, permita trabajar, reciba contactos y pueda evolucionar sin convertirse en una colección de parches.

Preguntas frecuentes sobre Design Thinking y diseño web

¿Qué es Design Thinking?

Es un enfoque centrado en las personas que ayuda a comprender necesidades, definir problemas, idear soluciones, crear prototipos y probarlos antes de dar una respuesta por terminada.

¿Cuáles son las cinco fases de Design Thinking?

La clasificación más conocida incluye empatizar, definir, idear, prototipar y probar. No tienen que aplicarse siempre de forma lineal.

¿Cómo se aplica Design Thinking al diseño web?

Se utiliza para comprender a los usuarios, concretar qué problema debe resolver la web, plantear estructuras y contenidos, crear prototipos y comprobar después cómo funciona la página.

¿Design Thinking sirve únicamente para grandes proyectos?

No. Sus principios pueden aplicarse de forma sencilla en una web pequeña. El nivel de investigación, prototipado y pruebas debe ajustarse al tamaño y al riesgo del proyecto.

¿Una web debe diseñarse según los gustos del propietario?

El propietario debe sentirse representado y participar en las decisiones, pero la web también debe resultar clara y útil para sus clientes. El gusto personal no debería ser el único criterio.

¿Qué diferencia hay entre un wireframe y un prototipo?

El wireframe representa principalmente la estructura y jerarquía. Un prototipo puede simular navegación, botones y recorridos para comprobar cómo funcionaría la propuesta.

¿Design Thinking mejora el SEO?

No directamente. Puede ayudar a entender mejor la intención, organizar contenidos, plantear una arquitectura clara y mejorar la experiencia, pero el posicionamiento depende de más factores.

¿La inteligencia artificial sustituye Design Thinking?

No. Puede ayudar a generar ideas, resumir información y acelerar prototipos, pero sigue siendo necesario comprender el negocio, investigar al usuario y probar las soluciones.