Clients regularly called in when they faced service issues online, which increased call wait times. Additionally, agents were regularly unavailable due to split responsibility managing calls and chat messages. The solution was to revolutionize agent support, including a new, more intuitive chat bot experience that walked clients through trouble shooting.
Role: Product Design Lead
Timeline: 4 months
Responsibilities: Vendor management, Design Strategy & Direction, UX Design Assets
Defining requirements
We worked with business stakeholders to define our project purpose and requirements. The outcome of those meetings provided design direction and the choice to expedite development time by leveraging a vendor tool; while customizing based on business needs. The main requirements included:
- support authenticated and unauthenticated clients
- have a proactive and reactive experience
- perform on responsive web, and native apps (iOS + Android)
- allows for co-browsing on web
- include a page persist function
- include a NPS survey
Assessing data + client feedback
Our first discovery stage step was to collect data and client feedback about the existing chat experience. Our analytics department was able to provide tracking data for us which highlighted three main pain points: disruptive, lack of credibility and overwhelming.
Disruptive Windows
The existing proactive chat experience was incredibly disruptive as it would open in a new window on top of the client’s open browser window. This behaviour was not compliant with accessibility standards nor an expected experience based on chat bot standards.
Spam or a Virus
A lack of brand tone and design style made clients feel like the new window was spam or somehow less secure. Poor text alignment, varying text sizes and tone was difficult for clients to feel secure interacting with the window so unlike CIBC.
Too much information
End to end, the current chat journey could open up five separate browser windows on top of the client’s session window for the proactive prompt, survey loading window, survey window, NPS survey window and thank you window.
Main accessibility and ux concerns was that there was too much content on the pre-screen window. This caused cognitive overload, for clients with and without accessibility requirements. 45% of clients ultimately dropped out of the chat window to call Telephone banking.
Poor agent availability
On CIBC’s contact page, within the “Chat with us” tile, clients could interact with the chat functionality and see hours of operation. Most times however, the button to launch the chat window would be hidden if agents were busy or unavailable. The client had no indication aside from the hours, whether an agent would become available.
Competitive analysis
We researched competitors like Tangerine, Scotiabank, RBC and BMO as well as social media champions like Facebook, WhatsApp, Twitter, WeChat and native messengers to hypothesis what users expected from a good chat experience.
There were many of the same features between the apps such as wait time messages, chat bubbles, that we used as a baseline for our designs.
Discovery Prototype
The initial concept was innovative and dynamic, with many elements of the chat experience pulling from data about where the client was coming from to suggest chat topics; and machine learning if we were to choose a chat bot experience over a live agent experience.
Working with the vendor, we realized we could not customize their product as much as we hoped, so we had to backlog personalization and machine learning efforts.
Entry Points
Our fist improvement was to reduce all the current chat windows into one container, regardless of intent (pre-screener, chat, survey). What we decided on was a net new floating action button on web and dynamic chat icon within our native app header. Additional entry points were placed on our Contact and Help pages.
On our Contact and Help pages, we replaced the old text button with two physical buttons: a launch button that dynamically indicated agent availability and an FAQs link for clients to get answers if agents weren’t available.
Agent Status Indicators
The original chat icon would disappear if agents weren’t available which caused confusion becuase there was no communication about why the icon had disappeared or where to find it again. Our solution was to develop dynamic entry points to display different visual states representing agent availability.
We had an available, busy and offline state. If agents were available with no queue, then the icon would show in its available state and direct client right into the pre-screener. If agents were busy, we would display the available icon but display a queue number with support option once clients entered the chat. If agents were offline, we would hide the floating action button, and update all other static entry points with appropriate offline messaging and support options.
Based on user testing, the only feedback clients wanted was to know whether a new message was sent, especially if the chat window had been minimized. For this need, we included a new message dot, flashing icon and alert sound.
Pre-chat window
The new pre-chat window only displayed what was necessary to collect from clients. All of the lengthy text and descriptions from the old chat experience was removed, allowing clients to focus on simple tasks at a time, with straight forward action points.
Once past the pre-chat window, dynamic routing further educated clients on agent availability. Clients would be placed into a queue if there were more than two clients using the chat at the same time; but with varying degrees of user control.
If the queue was less than 2 clients, we would allow clients to proceed into the chat and display a message about the number of sessions ahead of theirs. Clients would be able to enter questions while they waited.
If there were more than 5 clients in the queue, we would not let clients enter the chat, and instead display top FAQs along with a wait time message. We also provided a link to our support page, if they wished to abandon their queue. By letting clients take action while waiting, they felt less anxious and the agent could craft an answer once connected to speed up the process.
Chat window
Proactive Chat
Proactive chat function was a way for CIBC to engage with clients in flows that were complex. The main flows clients would abandon were new product applications, e-transfers and bill payments.
Vendor constraints meant we could only display one message for all pages, so we decided on “Need help?”. The proactive message would display from the floating button, which created a “polite” focus function, that would only be read after a screen reader was finished reading what it was previously focused on. This new solution was fully accessible and far less disruptive than the old proactive chat.
Exploring Avatars
To create a more personal chat experience, we wanted to included an avatar for agents. This avatar could be generic as to protect the identity of our real agents. Through testing, clients liked seeing who they were talking to but wondered if the images were real of fake. Ultimately, we decided to hide agent avatars from the chat experience.
Chat Bubbles
The original vendor design of the chat text bubbles was very rigid and square, which felt too serious for CIBC’s brand tone. Many competitive chat experiences had rounded corners, and we agreed that his felt more friendly. A phase two recommendation is to visually connect or “link” chat bubbles when multiple messages are sent.
Agent Typing
Our old chat experience did not show when an agent was typing a response to the client, which is an important indicator of support. The vendor’s out-of-box solution could not support a typing elipse, but could show a message letting clients know the agent was typing. A phase two recommendation is to display an ellipse gif instead of the message.
Additional functionality
Agent Transfers
A business requirement was to allow a chat conversation to be transferred to another agent if the original agent could not answer the client’s question. This transition needed to be smooth and communicate what was happening.
Once the chat was transferred, we wanted the previous conversation to be saved so the client could scroll back through messages if they needed to reference any answers. Vendor constraints were not able to support this function, and would only display the new agent’s conversation. All older messages would be cleared on transfer.
Delightful NPS survey
At the end of a chat conversation, the client would be prompted to complete a survey. This would be used to train agents and any client feedback would be used to improve the experience. The original questionnaire had far too many question, with a complex rating system. When we reviewed with our analytics team, the team noted that most of the NPS results were inaccurate since clients would answer a few questions and then close the window.
Our business constraint was that all NPS questions needed to use a rating of zero to 10. Working with stakeholders, we were able to reduce the questionnaire to just five questions, and use a more user friendly solution for non NPS questions. Sadly a five star rating was not possible with the vendor, and we ultimately settled on using dropdowns. We tested many different versions of the rating system with users, all preferring the star rating system, but the dropdown was a good option too.
Co-solving road blocks
Cobrowse set CIBC’s web chat experience apart from our competition because agents could view what the client was describing via a shared web view. The agent would have view only access, without being able to screenshot information or click on content, and personal information was masked. This was for security and account access reasons. The agent was able to highlight areas they wanted the client to interact with.
At any point in the co-browse session, clients could stop their screen share by clicking on a button at the top of their screen. This feature was available to clients within a chat window but also to clients who called into Telephone Banking via a unique url link and pin code.
The final results
The updated chat service allowed CIBC to be on demand for all pre and post sign-on client sessions. Agents also received better feedback and training from clients who fully completed the NPS survey at the end of their chat. Through tracking, we could see trends of which pages clients were initiating chat from the most, for future improvements to those pages.
