Sistema de Diseño de Destácame

Creación de un Sistema de Diseño que impulsó la consistencia, aceleró la entrega de producto y fortaleció la colaboración entre equipos.

01

Contexto

A medida que los productos digitales de Destácame continuaban creciendo, el equipo necesitaba una forma más escalable de diseñar y construir experiencias en plataformas web y app.

Antes del Sistema de Diseño, muchos componentes se creaban repetidamente para distintos flujos. Esto generaba inconsistencias, duplicación de esfuerzo y hacía más difícil mantener un lenguaje visual y de interacción compartido entre productos.

El desafío no era solamente visual. También era operativo.

Necesitábamos una base común que ayudara al equipo UX a trabajar de manera más eficiente, mejorar la comunicación con frontend y elevar la madurez de diseño dentro de la organización.

¿Qué pasaría si el equipo pudiera dejar de reconstruir los mismos elementos y dedicar más energía a investigar, validar y tomar mejores decisiones de producto?

02

El desafío

Crear una librería oficial de componentes desde cero.

Definir qué elementos debían estandarizarse primero.

Mejorar la consistencia entre experiencias web y app.

Reducir trabajo duplicado en diseño y desarrollo.

Fortalecer la colaboración entre los equipos UX y frontend.

Ayudar a la organización a entender el valor de un Sistema de Diseño como una capacidad central de producto.

El objetivo no era solo crear una biblioteca de elementos UI. El verdadero desafío era construir un sistema compartido que mejorara la forma en que los equipos diseñaban, construían y evolucionaban productos digitales.

03

Qué hice

Lideré la creación del Sistema de Diseño desde sus primeras etapas, trabajando junto al equipo UX y colaborando con frontend para alinear las decisiones de diseño con las necesidades de implementación.

El proceso comenzó con una actividad interna de priorización, donde identificamos los componentes y elementos más utilizados en distintos flujos del producto.

Esto nos permitió definir una primera versión del sistema basada en necesidades reales del equipo, en lugar de intentar documentar todo desde el inicio.

Trabajé en:

  • Priorización de componentes.
  • Foundations visuales.
  • Elementos UI reutilizables.
  • Documentación de diseño.
  • Actividades de alineamiento con el equipo.
  • Rituales de colaboración con frontend.
  • Adopción del Sistema de Diseño dentro de la organización.

04

Definición del sistema

El Sistema de Diseño se estructuró en torno a cuatro librerías principales de Figma, habilitadas por defecto en los nuevos archivos de la organización.

Base

Colores, tipografías, portadas de archivos, logos y elementos visuales fundacionales.

Componentes

Elementos y componentes reutilizables, incluyendo átomos y moléculas utilizados en distintos flujos.

Organismos

Patrones de interfaz más grandes y estructuras recurrentes de pantallas, utilizadas como punto de partida para nuevas experiencias de producto.

Iconos

Iconos de Material Design, sets lineales y sólidos, además de iconografía ilustrativa para distintas necesidades de interfaz.

Esta estructura permitió separar foundations, componentes, patrones complejos e iconografía, haciendo que el sistema fuera más fácil de mantener y escalar.

05

Core herramienta

Una parte clave del proyecto fue posicionar el Sistema de Diseño como una capacidad central, no solo como un archivo de diseño.

Para lograrlo, era importante mostrar cómo el sistema podía reducir el tiempo dedicado a trabajo repetitivo, mejorar la consistencia y facilitar una mejor colaboración entre diseño y desarrollo.

Creamos sesiones de trabajo semanales con frontend para revisar componentes, mejorar el handoff y asegurar que lo diseñado en Figma pudiera implementarse de manera eficiente en los productos finales.

Esto ayudó a que el Sistema de Diseño se convirtiera en un lenguaje compartido entre disciplinas.

06

Impacto

El Sistema de Diseño ayudó al equipo a avanzar con mayor velocidad y consistencia.

Contribuyó a:

  • Experiencias digitales más consistentes.
  • Mayor velocidad en la producción de diseño.
  • Mejor comunicación con frontend.
  • Reducción de trabajo duplicado.
  • Flujos de diseño de producto más escalables.
  • Un lenguaje compartido más claro entre equipos.

También apoyó la construcción de experiencias más accesibles y comprensibles, especialmente para usuarios con menor familiaridad con herramientas digitales.

El valor del sistema no estuvo solamente en los componentes, sino en cómo mejoró la forma en que el equipo trabajaba en conjunto.

07

Aprendizajes

Este proyecto me enseñó que un Sistema de Diseño no es solo un artefacto técnico o visual. Es un producto en sí mismo.

Su éxito depende de la adopción, la colaboración, el mantenimiento y la capacidad de demostrar valor dentro de la organización.

Construir el sistema requirió oficio de diseño, pero también facilitación, priorización, comunicación y alineamiento organizacional.

Fue uno de los proyectos más significativos de mi carrera porque mostró cómo el diseño puede mejorar no solo la experiencia de usuario, sino también la experiencia de los equipos que construyen el producto.

Un buen Sistema de Diseño no solo hace que las interfaces sean más consistentes. Ayuda a los equipos a tomar mejores decisiones, reducir fricción y construir mejores productos en conjunto.

Ver más proyectos
Desplazamiento al inicio