CheapFilm — UX/UI Case study

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.

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.

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.
  • 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.

Resultados

Después de recopilar toda la información, encontré diferentes insights:

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.

User Persona para CheapFilm

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.

Mapa de empatía de John

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.

Customer Journey de John

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.

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.

Proposición de valor de CheapFilm

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.

Modelo de negocio de CheapFilm

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.

Site Map para CheapFilm

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.

Sketches de CheapFilm

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.

Low-Fi Wireframes

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.

Sección Home después de la primera iteración

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.

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.

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.

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.

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.

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.

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.

--

--

UX/UI & Motion Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store