Human definition
Goals, users, structure, priorities and product judgment.
Construvia · Design System · UX/UI · AI-assisted
A coherent system for a construction marketplace.
I designed Construvia’s visual and functional foundation: tokens, accessibility, components, states and patterns connecting its marketplace, projects and suppliers.
24documented boards
WCAG 2.1AA contrast
Desktop + mobileresponsive system
Claude + ChatGPTassisted workflow
The challenge
Construvia brings together machinery, materials, services, suppliers and projects. The interface had to support different content and user types without losing clarity, particularly across search, filters, listings and contact requests.
Consistency
One visual logic across marketplace, directory and projects.
Scalability
Components ready for new content, states and journeys.
Accessibility
Contrast, focus, hierarchy and feedback built into the foundation.
Foundations and accessibility
The system defines brand colors, neutral scales, semantic tokens, surfaces, borders and status colors. Text/background combinations were documented with passing and failing WCAG 2.1 AA examples.
Accessibility decision: yellow works as a signal, accent and action—not as small text on white. Critical states retain their own contrast and meaning.
How I integrated AI into the process
Claude and ChatGPT were part of the workflow for structuring information, expanding possible states, checking consistency and accelerating documentation. I defined the architecture, visual language, UX patterns and every final system decision.
Assisted exploration
Variants, edge cases, naming and state matrices with AI.
Design in Figma
Tokens, components, properties, patterns and complete screens.
Review and decision
Accessibility, coherence, usefulness and adjustments under my direction.
AI did not design Construvia: it accelerated analysis and documentation within a process led, reviewed and decided by me.
Components built for real conditions
The system goes beyond the ideal state. It includes active, hover, selected, favorite, loading, empty, error and retry variations to prevent inconsistencies during development.
From system to experience
The components were applied to desktop and mobile navigation, breadcrumbs, filters, listings, cards, actions and the footer. This preserves the same logic from the entry page to a specific search.
What this case demonstrates
Systemdecisions translated into reusable rules
Statescomponents designed beyond the happy path
Accessibilitycontrast and focus embedded from the start
Applied AIa real, directed and verifiable workflow
This case presents design work in progress. The images document the system and screens developed at this stage and do not necessarily represent a published product.
Next caseTeamateur