Rebrand App UI
Actualización visual completa de la App Aviva para alinearla con los nuevos lineamientos de marca: nuevo logotipo, paleta de colores, tipografía e iconografía en todos los flujos de la aplicación sin cambios funcionales.
- Empresa
- Aviva Crédito
- Mi rol
- Product Designer
- Periodo
- may 2025 – ago 2025
Metas y expectativas
Métricas objetivo: reducción de inconsistencias visuales en QA, mejora en calificaciones positivas sobre la experiencia visual, y mantenimiento o mejora del performance de carga visual post-cambio.
Problema
La aplicación móvil mantenía un diseño desalineado con la nueva identidad visual de Aviva, generando inconsistencia entre canales (kiosco, web, app) y debilitando la percepción de marca unificada para el cliente.
Research
Se partió de los nuevos lineamientos de Aviva Foundations (Figma) y App Components ya definidos por el equipo de branding. No se realizaron cambios funcionales ni de interacción — el rediseño fue estrictamente visual y token-driven.
Solución
Reemplazo de logotipo, aplicación de nuevos tokens de color, actualización de tipografía en todos los estilos (h1, h2, body, caption) e iconografía en toda la app. Alcance: onboarding/login, Home, flujos KYC, documentos, boleta de pago y perfil. Validación en modo claro y oscuro.
Aprendizajes
- Los tokens de color son el contrato entre diseño y desarrollo: Un rebrand sin sistema de tokens requiere cambiar cada componente manualmente. Con tokens bien definidos, el cambio se propaga desde la fuente. La calidad de la implementación de tokens determina la calidad del rebrand.
- Alcance 'solo visual' es más complejo de lo que parece: Cada pantalla tiene borde de color, ícono, tipografía y estado que revisar. Un rebrand completo de app es un esfuerzo de QA tan intenso como un rediseño funcional.
- Branding y producto deben validar juntos: Los equipos de branding definen el lenguaje visual; el equipo de producto define los contextos de uso. El rebrand requirió sesiones conjuntas para resolver casos donde las guías de marca no contemplaban estados de UI específicos (errores, estados vacíos, carga).