Definición humana
Objetivos, usuarios, estructura, prioridades y criterio de producto.
Construvia · Design System · UX/UI · IA aplicada
Un sistema coherente para un marketplace de construcción.
Diseñé la base visual y funcional de Construvia: tokens, accesibilidad, componentes, estados y patrones que conectan el marketplace, los proyectos y los proveedores.
24láminas documentadas
WCAG 2.1contraste AA
Desktop + mobilesistema responsive
Claude + ChatGPTworkflow asistido
El reto
Construvia reúne maquinaria, materiales, servicios, proveedores y proyectos. La interfaz necesitaba funcionar para distintos tipos de contenido y usuarios sin perder claridad, especialmente en búsquedas, filtros, publicaciones y solicitudes de contacto.
Consistencia
Una misma lógica visual para marketplace, directorio y proyectos.
Escalabilidad
Componentes preparados para contenido, estados y recorridos nuevos.
Accesibilidad
Contraste, foco, jerarquía y feedback definidos desde la base.
Fundamentos y accesibilidad
El sistema define colores de marca, escalas neutrales, tokens semánticos, superficies, bordes y estados. Las combinaciones de texto y fondo se documentaron con ejemplos correctos e incorrectos bajo WCAG 2.1 AA.
Decisión de accesibilidad: el amarillo funciona como señal, acento y acción; no se usa como texto pequeño sobre blanco. Los estados críticos conservan contraste y significado propio.
Cómo integré IA en el proceso
Claude y ChatGPT fueron parte del flujo de trabajo para estructurar información, ampliar estados posibles, revisar consistencia y acelerar la documentación. Yo definí la arquitectura, el lenguaje visual, los patrones UX y cada decisión final del sistema.
Exploración asistida
Variantes, edge cases, nomenclatura y matrices de estados con IA.
Diseño en Figma
Tokens, componentes, propiedades, patrones y pantallas completas.
Revisión y decisión
Accesibilidad, coherencia, utilidad y ajustes bajo mi dirección.
La IA no diseñó Construvia: aceleró análisis y documentación dentro de un proceso dirigido, revisado y decidido por mí.
Componentes preparados para la realidad
El sistema no se limita al estado ideal. Incluye variaciones activas, hover, selección, favoritos, carga, vacío, error y reintento para evitar inconsistencias durante el desarrollo.
Del sistema a la experiencia
Los componentes se aplicaron a navegación desktop y mobile, breadcrumbs, filtros, listados, tarjetas, acciones y footer. Esto permite mantener la misma lógica desde la página de entrada hasta una búsqueda específica.
Qué demuestra este caso
Sistemadecisiones convertidas en reglas reutilizables
Estadoscomponentes diseñados más allá del happy path
Accesibilidadcontraste y foco incorporados desde la base
IA aplicadaun workflow real, dirigido y verificable
Caso presentado como trabajo de diseño en evolución. Las imágenes documentan el sistema y las pantallas desarrolladas hasta esta etapa; no representan necesariamente un producto publicado.
Siguiente casoTeamateur