Rediseño del sito de Digital Movie Deals para aumentar compras
Lideré el rediseño del sitio Digital Movie Deals de NBCUniversal, reduciendo el checkout de 7 a 3 clics e incrementando las compras mediante un sistema de diseño escalable con enfoque mobile-first. Al repensar la navegación, jerarquía y claridad visual, creamos una experiencia fluida que atrajo a nuevos usuarios y fomentó compras repetidas.
Línea de tiempo
Sep 2022 – Dic 2022
Contribución
UX Research, UI Design, Prototype Testing
Mi Rol
Diseñadora UX/UI
Vista principal del proyecto - Diseño final
Descripción general
El sitio Digital Movie Deals de NBCUniversal tenía dificultades para convertir y retener usuarios debido a flujos complejos, baja jerarquía visual y una navegación desactualizada. Rediseñé toda la experiencia del sitio para simplificar la toma de decisiones y optimizar el flujo de compra, especialmente en dispositivos móviles.
Mediante una estructura clara, jerarquía visual y flujos actualizados, logramos mejorar la tasa de conversión, aumentar la interacción de los usuarios e introducir un design system unificado escalable para distintos tamaños de pantalla.
El Desafío
El sitio original presentaba flujos de compra largos y confusos, poca jerarquía en la UI y ausencia de cuentas para usuarios recurrentes, lo que provocaba: Baja interacción y sesiones de corta duración, alto abandono durante el proceso de compra, menor conversión de nuevos usuarios y escasa retención por falta de historial de compras. Nuestro objetivo era:
- Aumentar las compras de nuevos usuarios
- Reducir el checkout a menos de 3 clics
- Mejorar la claridad visual y jerarquía
- Construir un sistema de diseño flexible para futuras iteraciones
Antes y Después
Antes
Después
Proceso y Solución
Mi enfoque involucró un comprensivo proceso de diseño:
Investigación y Descubrimiento
Realizamos análisis competitivo, investigación de comportamiento y auditorías de flujos. Identificamos bloqueos clave en login, compra y registro. Principales hallazgos:
- Navegación confusa y pantallas con exceso de scroll
- CTAs sin jerarquía visual ni sentido de urgencia
- Los usuarios no podían rastrear sus compras
- Inconsistencias visuales entre dispositivos
Arquitectura de Información
Reorganizamos las secciones principales siguiendo una jerarquía optimizada para mobile.
Simplificamos la navegación y reorganizamos categorías y portadas para guiar mejor al usuario.
Wireframing y Prototipado
Testeé distintas variaciones de layout en login, registro y páginas de producto, reduciendo carga cognitiva y pasos innecesarios. Mejoras clave:
- Pantallas de login y registro optimizadas
- Posicionamiento y etiquetado de CTAs en mobile
- Páginas de producto más compactas para evitar scroll excesivo
Diseño Visual
Creamos un nuevo design system con espaciado consistente, ritmo tipográfico e iconografía actualizada. Preservé la paleta de marca asegurando accesibilidad y balance visual. Enfoques clave:
- Mayor visibilidad de CTAs
- Tamaños de texto legibles
- Escalabilidad mobile-first
- Consistencia en etiquetas y claridad en acciones
Resultados e Impacto
Para completar el checkout
Interacción gracias a flujos diseñados mobile-first
La claridad visual con jerarquía, espaciado y etiquetas consistentes
Un sistema de diseño escalable para futuras iteraciones
El rediseño mejoró la experiencia tanto de usuarios nuevos como recurrentes, simplificando la compra y haciéndola más intuitiva en todos los dispositivos.
Aprendizajes y Conclusiones
- Simplificar flujos visuales e interactivos tuvo un gran impacto en la reducción de abandonos.
- Priorizar mobile-first y jerarquía de contenido volvió la experiencia más intuitiva.
- Diseñar con enfoque en consistencia y escalabilidad fortaleció la confianza del usuario.
- Colaborar desde el inicio con desarrolladores Front-End y Back-End aseguró factibilidad multiplataforma.
Continuar explorando