Designing Voice Calling for Enterprise Customer Care

Designing a native voice calling experience for inbound routing, live call controls, conference calls, transfers, dropped connection recovery, and escalation to an agent's phone. Plus, a brand-new calling component library for the Customer Care suite.

Designing Voice Calling for Enterprise Customer Care

Designing a native voice calling experience for inbound routing, live call controls, conference calls, transfers, dropped connection recovery, and escalation to an agent's phone. Plus, a brand-new calling component library for the Customer Care suite.

Designing Voice Calling for Enterprise Customer Care

Designing a native voice calling experience for inbound routing, live call controls, conference calls, transfers, dropped connection recovery, and escalation to an agent's phone. Plus, a brand-new calling component library for the Customer Care suite.

Overview

Samsung, one of Sprinklr's largest enterprise customers, wanted to expand to video calling inside the Customer Care tool they were already using. That demand surfaced a broader gap: enterprise customers needed native voice and video calling built directly into the platform.

The feature didn't exist. Beyond the core calling experience, the design had to account for real-world failure scenarios like, unstable connections, regional restrictions requiring calls to route to an agent's physical phone, multi-party calls with supervisors, and cold and warm transfers between agents.

I was the lead designer on all Voice (VoIP, PSTN) calling flows and the calling component library. A separate designer owned the Video track.

Overview

Samsung, one of Sprinklr's largest enterprise customers, wanted to expand to video calling inside the Customer Care tool they were already using. That demand surfaced a broader gap: enterprise customers needed native voice and video calling built directly into the platform.

The feature didn't exist. Beyond the core calling experience, the design had to account for real-world failure scenarios like, unstable connections, regional restrictions requiring calls to route to an agent's physical phone, multi-party calls with supervisors, and cold and warm transfers between agents.

I was the lead designer on all Voice (VoIP, PSTN) calling flows and the calling component library. A separate designer owned the Video track.

Overview

Samsung, one of Sprinklr's largest enterprise customers, wanted to expand to video calling inside the Customer Care tool they were already using. That demand surfaced a broader gap: enterprise customers needed native voice and video calling built directly into the platform.

The feature didn't exist. Beyond the core calling experience, the design had to account for real-world failure scenarios like, unstable connections, regional restrictions requiring calls to route to an agent's physical phone, multi-party calls with supervisors, and cold and warm transfers between agents.

I was the lead designer on all Voice (VoIP, PSTN) calling flows and the calling component library. A separate designer owned the Video track.

Process

Map

Identified and mapped all workflows and considered edge cases

Collaborate

Collaborated with the video designer to ensure the two workstreams stayed consistent at the system level and Engineering to validate feasibility of interaction patterns

Test

Microanimations to avoid triggering photosensitive conditions and integration of updated snap-to-grid and moveable modals

Process

Map

Identified and mapped all workflows and considered edge cases

Collaborate

Collaborated with the video designer to ensure the two workstreams stayed consistent at the system level and Engineering to validate feasibility of interaction patterns

Test

Microanimations to avoid triggering photosensitive conditions and integration of updated snap-to-grid and moveable modals

Process

Map

Identified and mapped all workflows and considered edge cases

Collaborate

Collaborated with the video designer to ensure the two workstreams stayed consistent at the system level and Engineering to validate feasibility of interaction patterns

Test

Microanimations to avoid triggering photosensitive conditions and integration of updated snap-to-grid and moveable modals

Workflows

Accepting an Incoming Call

Live Call State

Conference Calls

Transfers (warm, cold)

Dropped Connection (Wi-Fi)

Send to Agents Phone

Workflows

Accepting an Incoming Call

Live Call State

Conference Calls

Transfers (warm, cold)

Dropped Connection (Wi-Fi)

Send to Agents Phone

Workflows

Accepting an Incoming Call

Live Call State

Conference Calls

Transfers (warm, cold)

Dropped Connection (Wi-Fi)

Send to Agents Phone

Design System

Voice Specific Components

Voice component library, a subset of the Care team's library — buttons, states, dialers, transfer and conference components, avatar states

Atoms & Colors

I worked with our Design Systems designer to come up with dark mode colors which I used for the Voice components

Collapsible Modals

High contrast modals allow for agents to easily see and access the call, agents can move the modal anywhere on the page, and minimize if they are doing focused work

Modal States

Incoming, connecting, sending

Additional Controls

Can be accessed from the toolbar as a popout

Design System

Voice Specific Components

Voice component library, a subset of the Care team's library — buttons, states, dialers, transfer and conference components, avatar states

Atoms & Colors

I worked with our Design Systems designer to come up with dark mode colors which I used for the Voice components

Collapsible Modals

High contrast modals allow for agents to easily see and access the call, agents can move the modal anywhere on the page, and minimize if they are doing focused work

Modal States

Incoming, connecting, sending

Additional Controls

Can be accessed from the toolbar as a popout

Design System

Voice Specific Components

Voice component library, a subset of the Care team's library — buttons, states, dialers, transfer and conference components, avatar states

