LLM-enabled Design System for Accessibility
Client
Contorion GmbH
Collaborators
-
1 Engineering Manager
-
1 Staff Engineer
-
5 Front-End Engineers
-
1 Staff Product Designer
-
2 Product Managers
-
2 Product Designers
Location
Berlin, Germany
Year
2024 - 2026
Contorion is an e-commerce platform that sells tools and equipment to B2B construction and trade industry professionals.
Whether you're purchasing for personal DIY projects or a B2B buyer on location of a construction site, Contorion provides the best brands and fast delivery for all trade industry needs.
Strategy objective
We establish the foundation for Contorion’s shopping experience for 2025 and beyond. Investigate EAA guidelines for digital design and identify the areas and components that require accessibility updates.
accessibility scores
Raised the accessibility score from 68 to 92 across all redesigned pages by conducting compliance-led audits on the highest-traffic customer journey pages and designing UI components that scale across devices.
Performance speed
Achieved a +2.2% relative conversion lift (+24% on desktop) by implementing modern interaction patterns to improve, both perceived performance, and the speed index on page loading.
Process & AI Workflows
Scaled the Design System's component pipeline from 0 to 98+ production-ready components by implementing a process to make UI creation to ready-for-dev 69% faster and introduced LLM-friendly Skill structure for accurate prototyping.
 |  |
|---|---|
 |  |
 |  |
 |  |
 |  |
 |
My Role
Staff Product Designer (Design System Manager)
MY RESPONSIBILITIES
-
Create a tactical roadmap for implementing EAA-friendly UI/UX
-
Align with FE on workflow from Figma Design System to Storybook repositories
-
Establish Design System management and contribution model for Designers, Devs and AI
-
Create LLM-friendly handover specs for accessibility
-
Provide a design vision for interaction and visual language for the online brand
What we did
Because the migration to a new tech stack was already underway, the redesign components and process occurred in parallel to development.
​
-
Established benchmark scores on performance and accessibility
-
Defined a component creation process to improve speed and accuracy
-
Refined the design system contribution model
-
Created scalable, responsive components that improved performance speed, SEO and accessibility
What we learned
AI agents like Figma Make and Claude Design have been great for generating code for complex interaction but to ensure that we don't exceed our token budget, I also provided specs for the UX gestures per device type.
​
Once the MCP server was connected and the Skills.md was properly documented, our Figma Make prototypes achieved 53% accuracy (120 prompts to only 56 prompts).
THE Impact
The new and improved Design System led to a faster page-over-page tech migration and a conversion uplift on redesigned pages.
Raised the accessibility score from 68 to 92 on all redesigned pages
Achieved a +2.2% conversion uplift (24% on desktop) by implementing modern interaction patterns
Scaled the Design System component pipeline to be 69% faster from concept to delivery