CheapFilm — UX/UI Case study
La app de amantes del cine para encontrar la mejor entrada al mejor precio
Article also available in English
Haz click aquí para probar el prototipo
Nota: este producto se desarrolló originariamente antes de la pandemia COVID-19, por lo que puede que ciertos aspectos de la investigación hayan cambiado desde entonces.
Introduccción
A principios del 2020, la agencia de branding y diseño digital Nugno, con sede en Dublín, contactó conmigo para diseñar una app que pudiese ayudar a mitigar el progresivo declive de espectadores en salas de cine en el país, además de poder ser extrapolable para otros paises de habla anglosajona.
“¡Las salas de cine están desapareciendo!”. Esto, es algo que solemos escuchar constantemente con la llegada de las plataformas de streaming, ya que nos hacen posible ver una película sin restricciones de tiempo o lugar. Pero, para muchas personas, los cines aún son un templo al que acudir cada fin de semana y disfrutar en una sala llena de extraños la próxima película ganadora del Oscar. Sin embargo, con una competencia tan accesible y ubicua, ¿qué podemos hacer para ayudar a las salas de cine? Bastantes cosas.
Podemos simplificar la forma en la que se compran entradas de cine. Podemos dar la opción al usuario de comparar precios, calidad del cine u horarios, simplemente seleccionando una película. Adaptemos al siglo XXI un modelo estancado en el pasado.
¿Y si pudiesemos comparar los precios de una entrada como si llamasemos a un Uber?
¿Y si comprar una entrada fuese igual de fácil y rápido que ver una película en Netflix?
Descubrir
Empatizar
El número de jóvenes que van al cine ha estado en declive en Reino Unido e Irlanda desde 2010, existiendo también una tendencia similar en Estados Unidos y otros países europeos. Es interesante que para muchos cines de Europa, la pérdida de dicha audiencia joven es considerada su mayor preocupación.
Usando la metodología desk research, encontré la siguiente información relevante al respecto:
Digitals and the silver screen (Nielsen)
Are we falling out of love with the cinema? (BBC)
New approaches to audience building (Europa Cinemas)
Are fewer young people watching movies in cinemas?
“Sociabilizar es especialmente importante porque, para los usuarios digitales, ir a ver una película es, en sí mismo, un acto social. Quizás no sepan que clase de películas quieren que se hagan desde Hollywood, pero sí que tienen una cosa bastante clara: no quieren estar fuera de la conversación”
- Nielsen Content
Esta situación hace que me centre especialmente en esa desconexión entre salas de cines y jóvenes, así como las barreras que les impiden ir al cine más asiduamente.
Hipótesis
Después de analizar diversas fuentes y estadísticas especializadas, definí las siguientes conclusiones:
- Muchos cines pequeños no disponen de los recursos necesarios para atraer jóvenes a través de las redes sociales.
- Los precios son el primer motivo por el que los jóvenes no van al cine tanto como les gustaría.
- Pero le siguen otros puntos como localización, horarios y comfort de la sala a la hora de comprar una entrada en un cine específico.
- Los cines temen más la pérdida de asistencia a las salas de los jóvenes que las plataformas de streaming.
- Las salas de cines no saben cómo conectar con su audiencia más lucrativa, jóvenes de entre 15 y 24 años.
- Conductas como pedir que se apaguen los teléfonos móviles mientras dura la película desmotiva a los jóvenes a ir al cine.
- La mayoría de los cines esconde sus precios hasta el último momento de la compra.
- Para los blockbusters, la mayoría de los jóvenes aún prefiere ir al cine por la experiencia social y colectiva que supone.
- Los cines aún confían en los snacks para generar la mayoría de sus beneficios.
Posteriormente, realicé cinco entrevistas con dos mujeres y tres hombres irlandeses, de entre 18 y 25 años, con las siguientes características:
- Viven en grandes ciudades con múltiples cines para elegir.
- Van al cine al menos una vez al mes.
- Tienen cuentas en plataformas de streaming.
- Saben qué películas quieren ir a ver próximamente en los cines.
Estas ideas me ayudaron a avanzar el concepto en algunos aspectos cualitativos, postulados a continuación.
Resultados
Después de recopilar toda la información, encontré diferentes insights:
“Algunas webs y apps de cines están bastante mal diseñadas para ser usadas en smartphones.”
“Siempre intento descubrir alguna oferta antes de decidir si merece la pena ir o no.”
“Una entrada de cine en un fin de semana para un gran estreno es realmente caro.”
“Realmente no sé si estoy pagando de más o no por ver una película en el cine de al lado de mi casa.”
“No quiero estar 30 minutos mirando cines, precios y diferentes horarios.”
“Solo voy a ver la película de la que todo el mundo habla, pero no sé si hay algo más que merezca la pena.”
“Al final, prefiero esperar unos meses y ver las películas que quería ver en el cine de forma mas cómoda en mi casa.”
Teniendo en cuenta estas declaraciones, tomé la decisión de centrarme en una solución que pudiese eliminar algunas de las barreras para las personas que quieren ir al cine pero acaban quedandose en casa, como añadir la posibilidad de comparar precios y comfort entre salas.
La solución final debe garantizar la compra de una entrada fácilmente, independientemente de la interfaz que tenga el cine y en menos de un minuto. Debido a que la audencia más lucrativa son los jóvenes que viven en grandes ciudades, decidí crear un user persona basándome en ese grupo demográfico.
Definir
User Persona
Creé un user persona para enfocar en un mismo usuario, las necesidades y frustraciones mas comúnes de cara a concretar un futuro producto.
Aquí tenemos a John, un joven enamorado del cine que vive en una gran ciudad mientras comienza su primer trabajo en publicidad, con poco nivel adquisitivo y aún menos tiempo libre. A John le encantaría ir más al cine, pero piensa que las entradas tienen en ocasiones un precio elevado, y que el proceso de compra debería ser más intuitivo y directo si de verdad quieren competir con Netflix, HBO, Amazon, etc.
Mapa de empatía
Junto con el user persona, diseñé un mapa de empatía para conocer más profundamente los sentimientos y emociones de John, enfocándome en otros aspectos de su relación con las películas y el cine.
Este mapa de empatía plasma una creencia mostrada antes en el proceso de desk research; los precios de los tickets son uno de los grandes handicaps a la hora de comprar una entrada, seguido del sentimiento de no estar perdiendo el tiempo en el proceso de compra. John, además, está bien informado de lo que hay en cartelera actualmente, pero le gustaría saber si alguna película es tendencia en su ciudad.
Customer Journey
Ideé en un customer journey lo que suele hacer John en un día cualquiera, así como de qué manera podría ayudar mi producto a mitigar o resolver completamente alguna de sus frustraciones.
En el día a día de John, podemos ver que su gran insatisfacción comienza cuando busca en Google y se ve asaltado por una gran variedad de opciones, que tiene que visitar una a una para encontrar la mejor oferta disponible. Dicha frustración desaparece cuando escoge una película en un cine determinado, apareciendo de nuevo cuando se da cuenta de que solo quedan asientos libres en primera fila. Finalmente, se encuentra con dos opciones: o comprar la entrada, o volver a continuar con su búsqueda.
Frustraciones
Al revisar el customer journey, resulta evidente en qué tres puntos había oportunidades de mejora:
- Las películas primero y los cines después, no al revés. Es necesario mostrar al usuario las diferentes opciones para ver una película concreta, en lugar de ver cada sala de cine una a una.
- Precios a primera vista. Tiene que mostrar de forma clara los diferentes precios, evitando así tener que indagar en cada cine cúal es el mejor precio disponible.
- Seleccionar un asiento no debería ser una frustración. La mayoría de webs y apps de grandes y pequeñas cadenas de cines no están bien adaptadas para las pantallas de los móviles, o no representan cómo de grande o pequeña es realmente la sala.
How might we
Después de entender mejor a nuestro usuario, definí un How we might que encapsula los diferentes requerimientos. A su vez, sirve como guía para no perder el concepto mientras se prosigue en el desarrollo.
“¿Cómo podríamos ayudar a John a comprar una entrada de cine a la vez que le ahorramos tiempo y dinero?”
Proposición de valor
Con toda esta información, comencé a crear un mapa para ilustrar el encaje entre la investigación y la ideación, además de todas las ventajas que le podemos dar para tratar de mitigar sus frustraciones.
Modelo de negocio
A la proposición de valor le siguió la creación del modelo de negocio: ayudando a clarificar la viabilidad de este proyecto, analizando quiénes son nuestros key partners y las acciones necesarias para alcanzar una situación económica viable.
Diseñar
Site Map
Al empezar a definir el producto final, vi que el MVP no necesitaba de una gran complejidad a nivel de estructura. Esto, hacía factible acceder al proceso de compra simplemente seleccionando una película desde la home, creando dos secciones adicionales en caso de buscar una película concreta o consultar el perfil.
Sketches
Al comenzar a aterrizar el diseño para CheapFilm, el primer objetivo fue desarrollar una forma de mejorar la comprar de tickets para salas de cine cercanas con los mínimos pasos posibles, manteniendo toda la información necesario de cara al usuario por el camino.
El resultado fue crear dos pantallas, más una opcional (en caso de que el usuario quiera cambia cualquier opción o ver mas información acerca de la película).
De cara a la selección de asientos, empezó a quedar claro que adaptar cada sala de cine de forma genérica o mostrar la la selección de asientos del cine en cuestión como un modal o pop-up no era un solución viable. Fue entonces cuando tuve la idea de saltarme ese paso por completo, ya que dicha compra es tecnologícamente viable con la ayuda de Python y el navegador Selenium. Dicho método, se contrastaría con algunos usuarios en la etapa de testeo.
Por último, la pantalla de confirmación de compra, la cúal debe proporcionar una información clara y concisa, habilitando el acceso inmediato a dichos tickets.
Low-fi Wireframes
Posteriormente, pasé los sketches a mano a pantallas de baja fidelidad, cuidando la colocación de los elementos asi como de las posibles interacciones.
Testeo y Modificaciones
Después de testear el prototipo en baja fidelidad con los mismos usuarios involucrados en la primera parte del estudio UX, decidí cambiar el diseño de la pantalla home, que contenía un scroll vertical con las diferentes películas a elegir, para pasar a una estructura en grid con elementos más pequeños y scroll horizontal. De esta forma, es posible ver más elementos en un primer vistazo y detectar cuáles son las películas más recomendadas por la plataforma.
Deseché la idea de de tener las secciones de “Búsqueda” y “Perfil” en la parte superior a favor de una bottom bar, consiguiendo así cohesionar todas las secciones, además de dotar de aún más importancia al día de la semana en el que se quiere comprar la entrada.
La forma de mostrar las diferentes salas disponibles en la pantalla de mapa, pasó de un diseño con tarjetas y scroll horizontal a una sola columna con las diferentes opciones desglosadas, lo que logra una combinación más consistente y coherente al existir todo en un mismo espacio.
Finalmente, la opción de seleccionar o cambiar la forma de pago fue añadida en la página de la película seleccionada, evitando así tener que ir a la sección de configuración, cambiarla, y volver a repetir el proceso de compra.
Entregar
Colores
Tipografía
Lato
Logo
Entradas de cine a precios bajos. Al mezclar ambos conceptos, creé un diseño minimalista y elegante que logra transmitir al instante lo que el usuario puede esperar de la app. Finalmente, el degradado ayuda a integrar los diferentes colores y procesos del producto en un mismo espacio.
Onboarding
La función del onboarding de CheapFilm es la de informar de los 3 aspectos clave de la app en el mismo orden en el que se desarrollan: selección de película, ranking de precios y selección de asientos automática.
También diseñé y animé las ilustraciones que acompañan al texto, complementándolo y facilitando la compresión del mismo con un simple vistazo.
Home
El enfoque de la pantalla principal de CheapFilm está basado en dar la misma experiencia que uno tiene cuando llega al cine y ve todas las películas expuestas en cartelera.
El objetivo principal fue tener la menor información posible, integrando componentes clave como la posibilidad de cambiar el día y pequeños tags informativos sobre qué película es popular o recomendada en ese momento.
La barra de navegación inferior, integra los botones para buscar una película específica rápidamente, y el perfil del usuario, para comprobar compras pasadas y una lista de deseos de películas que quiere ver en un futuro.
Mapa
Al seleccionar una película pasaremos a la sección de mapa, donde CheapFilm encontrará las entradas mas baratas alrededor de donde se encuentra el usuario (o un punto que este elija), informando claramente de los diferentes precios en una zona concreta.
Aquí el usuario puede seleccionar cualquier sala que le venga mejor por posición y precio, y comprar directamente la película con una configuración de gustos preestablecida, basada en el tiempo actual, preferencias y compras anteriores.
Detalles
La página “detalles” se diseñó pensando estratégicamente en dos conceptos: seleccionar diferentes opciones de las habituales y ver mas información antes de comprar las entradas.
Aquí el usuario revisa la localización exacta de la sala, selecciona la hora, cuántos asientos quiere y en qué zona le gustaría sentarse. CheapFilm automáticamente buscará el mejor asiento centrado para cualquiera de las opciones escogidas (Back, Middle, Front) y mostrará si alguna de estas no esta disponible. Se acabó que seleccionar un asiento en una pantalla de móvil sea una experiencia terrible.
Al comprar la entrada, una pantalla de confirmación nos proporcionará los datos clave además de la opcion de poder ver el ticket en el momento.
Ticket
Todos hemos llegado tarde alguna vez a una película, nos hemos parado justo en la puerta de la sala y hemos sacado el ticket digital o físico para descifrar dónde esta nuestro asiento exactamente.
Por eso, en la pantalla de “Ticket”, la sala, fila y asiento, es lo primero que la persona ve cuando comprueba su entrada, junto con el código de barras y la muy útil (pero poco implementada) opción de compartir un ticket específico, en caso de que uno de tus amigos decidida saltarse los trailers e ir un poco más tarde.
Perfil
Dentro de “Perfil”, nos encontramos con dos secciones claramente diferenciadas. La primera, “Watchlist”, son las películas que el usuario quiere ver en un futuro, y “Purchases”, son las compras pasadas, en caso de que el usuario quiera ver cuántas películas ha disfrutado el mes pasado o consultar alguna información relevante. En ambas secciones, también se encuentra la posibilidad de buscar una película específica.
El resto de opciones como métodos de pago, configuración de la cuenta, seguridad y notificaciones, se encuentran dentro del icono de la rueda dentada (“Settings”), ya que no son secciones a las que el usuario normalmente acceda habitualmente.
Conclusiones
¿Qué aprendí?
Para la supervivencia de las salas de cine, es vital encontrar otras formas de atraer al público joven mas allá de los blockbusters, que poco a poco se van haciendo más hueco también en las plataformas de streaming. Para ello, bajo mi juicio, el primer paso es facilitar al máximo la compra de entradas ofreciendo un producto competitivo para un colectivo que no suele tener mucho dinero que gastar, pero quiere gastarlo en ocio. En mi investigación, analicé los principales puntos de fricción a la hora de comprar una entrada de cine. Entendí las necesidades de los usuarios a través de las entrevistas, y finalmente, acepté el desafío de crear una app que pudiese acercar al presente un mundo aún anclado en el pasado, de la forma mas ágil y atractiva posible.
Siguientes pasos y futuras implementaciones
- Realizar una investigación más profunda sobre las elecciones de asientos más populares entre territorios.
- Comprobar la viabilidad técnica de la selección automática de asientos a largo plazo.
- Mejorar la accesibilidad en determinados puntos.
- Testear la opción de incluir la compra de snacks y diversas promociones como addon al comprar la entradas.
- Opción de cines favoritos: añadir la opción de guardar varios cines como habituales para comparar precios de una misma película mas rápidamente.
- Opción de “móviles bienvenidos”: habilitar una opción para ubicar en la fila trasera a todos aquellos usuarios que quieran usar su móvil en silencio durante la proyección, para que así el brillo de sus pantallas no moleste a otros espectadores.
Palabras finales
Espero que esta app ayude a las salas de cine a no tener que depender de la nostalgia y el apego de sus usuarios habituales. Aspiro a que, en un futuro cercano, las salas se sigan llenando de gente joven, que no vea el hecho de ir al cine una experiencia más propia del pasado sino de los tiempos que corren. Esperemos que así sea.
Y si has llegado hasta aquí, ¡muchísimas gracias por tu atención y dime qué te ha parecido CheapFilm!