Design System
WCAG
ABOUT
The project aimed to build a standardised, platform wide component 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
PLATFORM
Design system
DURATION
8 weeks
ABOUT PRODUCT
The product acted as a central platform for different teams to host features as per customer requests.
With lack of a design framework, the product already started falling apart
2500+
DAILY
INTERACTIONS
30-35
FEATURES
HOSTED
16+
TEAMS
BUILDING
CATALYST
Design and engineering debts finally lead to our customers doubting product capabilities
Operational fragmentation has fractured the clinician experience. Resolving this design deficit is our primary retention priority.
$10M+
ARR at risk
ROOT CAUSE ANALYSIS
Design system debt accumulates silently in every component that gets rebuilt because
the right one wasn't found leading to hardcoding because binding felt slower.
2-week feature sprints eliminate design exploration windows.
Lack of a centralized reference architecture forces localized, subjective design decisions.
Screens carrying identical clinical data levels are rendered completely differently across features.
AUDIT
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
Product displayed information in form of cards. there were 3 distinct card patterns that were being followed : Overview cards, AI cards, outliers
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.
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.
AI ASSISTED DESIGN
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
SOLUTION
We designed over 30+ super components with claude as the primary design tool !
Showing wireframe representation of the original card due to NDA
STRATEGIC TURN
SKILL
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.
FINAL OUTPUT
The skill changed the handoffs, we shifted from sharing figma files
to directly raising PR's
