Case Study · ReUse
Construyendo un Design System para escalar una experiencia ecommerce.
ReUse es una empresa especializada en tecnología reacondicionada presente en Chile, Perú y México. El proyecto consistió en analizar la plataforma existente, identificar inconsistencias visuales y estructurales, y construir un Design System basado en Atomic Design para mejorar la consistencia, facilitar la colaboración entre equipos y preparar el producto para escalar.
- Rol
- Product Designer
- Alcance
- Design System
- Metodología
- Atomic Design
- Entregables
- Librería + Prototipo
Auditoría, Design System y prototipado.
Foundations, componentes y documentación.
Sistema modular y escalable.
Sistema documentado en Figma.
Contexto
ReUse contaba con una plataforma funcional para la venta de tecnología reacondicionada, incorporando funcionalidades como búsqueda de productos, filtros, comparadores, trade-in y soporte postventa.
Sin embargo, el crecimiento del producto había generado inconsistencias visuales y de interacción que dificultaban mantener una experiencia uniforme entre las distintas funcionalidades.
El desafío consistía en transformar un conjunto disperso de componentes en un sistema documentado, coherente y preparado para evolucionar.
Mi rol
Como Product Designer fui responsable de analizar el estado actual de la plataforma y diseñar un sistema capaz de unificar criterios visuales, mejorar la consistencia y facilitar la evolución futura del producto.
- Auditoría completa de la interfaz.
- Identificación de oportunidades de mejora.
- Definición de Foundations.
- Construcción de Design Tokens.
- Aplicación de Atomic Design.
- Diseño de componentes reutilizables.
- Creación de librería en Figma.
- Desarrollo de prototipo navegable.
- Documentación del sistema.
Mapeando el sistema existente
Antes de construir un Design System fue necesario identificar todos los componentes presentes en la plataforma. Este levantamiento permitió visualizar patrones repetidos, detectar variaciones innecesarias y comprender el alcance real del sistema antes de comenzar su estandarización.
Definiendo patrones de interacción
Además de los componentes, documenté patrones de interacción reutilizables para mantener una experiencia consistente a lo largo del producto. Estos lineamientos permitieron estandarizar comportamientos comunes y facilitar futuras implementaciones.
El principal problema no era visual. Era estructural. Sin estándares compartidos, cada nueva funcionalidad aumentaba la complejidad del producto.
Estrategia
Organizando el sistema con Atomic Design
Una vez identificado el inventario de componentes y patrones, estructuré el sistema utilizando Atomic Design para establecer una jerarquía clara entre Foundations, Atoms, Molecules, Organisms, Templates y Pages.
Foundations
Atoms
Molecules
Organisms
Templates
Pages
Foundations
Biblioteca de componentes
A continuación puedes explorar una selección de componentes del Design System directamente desde Figma. Navega entre las categorías utilizando las pestañas superiores. Si deseas revisar la documentación completa, haz clic en "Explorar biblioteca completa".
Decisiones de diseño
Decisión · 01
Estandarizar componentes
Se eliminaron variantes innecesarias para construir un sistema reutilizable.
Decisión · 02
Reorganizar la jerarquía visual
Se redefinió la paleta cromática y la escala tipográfica para mejorar la legibilidad y consistencia.
Decisión · 03
Documentar patrones
Cada componente incorporó reglas de uso, estados y buenas prácticas para facilitar su implementación.
Un sistema preparado para crecer junto al producto.
El resultado fue un Design System documentado en Figma que reúne foundations, componentes y patrones necesarios para construir experiencias consistentes dentro del ecosistema ReUse.
Como demostración del sistema se desarrolló un prototipo navegable que incluía las principales pantallas del ecommerce.
Impacto del proyecto
- Auditoría completa
- Identificación de inconsistencias visuales y funcionales.
- Design System
- Sistema modular construido utilizando Atomic Design.
- Componentes reutilizables
- Reducción de redundancias y mayor consistencia.
- Documentación
- Reglas claras para diseño y desarrollo.
- Escalabilidad
- Bases definidas para futuras evoluciones del producto.
Lo que aprendí
Este proyecto reforzó mi convicción de que un Design System va mucho más allá de una biblioteca de componentes. Es una herramienta estratégica que conecta diseño, negocio y tecnología a través de un lenguaje común.
Comprendí que la escalabilidad de un producto comienza mucho antes de escribir una línea de código. Comienza definiendo principios, eliminando inconsistencias y construyendo sistemas capaces de evolucionar sin perder coherencia.
ReUse fortaleció mi experiencia en Design Systems, Atomic Design, documentación, accesibilidad y pensamiento sistémico aplicado al diseño de productos digitales.
Siguiente caso