Aplicación de avances de películas para un cine

imagen del proyecto de una aplicación de avances de películas para un cine

La versión móvil es una versión simplificada del proyecto. Consulta está página en su versión Desktop para tener acceso a más detalles. Gracias.

Metodología

El producto

Se trata de una aplicación de avances de películas para un cine.

La App debe ir mas alla de los avances para proponer una experiencia del usuario agradable y simple, incluyendo soluciones a los problemas de los usuarios.

Duración proyecto

Principio del proyecto – Agosto 2023
Fin del proyecto - Avril 2024

El problema

Los usuarios necesitan acceder a los avances de cine y poder reservar de forma simple, rapida y sencilla porque no tienen el tiempo suficiente para planear o buscar en la APP.

El objetivo

Nuestra APP permitira acceder facilemente a los avances de cine y tener opciones directas para reservar, lo que afectara de forma positiva a los usuarios en ganar tiempo.

Mi rol

Diseñador UX – VISUAL
Mi rol cubre todo el processo de diseño, desde la investigacion pasando por los esquemas, wireframes, prototipos…

Responsibilidades

Proyecto realizado de su inicio hacia su final. Investigación de usuarios, creación de esquemas, creación de prototipos, etcétera.

Entender al usuario

Investigación sobre los usuarios: resumen

imagen investigación usuario

La investigación de usuarios esta basada en una investigacion primaria y cualitativa.

Prevención del sesgo en la recopilación de datos.

Investigación primaria :

La información proviene de interacciones directas con usuarios (entrevistas y encuestas).

En mi entorno personal, como en mi entorno de redes sociales.

Investigación cualitativa :

los datos han sido recopilados por observaciones, conversaciones, y cuestionarios.

Este método para comprender las necesidades de los usuarios.

Investigación sobre los usuarios: puntos débiles

imagen numero1

Tiempo dedicado

Los usuarios no tienen mucho tiempo y quieren acceder de una forma simple y directa.

imagen numero 2

APP movil

Diferentes tipos de dispositvos: la cualidad de los avances debe adaptarse al material y velocidad de coneccion.

imagen numero 3

APP para todos

La cibla de la APP es de 18 a 35 años. Pero no se puede descartar los usuarios mas mayores ni los usuarios con discapacidad.

imagen numero 4

Recorrido

La APP se centra en dos recorridos principales: trailers y reserva. Los usuarios deben tener opciones de volver o anular en cada momento.

Persona : Miguel

Planteamiento del problema :

Miguel es una persona que trabaja mucho que necesita tener acceso a avances de cine con todas las informaciones y opciones relacionadas de manera rápida, directa y digital porque no tiene mucho tiempo libre, no le gusta planear, y quiere disfrutar de momentos con su familia y sus amigos.

imagen de persona

Miguel MARTÍN

Edad: 26 años
Educación: Universidad
Ciudad: Madrid
Familia: vive en pareja
Ocupación: ingeniero

“ Trabajo mucho, y en mi tiempo libre me gusta tener muchas actividades y compartirlas. "

Objetivos

Tener informaciones rapida y directa.

Poder hacerlo todo de manera digital.

Tener una buena qualidad y servicios

Frustaciones

No le gusta pasar mucho rato buscando.

Algunas veces no tiene acceso a todo la información relacionada.

Miguel trabaja mucho, y hace muchas actividades en su tiempo libre con su familia y sus amigos. No le gusta mucho planificar sus actividades, ya que prefiere vivir los momentos como surgen. Tiene un nivel de vida bastante bueno, y vive a 100 por hora. Le gusta tener informaciones rapida, y esta acostrumbado a las nuevas tecnologias. Cine : 10 veces / año.

Este contenido esta optimizado en la versión Desktop .

imagen del contenido relacionado con la persona, solo disponible en la versión movil.

Mapa de recorrido del usuario

