Nidhi Jampana | UX Designer

Implementing a Cross Functional Design System

I identified the need for a standardized design system to enhance efficiency and consistency across the platform. To address this, I developed a scalable design system in Figma and HTML/SCSS, streamlining workflows and ensuring a cohesive user experience.

Team

1 UX Developer

1 UX Designer

3 Front end developers

1 UX Developer

1 UX Designer

3 Front end developers

1 UX Developer

1 UX Designer

3 Front end developers

Timeline

January 2024 - Present

Transforming a Critical Tool for Alzheimer's and Parkinson's Research

At the Keck School of Medicine, I developed a design system in Figma, and HTML/SCSS for a critical neuroscience research application used for analyzing complex imaging and data in Alzheimer's and Parkinson's studies. The existing application suffered from poor usability and inconsistent design, hindering researchers' work.

This case study outlines how I led the creation of a scalable design system that unified the company’s design language, improved cross functional collaboration and delivered significant efficiency gains. Here is a timeline of my process:

Discovering Key Pain Points Through Interviews, Analyses, and Audits

Stakeholder interviews:

Actions:

Spoke with product managers, designers, and developers to identify pain points and goals.

Findings:

Developers struggled with design integration due to the lack of a cohesive UI library, leading to extensive review cycles and delayed deadlines.

Actions:

Spoke with product managers, designers, and developers to identify pain points and goals.

Findings:

Developers struggled with design integration due to the lack of a cohesive UI library, leading to extensive review cycles and delayed deadlines.

Actions:

Spoke with product managers, designers, and developers to identify pain points and goals.

Findings:

Developers struggled with design integration due to the lack of a cohesive UI library, leading to extensive review cycles and delayed deadlines.

Competitive Analysis

Actions:

Researched design systems from Google, Salesforce, and IBM, identifying patterns that enhanced scalability, collaboration, and efficiency.

Findings:

Unlike other teams with well-documented UI libraries, our designers and developers frequently recreated components, causing inconsistencies.

Actions:

Researched design systems from Google, Salesforce, and IBM, identifying patterns that enhanced scalability, collaboration, and efficiency.

Findings:

Unlike other teams with well-documented UI libraries, our designers and developers frequently recreated components, causing inconsistencies.

Actions:

Researched design systems from Google, Salesforce, and IBM, identifying patterns that enhanced scalability, collaboration, and efficiency.

Findings:

Unlike other teams with well-documented UI libraries, our designers and developers frequently recreated components, causing inconsistencies.

Internal Audit

Actions:

Audited IDA’s design assets, analyzing files, interfaces, and code to identify redundant or inconsistent UI elements.

Findings:

Fragmented user experiences led to confusing workflows and weakened brand consistency.

Actions:

Audited IDA’s design assets, analyzing files, interfaces, and code to identify redundant or inconsistent UI elements.

Findings:

Fragmented user experiences led to confusing workflows and weakened brand consistency.

Actions:

Audited IDA’s design assets, analyzing files, interfaces, and code to identify redundant or inconsistent UI elements.

Findings:

Fragmented user experiences led to confusing workflows and weakened brand consistency.

The Problem

Nearly 80% of UI components were built hastily and lacked scalability causing inconsistent user experience, increased workload, and frequent deadline delays.

After analyzing research insights, I identified the core problem: without a centralized system, designers and developers created components as needed, duplicating efforts.

My Solution

Building a scalable design system will standardize UI components, streamline workflows, and enhance cross-team collaboration!

By building a design system in both Figma and the code base we can streamline collaboration through standardized design language and reusable components.

Action plan:

Step 1: Ensuring Visual Harmony and Efficiency through design tokens

In order to improve consistency with styles (such as color, typography and shadows)I implemented design tokens in both Figma, and a centralized SCSS file.

When using Figma designers can easily type in the name of the style they want, while developers can import the style SCSS file and reference the style with the same names used in the design.

In order to improve consistency with styles (such as color, typography and shadows)I implemented design tokens in both Figma, and a centralized SCSS file.

When using Figma designers can easily type in the name of the style they want, while developers can import the style SCSS file and reference the style with the same names used in the design.

In order to improve consistency with styles (such as color, typography and shadows)I implemented design tokens in both Figma, and a centralized SCSS file.

When using Figma designers can easily type in the name of the style they want, while developers can import the style SCSS file and reference the style with the same names used in the design.

Step 2: Building interactive and reusable components

I developed interactive components in Figma and HTML/CSS with a unified naming convention for consistency. Each component was built to be flexible within brand guidelines, meet WCAG 2.1 accessibility standards, and adapt responsively across devices.

Following a high-level review, we systematically implemented these components throughout the UI.

Step 3: Using Documentation to Bridge the Gap Between Designers and Developers

To streamline collaboration, I created detailed documentation for both designers and developers. In Figma, I outlined component guidelines, usage, and best practices to maintain consistency. For developers, I built an HTML repository containing component variants, class names, implementation guidelines, and dependencies. This structured approach improved alignment and simplified the handoff process.

Continuous Refinement Through Feedback & Testing

I introduced the design system to a pilot team, allowing designers and developers to test its usability, scalability, and effectiveness. Through A/B testing, we compared designs and workflows before and after implementation to measure improvements. A continuous feedback loop helped us refine components and guidelines before the full rollout. To keep the system adaptive, I encouraged open communication, allowing team members to propose new components and updates as needs evolved.

Lets recap ….

The design system I built at IDA streamlined operations, improved product quality, and enhanced team collaboration. It served as a single source of truth for designers and developers, ensuring consistency and efficiency across the organization.

The final system featured a comprehensive component library with reusable, accessible UI components in Figma for designers and HTML, CSS, and JS for developers. Design tokens standardized color, typography, and elevation, maintaining visual harmony across platforms. An extensive documentation hub provided best practices, usage guidelines, and integration instructions, enabling seamless adoption and scalability.

Outcome & Impact

The design system had a transformative impact on the company, improving efficiency, consistency, and collaboration. Reusable components reduced design and development time by 30%, allowing teams to focus on higher-value work. Product consistency increased by 50%, enhancing user experience and strengthening brand recognition. Improved collaboration between design and development streamlined workflows, reducing friction and accelerating product launches. As the foundation for new products, the system standardized the design process, cutting time-to-market and ensuring long-term scalability.

Reflections

Building a design system for a large organization reinforced the importance of cross-functional collaboration, adaptability, and thorough documentation. A successful system must not only meet current needs but also evolve with the company’s growth and technological advancements. Aligning designers, developers, and stakeholders from the start is essential for long-term success.

If I were to approach this again, I would prioritize continuous user testing and feedback, ensuring the system remains agile and responsive to evolving user needs and industry changes.

Thanks for stopping by! Interested in connecting? Here's some places where you can reach out! :)