Sístema de diseño Mística_CL
Rol: Diseñador UX/UI, Líder de proyecto.
Fecha: 2023 - 2024
La fragmentación en el diseño de productos digitales rara vez se hace evidente en un solo momento. Sin embargo en 2023, la implementación de tres modales con comportamientos y estilos diferentes mostró el desafío a resolver en el área de experiencia. Las inconsistencias no eran solo un problema de diseño, sino que un obstáculo para los usuarios que interactúan con estas plataformas digitales.
Encontramos una necesidad en la que enfocarnos, y un par de meses después una oportunidad; A finales de 2023 los equipos de Canales Digitales y el equipo de experiencia de Telefónica Hispam coincidieron en objetivos; Por una parte el equipo de Canales Digitales realizará una migración de tecnologías para su app, Mi Movistar, mientras que el equipo de Telefónica Hispam busca implementar ‘Mística’ sistema de diseño de Telefónica en los países de Latam. Se llegó a un acuerdo, el equipo de experiencia creará Mística_CL un sistema de diseño basado en Mística adaptado a las necesidades de Chile.
Como Diseñador UX/UI designado para liderar esta iniciativa, mi tarea fue coordinar al equipo de diseño, para establecer el primer sistema de diseño transversal de las áreas B2C, E-care y B2B.
El panorama inicial presentaba desafíos significativos. Contábamos con un UI Kit heredado de Adobe Xd, con pocos componentes y varios fundamentales ausentes, sin tokens estandarizados, reglas inconsistentes y documentación limitada. Los equipos B2C, B2B y E-care operaban en silos, resultando en experiencias fragmentadas e inconsistentes.
Con un equipo con dedicación parcial (alrededor del 20%) y un timeline de 12 meses, el proyecto demandaba un enfoque pragmático y riguroso. Estructuramos el desarrollo de esta iniciativa en tres fases:
| Fase 1 Fundamentos y principios del sistema |
|---|
| Auditoría de interfaces Revisión de contenido, creación de comparativas, análisis heurístico. |
| Identificación de patrones de interacción Identificación de patrones, revisión de mejores prácticas, documentación de patrones. |
| Definición de Fundamentales Principios de composición, definición de paleta cromática, Tipografía, espaciados. |
| Fase 2 Desarrollo Sistemático |
|---|
| Implementación de componentes Adaptación de componentes y creación de componentes base. |
| Construcción de componentes compuestos Creación de organismos y templates. |
| Patrones de interacción y documentación Documentar páginas y flujos, crear documentación de componentes y templates para diseño y desarrollo. |
| Fase 3 Validación y Escalamiento |
|---|
| Pruebas con equipos de desarrollo Realización de reuniones con desarrollo, pruebas en app y ambientes dev. |
| Refinamiento de documentación Sesiones de feedback para mejora de documentación. |
| Implementación en proyectos piloto Creación de flujos y funcionalidades piloto, realización de pruebas de usabilidad y QA. |
Comenzamos con un análisis exhaustivo de nuestras interfaces existentes. La auditoría reveló más de 10 variaciones de componentes básicos y múltiples inconsistencias en patrones de interacción, estructura de los componentes y reglas de estilo. Este mapeo inicial fue crucial para identificar oportunidades de consolidación y revelar patrones de interacción.
Usando a Mística como nuestra base empezamos a iterar desde la base del sistema: Desde los fundamentales trabajamos en los sistemas de espaciados y grilla, elegimos en conjunto con el equipo de Telefónica Hispam la paleta de colores y tipografía. Implementamos nuestros principios de interacción y publicamos nuestra primera librería interna.
En la segunda etapa creamos desde átomos hasta templates completos, esto a través de reuniones bi-semanales con protagonismos rotativos, además junto a los equipos de Research documentamos los patrones de navegación y en conjunto con el equipo de desarrollo creamos documentación técnica de cada componente.
Finalmente, mientras realizamos las pruebas piloto realizamos guías de implementación con ejemplos de uso y reglas de mantenimiento.
En la realización de las pruebas piloto se noto una mejora en los tiempos de desarrollo y diseño, gracias a la participación activa de todo el equipo de diseño el sistema se adoptó rápidamente, mejorando los tiempos y la toma de decisiones.
En la implementación de esta solución aprendí sobre cómo aplicar, mantener y hacer seguimiento a un sistema de diseño, también coordine a un equipo en un proyecto transversal y multidisciplinar en donde aplique la priorización de tareas y la comunicación efectiva.
El éxito del proyecto se puede medir en:
Impacto Técnico. La reducción significativa en tiempos de desarrollo y la estandarización de componentes establecieron una base sólida para la migración. El sistema demostró ser lo suficientemente flexible para adaptarse a necesidades específicas mientras mantenía la coherencia entre plataformas.
Eficiencia Operativa. El sistema transformó cómo construimos nuestros productos digitales en el área de experiencia. La documentación estructurada y los procesos establecidos permiten que los equipos trabajen de manera más eficiente, reduciendo la duplicación de esfuerzos y acelerando la implementación de nuevas funcionalidades.
Como líder del proyecto, aprendí que el éxito de un sistema de diseño depende de múltiples factores, tanto de decisiones técnicas sólidas, pero también de un equipo comprometido y motivado por generar un cambio en el cómo diseñamos experiencias. Todo esto fue fundamental para realizar este proyecto.
Me alegra mucho haber sido partícipe en la creación de este sistema. Mis más sinceros agradecimientos a Paula Espinoza y Fabbian Alvarez por confíar en mis capacidades, a Amir y Sebastián de Telefónica Hispam por su ayuda con Mística y los equipos de UX, research y desarrollo que prestaron sus habilidades, tiempo y dedicación en pos de crear experiencias digitales de primer nivel. Muchas gracias a todos.