Call Center

UI/UX • Fintech

The Call Center redesign is the second major project I handled for First Performance. The current version hasn’t been updated for years and upon testing the production version I have already seen issues and areas that needs to be improved.

My first focus is to:

  • Discuss the project goals.
  • Identify timelines.
  • Identify key stakeholders.

Initially, I defined the context of use for the Call Center to align the UX goals.They are as follows:

  • Call Center is mainly accessed via desktop or laptop.
  • Agents are talking to customers while using Call Center.
  • The mobile app user is reaching out to agents because they are facing any issue with the app.
  • Agent should be able to do a walkthrough with the app user.

I then created a set of user goals in order to guide me with the redesign.

Primary Goal:

  • To be able to assist cardholders with their card controls.

Secondary Goals:

  • To be able to turn a card on or off quickly and intuitively.
  • To be able to see a clear history of card transactions and card actions.
  • To be able to filter history based on the merchant, status, dates, and actions.
  • To be able to search for a specific history based on date and merchant name.

With the context of use and goals identified, I then reached out to my stakeholders to get their insights and suggestions for the redesign. Since Call Center is a product deployed to our bank customers, getting user feedback is somewhat impossible. The only way of getting user feedback is through the anecdotal experience of the QA Team Leader and through the Director of Web Development – the persons who have direct experience in using and developing Call Center.

Some of the major improvements brought up by the stakeholders include:

  • Improving the sidebar.
  • Improving the card view.
  • To be able to filter history based on the merchant, status, dates, and actions.
  • Making the Limits more intuitive.

With all the feedback and insights gathered, I then set out to do my low-fidelity sketches.

Once I completed my sketches, I then proceed to create the mid-fidelity wireframes.

In the mid-fidelity phase, I presented an option to provide an overview of cardholder actions to the agent. By adding an overview section, agents can quickly identify problem areas or actions that the cardholder took.

I also added the ability to switch cards without the agent logging out of Call Center. Currently, if a cardholder has two or more cards, the agent will have to logout of Call Center in order for them to provide support to a cardholder’s other card. I believe this is unnecessary. By giving agents the ability to switch cards quickly, cardholders won’t have to spend too much time waiting.

For the card switching, it only makes sense to place it in an area that makes the most sense – the top area. The top area makes sense because the agent doesn’t lose context of which card an agent is supporting.

For the overview solutions, my stakeholders helped in identifying which are deemed important for an agent.

When the final mid-fidelity design was approved by the stakeholders, I then started work on the high-fidelity version. I first set out to create a standard visual branding guide which includes colors, typography, spacing and other design elements. I did this in order to create and establish a set of usable UI libraries for Call Center.

The final approved design features a more professional and organized Call Center that will enable agents to work and support cardholders more efficiently.

No usability test has been planned yet. Testing of the new design falls with the QA team. While I believe actual users should test the product – because QA testers work on specific tasks and scenarios – this is better than no testing at all.