Beam Suntory
Diseño de Producto UX/UI
El reto en Beam Suntory fue unificar la presencia digital de un portfolio global de marcas premium bajo un único ecosistema de diseño. Como arquitecto del sistema, diseñé una estructura modular y flexible capaz de adaptarse a identidades visuales tan diversas como las de Maker’s Mark, Jim Beam, Laphroaig y otras firmas del grupo. Mediante una estrategia avanzada de tokenización y gestión de librerías, logré transformar un flujo de trabajo fragmentado en una metodología de diseño escalable, eficiente y perfectamente documentada.
Objetivos
/ Project Overview
Beam Suntory es uno de los líderes mundiales en bebidas premium, con decenas de marcas bajo su paraguas. Nuestra labor consistió en crear un Design System único y centralizado que permitiera a los equipos de diseño y desarrollo lanzar y actualizar sitios web y aplicaciones de forma ultra-rápida. La clave del proyecto no fue solo el diseño visual, sino la creación de una infraestructura técnica en Figma que permitiera cambiar la piel de cualquier componente de forma instantánea según la marca necesaria.
/ Challenges
El desafío era la extrema diversidad visual. ¿Cómo crear un botón o una card que funcione tanto para un bourbon artesanal como para un whisky japonés de lujo? Necesitábamos una flexibilidad total sin comprometer la consistencia del código. El reto técnico consistió en implementar un sistema de Design Tokens lo suficientemente robusto para soportar el «swap» de librerías en Figma, evitando el trabajo manual y asegurando que cada cambio estuviera reflejado en una documentación técnica que sirviera de «fuente de verdad» para los desarrolladores.
/ Objetivos
Escalabilidad Multi-marca: Crear un framework donde una misma estructura de componentes sirviera para todo el portfolio de Beam Suntory.
Eficiencia Operativa: Reducir drásticamente el tiempo de diseño mediante la automatización de estilos y el intercambio de librerías.
Tokenización Avanzada: Implementar tokens de color, tipografía, espaciado y radios para asegurar una transición fluida del diseño al código.
Documentación Centralizada: Establecer un centro de recursos en Confluence que detallara el uso, comportamiento y especificaciones de cada marca.
/ Solución
Desarrollamos un sistema de diseño inteligente basado en la modularidad y la automatización técnica:
Arquitectura de Tokens: Definí una jerarquía de tokens (Global, Alias y Brand-specific) que permitía controlar la identidad visual desde la raíz. Esto facilitó que, al cambiar la librería en Figma, los componentes adoptaran automáticamente el look & feel de la marca seleccionada (Maker’s Mark, etc.).
Componentes Maestros con Lógica de «Swap»: Construí una librería de componentes atómicos y moléculas diseñados para ser camaleónicos. Gracias al uso estratégico de las librerías de Figma, los diseñadores podían trabajar con una base común y «swappear» a la marca final con un solo click.
Documentación en Confluence: Creamos la redacción y organización de la documentación técnica. Cada marca contaba con su propia sección detallada, vinculando el diseño con los activos finales y las guías de estilo para asegurar que los desarrolladores tuvieran todo lo necesario para la implementación.
Estandarización de Procesos: Este sistema eliminó las discrepancias de diseño entre diferentes agencias y equipos internos, asegurando que la calidad visual de Beam Suntory se mantuviera impecable en cualquier rincón del mundo.