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
- Entender al usuario
- Comenzar el diseño
- Perfeccionar el diseño
- Avanzar
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 de usuarios
- Personas
- Planteamientos del problema
- Mapas de recorrido del usuario
Investigación sobre los usuarios: resumen

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

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

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

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.

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.

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 .

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 .

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
- Esquemas de página digitales
- Prototipo de baja fidelidad
- Estudios de usabilidad
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.

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.

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.


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.


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.

Herramienta utilizada: FIGMA
Esquemas zoom: inicio, y recorrido de registro.

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
- No hay opciones de pago a la hora de pagar (visa, paypal…).
- Un calendario en ves de seleccionar día y hora.
- No hay acceso directo a un espacio personal.
Descubrimientos de la Ronda 2
- Verificar el contraste blanco sobre naranja / cambiar si necesario.
- Revisar y confirmar pedido cambiar el color a uno diferente de los botones.
- No hay acceso directo a un espacio privado.
Perfeccionar el diseño
- Maquetas
- Prototipo de alta fidelidad
- Accesibilidad
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.

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.

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.

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.

Herramienta utilizada: FIGMA

Condiciones de accesibilidad

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

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.

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
- Proximos pasos
Conclusiones

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.

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

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.

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

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 invito a envíame un mensaje.