El mapa muestra la serie de experiencias que tiene un usuario a medida que va realizando acciones para alcanzar y completar su objetivo en la aplicación de avances de películas para un cine.

Las acciones de los usuarios en esta etapa del proceso de diseño tienen que ver menos con la interacción directa con el producto y más con qué hace el usuario a lo largo del día mientras intenta lograr su objetivo.

Este contenido esta optimizado en la versión Desktop .

imagen del mapa de recorrido de la persona, en versión movil

Acción

Acceso APP

Acceso infos

Compartir

Reservar

Billete

Lista tareas

Acceder a la APP

Ver peliculas actuales

Ver las proximas

Horarios

Precios

Detalles

Calidad video

Opciones

Compartir rápidamente

Comentarios

Acceso sin cobertura

Reservar en 1

Planear / calendario

Añadir refrescos

Posibilidad anular

Acceder con movil

Posibilidad de abono

Sentimiento

Estrés por tener cobertura móvil

Poca paciencia para acceder a las películas

Nervioso al buscar por fecha

Quiere toda la información con el trailer

No le gusta buscar entre las opciones

Feliz cuando encuentra lo que busca

Molesto cuando no hay cobertura

Presionado para compartir información

Satisfecho cuando comparte comentarios

Preocupado por ingresar su numero de tarjeta de crédito

Miedo de olvidar la fecha y la hora

Preocupado por no tener suficiente batería

Feliz de no hacer cola en el mostrador, y de poder entrar directamente

Oportunidades

Acceso rápido a avances de peliculas

Posibilidad de tener acceso offline a los tráileres

Mejorar la búsqueda de los próximos estrenos

Posibilidad de tener toda la información y opciones superpuesta a la pelicula

Posibilidad de compartir rápidamente desde el elemento visto

Posibilidad de reservar en un paso desde el elemento visto

Posibilidad de añadir una sesión o una reserva a su calendario

Billete digital: envió por correo electrónico o mediante APP móvil (código QR...)

Posibilidad de acudir al mostrador en caso de problema

Comenzar el diseño

Esquemas de página en papel

Tomarse el tiempo para elaborar en papel iteraciones de cada pantalla de la aplicación garantizó que los elementos que llegaron a los esquemas de página digitales fueran los correctos para abordar los puntos débiles del usuario.

Para la pantalla de inicio, prioricé un proceso de reserva rápido y simple para evitar que los usuarios pierdan tiempo.

Una imagen de los esquemas de página en papel de la aplicación de avances de películas para un cine.

Se utilizaron estrellas para marcar los elementos de cada boceto que se usarían en los primeros esquemas de página digitales.

imagen de un esquema en papel de la página de inicio de la aplicación de cine

Esquemas de página digitales

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

logo figma

Herramienta utilizada: FIGMA

En esta fase, diseñe 8 esquemas.

Recorrido de inicio y de registro (3), recorrido de reserva (4), y acceso tráiler (1).

Primera página cuando el usuario se conecta.

Una imagen del esquema de página de baja fidelidad de inicio de la aplicación de avances de películas para un cine.

imagen de ejemplo de esquema pagina de inicio de la aplicación de cine
imagen de ejemplo de esquema pagina de inicio de la aplicación de cine

Proceso de reserva, una página de confirmación antes de pagar.

Una imagen del esquema de página de baja fidelidad de reserva de la aplicación de avances de películas para un cine.

imagen de ejemplo de esquema de la aplicación de cine para reservar.
imagen de ejemplo de esquema de la aplicación de cine para reservar.

Prototipo de baja fidelidad

Initio : el usuario tiene que conectarse, o crear un cuanta si no tiene.

El usuario llega en la pagina de las peliculas actuales : puede ver los trailers, o reservar.

El prototipo muestra el recorrido de reserva, con posibilidad de volver a la pagina anterior o de hacer modificaciones.

logo figma

Herramienta utilizada: FIGMA

Esquemas zoom: inicio, y recorrido de registro.

