Connect Design System: Documentation Overhaul
Designed the information architecture and built the documentation platform that consolidated 4-5 websites into one, reduced office hours by 70%, and serves over 5,000 engineers across JP Morgan's Global Private Bank.
Connect Design System Documentation
Overview
Role: UX/UI Designer & Frontend Developer Impact: 70% reduction in office hours, consolidated 4-5 websites into one
The Connect Design System serves over 5,000 engineers across JP Morgan's Global Private Bank. Documentation was spread across 4-5 different websites—WordPress for product learning, component docs, grid documentation, developer toolkits, and Confluence for project setup.
People couldn't find anything. No global search. Designers found the content too technical. Developers couldn't grab information quickly. Office hours were packed with questions that should have been self-service.
The problem
Documentation existed but lived in different places. You had to know where something was before you could find it. Navigation was bad. Search didn't exist. New people got lost. Experienced people wasted time.
The main complaint: information was impossible to find.
My role
I designed the information architecture, built the UI, implemented frontend code, and worked with the backend team on search infrastructure. I also added documentation and coordinated with community members contributing content.
Research
I talked to designers and developers about how they used documentation.
Designers said the existing docs felt too technical. Lots of code, hard to understand when to use things. They wanted to learn patterns and principles without wading through prop definitions.
Developers wanted bite-sized information they could scan. Quick access to API docs and code examples. They were frustrated by long-form content.
Both groups hated that search didn't exist.
Solution: Three-tab structure
I organized the site into Components, Design, and Developer tabs. Each group gets their own space.
Components tab: Hub for the component library. Live interactive examples, prop glossary, pattern demonstrations.
Design tab: Design principles, patterns, direct links to Figma libraries. Visual content focused on why and when, not how.
Developer tab: Kickstart project guides, integration docs, technical resources.
If a designer wants to see the technical implementation, they can. If a developer wants to understand the design thinking, it's there.
Search implementation
I built search at two levels.
Global search works from anywhere. Search for components, guides, principles—anything. Results surface across all tabs. You don't need to know where something lives.
Page-level search is focused. The component overview page has dedicated component search. Filter and find specific component cards without scrolling.
Quick links throughout—one-click to Bitbucket repos and Figma libraries.
Component documentation structure
Each component page follows the same structure:
1. Visual preview 2. Use cases and patterns 3. Live interactive example 4. Props glossary 5. Code snippets
Designers can see what a component does without hitting code immediately. When they want detail, it's there. Developers can jump straight to props or code.
Technical implementation
We chose MDX for documentation. MDX lets you write markdown but render JSX components in the page. This allows rich, interactive documentation and makes it easy for community members to contribute. Anyone who knows markdown can write documentation.
Code examples get passed as strings and loaded into iframes. This isolates them from the main site, prevents style conflicts, and demonstrates components in a real rendering environment.
Tech stack: React, HeroUI, Tailwind CSS, Feather icons, custom database.
FAQs on component pages give developers bite-sized information without reading full docs.
Building for scale
With 5,000 engineers, the platform needed to scale without the core team becoming a bottleneck. The goal was to open-source the project and let the community contribute.
MDX lowered the barrier. Community members write in markdown and include JSX for examples. No custom CMS or complicated tooling.
Documentation patterns are reusable and consistent. Clear template when someone adds a new component.
Current state
We shipped an MVP in a year. Now we're adding a changelog, our low code renderers, more product information and integrating Cosmos, our chatbot, for AI-assisted search. The platform keeps growing with community contributions.
Impact
Office hours dropped 70%. People find answers instead of asking basic questions.
We consolidated 4-5 websites into one platform serving 5,000 engineers. Information that was scattered is now searchable and organized. Designers have a space that isn't overly technical. Developers grab what they need quickly.
Built a foundation that scales with the community.