Durante el rediseño de la experiencia de producto para las aplicaciones móviles de Cinemark, desarrollé e implementé un Sistema de Diseño integral. Este sistema proporcionó un conjunto cohesivo y estandarizado de principios de diseño, paleta de colores, tipografÃa, componentes de interfaz y patrones de interacción. El Sistema de Diseño se diseñó para adaptarse fácilmente a diferentes plataformas (Android e iOS) y mercados, y sirvió como un recurso centralizado para garantizar la coherencia visual y funcional en todas las aplicaciones de Cinemark. Esto permitió un desarrollo más eficiente y una experiencia de usuario consistente y atractiva en todos los mercados y plataformas.
Centrarse en la simplicidad
El rediseño se centró en reducir el peso visual y enfatizar la simplicidad.
Enfoque minimalista
Se utilizó el blanco como color dominante para crear un ambiente limpio y tranquilo para los usuarios.
Uso estratégico del color
El rojo se minimizó para evitar la fatiga visual y se usó solo para interacciones clave.
Experiencia del usuario
El rediseño mejoró la estética y la funcionalidad, ofreciendo una experiencia de usuario más cómoda y atractiva.
Grilla
Para comenzar el rediseño de la aplicación, era fundamental garantizar una escalabilidad sencilla. Para ello, se requerÃa un sistema de cuadrÃcula que permitiera una distribución organizada de los objetos en pantalla y se ajustara a los estándares actuales de la competencia. Implementé un enfoque de diseño de "pixel-perfect" con una cuadrÃcula base de 8 px y guÃas auxiliares a intervalos de 4 y 2 px. Este nivel de precisión nos permitió garantizar una consistencia visual meticulosa en todos los componentes de la interfaz de usuario. Este meticuloso sistema de diseño ayudó a mantener la estética y la funcionalidad en cada detalle, garantizando una experiencia de usuario armoniosa y visualmente atractiva, independientemente del mercado o la plataforma.
Reconocimiento e iconografÃa
Para la iconografÃa, optamos por usar Iconos de Material para Flutter, lo que nos permitió mantener un lenguaje de diseño consistente en toda la aplicación y simplificar significativamente el proceso de desarrollo. Al aprovechar este conjunto de iconos estandarizado, garantizamos que la interfaz de usuario se mantuviera cohesiva e intuitiva. Además, para satisfacer las necesidades de los usuarios de Android e iOS, incorporamos SÃmbolos de Material para Flutter. Esta decisión tuvo como objetivo brindar una experiencia fluida y familiar a los usuarios de ambas plataformas, asegurando que pudieran reconocer e interactuar fácilmente con las funciones a las que ya están acostumbrados. Este enfoque dual ayudó a mejorar la usabilidad multiplataforma, manteniendo la consistencia visual y funcional.
IconografÃa
Para el proyecto de rediseño de las aplicaciones móviles de Cinemark, decidà usar bibliotecas de iconos estandarizadas para garantizar una apariencia uniforme y profesional en todas las plataformas. Para la versión de Flutter, empleamos la biblioteca de iconos Material Design, ampliamente reconocida por su extensa colección de iconos de alta calidad y su fácil integración con Flutter.
Para la versión iOS, recurrimos a San Francisco Symbols, una biblioteca de iconos proporcionada por Apple, que se integra perfectamente con el diseño nativo de iOS y proporciona una experiencia de usuario auténtica y consistente para los usuarios de Apple.
Estas bibliotecas proporcionaron Ãconos que no solo son visualmente atractivos sino también intuitivos para los usuarios, mejorando la usabilidad y la experiencia general del usuario en las aplicaciones de Cinemark.
Después Antes
TipografÃa
Durante el rediseño de las aplicaciones móviles de Cinemark, optamos por la tipografÃa Work Sans, ya utilizada por Cinemark USA. El objetivo principal de esta decisión fue establecer una coherencia de diseño entre Cinemark USA y Cinemark Latinoamérica. La elección de Work Sans buscó unificar la imagen de marca en todas las plataformas y mercados, manteniendo una apariencia visual consistente y continua. Esta tipografÃa, conocida por su legibilidad y estética moderna, reforzó la identidad de marca y mejoró la experiencia del usuario, facilitando su identificación y asociación con la marca Cinemark en todos los paÃses.
Paleta
En el rediseño de las aplicaciones móviles de Cinemark, hicimos un uso estratégico de la paleta de colores para mejorar la experiencia del usuario y reforzar la identidad de marca. Optamos por utilizar los colores caracterÃsticos de Cinemark: blanco, rojo y negro.
El uso del blanco y el negro proporcionó una paleta de colores limpia y atemporal que refuerza la identidad de Cinemark. En cuanto al color rojo, a pesar de su connotación negativa en algunos contextos de diseño, lo utilizamos estratégicamente como señal para las interacciones que buscábamos del usuario.
Uso de la imagen
Para pulir la estética y reducir la carga visual de la aplicación, implementé una estrategia de diseño centrada en el uso optimizado de imágenes. Aprovechamos la estética cinematográfica para enriquecer la experiencia visual del usuario.
En la sección de confiterÃa, eliminamos el uso de fondos para reducir la saturación visual y aumentar el atractivo de los productos. De igual forma, en los carteles de cine, buscamos incorporar la estética de los carteles cinematográficos para mejorar la cohesión visual y atraer al usuario.
MVP
Rediseñé la app de Cinemark optimizando el proceso de pago. Reduje el proceso de 12 a 7 pantallas usando una paleta funcional (rojo para las acciones clave) y un diseño más limpio con recursos ligeros. Integré las membresÃas a la perfección en el proceso de compra y diseñé con componentes nativos de Flutter para un desarrollo más rápido. El resultado es una experiencia de usuario más intuitiva y eficiente.
