Talkdesk Callbar

A software phone (and more) for contact center agents

Ryan Kirkman
Ryan Kirkman Portfolio

--

The Early Days and the CTI (Computer Telephony Integration)

When I joined Talkdesk as the first product designer, some of my responsibilities were to upscale existing design debt. The first of those was the CTI which lived not only in the Talkdesk main interface, but also in 3rd party platforms like Salesforce and Zendesk. What is a CTI? As wikipedia would explain its:

“…a common name for any technology that allows interactions on a telephone and a computer to be integrated or coordinated… predominantly used to describe desktop-based interaction for helping users be more efficient…”

The many iterations and add-ons of the CTI

There was no real vision or north-star for the CTI. It existing primarily as a call and transfer utility for support agents. As features were piled on, the tiny footprint became bloated and usability suffered greatly. Additionally the biggest pain point was that it was embedded into the page as an iframe. This meant the user could potentially have multiple tabs open with multiple instances of the CTI open. Imagine receiving a call on 7 tabs simultaneously.

Warm & Blind Transfer Flows

CTI -> Callbar 1.0

At around the same time, I began working with one of the PMs who wanted to convert the CTI into a Google Chrome App. This would allow us to present it as a desktop application that sat on top of your browser, not in it. At the same time this presented us with an opportunity to rethink the interface and experience and to design with scale in mind.

Feature Parity

The initial MVP was scoped to meet feature parity with the CTI. This meant accounting for things such as Outbound Caller ID, Call Recording, Call Queue, Warm Transfer, and Blind Transfer.

Outbound Caller Id, Country Code, and Error States
A Warm Transfer flow, where the agent speaks to another agent before handing off the caller.

Research

In order to really understand how agents worked with our product and how our product integrated with their CRMs, I started visiting customers and shadowing agents, throughly defined out user personas by working with cross-functional teams, and created an empathy map to help us align around the needs, wants, and frustrations of our users. I also spent time listening to call recordings to get an idea of what the experience could be like for callers.

A new focus

It didn’t take long for our customers (or our leadership) to recognize that Callbar was a vastly improved experience. With that in mind, we began to expand the scope of the product to start addressing experience gaps and sales gaps. Later I would discover how much this would test the designs and scalability of the Callbar.

“Without a solid vision of where the product was going — a true north star — the experience and footprint became bloated and burdened…”

Voicemail

Voicemails in a contact center can be very tricky. Often times there is a need for a shared inbox with features like, Resolved/Open, Assigned to, Ring group, Transcripts, Advanced Filtering, etc.

For the Callbar version we discovered the best experience would be a much simpler one. Here we only display the voicemails that were left directly on that agent’s line and/or was assigned to that agent.

Designing for Scale

Eventually we got to the point where many “feature centric” products go. Without a solid vision of where the product was going — a true north star — the experience and footprint became bloated and burdened. It became difficult for the design team to accommodate new feature requests without compromising the experience in some way. We needed a new vision.

With feature requests piling up and nowhere for us to go, we had to start thinking from a systems point of view. How could we fix the scalability issue? How do we convince the product team and leadership that now is the time to step back and think about the vision — to find our north star? We couldn’t just go to them with this problem, we also had to come up with a potential solution. How do you design for scale when you don’t know what that scale is going to look like? How do you optimize for customization without compromising ease of use?

Callbar as a Platform

Eventually we were able to align the organization around four principles for the product:

  1. Context: Provide the right context at the right time.
  2. Non-linear: Allow for simultaneous non-linear workflows.
  3. Customization: True customization designed for ease of use.
  4. Platform: Plan for 3rd party extensibility.

With these principles in mind we began the process of abstracting the Callbar into its basic components. At the same time we attempted to tackle many of pitfalls and complaints existing in the product. Things such as window management, inbound call notification, customization vs personalization, desktop footprint, and multitasking.

Callbar 2.0

Today we are still working on designing, testing, and building Callbar as a platform. We are constantly talking with customers to discover what is important to them and how we can cater to their varied needs, while still consider our agents and callers.

Coming Soon

--

--

Ryan Kirkman
Ryan Kirkman Portfolio

Design leader @ Twitter. Obsessed with Yerba Mate 🍵, whiskey 🥃, and absurdist philosophy. https://medium.com/rkirkman-portfolio