G-P
Design System
3 Months
Figma, Zero Height
Discovery
Conducted user interviews with Designers and Developers to understand how they work with the design system.
User
Interviews
Ran task based audits against gold standard design systems to benchmark search times.
Competitive
Audits
Built out the component tree, to reveal and visualise current structure.
Structure Analysis
Analysis
The RAG (red,amber,green) conducted revealed mass inconsistency across all component sections.
-Information Scarcity
-Visual Trust Erosion
Inconsistency
Human Source
"Should be more conscious of their time and trying to think other ways to get around that"
Main Competitor
Research shows that team members reach a critical breaking point at the 2 minute mark when searching for documentation
Frustration Ceiling
Action
Single Source of Truth
Moving away from the previously found tabbed experience and unifying both Designer and Developer sections.
- Clear information architecture
- Consistency is key
- Aligning on a structured hierarchy
- Active playgrounds
- Example Code
- Context and Redirection
Solution
Information
- Introduction
- Usage
- Do’s and Don'ts
- Variants
- Import
- Props
- Examples
- Related Components
Hierarchy
Looking Forward
Replacing fragmented tabs with a single-page "Context Block" creates a unified source of truth specifically optimized for AI connectivity. This streamlined architecture allows AI assistants to crawl the entire component lifecycle as a coherent unit, instantly linking strategic usage to technical specifications.
Future Proofing
G-P
Case Study
Design System
3 Months
Figma, Zero Height
Discovery
Conducted user interviews with Designers and Developers to understand how they work with the design system.
User
Interviews
Ran task based audits against gold standard design systems to benchmark search times.
Competitive
Audits
Built out the component tree, to reveal and visualise current structure.
Structure Analysis
Analysis
The RAG (red,amber,green) conducted revealed mass inconsistency across all component sections.
-Information Scarcity
-Visual Trust Erosion
Inconsistency
Human Source
"Should be more conscious of their time and trying to think other ways to get around that"
Main Competitor
Research shows that team members reach a critical breaking point at the 2 minute mark when searching for documentation
Frustration Ceiling
Action
Single Source of Truth
Moving away from the previously found tabbed experience and unifying both Designer and Developer sections.
- Clear information architecture
- Consistency is key
- Aligning on a structured hierarchy
- Active playgrounds
- Example Code
- Context and Redirection
Solution
Information
- Introduction
- Usage
- Do’s and Don'ts
- Variants
- Import
- Props
- Examples
- Related Components
Hierarchy
Looking Forward
Replacing fragmented tabs with a single-page "Context Block" creates a unified source of truth specifically optimized for AI connectivity. This streamlined architecture allows AI assistants to crawl the entire component lifecycle as a coherent unit, instantly linking strategic usage to technical specifications.
Future Proofing
G-P
Case Study
Design System Documentation
3 Months
Figma, Zero Height
Discovery
Conducted user interviews with Designers and Developers to understand how they work with the design system.
User
Interviews
Ran task based audits against gold standard design systems to benchmark search times.
Competitive
Audits
Built out the component tree, to reveal and visualise current structure.
Structure Analysis
Analysis
The RAG (red,amber,green) conducted revealed mass inconsistency across all component sections.
-Information Scarcity
-Visual Trust Erosion
Inconsistency
Human Source
"Should be more conscious of their time and trying to think other ways to get around that"
Main Competitor
Research shows that team members reach a critical breaking point at the 2 minute mark when searching for documentation
Frustration Ceiling
Action
Single Source of Truth
Moving away from the previously found tabbed experience and unifying both Designer and Developer sections.
- Clear information architecture
- Consistency is key
- Aligning on a structured hierarchy
- Active playgrounds
- Example Code
- Context and Redirection
Solution
Information
- Introduction
- Usage
- Do’s and Don'ts
- Variants
- Import
- Props
- Examples
- Related Components
Hierarchy
Looking Forward
Replacing fragmented tabs with a single-page "Context Block" creates a unified source of truth specifically optimized for AI connectivity. This streamlined architecture allows AI assistants to crawl the entire component lifecycle as a coherent unit, instantly linking strategic usage to technical specifications.
Future Proofing