prototipo baja fidelidad de la aplicación de cine

Estudios de usabilidad: descubrimientos

Procedimiento de los estudios de usabilidad: dos rondas.

La primera ronda ayuda a diseñar los esquemas – paso de wireframes mockups.

La segunda, se centra en un prototipo de alta fidelidad, revelando los aspectos de los mockups que necesitan mejoras.

Descubrimientos de la Ronda 1

Descubrimientos de la Ronda 2

Perfeccionar el diseño

Maquetas

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

logo figma

Herramienta utilizada: FIGMA

En esta fase, diseñe 26 maquetas.

Recorrido de inicio y de registro (3), menú (2), página principal (1), recorrido de reserva para cada película (20).

Mejorar el contraste, cambiando los colores.

Color naranja destinado a los botones – call to accion.

No cargar el diseño con tanto naranja.

imagen de ejemplo de maqueta de la aplicación de cine

Mejorar las opciones de los dias y de las horas.

Mejorar las opciones candidades.

Un calendario no esta previsto por el momento en la APP.

imagen de ejemplo de maqueta de la aplicación de cine

Alta fidelidad prototipo

Initio : el usuario tiene que conectarse, o crear un cuanta si no tiene.

El usuario llega en la pagina de las peliculas actuales : puede ver los trailers, o reservar.

El prototipo muestra el recorrido de reserva, con posibilidad de volver a la pagina anterior o de hacer modificaciones en la aplicación de avances de películas para un cine.

logo figma

Herramienta utilizada: FIGMA

imagen página inicio de la aplicación de cine

Condiciones de accesibilidad

numero 1 color verde

Colores

Varias evoluciones a lo largo de los diseños.

Por ejemplo, en la version final, los colores azul y naranja permiten alcanzar contrastes superiores a 5 (color de texto sobre los colores azul y naranja).

numero 2 verde

Call to accion

Para no perder el usuario en su recorrido, hay dos tipos de botones:

Los del processo de reserva (mismo tamaño rectangular).

Los otros – play, back,… (mismo tamaño redondo).

Todos son de color naranja.

numero 3 verde

Arquitectura

Los elementos estan grupados visualmente.

El texto combina dos tipografías con tamaños diferente según la importancia del contenido (titulo…).

Avanzar

Conclusiones

imagen impacto

Impacto

Cuando el usuario se conecta, puede acceder fácilmente a los avances de cine (trailers).

Puede reservar en cada paso, directamente pero también cada vez que accede a un trailer.

Tiene la oportunidad en cada paso de su recorrido de poder retroceder al paso anterior o de anular por ejemplo un pedido.

imagen que aprendi

Qué aprendi

Los usuarios necesitan tener puntos de referencia simples y llamativos para poder acceder o retroceder a lo largo de su recorrido.

Varias opciones no se han desarrollado para mantener la simplicidad y rapidez del proceso.

Mantener un contacto con usuarios y profesionales permite mejorar el producto a lo largo de su desarrollo.

Próximos pasos

imagen numero 1 gris

Evaluar la opción de poder modificar la lista de peliculas actuales para poder ver los carteles.

Permite a los usuarios que no quieren ver las informaciones de las peliculas, o a los que ya las conocen, acceder mas fácilmente et rápidamente a los avances o reservas.

imagen numero 2 gris

Evaluar la posibilidad de entrada digital, para acceder en el cine directamente mediante el QR code u otro sistema (para no editar entradas en el cine y evitar de esperar).

imagen numero 3 gris

Evaluar la posibilidad de elegir los asientos, añadir bebidas… antes de pagar.

Evaluar la posibilidad de compartir los avances o las reservas con un grupo, de manera interna, whatsapp, mail…

¡ Pongámonos en contacto !

Les agradezco el tiempo dedicado a consultar este proyecto de aplicación de avances de películas para un cine.

Muchas gracias.

Les invitato a consultar mi perfil Linkeldin

Les invito a envíame un mensaje.