Retto
Siete sistemas de diseño fragmentados convertidos en una sola fuente de verdad. Seven fragmented design systems turned into a single source of truth.
Del lado de diseño la adopción fue total: los tres diseñadores participábamos en los seis productos y todos trabajábamos sobre el sistema, desde la especificación hasta el acompañamiento al desarrollo. Fuera de los productos activos también lo adoptaron proyectos independientes, como el CMS de páginas web generadas internamente. On the design side adoption was total: the three of us worked across all six products, and all of us worked on the system, from spec through to supporting development. Beyond the active products, independent projects picked it up too, such as the CMS for internally generated web pages.
Siete sistemas de diseño, y ninguno por descuido. Seven design systems, and none of them by accident.
Conectera llegó a mantener siete sistemas de diseño distintos. Partíamos de que cada producto merecía el suyo, así que cada vez que entrábamos a uno nuevo le construíamos uno propio. El modelo se rompió solo, y fue la evidencia la que nos hizo cambiar de opinión. Conectera ended up maintaining seven separate design systems. We assumed each product deserved its own, so every time we started a new one we built it another. The model broke on its own, and it was the evidence that changed our minds.
Yo había participado en cinco de esos siete, en unos con más contribución que en otros. Dicho de otro modo: buena parte de lo que había que desmontar lo había construido yo. Varios nunca llegaron a desarrollo, porque el producto se detuvo o porque no había tiempo de mantenerlos actualizados. Y como la empresa creaba productos de forma constante, cada nuevo proyecto arrancaba resolviendo desde cero las mismas preguntas ya resueltas cuatro veces. Las inconsistencias visuales se discutían caso por caso, en cada módulo, cada vez. I had worked on five of those seven, on some more than others. Put another way: a good part of what had to be dismantled I had built myself. Several never reached development, either because the product stopped or because there was no time to keep them up to date. And since the company was constantly creating products, every new project started by solving from scratch the same questions already answered four times over. Visual inconsistencies were argued case by case, in every module, every time.
Había un segundo problema, menos evidente. Los primeros sistemas nacieron como adaptaciones de Material Design. Funcionaban, pero el portafolio entero de la empresa terminaba pareciéndose a Google en lugar de parecerse a sí mismo. There was a second problem, less obvious. The first systems were born as adaptations of Material Design. They worked, but the company's entire portfolio ended up looking like Google instead of looking like itself.
La conclusión: hacía falta una sola fuente de verdad, whitelabel, que alimentara a todos los productos cambiando marca y tipografía en vez de reconstruir el sistema, y con un lenguaje propio. The conclusion: we needed a single source of truth, whitelabel, feeding every product by swapping brand and typography instead of rebuilding the system, and with a language of its own.
Líder de diseño, con las manos dentro del sistema. Design lead, with my hands inside the system.
Trabajamos como equipo de producto porque el sistema se gestionó como un producto, no como un entregable paralelo. We worked as a product team because the system was run as a product, not as a side deliverable.
- · Dirigí la fase de diseño y repartí los componentes entre el equipo, coordinando a 2 diseñadores. I directed the design phase and split the components across the team, coordinating 2 designers.
- · Diseñé y documenté componentes directamente, no solo coordiné. I designed and documented components directly, not just coordinated.
- · Definí la dirección visual de varios componentes y propuse las plantillas de creación, edición y trazabilidad que viven en Figma. I defined the visual direction of several components and proposed the creation, editing and traceability templates that live in Figma.
- · Propuse la arquitectura de tokens: el enfoque whitelabel y el esquema de dos capas. I proposed the token architecture: the whitelabel approach and the two-layer scheme.
- · Compilé y ajusté la gobernanza a partir de lo que el equipo formuló. I compiled and adjusted the governance from what the team formulated.
Lo que no fue mío: el código de los componentes lo escribieron los desarrolladores a partir de nuestras especificaciones. Desde diseño revisábamos el funcionamiento visual de cada uno y entregábamos la plantilla de cómo debía presentarse. El proyecto tampoco nació como encargo: empezamos con un producto y, mientras diseñábamos, se hizo evidente que teníamos conocimiento repartido en siete sistemas muertos que valía la pena juntar en uno vivo. What was not mine: the component code was written by the developers from our specifications. From design we reviewed how each one behaved visually and handed over the template for how it should be presented. The project was not a commission either: we started with a product and, while designing it, it became clear we had knowledge scattered across seven dead systems worth pulling into a living one.
Auditar antes de construir.Audit before building.
Auditamos los siete sistemas anteriores para ver qué habíamos propuesto y qué sobrevivía. En paralelo auditamos los productos a los que queríamos dirigir el sistema, para saber qué componentes íbamos a necesitar de verdad y qué funcionalidades debía cubrir cada uno. We audited the seven previous systems to see what we had proposed and what survived. In parallel we audited the products the system was meant to serve, to know which components we would actually need and what each one had to cover.
Construimos con atomic design, empezando por las piezas base (el botón, los inputs, el tooltip) porque son las que después componen moléculas y organismos. Ese orden no fue estético: sin las bases resueltas, cada componente compuesto habría vuelto a discutir decisiones ya tomadas. We built with atomic design, starting from the base pieces (the button, the inputs, the tooltip) because those are what later compose molecules and organisms. That order was not aesthetic: without the foundations settled, every composed component would have reopened decisions already made.
La adopción, que suele ser la parte difícil, aquí no lo fue tanto. El concepto de sistema de diseño ya estaba arraigado en la empresa, así que desarrollo y el PM entendían de entrada la promesa de ahorrar tiempo. Y como la iniciativa nació desde diseño, dentro del equipo fue obligatoria: toda pantalla diseñada en Figma tenía que fundamentarse en el sistema. Lo que terminó de convencer al resto fue la evidencia: a medida que los desarrolladores lo implementaban, montar pantallas se volvía trivial y podían concentrarse en el backend y la lógica. Adoption, usually the hard part, was not so hard here. The concept of a design system was already established in the company, so development and the PM understood the time-saving promise from the start. And since the initiative came from design, inside the team it was mandatory: every screen designed in Figma had to be grounded in the system. What convinced everyone else was the evidence: as the developers implemented it, building screens became trivial and they could concentrate on the backend and the logic.
Tokenización en dos capas, a propósito. Two token layers, on purpose.
Propuse el enfoque whitelabel y estructuré los tokens en dos capas (primitiva y semántica) en lugar de un esquema más granular. Lo que descarté: una arquitectura más completa, con una capa adicional a nivel de componente. I proposed the whitelabel approach and structured tokens in two layers (primitive and semantic) instead of a more granular scheme. What I ruled out: a fuller architecture with an extra layer at component level.
Los demás participantes e implementadores no estaban familiarizados con el concepto de tokens. Dos capas era lo máximo que se podía entender e implementar bien desde el primer día. Preferí una arquitectura que el equipo pudiera usar correctamente sobre una técnicamente superior que se aplicara mal. The other participants and implementers were not familiar with tokens. Two layers was the most that could be understood and implemented well from day one. I preferred an architecture the team could use correctly over a technically superior one applied badly.
Lo que anticipé: que íbamos a necesitar aplicar el sistema a más productos de los que existían entonces. Por eso el whitelabel no fue un requisito recibido sino una propuesta. Si la meta era mantener un solo sistema para todo, la marca tenía que ser una variable, no una reescritura. What I anticipated: that we would need to apply the system to more products than existed at the time. That is why whitelabel was not a requirement handed to us but a proposal. If the goal was one system for everything, the brand had to be a variable, not a rewrite.
Accesibilidad como línea base, no como revisión. Accessibility as a baseline, not as a review.
Navegación por teclado y contraste conforme a WCAG 2.1 y 2.2 quedaron embebidos en cada componente desde el primer día, con su documentación correspondiente. No fue un requisito impuesto por nadie: salió del equipo de diseño. Keyboard navigation and WCAG 2.1 and 2.2 contrast were embedded in every component from day one, with their documentation. It was not a requirement imposed by anyone: it came from the design team.
La lógica es sencilla: si la accesibilidad vive dentro del componente, un equipo que usa Retto la hereda sin necesidad de saber de accesibilidad. Si vive en una checklist posterior, depende de que alguien se acuerde, y tarde o temprano nadie se acuerda. Es probablemente el mayor efecto multiplicador del sistema: una decisión tomada una vez que se aplica en todos los productos que lo consumen. The logic is simple: if accessibility lives inside the component, a team using Retto inherits it without needing to know about accessibility. If it lives on a checklist afterwards, it depends on someone remembering, and sooner or later nobody does. It is probably the system's biggest multiplier: one decision, made once, applied across every product that consumes it.
El botón, documentado hasta el último píxel. The button, documented down to the last pixel.
Cada componente se documenta con su anatomía, sus estados, sus variantes y las reglas de uso de cada jerarquía. El botón es el ejemplo más denso porque es la pieza base: ocho anatomías, siete estados y tres jerarquías con criterio de cuándo usar cada una. Every component is documented with its anatomy, its states, its variants and the usage rules for each hierarchy. The button is the densest example because it is the base piece: eight anatomies, seven states and three hierarchies with criteria for when to use each.
El aprendizaje más incómodo del proyecto. The most uncomfortable lesson of the project.
Estudiamos cómo otras empresas resolvían la gobernanza de sus sistemas y propusimos un modelo propio: principios, políticas, modelo de equipo con roles, flujos de revisión, estándares y métricas de adopción, junto con las prácticas de entrega de especificaciones desde diseño. Yo compilé y ajusté lo que el equipo formuló. We studied how other companies solved governance for their systems and proposed our own model: principles, policies, a team model with roles, review flows, standards and adoption metrics, alongside the practices for handing over specifications from design. I compiled and adjusted what the team formulated.
La gobernanza quedó escrita y no llegó a operar. The governance was written down and never got operated.
La operación diaria nos consumió, el tiempo asignado al sistema se fue reduciendo y la salida de uno de los desarrolladores que estaba al frente dejó un vacío que no habíamos previsto. Los principios, los flujos de revisión y los estándares siguieron existiendo en el documento, pero dejaron de cumplirse. Day-to-day operations took over, the time allocated to the system kept shrinking, and the departure of one of the developers leading it left a gap we had not planned for. The principles, the review flows and the standards went on existing in the document, but stopped being followed.
La consecuencia fue concreta: aparecieron roces en el equipo por componentes que unos consideraban no optimizados, sin un estándar vigente al cual apelar. Eso no fue un problema de las personas. Es lo que ocurre cuando un sistema tiene reglas escritas y nadie tiene asignado hacerlas cumplir. La gobernanza es una rutina con dueño y con tiempo protegido. The consequence was concrete: friction appeared in the team over components some considered unoptimized, with no standard in force to appeal to. That was not a people problem. It is what happens when a system has written rules and nobody is assigned to enforce them. Governance is a routine with an owner and protected time.
Documentar el comportamiento, no solo el estado final. Documenting behavior, not just the end state.
Un componente no se define por cómo se ve en el ancho ideal, sino por qué hace cuando deja de caber. Cada componente lleva documentadas sus reglas de desbordamiento, de reordenamiento y de colapso, con el caso móvil resuelto explícitamente. A component is not defined by how it looks at the ideal width, but by what it does when it stops fitting. Every component carries its overflow, reordering and collapse rules documented, with the mobile case explicitly resolved.
41 componentes con su documentación viva. 41 components with living documentation.
Cada uno con guías de uso, consideraciones de accesibilidad y comportamiento responsive documentados. Each with usage guides, accessibility considerations and responsive behavior documented.
La documentación real vive en un sitio interno dedicado, con especificaciones, ejemplos de código y la librería de componentes. Figma cumple otra función: es la librería para diseño y el lugar donde viven las plantillas de creación, edición y trazabilidad que aceleran la generación de especificaciones. No es documentación duplicada, es la herramienta de trabajo del equipo de diseño. The real documentation lives on a dedicated internal site, with specs, code examples and the component library. Figma serves a different purpose: it is the design library and the home of the creation, editing and traceability templates that speed up writing specs. It is not duplicated documentation, it is the design team's working tool.
Debió distribuirse como paquete, no como carpeta. It should have shipped as a package, not a folder.
Retto se implementó copiando la carpeta del sistema dentro de cada proyecto. Sin un paquete versionado, una corrección no se propagaba: había que replicarla producto por producto. Lo supimos y no lo peleamos, porque desde diseño no quisimos interferir en cómo trabajaba desarrollo. Fue mi omisión: la distribución es una decisión de arquitectura de producto, y yo era el responsable de ese producto. Retto was implemented by copying the system folder into each project. Without a versioned package, a fix did not propagate: it had to be replicated product by product. We knew and did not push back, because from design we did not want to interfere with how development worked. That was my omission: distribution is a product architecture decision, and I was responsible for that product.
Faltó definir cuándo llegaba la tercera capa de tokens. We never defined when the third token layer would arrive.
Quedarnos en dos capas de tokens (primitiva y semántica) fue correcto para arrancar, pero nunca definimos cuándo agregar la tercera, la de componente. Habría dado bastante más control sobre el sistema. Staying at two token layers (primitive and semantic) was right to get started, but we never defined when to add the third one, at component level. It would have given considerably more control over the system.
La rampa de color nació incompleta. The color ramp was born incomplete.
Se definió sin contemplar dark mode, que hoy es una expectativa básica. Un modo oscuro no se agrega después sin rehacer la rampa: o está en las foundations desde el principio, o no está. It was defined without dark mode in mind, which today is a basic expectation. A dark mode cannot be added later without redoing the ramp: either it is in the foundations from the start, or it is not there.
El stack correcto para el momento generó deuda para después. The right stack for the moment created debt for later.
El sistema se construyó en Web Components sobre el stack que desarrollo ya dominaba, no sobre el framework que habría dado mejores herramientas de composición. Hoy Retto está migrando a React. Volvería a tomar la decisión, pero pactaría desde el inicio en qué punto se revisa. The system was built in Web Components on the stack the developers already knew, not on the framework that would have given better composition tooling. Today Retto is migrating to React. I would make the same call again, but I would agree up front on the point at which it gets revisited.
La lección más transferible del proyecto: aprendí a negociar con desarrollo con datos. No basta con «hagamos esto porque nos ayuda a mejorar»; hay que explicar el cómo y, siempre que se pueda, llevar el número. Las limitaciones técnicas de los desarrolladores son restricciones de diseño, y tratarlas como obstáculos en vez de como insumos es la forma más rápida de perder una discusión que tenías ganada. The most transferable lesson: I learned to negotiate with development using data. "Let us do this because it helps us improve" is not enough; you have to explain the how and, whenever possible, bring the number. Developers' technical limitations are design constraints, and treating them as obstacles instead of inputs is the fastest way to lose an argument you had already won.
Retto es un sistema interno, así que comparto documentación y foundations, pero no los productos donde está implementado. Puedo mostrar el sistema completo y su aplicación en una conversación. Retto is an internal system, so I share documentation and foundations, but not the products where it is implemented. I can walk through the full system and its application in a conversation.