Aligning a Legacy Design System with Salesforce Lightning Design System (SLDS)

Aligning a Legacy Design System with Salesforce Lightning Design System (SLDS)

CASE STUDY - DESIGN SYSTEM

CASE STUDY - DESIGN SYSTEM

Migration of scoped UI components from legacy design system to SLDS.

At Tech Mahindra, I contributed to a design system modernization initiative for a European telecom client's Salesforce-based call centre platform. My role involved:

Auditing 40+ legacy UI components against Salesforce Lightning Design System (SLDS) and standardizing the 38 scoped for migration.

Developing component-level recommendations in collaboration with a Senior UX/UI Designer.

Presenting proposals to the Client Design Lead for review and approval.

Documenting approved component standards, usage guidelines, and implementation best practices for designers and developers.

Project Overview

Role

UX/UI Designer

Scope

40+ legacy components audited; 38 standardized against SLDS

Approver

Client Design Lead

Platform

Salesforce-based Telecom Agent Contact Centre

Collaborators

Senior UX/UI & other Designers & Developers

Contribution

Component recommendations, Guidelines and Usage documentation

Collaborators

Senior UX/UI & other Designers & Developers

Contribution

Component recommendations, Guidelines and Usage documentation

Context

Background

The European telecom provider was modernizing its Salesforce-based call centre platform by aligning its legacy design system with Salesforce Lightning Design System (SLDS).

  • Of the 40+ legacy components audited, the client scoped 38 for migration: each reviewed, standardized, and documented to create a consistent design foundation across the application.

  • Aligning with SLDS meant inheriting its WCAG-conformant component patterns, though a dedicated accessibility audit sat outside this project's scope.

Background

The European telecom provider was modernizing its Salesforce-based call centre platform by aligning its legacy design system with Salesforce Lightning Design System (SLDS).

  • Of the 40+ legacy components audited, the client scoped 38 for migration: each reviewed, standardized, and documented to create a consistent design foundation across the application.

  • Aligning with SLDS meant inheriting its WCAG-conformant component patterns, though a dedicated accessibility audit sat outside this project's scope.

Background

The European telecom provider was modernizing its Salesforce-based call centre platform by aligning its legacy design system with Salesforce Lightning Design System (SLDS).


  • Of the 40+ legacy components audited, the client scoped 38 for migration: each reviewed, standardized, and documented to create a consistent design foundation across the application.

  • Aligning with SLDS meant inheriting its WCAG-conformant component patterns, though a dedicated accessibility audit sat outside this project's scope.

Primary Users

Call Centre Agents

  • Manage customer accounts

  • Process service requests

  • Resolve issues

  • Complete transactions efficiently

Component review and standardization process for 38 components scoped for migration.

My Role

As a UX/UI Designer in this project, I focused on reviewing, comparing and documenting the component library.

Translating the Review into Approved Component Standards

Following the component review and recommendations, I documented the approved SLDS-aligned standards for designers and developers. Each component specification covered anatomy, properties, usage and placement, and Do's & Don'ts, providing a consistent reference for implementation. The recommendations were reviewed and approved by the Client Design Lead before being incorporated into the component guidelines.


Note: Client-specific names and identifiable references have been obscured to maintain confidentiality.

Transaction list view built with approved SLDS components.
Transaction list view built with approved SLDS components.
Transaction list view built with approved SLDS components.

My Contribution

As a UX/UI Designer in this project, I focused on reviewing, comparing and documenting the component library.

Applying the Approved UI Components in Agent Screens

Following approval, the standardized components were applied across transactional workflows to improve consistency and implementation readiness. I recreated selected transactional interfaces using the approved component library.

Screen 1 - Transaction List View


Purpose -

Designed a structured list view using standardized components to support efficient navigation of customer orders and service requests.


Applied Components -

  • Global Header & Navigation

  • Tabs

  • Input Field

  • Data Table

  • Accordion

  • Badge

Screen 1 - Transaction List View

Transaction list view built with approved SLDS components.

Purpose -

