Objective:

The objective of this project was to develop and manage a unified design system and create reusable components that would streamline the design and development process for the product and development teams. We aimed to create consistency across the product and improve collaboration by keeping a library of reusable, on-brand components.

​​

Problem Statement:

As the product grew, we encountered several challenges:

1. Inconsistencies: Design elements like buttons, templates, and navigation were inconsistently implemented across different screens of the platform.

2. Lack of Standardization: Without a design system, new features were often designed and developed in silos, leading to duplicated effort, a disjointed user experience, and a lack of platform adoption.

3. Time and Resource Inefficiency: Repeatedly designing or correcting the same UI elements for different parts of the platform resulted in wasted time for both design and development teams.

​

​

​

​

​

​

​

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

Research & Discovery:

To address these challenges and gain a more holistic understanding of the project scope, we first conducted a research phase to understand the needs and expectations of key stakeholders (designers, developers, product managers). This phase included:

• Stakeholder Interviews: We spoke to developers, designers, and product managers to understand the pain points in the current workflow. A common theme emerged: there was no single source of truth for design specifications and components.

• Audit of Existing UI: We conducted a UI audit to identify inconsistencies across the platform and redundancies in our existing design system.

• Competitive Benchmarking: We looked at industry-standard design systems like Salesforce Lightning to understand best practices for component-driven design systems. Because we were using Salesforce as our platform and therefore using the Salesforce Lighting design system as our backbone, creating custom branded components for the organization was our focus.

​​

​

​

​

​

​

​

​

​

​​​​​​​​​

​​

​

​

Strategy & Approach:

The strategy for managing the design system focused on three key objectives:

1. Consistency: Standardize UI elements to ensure a cohesive user experience across all products.

2. Efficiency: Create reusable components to reduce redundant design and development effort.

3. Scalability: Ensure that the design system was flexible enough to scale as the product grew and new features were introduced.

​

We adopted a methodology to break down the components into smaller, reusable elements. This approach involved:

1. Basic UI elements like buttons, input fields, and icons.

2. More complex UI elements like headers, footers, navigation bars, tables, and sidebars.

3. Page templates or layouts built from multiple components to streamline processes like applications, sales requests, or service requests.

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​​​

​

Key Steps in the Process:​

1. Establishing the Design System Foundation

We started by creating a design style guide document that outlined the guiding principles for the design system. This included typography, color palette, spacing guidelines, and brand identity rules. We also set up a living documentation file using Figma where the design system would be updated and accessible to all team members.

• Typography: We standardized font usage to ensure legibility and consistency across all platforms.

• Color Palette: We defined primary, secondary, and tertiary color schemes, as well as accessibility guidelines for color contrast.

• Spacing & Layout: We used a grid system and defined spacing units (8px increments) to create consistent padding and margins.

​

2. Creating Components

The next step was to design and create the core set of reusable UI components, focusing on modularity and flexibility. The initial components included:

• Buttons: Different sizes and styles (primary, secondary, disabled) with clear visual cues.

• Form Elements: Input fields, checkboxes, radio buttons, and dropdowns with consistent behavior and error messaging.

• Navigation: A flexible navigation system, including sidebars, top navigation bars, and breadcrumbs.

• Cards: Modular card designs that could be used for displaying content in different contexts.

​

We worked closely with developers to ensure that components were built with WCAG 2.2 accessibility standards and responsiveness in mind, both to mitigate risk for the organization as well as remain usable by all present and future users.

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​

​

​

​

3. Documentation & Collaboration

A critical part of managing the design system was ensuring that all team members were aligned and able to access the right information. We created comprehensive documentation that included:

• Usage Guidelines: Clear instructions on when and how to use each component.

• Do’s and Don’ts: Examples of best practices and common mistakes to avoid.

• Accessibility Standards: Guidelines for ensuring all components were accessible, including color contrast ratios and keyboard navigability.

• Version Control: We set up a versioning system for the components to ensure that updates could be tracked and rolled out seamlessly across the product.

We also set up regular cross-functional meetings between design and development teams to gather feedback and ensure that the components were aligned with technical requirements.

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​​​

​

​

4. Integration & Maintenance

Once the initial components were built and documented, we focused on integrating the design system into the product development workflow. This involved:

• Component Library in Figma: We created a shared Figma library where designers could drag and drop components into their designs, ensuring consistency.

• Code Repository: Developers maintained a component library in GitHub, where they could access and contribute to the codebase.

• Ongoing Maintenance: We implemented a review process to keep the design system up to date, adding new components as needed and retiring those that became obsolete.

We also ensured that the design system was continuously tested in a QA environment to validate that the components were meeting both functional and usability goals.

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Results & Outcomes:

• Increased Consistency: The design system helped eliminate inconsistencies across the product, resulting in a more cohesive user experience. Components like buttons, forms, and navigation now followed the same design principles.

• Faster Development Cycle: Both design and development teams reported faster turnaround times. Designers were able to work more efficiently by reusing components, and developers could implement designs with fewer back-and-forths.

• Better Collaboration: The documentation and shared components created a common language between designers and developers, leading to fewer misunderstandings and misalignments.

• Scalability: The design system was built with flexibility in mind, allowing it to scale as the product expanded. New components were easily added as the product evolved.

​

​

​

​

​

​

​

​

​

​

​

​

​

​​​​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Challenges & Learnings:

1. Initial Resistance: Some team members were initially resistant to adopting the design system, particularly developers who were accustomed to working in silos. To overcome this, we involved them early in the process and made sure their feedback was incorporated into the system.

2. Ongoing Maintenance: Maintaining a design system requires constant updates and attention. We learned the importance of assigning ownership to specific team members to ensure the system stays current.

3. Cross-Functional Collaboration: Effective collaboration between designers, developers, and product managers was critical to the success of the design system. Regular check-ins and open communication helped ensure alignment.

​

Conclusion:

The development and management of the design system significantly improved the design and development process. By creating a set of reusable components, we reduced duplication of effort, ensured consistency across the product, and improved collaboration between teams. The success of this project not only helped streamline our workflow but also laid the foundation for future scalability as the product continued to grow.

​

​

Other Collaborators: Devin Benko (UX Design) and Sravani Hotha (UX Content)