POAP Design System
Un sistema de diseño unificado para POAP: tipografía, espaciado, color, design tokens y componentes consistentes.
Sobre el proyecto
En POAP me encargué de revisar y sistematizar los estilos existentes, ordenar los sistemas tipográficos, de espaciado y de color, crear los design tokens y unificar los componentes para establecer una base compartida entre las interfaces del producto.
Diseñé bibliotecas de componentes de interfaz escalables y reutilizables para aplicaciones web, incluyendo variantes, estados, comportamientos responsive y design tokens.
Resumen
Transformé estilos y componentes dispersos en una base de diseño compartida para los productos web de POAP. En colaboración con frontend, organicé los fundamentos visuales, definí tokens primitivos y semánticos, reconstruí componentes reutilizables y documenté cómo usar y mantener el sistema.
El Desafío
POAP necesitaba avanzar rápido y adaptarse a medida que evolucionaban sus productos en blockchain, pero el equipo no tenía una fuente única de referencia para las decisiones de interfaz. Las decisiones aisladas demoraban el trabajo cotidiano y generaban inconsistencias entre productos.
Los archivos y componentes dependían demasiado de quienes los habían creado, lo que dificultaba la colaboración y la incorporación de otras personas. Los productos experimentales también carecían de criterios compartidos de UI, con problemas de legibilidad, manejo de errores y uso de patrones fuera de contexto. El desafío era aportar consistencia sin limitar la flexibilidad que necesitaba el equipo.
Proceso y Decisiones de Diseño
Empecé con una auditoría de los archivos de Figma y los productos publicados para identificar problemas recurrentes y organizar un plan según las principales necesidades del equipo.
Revisé color y tipografía con foco en consistencia y accesibilidad, y trabajé con frontend para establecer escalas coherentes. Definí criterios de espaciado y layouts responsive, organicé la biblioteca de íconos e incorporé tokens primitivos y semánticos. El alcance de las variables limitó las opciones a los valores pertinentes, mientras que los nombres semánticos aclararon su uso y prepararon el sistema para futuros temas y modos.
Unifiqué componentes duplicados y reconstruí los elementos principales con variantes, estados y comportamientos responsive. Las pautas de uso, los ejemplos de qué hacer y qué evitar, las secciones reutilizables y los templates de página ayudaron a aplicar el sistema de forma consistente.
Para facilitar el mantenimiento, reorganicé los archivos de Figma, estandaricé templates de archivo e incorporé un registro de cambios y un mecanismo de feedback. Otras pautas, como el manejo de errores, ampliaron el alcance del sistema más allá de sus fundamentos visuales.
Resultados y Aprendizajes
El sistema reunió más de 100 componentes y más de 80 design tokens, y le dio al equipo una base compartida para construir y hacer evolucionar las interfaces de POAP. Los patrones reutilizables y una documentación más clara redujeron las decisiones repetidas y la dependencia de diseñadores específicos.
El caso de estudio reporta flujos de diseño dos veces más rápidos, un 60% menos de inconsistencias entre plataformas y un 40% menos de decisiones de diseño.
Un aprendizaje clave fue que un sistema de diseño necesita más que una biblioteca de componentes: una nomenclatura clara, pautas de uso, archivos organizados y una forma de recibir feedback son fundamentales para que resulte útil en el trabajo cotidiano y pueda acompañar la evolución de los productos.
