Universitat Oberta de Catalunya

Una gran experiencia móvil para la muestra de cine más pequeña del mundo

Asignatura: Diseño de interacción, diseño de interfaces
Titulación: Grado Multimedia
Nombre del estudiante: Andrés Merizalde
Profesor colaborador y profesora: Rosa Llop Vidal, Tona Monjo Palau

Introducción

«La muestra de cine más pequeña del mundo tiene el público más grande». Con esta premisa, fruto de la primera fase del proyecto al que hace referencia la investigación, se desarrolla una experiencia móvil para una muestra cautivadora en un entorno privilegiado que invita a saborear joyas del cine bajo la luz de las estrellas.

Esta propuesta de experiencia móvil destaca por la capacidad de ofrecer a sus asistentes todo lo que necesitan para disfrutar al máximo de lo que sucede dentro y fuera de la programación de la muestra: turismo por la zona, gastronomía, charlas, coloquios… pero, sobre todo, sobresale por lograr crear una comunidad en un verano para recordar.

Etapas y retos

Investigación

La primera fase del proceso de desarrollo es la investigación. En esta fase es clave la recogida de datos para conocer tanto a los posibles usuarios como su interacción con la muestra y el entorno donde se celebra.

Ya detectados los posibles usuarios, se lleva a cabo la observación contextual con el objetivo de conocer cómo dichos usuarios interaccionan con productos o servicios similares (ir al cine, ir de vacaciones, etc.). Asimismo, se realizan entrevistas para obtener información cualitativa y posibles puntos de acción.

Una vez se conoce a los usuarios, es momento de conocer a la competencia. Esto se ha conseguido gracias a la técnica de evaluación comparativa (benchmarking), donde se han seleccionado y analizado otras muestras y festivales con características similares para valorar los aspectos clave de las experiencias que ofrecen a sus clientes.

Evaluación comparativa de referentes que ofrecen experiencias similares.

Análisis

Una vez recopilada toda la información viene la parte más compleja: sintetizar todos los datos obtenidos en la investigación. Para facilitar este proceso se ha utilizado un mapa de afinidades que busca agrupar los conceptos e ideas afines.

Mapa de afinidades

El siguiente paso consiste en resumir y compactar los resultados obtenidos tras aplicar la técnica anterior en los más representativos y encontrar las relaciones entre ellos. Esto genera las primeras percepciones (insights) que ayudan a establecer las primeras características de lo que podría ofrecer la experiencia.

Valoración de resultados y selección de los elementos comunes.

Modelado y conceptualización

En esta fase intentaremos responder a la siguiente pregunta: ¿para quién diseñamos y en qué situaciones?

Con toda la información recogida en la fase de investigación procedemos a la construcción de personas. Estas personas se basan en la descripción del usuario arquetipo que nos ayudará a definir y contrastar las características de la experiencia en función de determinadas personalidades. En este caso hemos escogido y definido su personalidad en relación con factores como su situación personal, nivel tecnológico, motivaciones respecto a la familia, trabajo, estabilidad, sociabilidad, las vacaciones y el deporte. Asimismo, situamos su personalidad en función de si es más introvertido o extrovertido, más de pensar que de hacer y más de juzgar que de empatizar.

Mapa donde se reflejan las características del “usuario-arquetipo” de Elisa Novell.
Mapa donde se reflejan las características del “usuario-arquetipo” de Pol Dot.

Ya tenemos a las personas y su personalidad definida, ahora toca definir cómo el entorno les afecta mediante los mapas de empatía: ¿qué piensa? ¿Qué siente? ¿Qué ve? ¿Qué escucha? ¿Qué dice y qué hace?

Mapa de empatía de Elisa Novell.
Mapa de empatía de Pol Dot.

El último paso de esta fase consiste en proyectar los escenarios y los puntos de interacción de nuestras personas respecto al producto que queremos diseñar. Esto lo hacemos por medio de mapas de experiencia del cliente (user journey maps), donde definimos un escenario para cada persona. En el caso de Elisa Novell, encontrar alojamiento para la familia durante las fechas de la muestra, y en el de Pol Dot, conocer el programa de actividades de la muestra.

Escenario y user journey del usuario Elisa Novell.
Escenario y user journey del usuario Pol Dot.

Formalización

Gracias a los mapas de experiencia del cliente hemos visto las diferentes fases de interacción de las dos personas del estudio, así como determinadas acciones que se realizan en un medio concreto dentro de un entorno específico. Ahora dibujaremos los esquemas de flujos de interacción necesarios para que nuestros usuarios cumplan sus tareas.

Flujos de interacción de las dos personas.
Flujos de interacción de las dos personas.

Paralelamente, agrupamos todas las características y secciones que debería tener esta experiencia móvil y las ordenamos en función de su importancia usando la técnica de la clasificación de tarjetas.

Proceso de clasificación de targetas

 

 

