Design System
Over the course of a year, we led the transformation of four Salesforce-based platforms by designing and implementing a unified, scalable design system. Through phased development and close collaboration across design, development, and business teams, we introduced a modular architecture, centralized documentation, and reusable components that streamlined workflows and elevated design consistency.
The Project
Client: Confidential
Timeline: 12 months
Role: UX Lead & Business Analyst
Tools: Figma, Miro, Salesforce UI Kit, Jira, Confluence, Microsoft Teams
Team: 7 Designers (3 main Design System Leads)
Overview
Co-led a cross-functional initiative to unify and scale design across internal and customer-facing Salesforce platforms.
With no centralized design documentation or governance in place, we faced major challenges in consistency, collaboration, and delivery speed. As part of a team of seven designers, I helped establish a modular design system that scaled across platforms, improved team workflows, and enabled smoother design–dev handoffs.
Over the course of a year, we led the design system through four distinct phases:
-
Phase 0: Foundation & Discovery
-
Phase 1: Consolidation & Alignment
-
Phase 2: Integration & Maturity
-
Phase 3: Handoff & Governance
Phase 0: Foundation & Discovery
We kicked off with collaborative workshops to map out each platform team's information needs and how they navigated component libraries. Using Miro, we visualized the system structure and how it would evolve. We also facilitated card-sorting exercises to categorize components and patterns, ensuring consistency across projects.
Applying atomic design principles, we structured the system into foundations (e.g., typography, grid), components (e.g., buttons, inputs), and patterns (e.g., navigation, footers).
My UX Lead colleague led the setup of the Figma file architecture using variables and reusable tokens, while the rest of us co-created page structures, naming conventions, and scalable documentation practices aligned with our active product needs.
Outcome:
We established a modular, scalable structure that aligned multiple designers around a shared vision. Documentation principles and file governance processes were initiated, laying the groundwork for future collaboration and integration.
Phase 1: Consolidation & Alignment
As the system evolved, we encountered duplication and inconsistencies across component libraries. What began with two style variations eventually expanded to five distinct UI kits, each with different styles, naming conventions, and standards. To address this, we focused on consolidating them into a single, cohesive master library—streamlining the design system for consistency and scalability.
Each team took ownership of cleaning up the styles in their respective UI kits, aligning and standardizing component naming to match the existing system architecture. They also renamed components where needed to reflect the updated library structure and ensured Figma variables were applied consistently across all design tokens. Components were organized into clear categories—foundations, UI elements, and templates. Designers were encouraged to migrate their work into the updated system to ensure their product needs were addressed without compromising overall consistency.
Outcome:
A unified component library reduced redundancy and simplified onboarding for new contributors. Our efforts ensured product teams had access to up-to-date, reusable components and worked from a single source of truth.
Figma File Structure
Phase 2: Integration & Maturity
I led the integration of the design system into daily workflows and expanded its use beyond design. We defined a shared “definition of done” for components, covering behaviour, documentation, variants, accessibility, and dev guidelines. As a senior contributor across three UI kits, I aligned branding standards and connected the system with live documentation tools used by dev teams.
With increased adoption, I introduced training for QA, product owners, and analysts, and implemented templates, changelogs, and contribution checklists to support system growth.
Outcome:
The design system became a cross-functional tool used by design, dev, QA, and business teams, improving handoffs, reducing miscommunication, and enabling scalable contribution.
Phase 3: Handoff & Governance
With the system integrated and documentation practices established, we began focusing on long-term sustainability. We developed a governance plan outlining how to propose, update, or retire components, ensuring consistency in future contributions.
Recognizing the complexity of maintaining a design system alongside product work, we recommended hiring a dedicated design system role. This business case was presented to stakeholders and justified based on time savings, design consistency, and developer efficiency. While initially proposed as a consulting-side resource, the client opted to bring the role in-house. We supported onboarding as leadership gradually transitioned to the internal team.
Outcome:
A clear governance model and dedicated in-house ownership enabled long-term continuity. The design system became a fully embedded, self-sustaining asset—empowering internal teams to scale, adapt, and maintain the system with autonomy.
Accessibility Documentation
I led the integration of accessibility into a shared design system, developing detailed documentation for designers, developers, and QA. Each component included accessibility annotations—covering semantics, colour contrast, keyboard navigation, and screen reader behaviour—to support consistent testing and implementation.
To guide scalable, accessible design, I authored step-by-step guidance on accessibility stages and created a navigation annotation framework. This helped designers clearly describe interaction flows and reading order, making it easier for developers to build structured, inclusive interfaces. We also recommended a governance model and dedicated system role to ensure long-term sustainability, successfully transitioning leadership to the internal team.
Accessibility Documentation
Challenges & Solutions
-
Inconsistent Branding: Unifying projects under one framework required reconciling differing UI rules. We addressed this by defining brand-aligned design tokens (colors, spacing) and creating modular component variations.
-
Documentation Overload: Initial templates included redundant sections. We streamlined content by prioritizing functional foundations and moving detailed guidelines to live collaboration tools.
-
Template Gaps: No prebuilt Salesforce templates existed. We developed custom templates during biweekly stakeholder reviews, aligning technical feasibility (via architect collaboration) with design intent.
-
Learning Curve: Team members quickly adapted to Figma by watching tutorials and sharing knowledge, ensuring seamless collaboration.
-
Technical Alignment: We worked closely with architects to document component behavior (do’s/don’ts, usage contexts) and bridge design-dev gaps
Best Practices Applied
-
Atomic Design Principles: Structured components into hierarchical layers to ensure flexibility and consistency.
-
Centralized Design Tokens: Unified visual elements across UI kits using shared variables.
-
Modular Documentation: Organized documentation into reusable modules focused on functional foundations.
-
Collaborative Governance: Involved cross-functional teams in validating and updating components.
-
Dedicated Maintenance Role: Advocated for a design system owner to manage updates and onboard teams, ensuring continuity.