Portada del articulo con un usuario en una cima viendo la UI de una pantalla
Design / September 15th 2021

De usuario a héroe: Cómo estructurar el storytelling de nuestras landings

Ramsés Guri Cervantes's profile picture
byRamsés Guri Cervantes

Hace algunos años, antes de meterme en el mundo del diseño de interfaces y experiencias, me encontraba estudiando diseño audiovisual y uno de los must para hacer un guion es entender cómo funciona la composición y la estructura dramática y así contar mejores historias en nuestras producciones.

Image description

El viaje del héroe es una de las estructuras más utilizadas en los guiones de ciencia ficción y fantasía. Viene de la influencia del héroe aristotélico de cómo debía ser el rol de ese personaje en las tragedias griegas. En la actualidad, podemos encontrar el viaje del héroe en películas como Spider-Man, El Rey León, Space Jam, The Matrix, Star Wars, entre otras.

Es un patrón para estructurar las historias donde el personaje principal se aventura, se enfrenta a su enemigo, consigue la victoria y vuelve a su hogar transformado.

En sus bases, el viaje del héroe es un framework para contar historias increíbles, que lleguen a las personas, para que sea un best seller o un éxito de taquilla.

Image description

¿Cómo se aplica este storytelling en una landing page?

Este tipo de storytelling ayuda a que nuestros usuarios logren sus objetivos y generemos más conversiones. Antes de estructurar nuestra landing page es necesario definir los objetivos principales 🎯 de la misma. Hay que responder las siguientes preguntas:

  1. ¿Cuál es la idea principal? Por ejemplo, vender cursos online para quienes quieran aprender skills digitales como programar, diseñar o construir productos. Este sería el hilo conductor de nuestra landing.
  2. ¿Cuáles son los pain points, preocupaciones, miedos, aspiraciones y metas de los usuarios? Saber esta información nos ayudará a contar los beneficios de nuestro producto o servicio.
  3. ¿Qué emociones queremos generar? Nos ayudaran a definir el tono de voz de nuestro contenido y la dirección gráfica.
  4. ¿Cuál va a ser nuestro principal llamado a la acción? En el ejemplo que estamos manejando, el CTA sería inscribirse en los cursos online. Es el objetivo principal de nuestra landing.

Con estas respuestas, podemos adaptar el viaje del héroe a la estructura de nuestra landing.

Elementos del viaje del héroe

En el caso de los sitios webs, siempre existirán diferentes contextos y podremos tomar más o menos elementos del viaje del héroe. 

Para ejemplificar algunos podrían ser:

  • El usuario pasa a ser el héroe de la historia.
  • Nuestro producto, servicio o marca es el maestro o mentor (como Yoda, Morfeo) que ayuda a vencer al malo de la peli.
  • Sus problema o los puntos de dolor pueden ser el villano.
  • Los beneficios de nuestro producto pasan a ser el plan o arma secreta para vencer a los malos.
  • El regreso con el elixir es gracias a nuestro producto o servicio.
Image description

1. El héroe

Un buen comienzo es arrancar nuestra landing orientada en nuestro usuario y no tanto en nuestro producto o marca.

Por lo general, al principio tratamos de introducirnos como si de una persona se tratase y queremos demostrar quiénes somos, de dónde venimos. Una buena práctica, teniendo este framework en cuenta, sería corrernos por un momento. Hablemos del protagonista y cuál es su llamado a la aventura, qué lo esta motivando a buscar una solución.  

Image description

2. El mentor

La marca o el producto no son la solución a los problemas sino que son quienes guían en la historia para que lo solucionen los usuarios. En este momento podemos introducir nuestra marca o producto en la historia como su maestro o mentor contando quiénes somos, qué hacemos o por qué deberían confiar en nosotros con un testimonio, por ejemplo. 

Image description

3. El villano

Para que exista el bueno que quiere salvar el mundo tiene que existir el villano que quiera arruinar sus planes.

Los puntos de dolor o “pain points” pueden ser el villano de nuestro héroe para que sea más accesible introducir el producto o features en sus vidas como una pieza importante de la narración.

Image description

Existen diferentes tipos de niveles de puntos de dolor y esta landing de Shopify traslada tres posibles:

  • No sé utilizar herramientas de diseño, por eso no puedo tener un store que sea bonito y fácil de modificar”
  • “No cuento con dinero suficiente para tener un producto de calidad” 
  • No suelo confiar de los servicios de internet”

4. El plan o arma secreta

Cada maestro entrena al héroe y en su transformación congenian un plan o le entrega un arma secreta para que pueda vencer al enemigo. En este momento podemos explicar cómo funciona nuestro servicio o destacar funcionalidades de nuestro producto que ayuden a derrotar al “villano” (es decir, los pain points).

Image description

5. El regreso con el elixir

Luego del climax, el héroe regresa a su mundo transformado, ya obtuvo experiencia y entendió como podia derrotar al villano. En este momento, ya conoce todo sobre nuestro producto o servicio y cómo puede solucionar su problema con lo que ofrecemos, se puede reforzar el llamado a la acción principal para obtener más conversiones. En ese momento de la landing colocamos los CTA (Call to Action) como botones.

Image description

Una mirada, una herramienta

Hay muchísimas herramientas y técnicas que pueden colaborar en el armado de una landing para generar más conversiones.

La estructura narrativa del viaje del héroe es una interpretación más, pero que puede ayudar a designers a animarse a trasladar herramientas de storytelling al pensamiento de diseño y adaptar este framework en otros contextos como flujos de usuario o procesos de servicios.

En lo personal, a mí me sirvió para formular flujos de usuario claves como recarga de dinero en una wallet digital, un onboarding en un primer uso de una aplicación o en la estructuración de la home de Zinli, un proyecto que trabajamos durante el 2020 en Aerolab.

¿Tenés alguna duda, comentario o sugerencia respecto a este tema? Escribime 🙂