top of page
Rediseño Cinedot app
para certificado de
Diseño UX de Google
Diseño de aplicación + UX/UI
UP UP AND UP
FECHA
ROLE
AGENCIA
ENTREGABLES
Feb - Apr 2022
UX Researcher
UX Designer
UI Designer
Freelancer
Mockups Hi-Fi, High fidelity prototype
FRAMEWORK
Design Thinking
Antecedentes
El rediseño de Cinedot App fue creado como un proyecto para el certificado de UX Desing de Google, nos pidieron elegir entre una serie de desafíos de diseño de aplicaciones móviles para simular la solicitud de un cliente y desarrollar todo el trabajo de investigación, desarrollo diseño e iteración.
Elegí como proyecto el desarrollo de una aplicación de trailers para cines, pero quise vincularlo a un caso real, para que el ejercicio tuviera mayor profundidad en mi aprendizaje. Por eso, realicé una breve investigación de las empresas mexicanas de cine y sus aplicaciones para hacer el rediseño de la que en ese momento consideré con mayores problemas en cuanto a usabilidad.
Desafíos
1) Diseñar una aplicación con un flujo más simple que la actual
2) Generar una interfaz que permita al usuario centrarse en el proceso de compra.
3) Proporcionar una experiencia fluida y lineal para los usuarios.
4) Diseñar una pantalla con el menú de snacks que permita al usuario realizar su compra de manera simple.
Al iniciar
Cuando comencé con el proyecto, decidí tomar un enfoque dirigido a simplificar los procesos con los que la app ya contaba, principalmente el proceso de compra de snacks, que me resulto un tanto aparatoso y complicado, por lo que decidí realizar investigación cualitativa, una auditoría de competencias para encontrar los puntos fuertes y débiles de Cinedot frente a sus rivales en el mercado, a la par de entrevistas con usuarios de aplicaciones similares y la construcción de mi hipótesis de personalidad. Las preguntas clave iniciales fueron:
¿Qué es el producto que quiero
mejorar y para quíen es?
¿Cuánto tiempo lleva al usuario completar la compra de sus boletos y snacks?
¿Cuál es el proceso más complicado de la aplicación?
¿La aplicación es atractiva para los usuarios?
¿Necesito implementar más estrategias para mejorar la usabilidad?
Para comprender el problema, realicé entrevistas cualitativas a un total de 5 participantes identificados como usuarios de aplicaciones móviles para compra de boletos de funciones de cine. Se aplicó una serie de preguntas abiertas y de opción múltiple con el objetivo de conocer la opinión de la aplicación actual, comprender lo que les gusta y qué les disgusta de esta aplicación, medir el tiempo que les toma completar el flujo de principio a fin y su escala de usabilidad.
Las respuestas que me dieron, me ayudaron a la construcción de un mapa de afinidad en el que pude localizar los temas a trabajar, como la mejora del flujo, elementos a agregar o modificar, simplificar la información en pantalla y mejora de UI.
Diagrama de Afinidad
Iteración de posibles soluciones
Diagrama de Afinidad
1/2
¿Quién es mi persona?
Metas
​
-
Acudir con mayor frecuencia al cine.
​
-
Realizar la compra de snacks desde la app para evitar filas.
​
-
Ver los horarios y el tráiler de la película para saber si es apta para sus hijos.
Frustraciones​
​
-
La aplicación es un complicada de usar.
​
-
El menú de snacks no es intuitivo y comprar más de un producto es tedioso.
​
-
Pantalla de horarios sobrecargada de información.
Análisis de competencia
Realicé un análisis de 3 empresas que son competencia para Cinedot, y aunque solo dos son competencia directa, las tres empresas ofrecen un producto y experiencia similares, dos de estas empresas son las líderes del mercado mexicano en la industria de la exhibición de películas. Los competidores presentaban características muy similares entre ellos, sin embargo las diferencias más importantes que surgieron fueron:
-
Difícilmente accesible - Moderadamente accesible
-
Precios más bajos - Precios más altos
-
Preparado para accesibilidad - Sin preparación para accesibilidad
-
Público meta segmentado - Público meta generalizado
Abriendo camino
Construí un flujo básico, desde que el usuario abre la aplicación por primera vez, hasta que finaliza la compra de sus tickets para ver una película, (los snacks son opcionales). La simpleza muchas veces es una cualidad poco apreciada en un mundo moderno saturado de información, un principio básico del diseño es que menos es más, también en un flujo de recorrido, entre menos pasos tenga que seguir el usuario, más seguro es que llegue al final.
Flujo del Wireframe digital
Al llegar a este punto, revisé mi flujo original, tuve que decidir que era necesario y que cosa podía dejar por fuera del prototipo inicial, hubo varias mejoras con respecto a los wireframes en papel, invertí mucho tiempo en esto, pero al final valió la pena, pues se convirtió en una experiencia de usuario más fluida e intuitiva.
Iteración
Después de diseñar mi prototipo de baja fidelidad, crear un guion para realizar una entrevista y diseñar la metodología para el estudio de usabilidad, puse a prueba el prototipo con 5 usuarios reales con diferentes características sociodemográficas, los participantes del estudio realizaron una serie de diferentes tareas y posteriormente respondieron las preguntas de la entrevista y dieron su opinión al respecto de diversos aspectos del prototipo, gracias a esto pude obtener un feedback valioso que me sirvió para iterar una vez más en mi diseño y mejorar la experiencia de usuario.
Botón ayuda
Es necesario implementar un botón o tutorial para poder ayudar al usuario en su recorrido. No todos los usuarios tienen las mismas características, y cuando no están familiarizados con aplicaciones de este tipo, puede convertirse en un reto el uso de las mismas.
Snacks
Para la mayoría de los participantes del estudio, el punto de dolor principal fue la pantalla de snacks. Hacerla de una manera más simple e intuitiva es un reto que vale la pena superar, pues esto logrará un mayor índice de conversiones a compras de snacks.
Carrito de compras
La disposición del carrito de compras no fue del agrado de los participantes, por lo que pensar en una forma más clara de presentar este elemento fue una de las partes más importantes dentro de la iiteración.
Información
Los participantes aportaron que era necesario aumentar la información en algunas partes del proceso, como un pequeño ícono que los ayudara a visualizar cuantas piezas de un producto han agregado al carrito, o una pantalla que les indique con claridad qué es lo que llevan en el carrito antes de proceder a la confirmación.
Antigua pantalla trailer
Nueva pantalla trailer
Antigua pantalla snacks
Nueva pantalla snacks
El producto
Busqué que el flujo de el usuario se hiciera más sencillo al limitar la información que aparece en pantalla para no saturar el proceso para los usuarios.
Una de las pantallas que sufrieron más cambios estructurales y de la arquitectura de la información fue la pantalla menú de snacks, puesto que en la investigación fue el mayor punto de dolor para los usuarios, además de un rediseño visual en todas las pantallas de la aplicación. También agregué algunos elementos como un botón de ayuda para desplegar modales de los tutoriales en las pantallas por medio de pop-ups que podrían generar dudas de usabilidad en el usuario.
Flujo principal
El flujo principal de la aplicación es simple e intuitivo, busqué limitar la información sin quitarla completamente, el usuario aún tiene todas las opciones que tenía previamente, pero ahora puede escoger que ve y que no, para no saturarse con información que probablemente no necesitará durante su recorrido, pero que sigue ahí por si desea acceder a esta.
Home
Trailer
Compra éxitosa
Home
1/8
Botón de navegación
En cualquier aplicación es fundamental el uso de un botón de navegación, también conocido como "menú hamburguesa". En la app de Cinedot, puedes utilizar este botón para navegar entre tu perfil, opciones de configuración, el about us de cinedot, número de teléfono de atención al consumidor o para enviar un correo a la empresa.
Barra de búsqueda
No todos los usuarios navegan de la misma forma dentro de una aplicación, por eso también decidí implementar una barra de búsqueda en la que el usuario podrá buscar la película que le interesa ver para ingresar directamente a la pantalla de "trailers y horarios de la misma".
Botón ayuda
Teniendo en mente que muchas veces el usuario final, no es el el usuario meta de una aplicación, lo ideal es implementar estrategias que permitan interactuar adecuadamente a todo tipo de usuarios con nuestros productos. Al contar con un botón de ayuda que desplegará un pop-up en la pantalla con una serie de explicaciones breves de los elementos y botones que el usuario puede utilizar en su proceso de selección y compra.
Tutorial Home
Tutorial Boletos
Tutorial Pago
Tutorial Home
1/5
Guía de estilo
Respetando la carta de colores que maneja Cinedot, apliqué un estilo similar al de la aplicación actual, pero quise jugar un poco con algunos tonos y degradados en pantallas que no formaban parte del flujo principal para imprimir un poco más de impacto en pantallas como "Código Qr de los boletos" o la pantalla de "Perfil" estas pantallas son perfectas para realzarlas utilizando elementos más coloridos, pues en las demás pantallas del flujo principal, decidí utilizar más espacios blancos para que el usuario no distraer al usuario y que lo que se destaque sean los elementos que el usuario utilizará en su recorrido hasta completar su tarea, la compra de boletos y snacks.
Conclusiones
Las deficiencias encontradas gracias a los dos estudios de usabilidad realizados en este proyecto fueron resueltas de manera satisfactoria.
Sin embargo soy consiente de que el trabajo no termina aquí, siempre se puede mejorar, a corto plazo me gustaría realizar cambios de UI para lograr un diseño más atractivo para el usuario. Sin embargo el diseño ya es completamente funcional y puede entregarse al equipo de ingeniería.
bottom of page