top of page
name logo.png
New Cover - mobile voice call.png

OVERVIEW

Background

Sprinklr offers customer service software that helps brands manage agents and customer interactions, to ultimately improve customer experience.

This project focused on Care Console Voice Call, which allows agents to receive customer calls from all over the world with a built-in call feature to communicate with customers and take timely actions while being on the call.

I led the design of the mobile voice call interface, from identifying user needs to delivering hi-fi wireframes to the dev team.

 

cover.png

Impact

📱  This product has been launched and is currently being used by

        various of enterprise companies. 

🛠  I helped improve the team's design system and have created

       standardized elements for voice call across the platform.

ℹ️  Learn more: https://www.sprinklr.com/features/call-center/

Care Console-Voice Call.png

IDENTIFY THE PROBLEM

Inquiry for Improvement

Agents has reported high dissatisfaction rate on the current voice call product, because: 

  • they need to take call related actions when talking to customers.

  • they need to navigate within the app while being on the call.

However, the product at that time wasn't able to accommodate those needs.

 

persona.png

Audit the Current Design

Since it's an improvement based on an existing function and it has to be consistent with the other parts of the

product, I started by gathering resources and figuring out "what resources do I have in hand?"

Desktop-old-2.png

A comprehensive desktop version that provides various range of capabilities

Mobile-old.png

A simple MVP version that allows minimal interactions

User Interview

With the help of UX Researcher in the team, we conducted interviews with several clients to learn about what they were looking for while taking calls from customers and what were their major frustration at the moment.

Interviews.png

RESEARCH

Competitor Study

We looked into a couple of competitors and noticed that the maximum number of primary actions is 5. All other features are hidden in the secondary level.

We also found out that many major voice call/video call apps are using movable widget while being minimized.

Competitive Analysis.png

Define Success

While users have a ton of "ideal features" that they wanted, we picked out the key features to be included in this project based on survey results from 100+ users. Meanwhile, we also made sure to align with business goals and marketing strategies.

The goal of this project is to:

  • Ensure seamless transition between different scenarios during a call

  • Enable agents' needs for multi-tasking

Features Needed.png

CHALLENGES

Challenge 1

How to leverage the MVP version and Desktop version with this design and define primary features?

Comparing to a desktop app, a mobile app will most likely have a smaller screen, and interaction signifier can also be different.

Challenge 1.png

Challenge 2

How to give users access to features while moving out of the chat screen?

Currently, users are not able to navigate within the other parts of the app until the call is over, because the minimized call widget is fixed on screen, which takes too much backend effort to make it work on other pages as well.

Challenge 2.png

EXPLORATION

Ideation.png

Widget Shape

What features need to be included in the minimized version?

 

User research says ONLY “Mute”.

Feature Layout


Ideally fit all within the “comfort zone”

Error Prevention

  • Mute and Pause might confuse the user when they’re put side by side

  • More issues were identified through user testing

FINAL SOLUTION

Hidden Menu

A More button is introduced to cover a couple of not commonly used features, determined by the research team through user interviews.

more button.gif
Movable widget.gif

Movable Minimized Widget

Users are able to move the widget around while it's minimized so that they can adjust its location based on their needs and view other pages.

REFLECTION

Design System Improvement

For future design hen this feature was launched, other members will be able to use this as a reference to build up the design.

What I did for design documentation provides a source of truth for the rest of the internal team, including both designers and engineers. With this effort, I helped ensure design consistency across the platform, smooth design hand-off process, which ultimately improved team efficiency.

Layer.png
Design System.png

Next Project: Live Chat

Let's talk about UX design, tech trend, and fun stuff in life :D                                               Find me on

  • Instagram
  • LinkedIn
bottom of page