Designed a structured list view using standardized components to support efficient navigation of customer orders and service requests.


Applied Components -

  • Global Header & Navigation

  • Tabs

  • Input Field

  • Data Table

  • Accordion

  • Badge

Screen 2 - Order Item List Modal

Purpose -

Recreated a transactional modal using approved SLDS-based components to validate the standardized design system.


Applied Components -

  • Modal

  • Scoped Tabs

  • Data Table

  • List Box

  • Button

Screen 3 - Order Information Workspace

Purpose -

Applied approved components to organize detailed order information within a scalable enterprise workspace, improving readability and maintaining consistency across high-volume transactional data.


Applied Components -

  • Global Header & Navigation

  • Scoped Tabs

  • Data Table

  • Buttons

  • Input Fields

Screen 2 - Order Item List Modal


Purpose -

Recreated a transactional modal using approved SLDS-based components to validate the standardized design system.


Applied Components -

  • Modal

  • Scoped Tabs

  • Data Table

  • List Box

  • Button

Order Item list view built with approved SLDS components.

Screen 3 - Order Information Workspace


Purpose -

Applied approved components to organize detailed order information within a scalable enterprise workspace, improving readability and maintaining consistency across high-volume transactional data.


Applied Components -

  • Global Header & Navigation

  • Scoped Tabs

  • Data Table

  • Buttons

  • Input Fields

Order Information Workspace view built with approved SLDS components.

Key Outcomes

The initiative delivered a documented component standard for the platform: 38 components standardized against SLDS, 100% of the resulting guidelines approved by the client design lead and a consistent UI foundation applied across enterprise agent workflows, giving designers and developers a single reference for future releases.

Key outcomes - 38 components standardized against SLDS, 100% of the resulting guidelines approved by the client design lead.
Key outcomes - 8 components standardized against SLDS, 100% of the resulting guidelines approved by the client design lead.
Key outcomes - 8 components standardized against SLDS, 100% of the resulting guidelines approved by the client design lead.

Learnings

Enterprise design systems succeed through consistency, collaboration, and governance, not visual design alone.

Enterprise design systems succeed through consistency, collaboration, and governance, not visual design alone.

Clear documentation reduces ambiguity and improves implementation quality for both designers and developers.

Clear documentation reduces ambiguity and improves implementation quality for both designers and developers.

Design reviews with senior designers and client stakeholders strengthened my understanding of enterprise design workflows.

Design reviews with senior designers and client stakeholders strengthened my understanding of enterprise design workflows.

Reflection

Coming from a communications background, this project enhanced my perception about design. I learned that enterprise UX is not only about creating interfaces, it is equally about building shared standards, documenting decisions, and collaborating across teams so products remain consistent as they evolve - similar to the practices being followed in communications and branding.


Working on this initiative strengthened my interest in design systems and scalable enterprise experiences.

Next Steps

In an ideal world, I would have liked to have the time to -

  • Validate updated components through usability testing with call centre agents.

  • Conduct accessibility reviews against WCAG standards.

  • Measure task completion, efficiency, and error rates after implementation.

  • Refine component guidelines based on user and developer feedback.

"Design systems are not just about components. They are about building a shared language that enables consistency, collaboration and smooth user experiences at scale."

View More Case Studies

Designing enterprise products that make complex work simpler.

Have a project or opportunity in mind?

Let's Connect

Bangalore, India © 2026 Suneha Sen

Designing enterprise products that make complex work simpler.

Have a project or opportunity in mind?

Let's Connect

Bangalore, India © 2026 Suneha Sen

Designing enterprise products that make complex work simpler.

Have a project or opportunity in mind?

Let's Connect

Bangalore, India © 2026 Suneha Sen

Project Overview

Platform

Salesforce-based Telecom Agent Contact Centre

Role

UX/UI Designer

Scope

40+ legacy components audited; 38 standardized against SLDS

Approver

Client Design Lead

Collaborators

Senior UX/UI & other Designers & Developers

Contribution

Component recommendations, Guidelines and Usage documentation