También definimos la arquitectura de nuestra experiencia teniendo en cuenta los flujos de interacción y los elementos imprescindibles de esta en una estructura que ayude al usuario a realizar las tareas principales con el menor ruido posible.

Mapa del sitio (site map), arquitectura y organización de la información de la experiencia.

 

Prototipado

Tenemos, por un lado, los flujos de interacción y, por otro, la arquitectura de la aplicación; ahora toca comenzar a definir gráficamente el diseño de nuestra experiencia móvil materializada por medio de una aplicación.

Empezamos definiendo ágilmente con papel y lápiz la primera estructura gráfica, validando algunas funcionalidades y replicando el flujo de interacción.

Ejemplos de los esquemas de página en papel.

Posteriormente y validadas algunas características, pasamos a diseñar los esquemas de página (wireframes) del prototipo en baja resolución dentro de un proceso de constante iteración.

Esquemas de página en baja resolución.

Una vez dado por aprobado el prototipo en baja resolución procedemos a aplicar una guía de estilo determinada por los elementos de identidad de la muestra para diseñar los fotomontajes (mock-up). En este caso hemos seleccionado varios elementos y características del cartel de la edición 2017 de la muestra, diseñado por Anneke Koster.

Fotomontajes de las pantallas principales de la aplicación previos al proceso de iteración.

En el siguiente enlace podemos ver el prototipo definitivo de la experiencia móvil de la muestra: Ascaso – aplicación.

Durante el proceso de diseño de los fotomontajes, se ha creado un lenguaje de diseño que se construye por medio de diferentes elementos relacionados y coherentes entre sí para que se puedan usar y replicar dentro de la aplicación y fuera de ella. En este tipo de lenguajes, también denominado sistemas de diseño, se ven reflejados aspectos como la jerarquía tipográfica, elementos interactivos como los campos de texto, formularios, botones y sus estados, la paleta de color, etc. En este caso se ha aplicado este sistema de diseño simplificado en otro producto digital, una página de aterrizaje (landing page) que ofrece información destacada y sirve como detonante de acción para la aplicación, que en este caso es la descarga e instalación.

Principales elementos del sistema de diseño de Ascaso.
Sistema de diseño aplicado en la página de aterrizaje aplicada a los diferentes dispositivos.

En los siguientes enlaces podremos ver las versiones para diferentes dispositivos de la página de aterrizaje:

Versión móvil

Versión tableta

Versión escritorio

Evaluación

Este proceso de diseño, como se ha mencionado anteriormente, está en constante iteración con el objetivo de ir mejorando el producto.

Una vez más se realiza una evaluación de dicho producto, pero esta vez aplicando un método de evaluación heurística; en este caso, utilizamos el modelo creado en 2010 por Susan Weinschenk y Dean Barker, un modelo de evaluación que en origen consta de veinte aspectos, pero que se han adaptado a este tipo de proyecto.

Conclusiones

Como podemos ver, este proyecto ha sido fruto de un proceso largo que ha hecho especial hincapié en la investigación. Es esta primera parte la que permite diseñar una experiencia que satisfaga con mayor éxito las necesidades de sus usuarios.

Si bien las técnicas que se han empleado en este proyecto son una pequeña parte de todo lo que podría aplicarse, sí constituyen una importante demostración de toda la información que puede aportarnos la investigación para conocer mejor las necesidades de nuestros usuarios. Esto puede ahorrarnos tiempo, recursos y, sobre todo, dolores de cabeza.

Otro aspecto importante es no tener miedo a la iteración constante en las diferentes fases del proceso, a pesar de que puede cambiar el rumbo del proceso en virtud de las revelaciones que se producen en su transcurso. Equivocarse es una de las mejores maneras de aprender.

Finalmente, hay que subrayar que a pesar de que sea difícil trabajar con todos los protagonistas del producto (usuario, cliente, entorno) durante todo el proceso, debemos intentar involucrarlos al máximo, pues así conseguiremos diseñar una experiencia más sólida y satisfactoria para todas las partes implicadas.

Enlaces relacionados:

Documentación:


Cita recomendada: MERIZALDE, Andrés. Una gran experiencia móvil para la muestra de cine más pequeña del mundo. Mosaic [en línea], febrero 2019, no. 168. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n168.1913.

Acerca del autor

Andrés Merizalde es un "sapiens" en toda regla. Esta curiosidad innata lo ha llevado a intentar resolver problemas por medio del diseño en diferentes ámbitos. Ha estudiado diseño gráfico, marketing y diseño de producto, y ha trabajado como director de arte y jefe de comunicación. Actualmente se ha especializado en la intersección del desarrollo de experiencias con la tecnología y trabaja como diseñador de experiencia de usuario (UX) en la consultora de desarrollo de software Pasiona. Podréis seguirlo en Twitter (@andmerizalde) o seguir su trabajo más personal a través de su web (www.andresmerizalde.com).

Deja un comentario