2024
Template sistematizado para diseñar correos de Paris, Easy, Jumbo y Santa Isabel.
Resumen
En mi rol como diseñador UI transversal, asumí el desafío de habilitar a los Product Designer para generar entregables de diseño sin depender directamente del apoyo de un especialista en UI. El objetivo era optimizar el flujo de trabajo en tareas menos complejas y aumentar la eficiencia del equipo. Identifiqué el producto “Comunicaciones” como el punto de partida ideal para esta implementación, ya que los correos enviados a los clientes tienen una organización y casos de uso similares en cada unidad de negocio.
Para lograrlo, Construí una librería con guías de estilo y componentes reutilizables que permitieron crear diseños coherentes y de alta calidad. Esta iniciativa no solo agilizó el proceso de diseño, sino que también fomentó una mayor colaboración entre equipos y aceleró los tiempos de entrega.
¿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 exhaustivo de las comunicaciones por correo en cada uno de los negocios para identificar los distintos flujos y casos de uso buscando puntos de encuentro. El desafío aquí fue manejar la diversidad y complejidad, ya que cada negocio tenía sus propios procesos y formatos únicos.
Posteriormente, audité los componentes utilizados, organizándolos con una nomenclatura anidada por categorías y aplicable transversalmente. Esto presentó el reto de crear una estructura intuitiva y coherente que facilitara el consumo de los componentes desde la librería.
Además, 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. Esto implicó el desafío de mantener las definiciones visuales distintivas de cada marca (como el color y la tipografía) mientras se buscaba una coherencia estructural y funcional entre los diferentes componentes.
Estos desafíos requirieron una colaboración estrecha con el equipo, así como una comprensión de las limitaciones técnicas y de las necesidades específicas de cada unidad de negocio. El enfoque estuvo en equilibrar la unificación de componentes con la preservación de la identidad de marca, todo dentro de un marco que permitiera trabajar de manera más autónoma y eficiente.
Estrategia
Organizar y unificar nuevos componentes en una sola librería.
Como parte de la estrategia para abordar este desafío, creé un nuevo archivo que funcionó como una librería centralizada, con el objetivo de agrupar los componentes provenientes de los sistemas de diseño de cada marca. Esto permitió que los desarrolladores y el equipo en general pudieran trabajar de manera focalizada y eficiente con los assets relevantes al template, evitando la necesidad de navegar por diferentes archivos y componentes que no eran utilizados por el equipo.
Tomé esta decisión basándome en conversaciones previas con el equipo de desarrollo, donde manifestaron que era un dolor trabajar directamente con librerías tan grandes, ya que la mayoría del contenido no aplicaba para su producto. Además, les resultaba útil tener una visión general de todos los componentes con sus variantes en un mismo archivo, considerando que el equipo consumía assets de cuatro sistemas de diseño diferentes.
Al centralizar los componentes y simplificar el acceso a ellos, la estrategia buscó facilitar el flujo de trabajo y reducir la complejidad que enfrentaban los desarrolladores al interactuar con múltiples sistemas de diseño. Esta aproximación también permitió mantener la coherencia visual y funcional entre las diferentes marcas, sin sacrificar sus identidades distintivas.
Resultados
Menos dependencias y tiempos de delivery
Con este archivo, no es necesario ajustar el layout, paddings y spacings, ya que todos esos parámetros vienen predeterminados. Cada “slot” puede albergar distintos tipos de componentes previamente vinculados a la plantilla, con sus propias variantes y opciones que pueden ser personalizadas fácilmente al seleccionarlos desde el panel lateral.
Como resultado, esta solución otorgó independencia a la célula de comunicaciones para dar soporte a nivel de interfaz a sus propios desarrollos sin requerir necesariamente mi intervención para diseñar nuevas comunicaciones o mejoras. Esto redujo las dependencias para tareas menos complejas y mejoró significativamente la eficiencia del equipo, permitiéndoles enfocarse en aspectos más estratégicos y en las necesidades de los clientes.