Retail · Freelance

eCommerce — Sistema de diseño escalable

Diseñar e implementar un design system atómico para una plataforma de retail con múltiples equipos y canales.

Rol
Design Systems Lead
Tipo
Freelance
Año
2023
Stack
Figma · FigJam · Notion · Storybook
cover — librería de componentes en Figma

Cuatro equipos, cuatro versiones del mismo botón.

La empresa tenía cuatro equipos de producto trabajando en paralelo sobre el mismo eCommerce: web, mobile, checkout y backoffice. Cada equipo había construido sus propios componentes, con variables de color diferentes, espaciados inconsistentes y documentación inexistente.

El resultado: los handoffs tardaban hasta dos semanas por proyecto, los desarrolladores repreguntaban constantemente, y el producto final se veía diferente dependiendo del canal. Una auditoría inicial encontró 47 variantes de tarjeta de producto entre todos los equipos.

Hallazgo de auditoría
47 variantes de tarjeta de producto · 6 escalas tipográficas distintas · ningún token de color compartido entre equipos.
auditoría visual — inconsistencias entre plataformas antes del sistema

Atómico, documentado y construible desde el día uno.

Construí el sistema siguiendo atomic design, pero con un principio operativo claro: ningún componente entra a la librería sin su documentación de uso, variantes y reglas de composición. El trabajo de diseño y el de documentación son el mismo trabajo.

Trabajé directamente con los tech leads para conectar los tokens de Figma con las variables CSS del código, de forma que un cambio de color en la librería se propagara automáticamente al repositorio. El sistema no era solo para diseño — era infraestructura compartida.

estructura de tokens — colores, espaciado, tipografía y sombras
componentes — tarjeta de producto, botones, formularios y navegación

Infraestructura que siguió funcionando después de que salí.

−50%
Tiempo de handoff por proyecto
4
Equipos adoptaron el sistema
1
Librería única para todos los canales
¿Quieres algo así?
Hablemos sobre tu proyecto
Contactar