LeafyGreen: Scaling Design
MongoDB’s open-source design system powering 50+ designers
BUSINESS PROBLEM
Fragmented MongoDB product UI with inconsistent components and patterns
Slow design + engineering velocity due to duplicated work
Poor enterprise trust and credibility in sales demos
No clear ownership of system-level UX decisions
CHALLENGES
No PM, limited early organizational support
Cross-team alignment across Product, Eng, and Design
Balancing speed vs. system rigor at scale
MY ROLE
Defined vision, component strategy, and adoption model
Built and led a team of 3-4 interaction designers
Acted as de facto PM (prioritization, intake, roadmapping)
Partnered closely with Front-End Platform and product teams
IMPACT
Scaled LeafyGreen to 90+ accessible, dark-mode-ready components
Adopted across all MongoDB products → unified UI platform
Reduced duplicated engineering effort (~40% in key areas)
Elevated design system from support function to strategic platform
LeafyGreen: Scaling Design
MongoDB’s open-source design system powering 50+ designers
BUSINESS PROBLEM
Fragmented MongoDB product UI with inconsistent components and patterns
Slow design + engineering velocity due to duplicated work
Poor enterprise trust and credibility in sales demos
No clear ownership of system-level UX decisions
CHALLENGES
No PM, limited early organizational support
Cross-team alignment across Product, Eng, and Design
Balancing speed vs. system rigor at scale
MY ROLE
Defined vision, component strategy, and adoption model
Built and led a team of 3-4 interaction designers
Acted as de facto PM (prioritization, intake, roadmapping)
Partnered closely with Front-End Platform and product teams
IMPACT
Scaled LeafyGreen to 90+ accessible, dark-mode-ready components
Adopted across all MongoDB products → unified UI platform
Reduced duplicated engineering effort (~40% in key areas)
Elevated design system from support function to strategic platform
LeafyGreen: Scaling Design
MongoDB’s open-source design system powering 50+ designers
BUSINESS PROBLEM
Fragmented MongoDB product UI with inconsistent components and patterns
Slow design + engineering velocity due to duplicated work
Poor enterprise trust and credibility in sales demos
No clear ownership of system-level UX decisions
CHALLENGES
No PM, limited early organizational support
Cross-team alignment across Product, Eng, and Design
Balancing speed vs. system rigor at scale
MY ROLE
Defined vision, component strategy, and adoption model
Built and led a team of 3-4 interaction designers
Acted as de facto PM (prioritization, intake, roadmapping)
Partnered closely with Front-End Platform and product teams
IMPACT
Scaled LeafyGreen to 90+ accessible, dark-mode-ready components
Adopted across all MongoDB products → unified UI platform
Reduced duplicated engineering effort (~40% in key areas)
Elevated design system from support function to strategic platform
The narrative
The narrative
Let's dive deeper into the context of the problem and why it mattered
Let's dive deeper into the context of the problem and why it mattered
The Problem
Inconsistent UI, accessibility risk, and slow delivery
When I joined, MongoDB was full of inconsistent UI components and patterns. Teams were reinventing checkboxes and navigation. I joined to create the system to multiply velocity and reduce maintenance.
The Problem
Inconsistent UI, accessibility risk, and slow delivery
When I joined, MongoDB was full of inconsistent UI components and patterns. Teams were reinventing checkboxes and navigation. I joined to create the system to multiply velocity and reduce maintenance.
The Problem
Inconsistent UI, accessibility risk, and slow delivery
When I joined, MongoDB was full of inconsistent UI components and patterns. Teams were reinventing checkboxes and navigation. I joined to create the system to multiply velocity and reduce maintenance.
Building Trust Through Quality
60+ Components & 8 Patterns
Building Trust Through Quality
60+ Components & 8 Patterns
Building Trust Through Quality
60+ Components & 8 Patterns
Impact
Growing Adoption
These components weren’t built in a vacuum. Usage analytics in both Figma and React allowed me to identify unmet needs and opportunities. Over time, our adoption grew — teams used LeafyGreen because it was faster, and easier.
Impact
Growing Adoption
These components weren’t built in a vacuum. Usage analytics in both Figma and React allowed me to identify unmet needs and opportunities. Over time, our adoption grew — teams used LeafyGreen because it was faster, and easier.
Impact
Growing Adoption
These components weren’t built in a vacuum. Usage analytics in both Figma and React allowed me to identify unmet needs and opportunities. Over time, our adoption grew — teams used LeafyGreen because it was faster, and easier.
The Team
Design + Engineering
Within 18 months, LeafyGreen powered every major launch. Teams that once spent 3 weeks on UI shipped in 2. This ROI proof secured ongoing funding and headcount.
The Team
Design + Engineering
Within 18 months, LeafyGreen powered every major launch. Teams that once spent 3 weeks on UI shipped in 2. This ROI proof secured ongoing funding and headcount.
The Team
Design + Engineering
Within 18 months, LeafyGreen powered every major launch. Teams that once spent 3 weeks on UI shipped in 2. This ROI proof secured ongoing funding and headcount.
Survey Feedback
From Designers & Engineers
We had no dedicated PM, so I stepped in to own prioritization. I ran org-wide surveys, audits, and intake processes to decide what to build next.
Survey Feedback
From Designers & Engineers
We had no dedicated PM, so I stepped in to own prioritization. I ran org-wide surveys, audits, and intake processes to decide what to build next.
Survey Feedback
From Designers & Engineers
We had no dedicated PM, so I stepped in to own prioritization. I ran org-wide surveys, audits, and intake processes to decide what to build next.
Qual Results
Dark Mode
The full adoption of LeafyGreen allowed us to build out Dark Mode. It was never a business priority until it was. A year later leadership prioritized it; we shipped in 2 weeks. That quick win built massive credibility and proved the system’s resilience. The user feedback was overwhelmingly positive.
Qual Results
Dark Mode
The full adoption of LeafyGreen allowed us to build out Dark Mode. It was never a business priority until it was. A year later leadership prioritized it; we shipped in 2 weeks. That quick win built massive credibility and proved the system’s resilience. The user feedback was overwhelmingly positive.
Qual Results
Dark Mode
The full adoption of LeafyGreen allowed us to build out Dark Mode. It was never a business priority until it was. A year later leadership prioritized it; we shipped in 2 weeks. That quick win built massive credibility and proved the system’s resilience. The user feedback was overwhelmingly positive.
Quant Results
Dark Mode
What surprised us most — a visual polish decision turned into a company-wide brand moment. Great UX became marketing. The company decided to run an ad campaign around it. This was one of the highest engagement campaigns to date. Which proves that sometimes better UX trumps feature additions.
Quant Results
Dark Mode
What surprised us most — a visual polish decision turned into a company-wide brand moment. Great UX became marketing. The company decided to run an ad campaign around it. This was one of the highest engagement campaigns to date. Which proves that sometimes better UX trumps feature additions.
Quant Results
Dark Mode
What surprised us most — a visual polish decision turned into a company-wide brand moment. Great UX became marketing. The company decided to run an ad campaign around it. This was one of the highest engagement campaigns to date. Which proves that sometimes better UX trumps feature additions.
Patterns over parts
Patterns over parts
Connecting the whole of MongoDB's
product ecosystem
Connecting the whole of MongoDB's product ecosystem
Patterns over Parts
LeafyGreen Chat
Once components stabilized, I moved up to patterns — navigation, line charts, forms, and chat.
Patterns over Parts
LeafyGreen Chat
Once components stabilized, I moved up to patterns — navigation, line charts, forms, and chat.
Patterns over Parts
LeafyGreen Chat
Once components stabilized, I moved up to patterns — navigation, line charts, forms, and chat.
Navigation
Competitive Research
For the Atlas navigation redesign, I conducted a comprehensive competitive audit to understand users’ mental models and inform how our information architecture should be structured.
Navigation
Competitive Research
For the Atlas navigation redesign, I conducted a comprehensive competitive audit to understand users’ mental models and inform how our information architecture should be structured.
Navigation
Competitive Research
For the Atlas navigation redesign, I conducted a comprehensive competitive audit to understand users’ mental models and inform how our information architecture should be structured.
Patterns over Parts
Metrics Partnership
Patterns over Parts
Metrics Partnership
Patterns over Parts
Metrics Partnership
Reflections
Better integration with .com properties
Reflections
Better integration with .com properties
Reflections
Better integration with .com properties
Reflections
Leveraging AI for Brand moments & visual design
Reflections
Leveraging AI for Brand moments & visual design
Reflections
Leveraging AI for Brand moments & visual design