Atoms & Colors

I worked with our Design Systems designer to come up with dark mode colors which I used for the Voice components

Collapsible Modals

High contrast modals allow for agents to easily see and access the call, agents can move the modal anywhere on the page, and minimize if they are doing focused work

Modal States

Incoming, connecting, sending

Additional Controls

Can be accessed from the toolbar as a popout

Learnings

This project pushed me to think more carefully about motion and animation with accessibility in mind. We were deliberate about strobing rates on incoming call animations to avoid triggering photosensitive conditions, and that kind of thinking stuck with me. It's easy to treat accessibility as a checklist; this made it feel like craft.

Learnings

This project pushed me to think more carefully about motion and animation with accessibility in mind. We were deliberate about strobing rates on incoming call animations to avoid triggering photosensitive conditions, and that kind of thinking stuck with me. It's easy to treat accessibility as a checklist; this made it feel like craft.

Learnings

This project pushed me to think more carefully about motion and animation with accessibility in mind. We were deliberate about strobing rates on incoming call animations to avoid triggering photosensitive conditions, and that kind of thinking stuck with me. It's easy to treat accessibility as a checklist; this made it feel like craft.

AT&T Mexico Custom Dashboards (ES)

Designing a fully localized care console in Spanish for AT&T Mexico's customer calling centers, restructuring the standard Sprinklr layout, designing 16+ custom widgets, and surfacing time-sensitive operational data, crisis visibility, and business-critical metrics for two distinct customer types.

AT&T Mexico Custom Dashboards (ES)

Designing a fully localized care console in Spanish for AT&T Mexico's customer calling centers, restructuring the standard Sprinklr layout, designing 16+ custom widgets, and surfacing time-sensitive operational data, crisis visibility, and business-critical metrics for two distinct customer types.

AT&T Mexico Custom Dashboards (ES)

Designing a fully localized care console in Spanish for AT&T Mexico's customer calling centers, restructuring the standard Sprinklr layout, designing 16+ custom widgets, and surfacing time-sensitive operational data, crisis visibility, and business-critical metrics for two distinct customer types.

Overview

AT&T Mexico needed a care console tailored to how their calling centers actually operate, including time-sensitive workflows and crisis scenarios.

The console also needed to be fully in Spanish, which introduced localization challenges beyond translation: certain terms didn't have direct equivalents that fit the existing UI, requiring widgets to be redesigned to accommodate the language without breaking the layout.

On top of that, AT&T Mexico's agents serve both prepaid and postpaid customers, each requiring a meaningfully different layout and data set.

Overview

AT&T Mexico needed a care console tailored to how their calling centers actually operate, including time-sensitive workflows and crisis scenarios.

The console also needed to be fully in Spanish, which introduced localization challenges beyond translation: certain terms didn't have direct equivalents that fit the existing UI, requiring widgets to be redesigned to accommodate the language without breaking the layout.

On top of that, AT&T Mexico's agents serve both prepaid and postpaid customers, each requiring a meaningfully different layout and data set.

Overview

AT&T Mexico needed a care console tailored to how their calling centers actually operate, including time-sensitive workflows and crisis scenarios.

The console also needed to be fully in Spanish, which introduced localization challenges beyond translation: certain terms didn't have direct equivalents that fit the existing UI, requiring widgets to be redesigned to accommodate the language without breaking the layout.

On top of that, AT&T Mexico's agents serve both prepaid and postpaid customers, each requiring a meaningfully different layout and data set.

Process

Discover

Customer interviews to understand the problem space, their needs, and potential crisis scenarios users may be in

Architect

Designed two interconnected layout variants: prepaid and postpaid. Each with different widgets, data fields, and tab configurations that had to stay structurally consistent with each other

Design

Designed 16+ widgets including a net-new Urgent Attention widget for Massive Incidents and a Customer Happiness widget benchmarking key agent metrics

Localize

Treated Spanish localization as a structural problem: rethinking widget dimensions, label hierarchies, and spacing rather than swapping copy

Process

Discover

Customer interviews to understand the problem space, their needs, and potential crisis scenarios users may be in

Architect

Designed two interconnected layout variants: prepaid and postpaid. Each with different widgets, data fields, and tab configurations that had to stay structurally consistent with each other

Design

Designed 16+ widgets including a net-new Urgent Attention widget for Massive Incidents and a Customer Happiness widget benchmarking key agent metrics

Localize

Treated Spanish localization as a structural problem: rethinking widget dimensions, label hierarchies, and spacing rather than swapping copy

Process

Discover

Customer interviews to understand the problem space, their needs, and potential crisis scenarios users may be in

Architect

Designed two interconnected layout variants: prepaid and postpaid. Each with different widgets, data fields, and tab configurations that had to stay structurally consistent with each other

Design

Designed 16+ widgets including a net-new Urgent Attention widget for Massive Incidents and a Customer Happiness widget benchmarking key agent metrics

Localize

Treated Spanish localization as a structural problem: rethinking widget dimensions, label hierarchies, and spacing rather than swapping copy

