Intuitive User Centered design for Computer Telephony Integration
- May 28, 2020
- 5 min read
FPS is a leading contact centre in the United States, also located in Philippines and India. They try to make the lives of contact centre agents and managers easier with technology based methods.
As a part of their contact centre, CTI (Computer Telephony Integration) tool was done as a research project. CTI is a technology that allows interactions on a telephone and a computer to be integrated or coordinated. My role as the UX UI designer was to fully understand their problems with the current dialler-CRM relationship and provide a minimalist UI setup to solve those problems.
The Problem
Agent productivity is usually one crucial aspect when it comes to contact centre performance. This is affected majorly by wasting time in switching between software applications to complete their basic tasks. Mostly this switch happens while they are on a call and they require information from different data sources. The diallers that they normally use would have only limited information on the caller and the agent has to look up the rest of the information in the CRM.
Agents need a way to access caller data and perform all call related actions without having to lose time in switching between multiple applications
Users and Audience
The target users of this application are call centre agents who take inbound, outbound or both types of calls.
Roles and responsibilities This project was taken up by a team of around 8 people which included our stakeholders who gave us the requirements and the investment.
The major roles were
UX designer was my role
Quality analyst helped me stay on track of what was needed in the end product and kept testing out my prototypes
Stakeholders gave the inputs from their side on the working of the call centres and their dialler management issues
Product Owner
UI Developer gave life to our prototypes
Backend developer - feasibility of the product features
Users and Audience
The scope of the project was to design a Computer Telephony integration tool (CTI) which would act as an interface between the dialler and the CRM. This had more constraints than we had expected.
We were given a very short timeline of 2 weeks to come up with the MVP.
In addition to that, the project being in a research phase, we had access to very limited users to interview and test.
There were not many competitors for this concept, so we had very less insight on what needed to be done.
The technical feasibility was on the lower side due to the complications in dialler integration.
There were too many features which had to be included in the tool, yet to be given in a minimalist way.
The requirement was for a lightweight application which wouldn’t load the agent’s systems.
Solutions
Analysing the business needs from the stakeholders and the users needs through interviews, I came up with the suggestion to create a plug-in for the dialler’s basic operations and the development team suggested that a browser extension would reduce the switching time between the applications.
The browser extension would have all the basic dialler functions along with call handling controls and caller related information, displayed either directly or as a link to the relevant field in the Customer Relationship Management system.
Process
We followed the traditional design process in this project where we began with requirements gathering from the stakeholders.
Stakeholder interviews The requirements and problem identification was done over video calls since the users were remote. We had to understand the way the agents used their applications before, during and after a call and the interactions between their dialler and contact management system. The business perspective of this project was given to us by the stakeholders. For further understanding, user interviews were done.
User Research Users - agents and dialler management team were interviewed over the first week and observed while they worked. We used screen sharing software to observe their activities while they placed calls. Their pain points were noted and the total time taken for each call was calculated. This was required since our goal was to reduce the average time taken to complete a call and to improve their productivity. We jotted down our observations in mind maps and stickies on our Miro board.
Competitor research Our next step was to study the applications that the agents were using currently and come up with a feature list for our application. The Quality analyst and I were given the task of going through the hundreds of features available on the dialler which was being used (ViCiDial). We came up with a list of the key features and prioritised them based on how accessible they needed to be for the agents, while on a call. We then listed out a few of our competitors online, to understand the features that they were covering in their minimalist versions of dialler tools like plugins and browser extensions.
UX Strategy
I decided to create a UX strategy document to ensure that the design plan aligned with the business goals and technical capabilities.
User Stories
Based on our feature list and the necessary tasks that the users would be performing with the application, I came up with the user stories and later created user flows for the same. The few of the user stories covered were:
The agent should be able to
Click on number from CRM to call - Number will populate in the dialler extension
Check the duration of the call while on call
Add new lead
Add new contact
Add new “case”
Add new task
Add new event
Transfer call by giving extension
Minimise the dialler
Disconnect call
Add a note and save
Option to accept or reject an incoming call
Navigate to the prospect from the dialler extension
Set call disposition
Add callback event
UI Mockups
There are around 5 types of call transfer and a couple of more options for Conferencing the call with other agents. We had to analyse each type and come up with different ways in which all these options can be brought into the system with minimum options in the UI. The combination of transfer and conference options were experimented in some iterations and finally a design was finalized which was used in the mockup. Following our tests, I designed mockups with the gaps filled and performed tests over video calls. The main goal of minimising the UI was achieved by the design.
Mockups comparing with the ViCiDial
User Testing
The prototypes were then sent out for individual testing to gather feedback. The feedback was worked on to get the final version of the mockups ready. When the final prototype was given out, the stakeholders and the users gave good feedback on the design and hence was sent for a UI MVP run.
The prototype was rebuilt using basic HTML, CSS and jQuery to understand the feasibility. The backend developers utilised the APIs provided by ViCidial to assess the complexity involved in the implementation of this software. There were constraints in implementing all the features in our workable model, but this lead us to find a better way of doing things.
Outcomes and lessons
The stakeholders were able to get an insight on the impact of the application in their agents’ productivity and the timeline for developing the product as a whole. As a UX designer of the product, I felt that it would help if we had more access to the dialler management systems and the teams to interpret the security issues that might arise if a plugin was built. The research was put on hold after the MVP was developed due to the technical constraints, but the scope of the project was well understood.
Our learnings
User research and testing play a major role in the impact of the product.
Proper market analysis is required to fill the gap between business goals and the user needs.
The more iterative the design is, the better it turns out to be.
