Muva App

Muva | Boletos de Cine | UX & Branding

Muva es el diseño de una plataforma dedicada a la venta de boletos para funciones de cine y pedir comida por adelantado, con envío directo a asiento de los usuarios antes de la película. Muva está enfocado especialmente en los amantes del cine, para quienes el ver películas forma parte de su día a día.

 

El reto fue diseñar una plataforma que funcione bajo un modelo de membresía, la cual combine el robusto proceso de pedir comida a domicilio con la venta de boletos, encapsulando ambos conceptos en una experiencia de marca cohesionada y funcional.​​​​​​​

Objetivos

Diseñar una aplicación móvil.
Desarrollar una experiencia digital simple y agradable.
Diseñar la identidad visual de Muva.

 

Responsabilidades

Conducir entrevistas, wireframes digitales, wireframes en papel, prototipado de baja fidelidad, prototipado de alta fidelidad, estudios de usabilidad e iteración. 

Insights de Entrevistas

Para este proyecto entrevisté a 4 personas, las cuales son apasionadas por el mundo del cine y constantemente asisten a funciones (a excepción del último año y medio de la pandemia). 2 de estas personas residen en la ciudad de Guadalajara, México; las otras 2 personas viven en Sinaloa y en Puerto Vallarta, México. El objetivo de las entrevistas fue el de entender cuáles son los retos más grandes que enfrentan los usuarios al asistir a una función, y el saber cómo combinan la experiencia de ver películas con la compra de alimentos. Otro de los objetivos fue el de conocer el feedback de estas personas sobre las plataformas actuales enfocadas en la venta de tickets de cine online.

Los Principales Puntos de Dolor

Las principales plataformas de venta de tickets online son inestables.
Las filas para comprar alimentos y dulces toman mucho tiempo.
Las plataformas de compra de tickets online no funcionan en todas las funciones de cine.
La oferta de comida disponible en las salas de cine es muy limitada.
A veces las salas de cines se llenan, lo que lleva a los usuarios a tener que esperar una función nueva. 

User Personas

Antes de comenzar con el diseño, me sumergí en el comportamiento existente de las personas más entusiastas de las películas, con el fin de entenderlos mejor. Combiné los insights obtenidos con las entrevistas realizadas para poder definir 2 arquetipos de personas. 

User Journey

Wireframes de Papel

Me dediqué a plasmar el camino del usuario en papel antes de comenzar con los wireframes digitales, lo cual me dio la flexibilidad de hacer cambios de forma rápida y pasar con mayor claridad a la creación de los wireframes digitales.

Wireframes Digitales

Durante el diseño fue muy importante enfocarme en el protagonismo de las películas en la experiencia del usuario, utilizando imágenes grandes y ordenadas. Esto ayudó a los usuarios a conectar con estas películas durante su proceso en la aplicación.

Se definió una compra de boletos personalizada, donde se muestran los cines más cercanos al usuario y las funciones más inmediatas, especificando las características de la función: 3D, IMAX, 4D, etc. Decidí usar un mapa en tiempo real de los asientos disponibles en la sala de cine, mejorando la experiencia del usuario y evitando inconvenientes durante la película. Claramente se toma en cuenta la disponibilidad de asiento y los asientos especiales para personas con habilidades diversas.

A pesar del enfoque hacia la optimización y simpleza, fue importante diseñar una experiencia para pedir comida lo suficientemente robusta, ya que la comida es una prioridad gigante para los usuarios. Esta opción de pedir alimentos es casi como si se creara una app nueva sólo para pedir comida.

Una vez confirmada la compra de los tickets y la comida, se agregó una pantalla que confirma la función, con un código único que sirve para validar los boletos en el cine de forma inmediata: un código de barras y un código de caracteres como backup (por si el primero falla).

Estudio de Usabilidad

Se realizó un estudio de usabilidad con las 4 personas iniciales. La información se aterrizó en un diagrama de afinidad, el cual fue muy importante para entender las áreas de oportunidad del prototipo de Muva, ya que este nos arrojó los siguientes insights:
Los participantes se sintieron agobiados durante la selección de tickets.
Los participantes necesitan una opción para cambiar la fecha de su función facilmente.
Los participantes se sienten agobiados al seleccionar su comida.
Los participantes buscan múltiples opciones de pago.
Los participantes quieren una selección de asientos automática.
Los participantes quieren seleccionar su comida una vez que la función esté agendada.

 

Kit UI

Además del diseño de la app, me encargué del diseño de la identidad visual de Muva, especialmente del Kit UI que servirá como base de los mockups.

 

Mockups Iniciales

Los insights de los usuarios me permitieron optimizar la experiencia a través de cada pantalla, cubriendo espacios de frustración que no había visto inicialmente.

 

La inclusión de imágenes grandes y completas permite darle el protagonismo necesario a las películas y sus personajes. Además de la búsqueda directa, se añadió una búsqueda por estudio (dando prioridad a los estudios cinematográficos más populares).

 

Diseñé un sistema de elección de fecha rápido e intuitivo, donde el usuario puede cambiar la fecha de búsqueda de forma inmediata (sólo deslizando). También se aprovechó la paleta de colores de la marca para diferenciar los asientos de la sala y su estatus; donde al mismo tiempo se añadió la opción de auto-selección de los mejores asientos disponibles, para aquellos usuarios que tienen menos tiempo para elegir.

 

La naturaleza de la selección de películas se extrapoló a la selección de alimentos, dándole prioridad a los restaurantes más cercanos al cine, agilizando el proceso y reduciendo el tiempo de entrega.

 

Con el fin de evitar sorpresas negativas y eliminando patrones oscuros de diseño, se añadió una pantalla de “resumen” justo antes de la transacción final, la cual contempla el costo extra de envío, la propina voluntaria y el costo de los productos. La opción de pago por default es la misma con la que se paga la membresía, pero el usuario puede cambiar esta de forma fácil en la misma pantalla del pago.

 

Gracias al feedback, ahora la pantalla de confirmación incluye la información de la película y la información de los alimentos dentro de la misma pantalla, entiendiendo que al final del día son parte de la misma experiencia. El código de validación de boletos se quedará almacenado en la aplicación.

 

Toda la aplicación mantiente consistencia con la identidad visual de la marca.

Ver prototipo: https://www.figma.com/proto/tGbdmFuPpCQnhm1yZX237p/Muva?page-id=129%3A173&node-id=129%3A631&viewport=241%2C48%2C0.07&scaling=scale-down&starting-point-node-id=129%3A631

 

Durante el diseño de la app me quedó muy claro el gran impacto que tienen los estudios de usabilidad en esta. Como diseñador, es muy fácil abordar proyectos de diseño con cierto nivel de sesgos, pero el feedback de distintas fuentes aterriza todo a la realidad y ayuda a generar un producto mucho más efectivo.

 

Whatsapp