Concepto de Sitio Web Basado en una Historia
Propósito
Convertir un problema de negocio suficientemente entendido en conceptos de sitio web distintos, construidos en torno al significado, la transformación, la narrativa y la evidencia, en lugar de una secuencia de características genéricas y secciones de interfaz.
Esta habilidad trabaja principalmente con palabras antes que con imágenes.
Determina:
- qué debe comunicar fundamentalmente el sitio web
- qué historia o lente narrativa puede comunicarlo
- cómo debe progresar la comprensión del visitante
- qué evidencia respalda esa progresión
- cómo el concepto debe influir en el contenido, la voz, las imágenes, el diseño, el movimiento y la interacción a nivel direccional
- cómo la narrativa respalda la siguiente acción del usuario
El resultado es un conjunto de direcciones conceptuales listas para su evaluación y el posterior desarrollo del sistema visual.
Esta habilidad no produce copia final, diseños finales, wireframes detallados, un sistema de diseño o código de implementación.
Principio central
Un concepto de sitio web sólido conecta:
problema de negocio
→ necesidad de la audiencia
→ transformación significativa
→ idea central
→ progresión narrativa
→ evidencia de apoyo
→ acción del usuario
Las decisiones visuales deberían reforzar posteriormente esta cadena.
Evitar:
estética interesante
→ titular ingenioso
→ secciones arbitrarias
→ interacciones decorativas
El concepto debe explicar por qué existe la experiencia antes de explicar cómo se ve.
La historia no es decoración
"Basado en una historia" no significa que cada sitio web necesite:
- un protagonista dramático
- una secuencia de desplazamiento cinematográfica
- una biografía del fundador
- un testimonio emotivo
- un guión de principio-medio-final
- una narrativa ficticia
Historia puede significar simplemente que la información está estructurada deliberadamente para que el visitante pase de un estado de comprensión significativo a otro.
Ejemplos de estructuras narrativas válidas incluyen:
problema
→ consecuencia
→ solución
→ prueba
→ acción
materia prima
→ proceso
→ resultado final
→ capacidad
vieja forma
→ tensión
→ nueva forma
→ evidencia
situación del cliente
→ desafío
→ experiencia
→ resultado
misión
→ obstáculo
→ método
→ impacto
pregunta
→ investigación
→ revelación
→ implicación
La intensidad narrativa adecuada depende del proyecto.
Cuándo usar esta habilidad
Utiliza esta habilidad cuando:
- Un brief de sitio web ya se ha entendido suficientemente.
- El usuario solicita un concepto de sitio web, dirección de concepto creativo, idea central, dirección narrativa, estructura de narración o página de aterrizaje basada en una historia.
- Una página actualmente se siente como un folleto digital o una secuencia de secciones de características desconectadas.
- Una página de inicio tiene información pero carece de una progresión clara o un punto de vista.
- Varios mensajes compiten por prioridad y necesitan ser organizados en torno a un significado central.
- Una marca tiene material sólido de fundador, cliente, proceso, producto, misión o transformación que podría estructurar la experiencia.
- Existe investigación de universo gráfico y necesita ser conectada a una idea real de sitio web.
- El usuario quiere varios conceptos creativos genuinamente diferentes antes de elegir una dirección visual.
- Un producto necesita demostrar valor a través del uso, la transformación o la evidencia, en lugar de simplemente enumerar capacidades.
- El equipo de diseño sigue llegando a la ejecución visual antes de acordar qué está tratando de decir realmente el sitio web.
- Un concepto debe conectar titulares, imágenes, estructura de contenido, llamadas a la acción e interacción eventual en una dirección coherente.
No uses esta habilidad cuando:
- El problema de negocio o la audiencia aún no están claros.
- El usuario solo necesita inspiración visual o investigación gráfica.
- El usuario tiene conceptos maduros y solo necesita elegir entre ellos.
- La tarea es la redacción final.
- La tarea es la arquitectura de la información detallada para una aplicación compleja.
- La tarea es el diseño de componentes de UI.
- La tarea es la composición del diseño final.
- La tarea es la especificación del sistema de diseño.
- La tarea es la implementación o el código.
- La interfaz es principalmente una herramienta de utilidad u operativa donde el marco narrativo agregaría fricción innecesaria.
Si el proyecto no se entiende suficientemente, ejecuta primero un flujo de trabajo de encuadre del problema.
Entradas a inspeccionar
Inspecciona tantas de las siguientes como estén disponibles.
Material estratégico
- Problema de negocio
- Brief del proyecto
- Objetivos de negocio
- Audiencia
- Trabajos por hacer
- Necesidades del usuario
- Acciones deseadas
- Posicionamiento
- Propuesta de valor
- Diferenciadores
- Contexto competitivo
- Restricciones
Evidencia de transformación
- Resultados del cliente
- Estados de antes y después
- Problemas resueltos
- Tiempo ahorrado
- Riesgo reducido
- Habilidades adquiridas
- Experiencia mejorada
- Resultados emocionales
- Mejoras operativas
- Impacto social o cultural
Material narrativo
- Historia del fundador
- Origen de la empresa
- Historias de clientes
- Testimonios
- Casos de estudio
- Ejemplos del producto en uso
- Material detrás de escena
- Proceso de fabricación o servicio
- Hitos históricos
- Misión
- Investigación
- Datos
- Resultados
- Creación del producto
Material de marca
- Estrategia de marca
- Tono de voz
- Mensajes existentes
- Lenguaje de campaña
- Nombramiento
- Terminología
- Identidad visual existente
- Fotografía
- Material de archivo
Material de contenido
- Copia de página existente
- Mapa del sitio
- Inventario de secciones
- Descripciones de productos
- Servicios
- Preguntas frecuentes
- Reseñas
- Estadísticas
- Llamadas a la acción
Investigación de diseño upstream
Cuando esté disponible, inspecciona la salida de:
design-problem-framergraphic-universe-builder
Las entradas útiles del universo gráfico incluyen:
- vocabulario del proyecto
- grupos de investigación
- oportunidades propiedad del proyecto
- átomos visuales
- candidatos a metáfora
- universos gráficos candidatos
- clichés de categoría
No requieras investigación de universo gráfico si el proyecto ya contiene material conceptual sólido.
Condiciones previas
Antes de la generación del concepto, determina si se pueden responder estas preguntas:
¿Qué ofrece la organización?
¿Quién es la audiencia principal?
¿Qué necesita, quiere, teme o lucha esa audiencia?
¿Qué cambio significativo crea la oferta?
¿Por qué se debe creer en esta organización?
¿Qué debería entender el visitante?
¿Qué debería sentir el visitante, si la emoción es relevante?
¿Qué debería hacer el visitante?
¿Qué hace que este proyecto sea diferente de las alternativas obvias?
Si varias respuestas son desconocidas, márcalas como preguntas abiertas.
No inventes datos estratégicos para que un concepto parezca completo.
Flujo de trabajo
1. Replantear el problema de diseño
Condensa el brief en una declaración lista para el concepto.
Usa:
El sitio web necesita ayudar a <audiencia>
entender/creer/experimentar <significado>
para que puedan <acción o resultado deseado>,
mientras supera <barrera clave>.
Estructura de ejemplo:
El sitio web necesita ayudar a los compradores técnicos a entender que la empresa
hace más que fabricar componentes: controla el proceso completo
desde la materia prima hasta la pieza de precisión terminada, para que los compradores confíen en ella para
el trabajo de producción de alto riesgo.
No comiences a conceptualizar hasta que el problema pueda expresarse claramente.
2. Definir el significado esencial
Pregunta:
Si el visitante recuerda solo una idea de esta experiencia, ¿cuál debería ser?
Escribe una oración.
Esto no es:
- un eslogan
- un titular
- una lista de características
- un estilo visual
Es el significado que el concepto debe comunicar.
Ejemplo:
Esta empresa convierte un proceso industrial impredecible en algo
preciso, visible y confiable.
Prueba la declaración:
- ¿Es significativa para la audiencia?
- ¿Es relevante para el negocio?
- ¿Es más específica que "somos innovadores"?
- ¿Puede la evidencia disponible respaldarla?
- ¿Podría guiar las decisiones de contenido?
3. Definir la transformación de la audiencia
Describe el cambio deseado.
Usa:
Antes:
El visitante piensa/siente/cree...
Después:
El visitante piensa/siente/cree...
Acción:
El visitante ahora está preparado para...
Las transformaciones posibles incluyen:
incierto → seguro
inconsciente → informado
escéptico → convencido
abrumado → claro
curioso → involucrado
desapegado → conectado emocionalmente
consciente del problema → consciente de la solución
centrado en características → centrado en resultados
percepción genérica → percepción distintiva
No fabriques una transformación emocional donde un cambio práctico en la comprensión sea suficiente.
4. Construir el inventario de evidencia
Separa el material narrativo disponible de las suposiciones.
Usa:
| Evidencia | Tipo | Lo que prueba | Fuerza |
|---|---|---|---|
| ... | cliente / fundador / proceso / datos / producto / historia | ... | alta / media / débil |
Clasifica el material como:
Verificado
Respaldado directamente por el material proporcionado.
Inferido
Una interpretación plausible que aún necesita validación.
Faltante
Evidencia útil que actualmente no existe.
Un concepto no debe depender de testimonios inventados, historias fabricadas, resultados de clientes hipotéticos presentados como hechos o material de producción inexistente.
5. Identificar posibles lentes narrativas
Evalúa qué lente expone naturalmente el significado del proyecto.
Las lentes posibles incluyen:
Transformación
Muestra el cambio significativo creado para el cliente.
antes
→ intervención
→ después
Mejor cuando el resultado es el diferenciador más fuerte.
Producto en uso
Muestra la oferta a través de situaciones reales en lugar de características aisladas.
contexto
→ uso
→ resultado
Mejor cuando ver el producto en funcionamiento genera confianza.
Proceso
Expone cómo se crea, entrega, transforma o resuelve algo.
entrada
→ etapas
→ salida
Mejor cuando el proceso, la artesanía, la transparencia o la experiencia diferencian a la organización.
Fundador u origen
Utiliza el porqué de la existencia de la organización como narrativa organizadora.
frustración
→ decisión
→ nuevo enfoque
→ misión actual
Mejor cuando el origen explica significativamente el producto o la marca.
No uses la narrativa del fundador simplemente porque existe material del fundador.
Historia del cliente
Deja que la situación real de un cliente demuestre la relevancia.
situación
→ problema
→ experiencia
→ resultado
Mejor cuando la prueba social y la experiencia vivida son más fuertes que las afirmaciones del producto.
Misión e impacto
Estructura la experiencia en torno al cambio que la organización quiere producir.
condición actual
→ desafío
→ intervención
→ evidencia de impacto
Útil para organizaciones benéficas, instituciones culturales, organizaciones impulsadas por una misión y trabajo de interés público.
Contraste
Define la oferta exponiendo la debilidad de la alternativa convencional.
suposición antigua
→ contradicción
→ mejor modelo
Útil cuando la categoría tiene un valor predeterminado arraigado.
Viaje
Lleva al visitante a través de una secuencia significativa.
escena 1
→ escena 2
→ escena 3
→ destino
Útil cuando la progresión en sí misma importa.
Sistema
Revela cómo piezas aparentemente separadas trabajan juntas.
partes
→ relaciones
→ sistema
→ resultado
Útil para plataformas, infraestructura, servicios complejos y ecosistemas.
Investigación
Comienza con una pregunta y revela la respuesta gradualmente.
pregunta
→ evidencia
→ descubrimiento
→ conclusión
Útil para experiencias editoriales, de investigación, culturales o explicativas.
Demostración
Estructura el sitio web en torno a probar una afirmación.
afirmación
→ demostración
→ evidencia
→ invitación
Útil cuando la confianza debe ganarse rápidamente.
Pueden coexistir múltiples lentes, pero cada concepto debe tener un mecanismo narrativo dominante.
6. Elegir la intensidad narrativa adecuada
No todos los proyectos deben convertirse en una experiencia narrativa inmersiva.
Clasifica los conceptos candidatos como:
Narrativa ligera
La narrativa afecta principalmente a:
- orden de los mensajes
- progresión de secciones
- titulares
- colocación de las pruebas
La interfaz sigue siendo convencional y eficiente.
Adecuado para:
- SaaS
- servicios profesionales
- B2B
- páginas de producto
- sitios centrados en la conversión
Narrativa integrada
La narrativa influye en:
- progresión de la página
- ritmo del contenido
- imágenes
- lenguaje repetido
- interacciones seleccionadas
- transiciones de secciones
Adecuado para:
- sitios de marca
- portafolios
- lanzamientos
- empresas de servicios diferenciadas
- comercio editorial
Narrativa inmersiva
La experiencia en sí misma se comporta como una historia.
La narrativa puede influir en:
- progresión del desplazamiento
- secuenciación de medios
- cambios de escena
- interacción
- estructura de capítulos
- movimiento rico
Adecuado para:
- campañas
- experiencias culturales
- lanzamientos de productos
- proyectos de narración
- sitios de marca experienciales
La inmersión solo debe proponerse cuando:
- el contenido la respalda
- el valor la justifica
- el presupuesto de producción puede respaldarla plausiblemente
- la narrativa sigue siendo comprensible sin requerir una interacción frágil
7. Generar territorios verbales antes que visuales
Comienza la exploración del concepto con el lenguaje.
Genera palabras y frases conectadas con:
- transformación
- lenguaje del cliente
- vocabulario del proyecto
- proceso
- objetos
- terminología del dominio
- contrastes
- resultados
- asociaciones culturales
- hallazgos del universo gráfico
Los posibles métodos de ideación incluyen:
Combinaciones de frases
Combina el lenguaje del proyecto de maneras inesperadas pero defendibles.
Modismos
Explora modismos relevantes como chispas.
No fuerces modismos en los conceptos finales.
Rechaza aquellos que sean:
- clichés
- confusos
- culturalmente inapropiados
- demasiado ingeniosos
- no relacionados con el negocio real
Lenguaje del dominio
Reinterpreta la terminología ya utilizada por la audiencia.
Dobles sentidos
Explora palabras con significados tanto funcionales como emocionales.
Declaraciones de contraste
Ejemplos:
No X. Y.
De X a Y.
Más allá de X.
¿Y si X fuera Y?
Lenguaje de transformación
Usa verbos que describan movimiento o cambio.
Preguntas
Usa una pregunta significativa no resuelta para crear tensión.
Frases propiedad del proyecto
Prefiere terminología o lenguaje que los competidores no puedan reclamar fácilmente.
No escribas el texto final del sitio web en esta etapa.
El propósito es la generación de conceptos.
8. Divergir antes de converger
Genera varios conceptos distintos de sitio web.
Cada concepto debe especificar:
Idea central
Una oración que describa lo que el proyecto comunica fundamentalmente.
Lente narrativa
Cómo se estructura la información: transformación, proceso, contraste, etc.
Intensidad narrativa
Ligera, integrada o inmersiva según el proyecto.
Progresión
Una secuencia narrativa que muestre cómo se mueve el visitante.
Pruebas
Qué evidencia respalda cada etapa de la progresión.
Tono y voz
Cómo suena el sitio web.
Implicaciones de diseño
Decisiones visuales, de diseño, de movimiento y de interacción que la narrativa sugiere.
Los conceptos pueden expresarse en cualquier formato que comunique la dirección: texto, señales visuales, garabatos, referencias. La precisión importa más que el acabado.
Cada concepto debe ser genuinamente diferente de los demás, no una variación menor.
9. Presentar conceptos para evaluación
Presenta los conceptos en un formato que permita la discusión.
Para cada concepto, incluye:
- nombre del concepto
- idea central
- transformación de la audiencia
- lente narrativa e intensidad
- progresión
- evidencia clave
- carácter o personalidad
- implicaciones de diseño
- preguntas abiertas
- riesgos o limitaciones
Si es útil, clasifica los conceptos según:
- alineación estratégica
- claridad para la audiencia
- capacidad de diferenciación
- viabilidad de producción
- apertura al desarrollo visual
Post-procesamiento
Después de la selección del concepto:
- Desarrolla el sistema visual basado en el concepto elegido.
- Escribe el contenido y las llamadas a la acción.
- Crea wireframes y prototipos.
- Implementa el diseño.
Esta habilidad entrega direcciones conceptuales, no activos terminados.
Referencias
Esta habilidad fue informada por:
- Estrategia de marca y narración de Marty Neumeier.
- Prácticas de narración basadas en evidencia en el diseño de experiencia de usuario.
- Metodologías de "qué, cómo, por qué" de Sinek y otros marcos narrativos.
- La distinción entre sitios web impulsados por características y significado en el diseño de conversión.