Design system case study, Florencia Sepúlveda

Chapter 01 · The setupCapítulo 01 · El planteo

More than five different products under one brand, with no shared identity, personality, or voice between them.Más de cinco productos distintos bajo una marca, sin identidad, personalidad ni voz compartidas entre ellos.

When I joined the company, the platform was really more than five different products that had grown up separately. Many were built in-house, others arrived through different acquisitions. Each had its own visual identity, its own colors, its own elements, even its own personality and tone of voice. Side by side, they didn't feel like one brand, or even like the same company.Cuando entré a la empresa, la plataforma eran en realidad más de cinco productos distintos que habían crecido por separado. Muchos se construyeron internamente, otros llegaron a través de distintas adquisiciones. Cada uno tenía su propia identidad visual, sus colores, sus elementos, hasta su propia personalidad y tono de voz. Uno al lado del otro, no se sentían como una marca, ni siquiera como la misma empresa.

There wasn't a single source of truth.No había una única fuente de verdad.

FIG. 1 The design system moved from Figma into Storybook, where all the documentation lived, design and code alike.El design system pasó de Figma a Storybook, donde vivía toda la documentación, tanto de diseño como de código.

Chapter 02 · The frictionCapítulo 02 · La fricción

No shared components, and no research or design step in between all the teams.Sin componentes compartidos, y sin un paso de research o diseño entre todos los equipos.

The company had been around for more than twenty years, and for most of that time features went straight from an idea to code. There was no design practice yet, and no shared front-end across the products. Each one had its own interface and its own way of doing the same things.La empresa tenía más de veinte años, y durante casi todo ese tiempo las features pasaban directo de una idea al código. Todavía no había una práctica de diseño, ni un front-end compartido entre los productos. Cada uno tenía su propia interfaz y su propia forma de hacer las mismas cosas.

That fell hardest on engineering. Without shared components, teams rebuilt the same things over and over. And because the work didn't pass through research or design first, the products grew around what was easy to build rather than what users were trying to do. Customers mostly learned the tools through repetition and demos, and the learning curve was steeper than it needed to be.A quien más le pesaba era a el equipo de desarrollo. Sin componentes compartidos, los equipos reconstruían las mismas cosas una y otra vez. Y como el trabajo no pasaba antes por research o diseño, los productos crecían alrededor de lo que era fácil de construir y no de lo que los usuarios intentaban hacer. Los clientes aprendían las herramientas más que nada a fuerza de repetición y demos, y la curva de aprendizaje era más compleja de lo necesario.

Chapter 03 · The ideaCapítulo 03 · La idea

Together with the head of design, we decided to treat the product as one thing and build the shared foundation first.Junto con el head of design, decidimos tratar al producto como una sola cosa y construir primero la base compartida.

When the design team came together, the head of design and I landed on the same approach: instead of redesigning screens one at a time, we'd start with a shared foundation and let the products grow from there. It was the only way to get products that looked like different companies to feel like one.Cuando se armó el equipo de diseño, el head of design y yo llegamos al mismo enfoque: en vez de rediseñar pantallas una por una, arrancábamos por una base compartida y dejábamos que los productos crecieran desde ahí. Era la única forma de que productos que parecían de empresas distintas se sintieran como uno solo.

Coming from the front-end side helped me here. I could work closely with engineering, speak their language, and think about how each decision would actually be built, not just how it would look in a file.Venir del lado del front-end me ayudó acá. Podía trabajar cerca de ingeniería, hablar su idioma, y pensar cómo se iba a construir cada decisión en realidad, no solo cómo se veía en un archivo.

Chapter 04 · The workCapítulo 04 · El trabajo

We started with the basics: tokens, not screens.Empezamos por lo básico: tokens, no pantallas.

We started with an audit of what each product was already using, just to see how much was there. There were far more values than anyone expected, so we collapsed them into one small, shared set of tokens. From there we moved up to the more complex components, designed once together with engineering, with accessibility built in from the start: contrast, focus states, and keyboard behaviour.Empezamos con una auditoría de lo que cada producto ya estaba usando, solo para ver cuánto había. Había muchísimos más elementos de los que cualquiera esperaba, así que los redujimos a un set chico y compartido de tokens. De ahí pasamos a los componentes más complejos, diseñados una sola vez, con la accesibilidad incorporada desde el comienzo: contraste, focus y comportamiento con teclado.

