Refiberd usa IA y machine learning para identificar y clasificar materiales textiles de forma rápida y precisa. En una industria donde los métodos tradicionales son lentos, propensos a errores y dificultan el reciclaje, Refiberd automatiza el proceso completo.
El trabajo fue diseñar la plataforma desde cero: la experiencia del operador, la vista del administrador y los prototipos interactivos que validaron cada flujo antes del desarrollo. Dos tipos de usuario, dos contextos de uso, un mismo sistema de diseño.
Refiberd usa IA y machine learning para identificar y clasificar materiales textiles de forma rápida y precisa. En una industria donde los métodos tradicionales son lentos, propensos a errores y dificultan el reciclaje, Refiberd automatiza el proceso completo.
El trabajo fue diseñar la plataforma desde cero: la experiencia del operador, la vista del administrador y los prototipos interactivos que validaron cada flujo antes del desarrollo. Dos tipos de usuario, dos contextos de uso, un mismo sistema de diseño.
EL DESAFÍO
Una industria que necesitaba tecnología accesible
Identifying Key
Pain Points
1
Los métodos de análisis textil existentes son lentos e ineficientes. Generan demoras en producción y reciclaje.
2
Las empresas no tienen soluciones automatizadas para identificar materiales con precisión.
2
Las empresas no tienen soluciones automatizadas para identificar materiales con precisión.
3
La falta de trazabilidad dificulta la gestión de residuos y frena los esfuerzos de sostenibilidad.
4
La industria necesitaba una herramienta potente y fácil de usar al mismo tiempo.
LA SOLUCIÓN - WEB APP
Dos usuarios, dos interfaces, un sistema
AI-POWERED Textile
IdEntification APP
Machine Learning Textile
IdEntification APP
Se crearon interfaces diferenciadas para operadores y administradores porque una interfaz que intenta servir a dos usuarios al mismo tiempo termina sirviendo bien a ninguno. La UI oscura no fue una elección estética: los operadores trabajan en entornos industriales con condiciones de luz variables, y un fondo oscuro reduce la fatiga visual en turnos largos y mejora la legibilidad en contextos con iluminación intensa.
Los prototipos interactivos en Figma fueron la herramienta con la que se validaron los flujos principales antes de invertir tiempo de desarrollo. Cada punto de fricción identificado en los tests ahorró horas de iteración posterior.
Página analítica (para operadores)
Página analítica (para operadores)
Página de administración (para líderes)
Página de administración (para líderes)
PROTOTIPO INTERACTIVO
BRINGING IDEAS TO LIFE WITH FIGMA
BRINGING IDEAS TO
LIFE WITH FIGMA
Los prototipos interactivos en Figma son clave para testear usabilidad antes del desarrollo. Permiten validar flujos, recopilar feedback temprano y evitar cambios costosos más adelante en el proceso.
EL PROCESO
Cómo se trabajó
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
1. Entendiendo las necesidades del cliente
Las sesiones de descubrimiento incluyeron a operadores reales, no solo a los decisores. Los problemas que describe un gerente y los que vive un operador en el día a día son distintos. Ambas perspectivas son necesarias para diseñar bien.
2. Ideación
El MVP se definió con un criterio claro: qué es lo mínimo que resuelve el problema principal. Todo lo que no era esencial para ese objetivo se movió a fases posteriores.
3. Wireframing
Flujos de operadores y administradores wireframeados por separado, verificando que cada uno tuviera lógica propia antes de pensar en el sistema compartido.
4. Diseño de UI de alta fidelidad
El sistema de diseño se construyó antes de las pantallas específicas: colores, tipografía, componentes y espaciados definidos como sistema para garantizar consistencia.
5. Prototipo interactivo
Prototipos testeados con usuarios reales. El feedback se incorporó antes de dar luz verde al desarrollo.
EL DESIGN SYSTEM
DONDE LA CONSISTENCIA SE ENCUENTRA CON LA EFICIENCIA
WHERE Consistency
Meets Efficiency
“A well-structured and scalable design system is essential for consistency, efficiency, and future growth. That is why I created a robust system with clear components, styles, and documentation to ensure smooth collaboration and easy scalability as the product evolves.”
REFIBERD
DETALLES RÁPIDOS DEL PROYECTO
INDUSTRIA
Textil / Sostenibilidad / Tecnología
BREVE DESCRIPCIÓN
Plataforma de identificación textil con IA y machine learning para la industria de la moda
SERVICIOS ADQUIRIDOS
UX/UI Design / Diseño de Producto
AÑO
2024
PAÍS
USA
HERRAMIENTAS
Figma
