Client
Procore Technologies
Industry
Construction Technology (Enterprise SaaS)
Creating a Scalable Design System That Empowers Contributions, Scalable Components, and Clear Documentation
Creating a Scalable Design System That Empowers Contributions, Scalable Components, and Clear Documentation
I led the evolution of our design system to create a scalable, consistent foundation across multiple product teams. My work unified core components, standardized documentation, and established contribution workflows that improved collaboration and accelerated design-to-development processes. Additionally, I conducted research and prototyping for a next-generation documentation platform, ensuring the system could grow with the organization while maintaining clarity, consistency, and long-term scalability.
+60%
+60%
+60%
Desgin system
engagement
Reduce component
duplication
Reduce component
duplication
30+
30+
30+
Reusable components
created
Reusable components
created
Reusable components
created
2x
2x
2x
increase in pattern
clarity
increase in pattern
clarity
increase
in pattern
clarity
Scalable Documentation
Contribution Foundations
Pattern Clarity
Scaling UI Components
Creating Documentation
That Scales
What we learned through research was that the challenge wasn’t just about having too many documents or scattered sources, it was about how information was organized, interpreted, and shared across teams. Designers and engineers didn’t simply want component-focused documentation; they needed guidance that aligned with how they actually work day-to-day. They were looking for real-world examples they could apply immediately, clearer decision-making and governance standards, and direction that helped them move faster and with more confidence instead of guessing their way through patterns and edge cases.
Process Overview
This work defined the MVP for Procore’s new documentation experience,
grounded in real user insights and product direction.
1. Discover & Diagnose
We started by uncovering pain points and understanding workflows. We mapped the landscape of existing documentation. Our focus was not just on what exists, but on the underlying reasons behind team challenges.
2. Synthesize & Strategize
We analyzed insights to uncover key opportunities and align priorities. We mapped stakeholder needs and framed the problem clearly. Our focus was on understanding the core challenges.
3. Explore & Prototype
We generated and tested multiple concepts, experimenting with patterns and structures to find solutions that fit real-world workflows. Iteration at this stage ensured ideas were practical and user-centered.
4. Build & Enable
We designed the foundation, established governance, and created actionable guidance that empowers teams, improves discoverability, and supports consistent, scalable outcomes.
Uncovering
the Current State
We found that teams were spending a significant amount of time navigating a maze of scattered documentation and disconnected resources. Without clear context or understanding of the “why” behind decisions, team members frequently duplicated work, made inconsistent choices, and experienced unnecessary delays. The lack of practical, real-world guidance meant that even routine decisions required extra effort, leading to frustration and reduced efficiency across projects.
Learning by Watching,
Not Just Asking
To ensure the design system reflects real needs, we engaged with Designers, Developers, and Product managers
to understand their workflows, challenges, and goals.
Seeing how teams use documentation
We sat with designers, engineers, and product managers to watch how they find, use, and navigate documentation. Their workflows revealed what’s working, what’s missing, and where they get stuck.
Listening to real challenges
We went beyond observation to understand how documentation impacts their work. We heard their frustrations, their workarounds, and what they need to move faster with less friction.
Defining clear opportunities
From our research, we identified key areas for improvement. These insights will shape a system that is simple, structured, and built to scale with Procore’s future.
Turning Insights Into Action
We transformed what we learned into a clear direction for how documentation should work across teams. The outcome was a focused foundation designed to improve clarity, connect context, and make information easier to find. This groundwork not only reduces fragmentation but also equips teams to work more consistently and confidently moving forward.
Setting the Foundations
However, to bring those key opportunities to life, we still needed to create a foundational structure and system that would allow us to do so. This structure was designed to enable scalable design work, both today and in the future.
I started with creating an information architecture, sketching low-fidelity wireframes of key pages, and testing those initial page designs. These steps allowed us to iterate rapidly to ensure that we were on the right path before investing into further visual design efforts.
Translating Research
into Design Foundations
I led the effort to flatten the structure so people could actually find information, a shallow IA designed for three clicks or less for common tasks.
Mapping Content into
Low-Fidelity Wireframes
When ideating wireframes of both the site and page structure, we explored multiple directions that included various navigation structures, layouts, and visual hierarchies.
Mapping ideas into structured low-fidelity wireframes
I tested the early designs with users, uncovered sticking points, and refined the prototypes before finalizing. (Using Vercel V0)
Designs That
Remove Friction
After aligning on the overall structure and user flow, we moved into higher-fidelity designs with a clear focus, solving real user pain points rather than simply polishing screens. Each design decision was informed by research insights, ensuring that every component, page, and interaction directly addressed a documented challenge. The examples below illustrate how specific research themes translated into concrete design solutions and the outcomes they achieved, demonstrating the direct impact of our work on usability, efficiency, and consistency across teams.
Results That Matter
By creating a clear, structured, and user-centered design system documentation, we were able to reduce friction, increase efficiency, and provide teams with guidance they could trust. The foundation we built improved discoverability, clarified decision-making, and enabled consistent execution across design, engineering, and product teams.
Improved Findability
Teams can now locate documentation and patterns in 3 clicks or less, reducing time spent searching for resources.
Increased Consistency
Clear governance and guidance help ensure consistent implementation of components and patterns.
Faster Decision-Making
With real-world examples and context, teams make informed decisions more quickly.
Single Source of Truth
Teams trust a single, up-to-date source of documentation to guide their work consistently.
Enhanced Confidence
Designers, engineers, and product managers trust the documentation to guide their work effectively.
Scalable Foundation
The system is built to grow with the organization, supporting new components, teams, and workflows.
Scalable Documentation
Contribution Foundations
Pattern Clarity
Scaling UI Components
Creating Documentation
That Scales
What we learned through research was that the challenge wasn’t just about having too many documents or scattered sources, it was about how information was organized, interpreted, and shared across teams. Designers and engineers didn’t simply want component-focused documentation; they needed guidance that aligned with how they actually work day-to-day. They were looking for real-world examples they could apply immediately, clearer decision-making and governance standards, and direction that helped them move faster and with more confidence instead of guessing their way through patterns and edge cases.
Process Overview
This work defined the MVP for Procore’s new documentation experience,
grounded in real user insights and product direction.
1. Discover & Diagnose
We started by uncovering pain points and understanding workflows. We mapped the landscape of existing documentation. Our focus was not just on what exists, but on the underlying reasons behind team challenges.
2. Synthesize & Strategize
We analyzed insights to uncover key opportunities and align priorities. We mapped stakeholder needs and framed the problem clearly. Our focus was on understanding the core challenges.
3. Explore & Prototype
We generated and tested multiple concepts, experimenting with patterns and structures to find solutions that fit real-world workflows. Iteration at this stage ensured ideas were practical and user-centered.
4. Build & Enable
We designed the foundation, established governance, and created actionable guidance that empowers teams, improves discoverability, and supports consistent, scalable outcomes.
Uncovering
the Current State
We found that teams were spending a significant amount of time navigating a maze of scattered documentation and disconnected resources. Without clear context or understanding of the “why” behind decisions, team members frequently duplicated work, made inconsistent choices, and experienced unnecessary delays. The lack of practical, real-world guidance meant that even routine decisions required extra effort, leading to frustration and reduced efficiency across projects.
Learning by Watching,
Not Just Asking
To ensure the design system reflects real needs, we engaged with Designers, Developers, and Product managers to understand their workflows, challenges, and goals.
Seeing how teams use documentation
We sat with designers, engineers, and product managers to watch how they find, use, and navigate documentation. Their workflows revealed what’s working, what’s missing, and where they get stuck.
Listening to real challenges
We went beyond observation to understand how documentation impacts their work. We heard their frustrations, their workarounds, and what they need to move faster with less friction.
Defining clear opportunities
From our research, we identified key areas for improvement. These insights will shape a system that is simple, structured, and built to scale with Procore’s future.
Turning Insights Into Action
We transformed what we learned into a clear direction for how documentation should work across teams. The outcome was a focused foundation designed to improve clarity, connect context, and make information easier to find. This groundwork not only reduces fragmentation but also equips teams to work more consistently and confidently moving forward.
Setting the Foundations
However, to bring those key opportunities to life, we still needed to create a foundational structure and system that would allow us to do so. This structure was designed to enable scalable design work, both today and in the future.
I started with creating an information architecture, sketching low-fidelity wireframes of key pages, and testing those initial page designs. These steps allowed us to iterate rapidly to ensure that we were on the right path before investing into further visual design efforts.
Translating Research into Design Foundations
I led the effort to flatten the structure so people could actually find information, a shallow IA designed for three clicks or less for common tasks.
Mapping Content into Low-Fidelity Wireframes
When ideating wireframes of both the site and page structure, we explored multiple directions that included various navigation structures, layouts, and visual hierarchies.
Mapping ideas into structured low-fidelity wireframes
I tested the early designs with users, uncovered sticking points, and refined the prototypes before finalizing. (Using Vercel V0)
Designs That
Remove Friction
After aligning on the overall structure and user flow, we moved into higher-fidelity designs with a clear focus, solving real user pain points rather than simply polishing screens. Each design decision was informed by research insights, ensuring that every component, page, and interaction directly addressed a documented challenge. The examples below illustrate how specific research themes translated into concrete design solutions and the outcomes they achieved, demonstrating the direct impact of our work on usability, efficiency, and consistency across teams.
Results That Matter
By creating a clear, structured, and user-centered design system documentation, we were able to reduce friction, increase efficiency, and provide teams with guidance they could trust. The foundation we built improved discoverability, clarified decision-making, and enabled consistent execution across design, engineering, and product teams.
Improved Findability
Teams can now locate documentation and patterns in 3 clicks or less, reducing time spent searching for resources.
Increased Consistency
Clear governance and guidance help ensure consistent implementation of components and patterns.
Faster Decision-Making
With real-world examples and context, teams make informed decisions more quickly.
Single Source of Truth
Teams trust a single, up-to-date source of documentation to guide their work consistently.
Enhanced Confidence
Designers, engineers, and product managers trust the documentation to guide their work effectively.
Scalable Foundation
The system is built to grow with the organization, supporting new components, teams, and workflows.
Scalable Documentation
Contribution Foundations
Pattern Clarity
Scaling UI Components
Creating Documentation
That Scales
What we learned through research was that the challenge wasn’t just about having too many documents or scattered sources, it was about how information was organized, interpreted, and shared across teams. Designers and engineers didn’t simply want component-focused documentation; they needed guidance that aligned with how they actually work day-to-day. They were looking for real-world examples they could apply immediately, clearer decision-making and governance standards, and direction that helped them move faster and with more confidence instead of guessing their way through patterns and edge cases.
Process Overview
This work defined the MVP for Procore’s new documentation experience,
grounded in real user insights and product direction.
1. Discover & Diagnose
We started by uncovering pain points and understanding workflows. We mapped the landscape of existing documentation. Our focus was not just on what exists, but on the underlying reasons behind team challenges.
2. Synthesize & Strategize
We analyzed insights to uncover key opportunities and align priorities. We mapped stakeholder needs and framed the problem clearly. Our focus was on understanding the core challenges.
3. Explore & Prototype
We generated and tested multiple concepts, experimenting with patterns and structures to find solutions that fit real-world workflows. Iteration at this stage ensured ideas were practical and user-centered.
4. Build & Enable
We designed the foundation, established governance, and created actionable guidance that empowers teams, improves discoverability, and supports consistent, scalable outcomes.
Uncovering
the Current State
We found that teams were spending a significant amount of time navigating a maze of scattered documentation and disconnected resources. Without clear context or understanding of the “why” behind decisions, team members frequently duplicated work, made inconsistent choices, and experienced unnecessary delays. The lack of practical, real-world guidance meant that even routine decisions required extra effort, leading to frustration and reduced efficiency across projects.
Learning by Watching,
Not Just Asking
To ensure the design system reflects real needs, we engaged with Designers, Developers, and Product managers
to understand their workflows, challenges, and goals.
Seeing how teams use documentation
We sat with designers, engineers, and product managers to watch how they find, use, and navigate documentation. Their workflows revealed what’s working, what’s missing, and where they get stuck.
Listening to real challenges
We went beyond observation to understand how documentation impacts their work. We heard their frustrations, their workarounds, and what they need to move faster with less friction.
Defining clear opportunities
From our research, we identified key areas for improvement. These insights will shape a system that is simple, structured, and built to scale with Procore’s future.
Turning Insights Into Action
We transformed what we learned into a clear direction for how documentation should work across teams. The outcome was a focused foundation designed to improve clarity, connect context, and make information easier to find. This groundwork not only reduces fragmentation but also equips teams to work more consistently and confidently moving forward.
Setting the Foundations
However, to bring those key opportunities to life, we still needed to create a foundational structure and system that would allow us to do so. This structure was designed to enable scalable design work, both today and in the future.
I started with creating an information architecture, sketching low-fidelity wireframes of key pages, and testing those initial page designs. These steps allowed us to iterate rapidly to ensure that we were on the right path before investing into further visual design efforts.
Translating Research into Design Foundations
I led the effort to flatten the structure so people could actually find information, a shallow IA designed for three clicks or less for common tasks.
Mapping Content into Low-Fidelity Wireframes
When ideating wireframes of both the site and page structure, we explored multiple directions that included various navigation structures, layouts, and visual hierarchies.
Testing Early Ideas
I tested the early designs with users, uncovered sticking points, and refined the prototypes before finalizing. (Using Vercel V0)
Designs That
Remove Friction
After aligning on the overall structure and user flow, we moved into higher-fidelity designs with a clear focus, solving real user pain points rather than simply polishing screens. Each design decision was informed by research insights, ensuring that every component, page, and interaction directly addressed a documented challenge. The examples below illustrate how specific research themes translated into concrete design solutions and the outcomes they achieved, demonstrating the direct impact of our work on usability, efficiency, and consistency across teams.
Results That Matter
By creating a clear, structured, and user-centered design system documentation, we were able to reduce friction, increase efficiency, and provide teams with guidance they could trust. The foundation we built improved discoverability, clarified decision-making, and enabled consistent execution across design, engineering, and product teams.
Improved Findability
Teams can now locate documentation and patterns in 3 clicks or less, reducing time spent searching for resources.
Increased Consistency
Clear governance and guidance help ensure consistent implementation of components and patterns.
Faster Decision-Making
With real-world examples and context, teams make informed decisions more quickly.
Single Source of Truth
Teams trust a single, up-to-date source of documentation to guide their work consistently.
Enhanced Confidence
Designers, engineers, and product managers trust the documentation to guide their work effectively.
Scalable Foundation
The system is built to grow with the organization, supporting new components, teams, and workflows.