2024
Template sistematizado para diseñar correos de Paris, Easy, Jumbo y Santa Isabel.
Resumen
En mi rol de UI transversal se me encomendó buscar una manera para que los product designer pudieran generar entregables de diseño sin necesitar directamente un perfil UI como apoyo, esto con el objetivo de hacer más eficiente el flujo de trabajo para algunas tareas menos complejas. Uno de los productos adecuados para comenzar con esta implementación fue el de “Comunicaciones”, ya que los correos enviados a los clientes tienen una organización y casuísticas similares en cada uno de los negocios.
¿Qué hice?
Diseño de interfaz
UI Kit
Plataforma
Figma
Roles involucrados
Desafío
Mapear casuisticas y auditar componentes.
Para construir este template, primero realicé un mapeo de las comunicación de correos en cada uno de los negocios para identificar los distintos flujos y casos de uso. Posteriormente audité los componentes utilizados, organizándolos con una nomenclatura anidada, aplicable transversalmente para facilitar el consumo de los componentes desde la librería. En algunos casos, llevé a cabo una refactorización para homologar la estructura y las variables entre los componentes de cada sistema de diseño, manteniendo siempre las definiciones visuales distintivas de cada marca, como el color y la tipografía.
Estrategia
Organizar y unificar nuevos componentes en una sola librería.
Cree un nuevo archivo a modo de librería con el objetivo de agrupar las componentes provenientes de los sistema de diseño de cada una de las marcas para que los desarrolladores y equipo en general pudiera trabajar de manera focalizada y eficiente con aquellos assets competentes al template, evitando navegar por diferentes archivos y componentes que no son utilizados por la célula.
Esta decisión la tomé en base a conversaciones previas con el equipo de desarrollo donde manifestaron que era un dolor trabajar directamente con librerías tan grandes, ya que normalmente la mayoría del contenido no aplica para su producto. Además, les era útil tener una visión general de todos los componentes con sus variantes en un mismo archivo considerando que el equipo consume assets de 4 sistemas de diseño diferentes.
Resultados
Menos dependencias y tiempos de delivery
Con este archivo no es necesario ajustar el layout, paddings y spacings, todos esos parámetros vienen predeterminados. Cada "slot" puede albergar distintos tipos de componentes que ya están previamente vinculados a la plantilla con sus propias variantes y opciones que pueden ser personalizadas al seleccionar cada uno de ellos desde el panel lateral.
Con esta solución se otorgo independencia a la célula de comunicaciones para dar soporte a nivel de interfaz a sus propios desarrollos sin requerir necesariamente de mi perfil para diseñar nuevas comunicaciones o mejoras, reduciendo la dependencias para tareas menos complejas.