Dashboards

Full Console Overview

Prepaid and postpaid variants

Wireframe - Prepaid

I worked with my PM and the customer to align on the content before designing the dashboard

Principal - Prepaid

I created custom and updated widgets to accommodate new use cases and the Spanish language

Wireframe - Postpaid

Principal Postpaid

Dashboards

Full Console Overview

Prepaid and postpaid variants

Wireframe - Prepaid

I worked with my PM and the customer to align on the content before designing the dashboard

Principal - Prepaid

I created custom and updated widgets to accommodate new use cases and the Spanish language

Wireframe - Postpaid

Principal Postpaid

Dashboards

Full Console Overview

Prepaid and postpaid variants

Wireframe - Prepaid

I worked with my PM and the customer to align on the content before designing the dashboard

Principal - Prepaid

I created custom and updated widgets to accommodate new use cases and the Spanish language

Wireframe - Postpaid

Principal Postpaid

Dashboards

Principal & Profile

Account Information & Customer Happiness

Major Incidents

Order History

Dashboards

Principal & Profile

Account Information & Customer Happiness

Major Incidents

Order History

Dashboards

Principal & Profile

Account Information & Customer Happiness

Major Incidents

Order History

Channels Configuration for Sprinklr Self-Serve

Part of a cross-team rapid build to create a lighter, self-serve version of Sprinklr for non-enterprise businesses. I owned the Channels Configuration section designing the full configuration experience for connecting and managing communication channels including email, live chat, voice, SMS, and social platforms.

Channels Configuration for Sprinklr Self-Serve

Part of a cross-team rapid build to create a lighter, self-serve version of Sprinklr for non-enterprise businesses. I owned the Channels Configuration section designing the full configuration experience for connecting and managing communication channels including email, live chat, voice, SMS, and social platforms.

Channels Configuration for Sprinklr Self-Serve

Part of a cross-team rapid build to create a lighter, self-serve version of Sprinklr for non-enterprise businesses. I owned the Channels Configuration section designing the full configuration experience for connecting and managing communication channels including email, live chat, voice, SMS, and social platforms.

Overview

Sprinklr's core product was built for large enterprise customers with dedicated onboarding support. The goal was to design a self-serve version that smaller businesses could set up independently.

I was part of a small cross-functional team of seven designers pulled from across Sprinklr's product teams, each assigned ownership of a different section of the self-serve platform. I came from Customer Care and had no prior experience designing the Channels domain.

Channels configuration experience: how a business connects and manages every communication channel they use, from email and live chat to Facebook, WhatsApp, Instagram, Twitter, WeChat, Apple Business Chat, Telegram, SMS, and Google Business Messenger. There were no formal requirements. The brief was essentially the outcome.

Overview

Sprinklr's core product was built for large enterprise customers with dedicated onboarding support. The goal was to design a self-serve version that smaller businesses could set up independently.

I was part of a small cross-functional team of seven designers pulled from across Sprinklr's product teams, each assigned ownership of a different section of the self-serve platform. I came from Customer Care and had no prior experience designing the Channels domain.

Channels configuration experience: how a business connects and manages every communication channel they use, from email and live chat to Facebook, WhatsApp, Instagram, Twitter, WeChat, Apple Business Chat, Telegram, SMS, and Google Business Messenger. There were no formal requirements. The brief was essentially the outcome.

Overview

Sprinklr's core product was built for large enterprise customers with dedicated onboarding support. The goal was to design a self-serve version that smaller businesses could set up independently.

I was part of a small cross-functional team of seven designers pulled from across Sprinklr's product teams, each assigned ownership of a different section of the self-serve platform. I came from Customer Care and had no prior experience designing the Channels domain.

Channels configuration experience: how a business connects and manages every communication channel they use, from email and live chat to Facebook, WhatsApp, Instagram, Twitter, WeChat, Apple Business Chat, Telegram, SMS, and Google Business Messenger. There were no formal requirements. The brief was essentially the outcome.

Process

Adapt

Adapted Sprinklr's existing component library as building blocks to fit the self-serve context

Communicate

Without formal requirements, scope and structure came from daily cross-team reviews and working in parallel, syncing constantly across each work stream

Speed

I came from the Care team and had to learn about the Marketing product, fast. In 10 days, we designed and built a working self-serve product

Support

If one designer completed their part for the day, we would all jump in to help another designer complete their work

Process

Adapt

Adapted Sprinklr's existing component library as building blocks to fit the self-serve context

Communicate

Without formal requirements, scope and structure came from daily cross-team reviews and working in parallel, syncing constantly across each work stream

Speed

I came from the Care team and had to learn about the Marketing product, fast. In 10 days, we designed and built a working self-serve product

Support

If one designer completed their part for the day, we would all jump in to help another designer complete their work

Process

Adapt

Adapted Sprinklr's existing component library as building blocks to fit the self-serve context

Communicate

Without formal requirements, scope and structure came from daily cross-team reviews and working in parallel, syncing constantly across each work stream