Scalable Figma Design System for Marketing Tech
PROJECT TYPE
Design Systems, Marketing Tech Enablement
CLIENT
Fidelity Charitable
MY ROLE
Lead UX Designer
PROBLEM STATEMENT
The marketing technology team at Fidelity Charitable needed a faster, more consistent way to design and build CMS-driven pages. Without a centralized component system, design efforts were fragmented, time-consuming, and lacked brand and accessibility alignment.
UX GOALS
Designing for speed, consistency, and accessibility at scale.
One of the main goals of this project was to reduce design time by at least 40% for the marketing technology team. By building a robust Figma component library, I aimed to eliminate repetitive design tasks and enable rapid page creation using predefined, reusable blocks.
Another key objective was to improve consistency across all CMS pages, which had previously been built ad hoc with visual discrepancies and non-standard UI patterns. The new system introduced uniform components aligned with Fidelity's brand guidelines, reducing visual inconsistencies by over 60% across newly launched content.
Accessibility was also front and center. The goal was to achieve full WCAG 2.2 AA compliance for all component variations, particularly around color contrast, focus states, and keyboard navigation. Annotated accessibility specs were included in the Figma files to support both design and development.
Lastly, I focused on making the system usable not only for designers but also for non-design stakeholders. By including built-in instructions and clear naming conventions, the system cut down onboarding time by 50% for new team members working in the CMS environment.
PROCESS & APPROACH
To kick off the initiative, I audited existing CMS pages and UI patterns to identify inconsistencies, redundancies, and accessibility issues. This helped surface immediate opportunities where modular design could bring clarity and efficiency.
Next, I defined a set of rules for scalable and consistent components, focusing on alignment with Fidelity’s brand system and WCAG 2.2 standards. These rules guided the structure and behavior of every element, from buttons and form fields to layout templates.
Using Figma, I built the component library with reusable, nested assets, naming conventions, and auto-layout configurations. Each component was documented with usage guidelines to ensure clarity and reduce onboarding time for both designers and non-designers.
Throughout the process, I collaborated closely with developers and product stakeholders. Regular design reviews and shared feedback loops ensured technical feasibility and alignment across teams.
Finally, I ran accessibility checks and usability tests on key component sets. This validation step helped confirm that the system worked not just visually, but functionally—empowering teams to build pages that were fast, compliant, and brand-aligned.
OUTCOMES & IMPACT
The implementation of the Figma component library had a meaningful, measurable impact on the team's workflow and output. Design turnaround times for new CMS pages decreased by over 45%, allowing the marketing technology team to launch campaigns and updates more quickly and consistently.
Adoption of the component system grew rapidly across teams, resulting in a 70% increase in design consistency across Fidelity Charitable’s public-facing content. The shared library also reduced duplicate work, making collaboration between design and development teams significantly more efficient.
Accessibility standards improved noticeably. After the new components were introduced, contrast compliance issues dropped to near zero in QA reports. This demonstrated the value of baking accessibility directly into the foundation of the design system.
The component library didn’t just solve immediate visual and technical issues—it also became a tool for scaling future work. Developers, designers, and content creators gained a shared language and structure, streamlining communication and reducing friction across disciplines.
CONCLUSION
This project was more than a design systems exercise—it was a strategic response to scaling content needs while maintaining brand integrity and accessibility. By creating a flexible, compliant, and easy-to-use component library in Figma, I helped Fidelity Charitable move faster without compromising quality. The success of this initiative laid the groundwork for future enhancements and encouraged a culture of consistency, usability, and inclusive design across teams.