The core idea was that the system had to be agnostic. Each product had its own codebase and its own constraints, so any team had to be able to adopt it without rebuilding everything from scratch. Alongside that, we kept a React version of the shared components for new areas that were being built from zero.La idea central era que el sistema tenía que ser agnóstico. Cada producto tenía su propio código y sus propias limitaciones, así que cualquier equipo tenía que poder adoptarlo sin reconstruir todo de nuevo. Además, manteníamos una versión en React de los componentes compartidos para las áreas nuevas que se construían desde cero.

It all lived in Storybook (after we designed it in Figma), documented for both sides, how to use each component in design and how to build it in code. The dynamic brand color was a good example: each customer picks their own brand color, so the system generates the five shades from it and adjusts them to keep contrast accessible, whatever they choose.Todo vivía en Storybook (después de diseñarlo en Figma), documentado para ambos equipos: cómo usar cada componente en diseño y cómo construirlo en código. El color de marca dinámico era un buen ejemplo: cada cliente puede elegir su propio color de marca, así que el sistema genera las cinco tonalidades a partir de ese color y las ajusta para mantener el contraste accesible, elija lo que elija.

I owned the visual side from the start, working closely with engineering so it would hold up in code. It began as my work and grew into a shared library, the base for every new product the company built after.Estuve a cargo del lado visual desde el principio, trabajando cerca de desarrollo. Creció hasta volverse una librería compartida por todos los equipos y la base de cada producto nuevo que la empresa construyó después.

The design system documentation on two laptops: the utility classes and the type and spacing token scales.

FIG. 2 The token foundation, type and spacing scales, documented.La base de tokens, escalas de tipografía y espaciado, documentadas.

Chapter 05 · What changedCapítulo 05 · Lo que cambió

A design system is less about components and more about helping people agree.Un design system se trata menos de componentes y más de ayudar a la gente a ponerse de acuerdo.

After a few months, features built on the system looked more consistent, and the products started to feel like one brand instead of several. Design QA turnaround dropped by roughly 40%, and there were fewer debates about small visual details.Después de unos meses, las features construidas sobre el sistema se veían más consistentes, y los productos empezaron a sentirse como una sola marca en vez de varias. El tiempo de QA de diseño bajó alrededor de un 40%, y había menos discusiones sobre detalles visuales chicos.

It also changed how the product worked as a whole. What used to be separate tools, each part of the brand with its own login, came together into one platform behind a single login. Sections became easier to move between, everyday tasks got simpler to finish, and the experience went from a set of legacy tools to one coherent environment.También cambió cómo funcionaba el producto en conjunto. Lo que antes eran herramientas separadas, cada parte de la marca con su propio login, se unió en una sola plataforma detrás de un único ingreso. Moverse entre secciones se volvió más fácil, las tareas de todos los días se simplificaron, y la experiencia pasó de un conjunto de herramientas legacy a un entorno coherente.

The bigger change was on the team. We went from no dedicated designers to five in about six months.El cambio más grande fue en el equipo. Pasamos de no tener diseñadores dedicados a cinco en unos seis meses.

The same survey screen before and after the design system: from fragmented spacing and inconsistent buttons to a clear, consistent, accessible layout.

FIG. 3 The same screen, before and after the system.La misma pantalla, antes y después del sistema.

FIG. 4 Customers set their own brand color, and the system keeps contrast accessible.Los clientes definen su propio color de marca, y el sistema mantiene el contraste accesible.

FIG. 5 The brand color in action, change the color and the shades rebalance to stay accessible.El color de marca en acción: cambiás el color y las shades se reequilibran para seguir siendo accesibles.

Chapter 06 · What I took from itCapítulo 06 · Lo que me llevé

The point wasn't the components. It was making the next person's job easier.El punto no eran los componentes. Era hacerle más fácil el trabajo a quien venía después.

What I took from this project is that design systems aren't really about design. They're about making things easier for the people who'll work on the product later.Lo que me llevé de este proyecto es que los design systems no se tratan en realidad de diseño. Se tratan de hacerle las cosas más fáciles a la gente que va a trabajar en el producto más adelante.

My frontend background helped more than I expected. I had a rough sense of how engineers think about reuse, naming, and edge cases, so I tried to design the system to fit how it would actually be built. That made it more likely to get used.Mi background en frontend ayudó más de lo que esperaba. Tenía una idea aproximada de cómo piensan los ingenieros en términos de reuso, nombres y casos límite, así que traté de diseñar el sistema para que encajara con cómo se iba a construir en realidad. Eso hizo más probable que se usara.