Figma Design System
For Project Management Institute
I developed a design system tailored for our Sitecore website, following the atomic design methodology. This system is used by the marketing team and draws from a shared primitive library used across marketing and product teams to ensure a cohesive visual identity across all digital products. For the marketing design system, I created components, patterns, and templates in Figma that align with Sitecore components. This enables Sitecore content authors to implement consistent designs with ease. UX designers benefit by working with components that directly match those available in Sitecore, minimizing the need for frequent consultations with the Sitecore team or recreating components. Additionally, the library supports marketers by offering guidelines, best practices, and character limits for all components and templates.
Reusable Components, Patterns and Templates
This collection of reusable components, patterns and templates was crafted to ensure consistency and efficiency across our digital experiences. Each element aligns with the design system’s visual and functional standards, enabling seamless integration by designers and content editors alike. With predefined styles and responsive design considerations, these components empower teams to create cohesive, on-brand pages quickly and effectively.
Guidance
I provided usage guidance, best practices, and additional resources to help designers, marketers, and content editors fully understand the available components and templates, and when to apply each effectively.
Annotations
I conducted interviews with Sitecore editors to determine pain points and identify training gaps. I used this information to created detailed annotations to streamline the build process and create consistency throughout the site.
