![](https://i.imgur.com/jnmauPu.png) # Storyboards & User Journey ## Objetivos - Entender el propósito del Storytelling - Aprende a crear Storytellings - Comprender ejemplos de Sotrytellings, desde películas hasta diseño - Entender que es un User Journey - Aprender como crear un mapa de User Journey. ## El poder del Storytelling Las historias son una forma de visualizar un proceso, y el Storytelling es la herramienta de entrega de información más poderosa. Fomenta el recuerdo, la empatía y el compromiso. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e09c85803774e68116e4a7137725a480.png) El Storytelling es la *representación de casos de uso* a través de una serie de dibujos o imágenes, reunidos en una secuencia narrativa. El Storytelling se puede desarrollar varias formas. Es un ejercicio común para los equipos de diseño y es una muy buena habilidad para dominar. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_16f3b04292baf4a4986f81e7b86a2e3c.png =700x) ## Storyboard en UX En el proceso de UX, la narración es una técnica que ofrece diferentes ventajas: - Fomenta un enfoque de diseño centrado en el ser humano porque giran en torno a los humanos. - Demuestra escenarios de usuario, lo que le permite pensar en el **contexto** en el que se utilizará el producto. - Es una actividad que se puede compartir tanto con diseñadores como con personas de otras disciplinas. - Fomenta la crítica. Todos pueden contribuir y dar su opinión sobre el proceso para mejorarlo. - Es rentable. La acción de esbozar pruebas de juego de roles para conceptos de diseño permite a los diseñadores experimentar a un costo mínimo o nulo. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_5deedca9d87edacdb83946958f987656.png) ### Un buen guión gráfico debería ser: - **Auténtico:** Cuanto más nos enfoquemos en humanos y contextos reales, mejor. - **Simple:** Centrarnos en agregar valor al tema principal. Si hay un elemento en el Storyboard que no cumple una tarea, elimínelo, sin importar lo bueno que sea. - **Emocional:** Es fundamental comunicar el estado emocional del protagonista a lo largo de la experiencia. ## Ejemplos ### App para Citas Vamos a mirar éstos Storyboards para una aplicación de citas. En ambos Storyboards el objetivo es el mismo: **encontrar compañía**. Sin embargo, a medida que cambian los User Persona, el contexto también cambia y la aplicación funciona para ambos usuarios: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_4237adf4238a8dd7abac3ce5996820e0.png) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_4289ba16249ffb2f74b6eb28b74ccfd9.png) ### Una ensalada de almuerzo En este Storyboard, la aplicación está ayudando a estas personas a encontrar una solución para la hora del almuerzo: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_30121b1a1b9537b5e68489a65684f925.png) :::info :bulb: Como habrás notado, los storyboards no necesitan ser muy largos. Sin embargo, así como necesitan tener la escena de apertura, deberían tener una escena concluyente. ::: ### Del boceto al Storyboard digital En este ejemplo, podemos ver la progresión de un boceto a mano a su versión digital usando [Storyboard That](http://www.storyboardthat.com/). ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_504128ae290165dbd9cfaf3564e07b9e.png =600x) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_35201af71e1ef8f05d1ee3d852561537.png) ### Diálogos Estos ejemplos muestran que los diálogos son complementarios. Úsalos si necesitas expresar algo. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_024587661582d325e5db8736646be149.png) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_b463d9fe4339ae947ad00e82bcf2a28d.png) ## Cómo crear un Storyboard 1) Configurar una cuadrícula ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_d2a2b57b58c4f640d6bda8a0747978ef.png) 2) Dibuja una **escena de apertura** - Debe reflejar uno o dos pasos que preceden a las interacciones con el producto. 3) Completa el guión gráfico - Cada cuadro debe representar un evento de clic para un producto digital 4) Asegúrate de tener una **escena concluyente** - El resultado final del uso del producto. :::success :ok_hand: **Consejo:** Si te sentis trabado o no estás seguro de cómo desarrollar la historia, escribe primero un guión sencillo. Esto te ayudará a definir el tamaño de tu cuadrícula y el hilo de la historia. ::: ## User Journey ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e62727edc8fcb6f73d4272fcaf8bde8c.png) > "Un User Journey es una visualización del proceso que atraviesa una persona para lograr un objetivo. Se utiliza para comprender y abordar las necesidades y los puntos débiles del cliente". > [name=Nielsen Norman Group] > ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_395bf36da11e58ccc7f5bd6a2c6c87ce.png) - Fuente de la imagen: Adaptive Path Un User Journey representa, como mínimo, las etapas de la experiencia de un usuario con un producto, servicio o ecosistema. Esta herramienta nos ayuda a empatizar aún más con el usuario para que podamos encontrar oportunidades para mejorar su interacción con nuestro producto/servicio. **Los User Journeys son útiles para organizar la información porque nos ayudan a:** - Cmprender de un vistazo la experiencia del usuario de alto nivel. - Enfocarse en áreas en las que deberíamos trabajar y que de otro modo podríamos haber pasado por alto. - Documentar una serie de eventos y flujos de trabajo. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_57a75ee3455ee9776a058116c603d83b.png) > Un User Journey es una interpretación visual o gráfica de la historia general desde la perspectiva de un individuo de su relación con una organización, servicio, producto o marca, a lo largo del tiempo y en todos los canales. > - Megan Grocki, [Cómo crear un User Joruney](http://uxmastery.com/how-to-create-a-customer-journey-map/) > **Un User Journey puede cumplir dos roles estratégicos diferentes:** - **Current Journey:** demuestra la forma en que los usuarios *actualmente* interactúan con el producto, servicio o ecosistema. - **Future Journey:** demuestra la forma en que los usuarios *podrían* interactuar con su producto, servicio. ## ¿Por qué es útil? Al diseñar un producto desde cero, los User Journeys nos permiten: - Empatizar con nuestras personas para que podamos encontrar formas de aumentar su satisfacción general con el servicio. - Identificar puntos en el proceso que podrían ser oportunidades para ayudar al usuario a alcanzar sus objetivos. - Articular visualmente los puntos de contacto clave donde los usuarios interactúan con productos, servicios o ecosistemas (el nuestro o de otros). - *Un punto de contacto es cualquier momento en que un cliente o usuario potencial entra en contacto con su marca, antes, durante o después de que compren algo.* - Considerar el contexto en el que debería funcionar una solución. - Alinear nuestras suposiciones sobre la experiencia de la persona con las observaciones documentadas. - **Proporcionar investigaciones futuras con algunas suposiciones para validar** en torno a hacer de nuestra persona un defensor del servicio. :bulb: El objetivo de su solución debe ser **impactar el recorrido del usuario de una manera positiva**. Por lo tanto, el User Journey puede ser una [prueba de fuego](https://www.merriam-webster.com/dictionary/litmus%20test) para decidir si ciertas características son críticas para el impacto de su solución o no. :::success :+1: Como herramienta visual, el User Journey Map es ideal para alinear a toda la empresa. ::: ## ¿Cómo crear un mapa de viaje de usuario? ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_1493156d8cb6b0ef94711e4da60c39d5.png =300x) El User Journey combina dos poderosos instrumentos: **narración** y **visualización**. Estas herramientas se combinan en un producto conciso, que crea una visión compartida. El resultado es una **vista holística de la experiencia del cliente**. El objetivo es visualizar diferentes datos en un mismo mapa desde diferentes puntos de vista. ### Para crear un mapa de viaje del usuario, debe: 1) Identifique los puntos de contacto del cliente con su producto. 2) Inserte los objetivos y acciones del usuario en una línea de tiempo. 3) Llenar con pensamientos y emociones del usuario para crear una narrativa. ### ¿Qué debería incluir? ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_438917ca8629f4601dd674903eeba24f.png) #### Imprescindibles: - **Personas:** Los personajes principales que ilustran las necesidades, metas, pensamientos, sentimientos, opiniones, expectativas y puntos débiles del usuario. - **Título descriptivo:** (ejemplo: “Subiendo mi foto de perfil”) Debe explicar el desafío de diseño que está tratando de comprender y mejorar con este User Journey. - **Cronograma:** Una cantidad finita de tiempo (por ejemplo, 1 semana o 1 año) o fases variables (por ejemplo, conciencia, toma de decisiones, compra, renovación) - **Emoción:** Picos y valles que ilustran frustración, ansiedad, felicidad, etc. (Puede usar emojis, íconos o avatares para ilustrarlos) - **Puntos de contacto:** Acciones e interacciones del cliente con la empresa. - **Canales:** Dónde tiene lugar la interacción y el contexto de uso (por ejemplo, sitio web, aplicación, centro de llamadas, en la tienda). #### Bueno de incorporar: - **Momentos de la verdad:** Una interacción positiva que deja una impresión duradera, a menudo planificada para un punto de contacto conocido por generar ansiedad o frustración. - **Personajes de apoyo:** individuos periféricos (cuidadores, amigos, colegas) que pueden contribuir a la experiencia. ### Considere especificar para cada paso: - El dispositivo utilizado (canal) - Cambios en el viaje actual (si se creó como un viaje futuro) - Beneficios para el usuario y / o negocio - Demostrar cualquier funcionalidad ## Paso a paso Comenzando desde la perspectiva de la persona elegida, considere las siguientes preguntas: - **Contexto:** ¿Dónde está el usuario? ¿Qué les rodea? ¿Hay algún factor externo que pueda distraerlos? - **Progresión:** ¿Cómo les permite cada paso llegar al siguiente? - **Dispositivos:** ¿Qué dispositivo están usando? ¿Son novatos o expertos? - **Funcionalidad:** ¿Qué tipo de funcionalidad esperan? ¿Es alcanzable? - **Emoción:** ¿Cuál es su estado emocional en cada paso? ¿Están comprometidos, aburridos, molestos? ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_f3fb59b116693d1a27794f88c505eeea.png) -- Jamie Caloras, uxdesign.cc #### Paso 1: Definición de etapas y cronograma Definir de 3 a 6 etapas por las que atraviesa su usuario. Ejemplo: descubrir, investigar, unirse, participar :::success :pizza: Enumeramos las etapas por las que debe pasar un usuario y el cronograma para pedir una pizza a domicilio a través de un sitio web. - El Usuario tiene hambre y ganas de comer pizza. 1) Agarra su celular 2) Encuentra una pizzería en internet 2) Leerel menú 3) Selecciona la pizza ..... ::: #### Paso 2: Puntos de contacto Identifique los puntos de contacto y los canales en los que su usuario interactúa con un producto, servicio o ecosistema. :::warning Identifique los puntos de contacto de sus clientes haciendo una lista de todos los lugares y momentos en que sus clientes pueden entrar en contacto con su marca. Hágase las siguientes preguntas: **¿A dónde va (y cómo llega ahí) cuando**: - ¿Tiene algún problema que deba solucionarse? - ¿Encontrar el producto o negocio que solucionará ese problema? - ¿Tomar su decisión de compra? - ¿Buscar algo referente al negocio después de la compra? ::: #### Paso 3: Crear la historia Una vez que tenga el borrador, resuma una historia visual concisa. Para cada etapa, considere incluir impulsores, metas, emociones, puntos débiles y momentos críticos. :::success :exclamation: Puede que este sea el paso más difícil de todo el proceso. Tenems que experimentar con diferentes plantillas de diseño y tómese su tiempo para diseñar algo adecuado. ::: Cuando hacemos el recorrido del cliente paso a paso, todas las piezas deberían quedar bastante claras. #### Paso 4: ¡Digitalizar! ## Ejemplos ### Caso 1: Heart of the Customer ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_89b52d596171ec4d348e8841b5653c7b.png) [Enlarge](http://www.mycustomer.com/sites/default/files/hotc_map.jpg) En el ejemplo anterior, [Heart of the Customer](https://heartofthecustomer.com/) estableció las etapas en la parte superior del gráfico: conocimiento, investigación y consideración, compra y poscompra. Jane, el User Persona, está comprando un plan de seguro médico. Durante el recorrido, las acciones rojas son experiencias negativas y las azules representan experiencias positivas. También especifican momentos de la verdad: pasos críticos en el viaje donde el cliente puede continuar o detenerse. ### Tándemseven ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_9f1080df7edc319465297fa88a92b550.png) [Ampliar](http://www.mycustomer.com/sites/default/files/phil-journey-map-1.png) El mapa de viaje anterior de [Tandemseven](http://www.tandemseven.com/) detalla claramente los objetivos del usuario. Además, utilizaron el rojo para las experiencias negativas, el amarillo para las experiencias neutrales y el verde para las experiencias positivas en el viaje de la gestión de patrimonio. ## Consejos - Puede crear un User Journey diferente para cada User Persona [uno online](https://unoonline.io). - Incluya frases relevantes de su investigación para darle vida. - Hay muchas formas de crear un User Journey. - Utilice flujos de trabajo e imágenes para mostrar cómo la persona atraviesa el viaje. - Incluya lo bueno, lo malo y lo feo. :::success :ok_hand: **Pro-tip:** ¡Dibuje a mano algunas ideas antes de comenzar a hacer la version final! ::: ## Recursos adicionales - [Como identificar los puntos de contacto de tu usuario](https://www.surveymonkey.com/mp/identify-customer-touchpoints/) - [10 ejemplos interesantes de User Journey](http://blog.uxeria.com/en/10-most-interesting-examples-of-customer-journey-maps/) - [VIDEO: Como crear un User Journey](https://www.youtube.com/watch?v=mSxpVRo3BLg) - [La diferencia entre un Journey Map y un Service Blueprint](https://blog.practicalservicedesign.com/the-difference-between-a-journey-map-and-a-service-blueprint-31a6e24c4a6c) - [Herramientas de diseño de servicios](http://www.servicedesigntools.org/tools/35) - [Los 5 pasos para hacer un Blueprint de servicios - NNGroup](https://www.nngroup.com/articles/5-steps-service-blueprinting/?utm_source=Alertbox&utm_campaign=638f68eb3e-5steps_service_blueprint_authority_2018_02_05&utm_medium=email&utm_term=0_7f29a2b335-638f68eb3e-40353313) - [NNGroup Article: Los Storyboards ayudan a visualizar las ideas de UX](https://www.nngroup.com/articles/storyboards-visualize-ideas/?utm_source=Alertbox&utm_campaign=e6c6c3a507-Storyboards_Filter_Categories_2018_07_16&utm_medium=email&utm_term=0_7f29a2b335-e6c6c3a507-40353313) **Storyboards Apps:** - [Storyboard That](http://www.storyboardthat.com/) - [Bitmoji](https://www.bitmoji.com/)