Blackbaud | Design System
Led Blackbaud’s digital transformation by architecting a scalable, AI-powered website design system. Conducted a comprehensive audit, partnered with engineering to build reusable components, and used Figma’s advanced features to ensure consistency and rapid scaling.
The result: a unified system that accelerates delivery, improves quality, and empowers teams.
Through systems thinking and AI-driven methods, I delivered measurable outcomes that continue to shape Blackbaud’s digital presence.
Lesson: Strategic leadership and systems thinking drive scalable impact.
Role
Role
Lead Designer & AI Pipeline Architect
Lead Designer & AI Pipeline Architect
Year
Year
2025
2025
Type
Type
Design System
Design System
Techstack
Techstack
Figma, MCP, Claude, Storybook
Figma, MCP, Claude, Storybook
+28%
Efficiency
+75%
Adoption
+35%
Accessibility
+28%
Efficiency
+75%
Adoption
+35%
Accessibility
+28%
Efficiency
+75%
Adoption
+35%
Accessibility
Background
Why are we here?
Blackbaud, a leading cloud software provider for social good, needed scalable web infrastructure to keep pace with innovation. Without a unified design system, technical debt grew, and delivery slowed.
Rapid digital innovation and compliance demands exposed the lack of a unified design system as a key bottleneck. We needed scalable, consistent infrastructure to reduce technical debt and speed up delivery.
Lesson: Foundational design systems enable sustainable digital growth.
Modern NPOconnect web-app portal login screen
Latest Blackbaud website top level navigation and hero section
New NPOconnect platform login screen
Updated Blackbaud website section tabs and illustrations
Background
Why are we here?
Blackbaud, a leading cloud software provider for social good, needed scalable web infrastructure to keep pace with innovation. Without a unified design system, technical debt grew, and delivery slowed.
Rapid digital innovation and compliance demands exposed the lack of a unified design system as a key bottleneck. We needed scalable, consistent infrastructure to reduce technical debt and speed up delivery.
Lesson: Foundational design systems enable sustainable digital growth.
Modern NPOconnect web-app portal login screen
Latest Blackbaud website top level navigation and hero section
New NPOconnect platform login screen
Updated Blackbaud website section tabs and illustrations
Background
Why are we here?
Blackbaud, a leading cloud software provider for social good, needed scalable web infrastructure to keep pace with innovation. Without a unified design system, technical debt grew, and delivery slowed.
Rapid digital innovation and compliance demands exposed the lack of a unified design system as a key bottleneck. We needed scalable, consistent infrastructure to reduce technical debt and speed up delivery.
Lesson: Foundational design systems enable sustainable digital growth.
Modern NPOconnect web-app portal login screen
Latest Blackbaud website top level navigation and hero section
New NPOconnect platform login screen
Updated Blackbaud website section tabs and illustrations
Challenge
What are we trying to solve?
Fragmentation across teams led to redundant patterns, inconsistent UI, and accessibility gaps—raising costs and QA issues. The root cause: no codified, organization-wide design system.
The core problem was fragmentation—redundant patterns, inconsistent UI, inefficiencies, and accessibility gaps. Teams wasted time reinventing solutions, driving up costs and QA issues. The root cause: no codified, organization-wide design system or governance.
Lesson: Centralized governance prevents inefficiency and risk.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Challenge
What are we trying to solve?
Fragmentation across teams led to redundant patterns, inconsistent UI, and accessibility gaps—raising costs and QA issues. The root cause: no codified, organization-wide design system.
The core problem was fragmentation—redundant patterns, inconsistent UI, inefficiencies, and accessibility gaps. Teams wasted time reinventing solutions, driving up costs and QA issues. The root cause: no codified, organization-wide design system or governance.
Lesson: Centralized governance prevents inefficiency and risk.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Challenge
What are we trying to solve?
Fragmentation across teams led to redundant patterns, inconsistent UI, and accessibility gaps—raising costs and QA issues. The root cause: no codified, organization-wide design system.
The core problem was fragmentation—redundant patterns, inconsistent UI, inefficiencies, and accessibility gaps. Teams wasted time reinventing solutions, driving up costs and QA issues. The root cause: no codified, organization-wide design system or governance.
Lesson: Centralized governance prevents inefficiency and risk.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Research
How do we know it’s a problem?
Analyzed: customer feedback and Figma/codebase analytics
Evaluated Accessibility: and redundancy in UI and codebase
Annotated Inventories: and prioritized requirements
Comprehensive audit: mapping components and visual styles.
Inventorying: interface elements and inconsistencies
Interviews: with designers, engineers, and stakeholders to understand pain points and aspirations
Analysis: of customer feedback for recurring usability issues
Mapping: redundancies in codebase
Evaluating: accessibility gaps
Reviewing: analytics on Figma Library usage and component frequency
Artifacts: annotated inventories, journey maps, and prioritized system requirements.
Lesson: Data-driven, cross-functional research defines actionable requirements.
Design system audit components, css selectors, and web token spreadsheets
Enter image caption
Enter image caption
Enter image caption
Research
How do we know it’s a problem?
Analyzed: customer feedback and Figma/codebase analytics
Evaluated Accessibility: and redundancy in UI and codebase
Annotated Inventories: and prioritized requirements
Comprehensive audit: mapping components and visual styles.
Inventorying: interface elements and inconsistencies
Interviews: with designers, engineers, and stakeholders to understand pain points and aspirations
Analysis: of customer feedback for recurring usability issues
Mapping: redundancies in codebase
Evaluating: accessibility gaps
Reviewing: analytics on Figma Library usage and component frequency
Artifacts: annotated inventories, journey maps, and prioritized system requirements.
Lesson: Data-driven, cross-functional research defines actionable requirements.
Design system audit components, css selectors, and web token spreadsheets
Enter image caption
Enter image caption
Enter image caption
Research
How do we know it’s a problem?
Analyzed: customer feedback and Figma/codebase analytics
Evaluated Accessibility: and redundancy in UI and codebase
Annotated Inventories: and prioritized requirements
Comprehensive audit: mapping components and visual styles.
Inventorying: interface elements and inconsistencies
Interviews: with designers, engineers, and stakeholders to understand pain points and aspirations
Analysis: of customer feedback for recurring usability issues
Mapping: redundancies in codebase
Evaluating: accessibility gaps
Reviewing: analytics on Figma Library usage and component frequency
Artifacts: annotated inventories, journey maps, and prioritized system requirements.
Lesson: Data-driven, cross-functional research defines actionable requirements.
Design system audit components, css selectors, and web token spreadsheets
Enter image caption
Enter image caption
Enter image caption
Pivot
Should we make a U Turn?
Abandoned a “big bang” approach in favor of pilot-driven adoption. Refined live components with product teams, driving faster buy-in and alignment with user needs.
We considered a "big bang" rollout, but research showed pilot-driven adoption with real product teams worked better. We extracted, abstracted, and refined live components, grounding the system in user needs and accelerating buy-in.
Lesson: Iterative co-creation accelerates adoption and relevance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Pivot
Should we make a U Turn?
Abandoned a “big bang” approach in favor of pilot-driven adoption. Refined live components with product teams, driving faster buy-in and alignment with user needs.
We considered a "big bang" rollout, but research showed pilot-driven adoption with real product teams worked better. We extracted, abstracted, and refined live components, grounding the system in user needs and accelerating buy-in.
Lesson: Iterative co-creation accelerates adoption and relevance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Pivot
Should we make a U Turn?
Abandoned a “big bang” approach in favor of pilot-driven adoption. Refined live components with product teams, driving faster buy-in and alignment with user needs.
We considered a "big bang" rollout, but research showed pilot-driven adoption with real product teams worked better. We extracted, abstracted, and refined live components, grounding the system in user needs and accelerating buy-in.
Lesson: Iterative co-creation accelerates adoption and relevance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Solution
Did method fix the madness?
Our AI-augmented design system rested on these pillars:
Figma Infrastructure: Centralized library with variables and tokens for consistency and rapid theming.
Codified Components: Partnered with engineering to build robust, reusable React components, versioned and tested for scale.
System Governance: Federated, cyclical model for co-creation and promotion via regular audits.
AI-Driven Quality: Used AI for audits, accessibility checks, and impact forecasting.
Just-in-Time Documentation: Living guidelines for onboarding and continuous improvement. Created Markdown files for tokens and component usage to give AI deeper context.
Storybook: Centralized documentation and design files that improve communication and cross-team collaboration.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Solution
Did method fix the madness?
Our AI-augmented design system rested on these pillars:
Figma Infrastructure: Centralized library with variables and tokens for consistency and rapid theming.
Codified Components: Partnered with engineering to build robust, reusable React components, versioned and tested for scale.
System Governance: Federated, cyclical model for co-creation and promotion via regular audits.
AI-Driven Quality: Used AI for audits, accessibility checks, and impact forecasting.
Just-in-Time Documentation: Living guidelines for onboarding and continuous improvement. Created Markdown files for tokens and component usage to give AI deeper context.
Storybook: Centralized documentation and design files that improve communication and cross-team collaboration.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Solution
Did method fix the madness?
Our AI-augmented design system rested on these pillars:
Figma Infrastructure: Centralized library with variables and tokens for consistency and rapid theming.
Codified Components: Partnered with engineering to build robust, reusable React components, versioned and tested for scale.
System Governance: Federated, cyclical model for co-creation and promotion via regular audits.
AI-Driven Quality: Used AI for audits, accessibility checks, and impact forecasting.
Just-in-Time Documentation: Living guidelines for onboarding and continuous improvement. Created Markdown files for tokens and component usage to give AI deeper context.
Storybook: Centralized documentation and design files that improve communication and cross-team collaboration.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Principles
What was our guiding light?
OOUX: Structured components and tokens for reusability
Modular IA: Atomic, composable elements for flexibility
Systems Thinking: Connects design, engineering, and product
AI as Amplifier: Automates audits to free humans for creative work
Modular IA: Atomic, composable elements for consistency and flexibility.
Systems Thinking: Connects design, engineering, and product for holistic governance.
AI as Amplifier: Used AI for pattern recognition, audit automation, and guardrails—freeing humans for creative work.
Each design move aimed to reduce redundancy, ensure accessibility, and enable innovation while maintaining consistency.
Lesson: Clear principles drive consistency and innovation.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Principles
What was our guiding light?
OOUX: Structured components and tokens for reusability
Modular IA: Atomic, composable elements for flexibility
Systems Thinking: Connects design, engineering, and product
AI as Amplifier: Automates audits to free humans for creative work
Modular IA: Atomic, composable elements for consistency and flexibility.
Systems Thinking: Connects design, engineering, and product for holistic governance.
AI as Amplifier: Used AI for pattern recognition, audit automation, and guardrails—freeing humans for creative work.
Each design move aimed to reduce redundancy, ensure accessibility, and enable innovation while maintaining consistency.
Lesson: Clear principles drive consistency and innovation.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Principles
What was our guiding light?
OOUX: Structured components and tokens for reusability
Modular IA: Atomic, composable elements for flexibility
Systems Thinking: Connects design, engineering, and product
AI as Amplifier: Automates audits to free humans for creative work
Modular IA: Atomic, composable elements for consistency and flexibility.
Systems Thinking: Connects design, engineering, and product for holistic governance.
AI as Amplifier: Used AI for pattern recognition, audit automation, and guardrails—freeing humans for creative work.
Each design move aimed to reduce redundancy, ensure accessibility, and enable innovation while maintaining consistency.
Lesson: Clear principles drive consistency and innovation.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Impact
Did we hit the mark?
Efficiency: 28% faster design-to-build; 22% less engineering time for new features.
Consistency: 30% fewer unique CSS selectors, measured via Figma analytics and code reviews.
Adoption: 75% of teams adopted the system for new features in six months; 40% of legacy pages migrated.
Quality: 35% fewer accessibility issues in QA; 18% drop in customer-reported issues.
Recognition: Internal innovation awards and best practice citation in Blackbaud’s annual report.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Impact
Did we hit the mark?
Efficiency: 28% faster design-to-build; 22% less engineering time for new features.
Consistency: 30% fewer unique CSS selectors, measured via Figma analytics and code reviews.
Adoption: 75% of teams adopted the system for new features in six months; 40% of legacy pages migrated.
Quality: 35% fewer accessibility issues in QA; 18% drop in customer-reported issues.
Recognition: Internal innovation awards and best practice citation in Blackbaud’s annual report.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Impact
Did we hit the mark?
Efficiency: 28% faster design-to-build; 22% less engineering time for new features.
Consistency: 30% fewer unique CSS selectors, measured via Figma analytics and code reviews.
Adoption: 75% of teams adopted the system for new features in six months; 40% of legacy pages migrated.
Quality: 35% fewer accessibility issues in QA; 18% drop in customer-reported issues.
Recognition: Internal innovation awards and best practice citation in Blackbaud’s annual report.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Reflection
What would I do differently?
Pilots—not theory—drove success. Early feedback and living documentation accelerated adoption and longevity. AI tools continue to deepen diagnostics and governance.
Next: Involve more end users and expand metrics to measure team satisfaction and creativity.
Start with pilots, not theory—real use cases drive better systems.
Invest more in community feedback loops early to accelerate adoption.
Keep documentation as a living resource, not a static manual.
Continue evolving AI tools for deeper diagnostics and to support design governance at scale.
In the future, I’d involve more end-users earlier and expand metrics to include qualitative measures of designer and engineer satisfaction and creativity.
Lesson: Real-world pilots and ongoing feedback maximize adoption and value.
AI-Use Transparency
AI powers every phase—from audits to accessibility checks—amplifying accuracy, speed, and governance.
Lesson: Purposeful AI accelerates quality and scales governance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Reflection
What would I do differently?
Pilots—not theory—drove success. Early feedback and living documentation accelerated adoption and longevity. AI tools continue to deepen diagnostics and governance.
Next: Involve more end users and expand metrics to measure team satisfaction and creativity.
Start with pilots, not theory—real use cases drive better systems.
Invest more in community feedback loops early to accelerate adoption.
Keep documentation as a living resource, not a static manual.
Continue evolving AI tools for deeper diagnostics and to support design governance at scale.
In the future, I’d involve more end-users earlier and expand metrics to include qualitative measures of designer and engineer satisfaction and creativity.
Lesson: Real-world pilots and ongoing feedback maximize adoption and value.
AI-Use Transparency
AI powers every phase—from audits to accessibility checks—amplifying accuracy, speed, and governance.
Lesson: Purposeful AI accelerates quality and scales governance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
Reflection
What would I do differently?
Pilots—not theory—drove success. Early feedback and living documentation accelerated adoption and longevity. AI tools continue to deepen diagnostics and governance.
Next: Involve more end users and expand metrics to measure team satisfaction and creativity.
Start with pilots, not theory—real use cases drive better systems.
Invest more in community feedback loops early to accelerate adoption.
Keep documentation as a living resource, not a static manual.
Continue evolving AI tools for deeper diagnostics and to support design governance at scale.
In the future, I’d involve more end-users earlier and expand metrics to include qualitative measures of designer and engineer satisfaction and creativity.
Lesson: Real-world pilots and ongoing feedback maximize adoption and value.
AI-Use Transparency
AI powers every phase—from audits to accessibility checks—amplifying accuracy, speed, and governance.
Lesson: Purposeful AI accelerates quality and scales governance.
Enter image caption
Enter image caption
Enter image caption
Enter image caption
