JOKSAN CRUZ

Design systems · Bupa Chile, Grupo Security, Consorcio

Sistemas que sobreviven al equipo que los hizo.

Un design system no es una librería de componentes bonitos. Es la infraestructura que permite que once unidades de negocio hablen el mismo idioma sin reunirse todas las semanas.

Bupa · Grupo Security · ConsorcioDesign systems a escala405componentes en producción

Mi rol

Liderazgo de diseño de sistema

Equipo

DS Lead, DS Architect, System Designer, Frontend, QA y DesignOps

Alcance

Diagnóstico, arquitectura, construcción, QA y adopción

Stack

Figma, Figma Variables, Web Components, Storybook, design tokens

El patrón

Los tres casos llegan con el mismo síntoma y distinto grado de avance: componentes duplicados, criterios visuales que cambian según quién los aplicó, y un abismo entre lo que dice Figma y lo que hay en producción. La complejidad casi nunca es técnica. Es alinear a negocio, diseño y desarrollo alrededor de una estructura común.

Antes del sistema

  • Cada unidad rediseña lo que otra ya construyó
  • El componente en Figma no es el que está en producción
  • Nadie sabe cuántos componentes hay ni cuáles se usan
  • Cada release reabre la discusión de criterios visuales

Con el sistema instalado

  • Una base común y una librería centralizada
  • Documentación viva conectada al código
  • Variables primitivas y semánticas normalizadas
  • QA visual, funcional y de accesibilidad como fase propia

Bupa Chile · de sistema a workflow AI-Ready

Aquí ya existía un sistema de diseño. El encargo era convertirlo en una base técnica y operativa más robusta: componentes reutilizables, variables normalizadas, documentación viva y un flujo integrado entre diseño y desarrollo.

El resultado fue más que una librería visual. Se consolidó un workflow que conecta diseño, desarrollo y prototipado, preparado para automatización y para escalar con consistencia, accesibilidad y velocidad.

252componentes diseñados y desarrollados
392variables primitivas
742variables semánticas
AI-Readyworkflow diseño → desarrollo → prototipado
  • Consolidamos criteriosLineamientos visuales, funcionales y técnicos en un solo lugar, para dejar de discutir lo mismo cada sprint.
  • Normalizamos variablesPrimitivas y semánticas separadas, que es lo que permite cambiar la marca sin tocar cada componente.
  • Conectamos Figma, código y documentaciónComponentes, estados, variantes y usos documentados en Storybook, no en un PDF que envejece.

Grupo Security · un sistema para once unidades de negocio

El desafío era ordenar un sistema existente que estaba disperso entre distintas unidades. La dificultad no estaba en diseñar componentes: estaba en que el sistema funcionara como plataforma común y no como librería aislada de cada área.

Hicimos análisis del sistema actual, detección de inconsistencias, refactorización de lo existente y creación de componentes nuevos con validación cruzada. Después optimización de performance, documentación en Storybook, pruebas visuales, funcionales y de accesibilidad en varios navegadores y dispositivos, y por último publicación y capacitación del equipo.

131componentes consolidados
11unidades de negocio alineadas
159estilos entre tipografía, color, sombras y grillas
6 fasesassessment, rediseño, refactoring, desarrollo, QA y lanzamiento

Consorcio · de intención estratégica a plan ejecutable

Este caso es distinto: el valor no estuvo en construir, sino en estructurar una solución viable para una organización compleja. Un modelo de alto nivel para enfrentar la mejora de UI de productos digitales, con propuesta técnica y económica para ejecutarlo de forma integrada.

Levantamiento de contexto, modelo de trabajo, enfoque técnico y económico, fases de ejecución, capacidades necesarias y equipo propuesto. El objetivo era reducir ambigüedad hasta que la intención estratégica se pudiera convertir en un plan con fechas y presupuesto.

22componentes diseñados y desarrollados
224variables de color, grid, radios, espaciado y sombras
25estilos
1 planfases, equipo, entregables y criterios
Bupa · componentes252Grupo Security · componentes131Consorcio · componentes22Bupa · variables semánticas742Bupa · variables primitivas392Consorcio · variables224Grupo Security · estilos159
Los tres sistemas en la misma escala. El tamaño no es la métrica que importa: Consorcio tiene 22 componentes y fue el encargo más estratégico de los tres.
AssessmentAnálisis einconsistenciasRediseñoCriterios yarquitecturaRefactoringLoexistente,normalizadoDesarrolloComponentesy tokensQAVisual,funcional yaccesibilidadLanzamientoDocs ycapacitación
Las seis fases del proceso en Grupo Security. QA es una fase propia, no una revisión de último minuto.

Los roles que hacen falta

Un design system se cae cuando se lo encarga a un diseñador solo. Estos son los perfiles que los tres proyectos tuvieron en común:

  • Design System Lead y DS ArchitectDirección del sistema, criterios de arquitectura visual, escalabilidad y priorización.
  • System Designer y Token DSComponentes, variantes, estados y normalización de variables primitivas y semánticas.
  • Frontend Lead y desarrolladoresEl puente entre diseño y código, la arquitectura de componentes y los estándares técnicos.
  • QA AutomationValidación visual, funcional, responsive y de accesibilidad como fase propia, no como revisión de último minuto.
  • DesignOpsDocumentación, guidelines, Storybook, estructura de handoff y capacitación. Es quien hace que el sistema se adopte.

Lo que me llevé

La métrica que importa de un design system no es cuántos componentes tiene. Es cuántos equipos dejaron de construir el suyo. Once unidades de negocio usando la misma base vale más que doscientos componentes que nadie encuentra.

Trabajo de equipo en Acid Labs, con clientes de seguros, banca y salud en Chile.

Nuevo proyecto

¿Tienes un producto que creció de más?

joksanricru@gmail.com

Proyectos

Cuéntame el contexto

Teléfono

+52 55 2173 0129

Charlas y webinars

YouTube

Trayectoria

LinkedIn