Design System
WCAG
AI assisted product
design system optimisation
AI assisted product
design system optimisation
And creating a Claude skill around it 🤖
NDA
Due to NDA restrictions, only a high-level overview of the project can be shared. The work presented highlights the overall problem space, design approach, and impact without disclosing confidential business information or proprietary details.
Due to NDA restrictions, only a high-level overview of the project can be shared. The work presented highlights the overall problem space, design approach, and impact without disclosing confidential business information or proprietary details.
ABOUT
The project aimed to build a standardised, platform wide design system that ensures ecosystem consistency across multiple product lines.
By integrating agentic AI tools and closed loop automation, the system drastically optimises the design to development pipeline, minimising engineering overhead and breaking down legacy workflow silos.
The project aimed to build a standardised, platform wide design system that ensures ecosystem consistency across multiple product lines.
By integrating agentic AI tools and closed loop automation, the system drastically optimises the design to development pipeline, minimising engineering overhead and breaking down legacy workflow silos.
ROLE
UX engineer
I work as a ux engineer to define the component system and create skill for design to development pipeline
I work as a ux engineer to define the component system and create skill for design to development pipeline
PLATFORM
Design system
DURATION
8 weeks
SCOPE
UX engineer | Product design
UX engineer
Product design
WHAT?
Why standardization became important?
Why standardization became important?
CHALLENGE
Multiple stakeholders working with no design system in place
Multiple stakeholders working with no design system in place
The platform was being simultaneously used by over 10 team following no defined design structure. This causes inconsistency in design which was being reflected in customer feedbacks continuously.
The platform was being simultaneously used by over 10 team following no defined design structure. This causes inconsistency in design which was being reflected in customer feedbacks continuously.
BUSINESS CONTEXT
Solving for Ecosystems, Not Features.
Solving for Ecosystems, Not Features.
Product serves as the foundational core for our entire ecosystem. The challenge wasn't a 'UI cleanup' but instead it was a systems architecture problem.
Product serves as the foundational core for our entire ecosystem. The challenge wasn't a 'UI cleanup' but instead it was a systems architecture problem.
AIM
Understand, design and launch
Understand, design and launch
Understand product requirements from different teams.
Create standard interaction patters
Create standardised component system
Understand product requirements from different teams.
Create standard interaction patters
Create standardised component system
PROBLEMS
Three forces pulling the platform apart.
Three forces pulling the platform apart.
Design system debt accumulates silently in every component that gets rebuilt because
the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.
Design system debt accumulates silently in every component that gets rebuilt because
the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.
Fragmentation
Fragmentation
Each team had recreated the same patterns independently which made global updates impossible without touching every instance manually.
Each team had recreated the same patterns independently which made global updates impossible without touching every instance manually.
Downstream effect
A small change to one screen ripple to all 200+ screens.
Since the instances are detached, each screen needs to be edited individually resulting in errors and inconsistent designs.
Since the instances are detached,
Component redundancy
Component redundancy
There were no reusable components that different teams can use to create design as per their requirements.
There were no reusable components that different teams can use to create design as per their requirements.
Downstream effect
Every card design looked different.
Placement of elements was not constant resulting in a broken experience for the customers
Placement of elements was not constant resulting in a broken experience for the customers
Every card design looked different.
Placement of elements was not constant resulting in a broken experience for the customers
Placement of elements was not constant resulting in a broken experience for the customers
Knowledge silos
Knowledge silos
Confluence documents were often missing for the design decisions taken at the time designing that particular card
Confluence documents were often missing for the design decisions taken at the time designing that particular card
Downstream effect
Designers had to often follow instinct or browse through endless files to get context of the design they wanted to make
AUDIT
How do we know what
Product requires?
How do we know what
Product requires?
By directly analyzing production screens, we mapped out structural discrepancies, undocumented edge cases, and layout variances that couldn't be captured through high-level overviews or automated testing alone.
By directly analyzing production screens, we mapped out structural discrepancies, undocumented edge cases, and layout variances that couldn't be captured through high-level overviews or automated testing alone.
DISCOVERY
We found a nightmare!
We found a nightmare!
By directly analyzing production screens, we mapped out structural discrepancies, undocumented edge cases, and layout variances that couldn't be captured through high-level overviews or automated testing alone.
By directly analyzing production screens, we mapped out structural discrepancies, undocumented edge cases, and layout variances that couldn't be captured through high-level overviews or automated testing alone.
16+
16+
Products building on this platform
simultaneously
Products building on this platform
simultaneously
12 team spread across 16 products were continuously building on this platform.
12 team spread across 16 products were continuously building on this platform.
3
3
Distinct card patterns
Distinct card patterns
Product displayed information in form of cards. there were 3 distinct card patterns that were being followed : Generic cards, AI cards, outliers
Product displayed information in form of cards. there were 3 distinct card patterns that were being followed : Generic cards, AI cards, outliers
70%
Varients were detached
Current DS was made for web apps and full screen softwares. This platform works in constraints of 400px to 600px. Thus DS guideline did not apply to product as a platform.
Avg. 8X
Times the same pattern existed in non-standard form
More that 8 non standard pattern for cards, tabs, rows, filters, and footers existed in product. Each team had rebuilt their own version. The design file had diverged from the MDS system entirely.
70%
Varients were detached
Current DS was made for web apps and full screen softwares. This platform works in constraints of 400px to 600px. Thus DS guideline did not apply to product as a platform.
Avg. 8X
Times the same pattern existed in non-standard form
More that 8 non standard pattern for cards, tabs, rows, filters, and footers existed in product. Each team had rebuilt their own version. The design file had diverged from the MDS system entirely.
Showing wireframe representation of the original card due to NDA
PROCESS
Following the atomic design model
Following the atomic design model
We did not follow just a random pattern, we started from the core and building up from there.
We did not follow just a random pattern, we started from the core and building up from there.
Molecules
Adding up individual key to create elements
Adding up individual key to create elements
Organisms
Adding up elements that interact with eachother to create components
Adding up elements that interact with eachother to create components
Template
Putting up components in a systematic manner to create individual pages
Putting up components in a systematic manner to create individual pages
COMPONENTS
Started with the core, designed to the surface
Started with the core, designed to the surface
We understood how each component of the product functioned, what were the edge cases where the product was breaking and user mindmap to define components first and expand from there to the whole product
We understood how each component of the product functioned, what were the edge cases where the product was breaking and user mindmap to define components first and expand from there to the whole product
Image blurred due to NDA
2 Card Designs making 200+ screens
2 Card Designs making 200+ screens
platform works on widgets in form of cards. Cards form the basis of every screen. As part of standardisation, the first task was to define generic card designs that can be used to design every screen on the platform
platform works on widgets in form of cards. Cards form the basis of every screen. As part of standardisation, the first task was to define generic card designs that can be used to design every screen on the platform
Showing wireframe representation of the original card due to NDA
PROOF ON CONCEPT
Bridging the Gap: A Big Directional Design to code Pipeline.
Bridging the Gap: A Big Directional Design to code Pipeline.
The ultimate test of system maturity is the friction between Design and Engineering.
We moved beyond static handoffs to a proof of concept where design changes were pushed directly to Git.
The ultimate test of system maturity is the friction between Design and Engineering.
We moved beyond static handoffs to a proof of concept where design changes were pushed directly to Git.
The first test failed because the code did not follow the existing structure of product, the output took too much time because of scanning to all the git repos.
The first test failed because the code did not follow the existing structure of product, the output took too much time because of scanning to all the git repos.
STESS TESTING
4 Teams, 1 prompt 6 Products
4 Teams, 1 prompt 6 Products
Boundary Testing
Boundary Testing
We didn't just check if it looked pretty. We performed stress tests by injecting maximum character counts, multi language strings, and broken image links to see where the component logic would fail.
We didn't just check if it looked pretty. We performed stress tests by injecting maximum character counts, multi language strings, and broken image links to see where the component logic would fail.
Success Metric
Success Metric
We achieved a 90% First-Pass Success Rate, meaning 9 out of 10 AI-generated screens required zero manual adjustment by a designer.
We achieved a 90% First-Pass Success Rate, meaning 9 out of 10 AI-generated screens required zero manual adjustment by a designer.
Image blurred due to NDA
SETTING THINGS RIGHT
Creating a skill that unifies it all
Creating a skill that unifies it all
Image blurred due to NDA
The final code seemed ship ready and just required backend integration before pushing it to stagging, This helped in redifing the design handoff. the handoffs were no one figma files but actual deployable level code that could seamlessly be integrated into the current product repos.
The final code seemed ship ready and just required backend integration before pushing it to stagging, This helped in redifing the design handoff. the handoffs were no one figma files but actual deployable level code that could seamlessly be integrated into the current product repos.
Due to NDA restrictions, this is the extent of what can be presented publicly. I’d be happy to discuss the project in greater detail over a 1:1 conversation
LET'S WORK
TOGETHER
Open to freelance, contractual and full time roles
Gupta.dhruv2121@gmail.com
LET'S WORK
TOGETHER
Open to freelance, contractual and full time roles
Gupta.dhruv2121@gmail.com
LET'S WORK
TOGETHER
Open to freelance, contractual and full time roles
Gupta.dhruv2121@gmail.com
LET'S WORK
TOGETHER
Open to freelance, contractual and full time roles
Gupta.dhruv2121@gmail.com
LET'S WORK
TOGETHER
Open to freelance, contractual and full time roles
Gupta.dhruv2121@gmail.com