Project Summary


When clients had trouble accessing pages through CIBC’s web and mobile apps, they would mainly call Telephone Banking. CIBC also offered an online chat service, but agents weren’t always available. Although a good option, CIBC wanted to offer a better chat service and reduce call volume to Telephone Banking.

Defining our requirements

We worked with business stakeholders to define our project requirements during JAD sessions. In those sessions we decided to work with a vendor tool and customize based on business needs. The main requirements included:

For tech, we needed to customize the SD kit according to our brand, store client data on our secure servers (not on the vendor’s), and make session calls between the vendor’s and our backend systems.

That old-new design smell

An old discovery concept was created but never implemented previous to our project timeline. The concept was also only designed for mobile, but we thought to consider the early concept for our project, specifically the NPS rating.

It was exciting to get to be the first team that implemented an updated chat solution. 

Because the new solution would replace what was existing, we needed to assess the current chat experience and understand what caused friction for our clients and their main pain points. We worked with the analytics department to gather tracking data we had from previous sessions, and defined new KPIs aligned to business requirements.

What once was proactive

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.

Brand colours and styling were missing, and clients felt like the window was spam and less secure. There were also too many options on the window for the client to know what to click first. Overall, the proactive chat experience had a lot of potential to be improved.

Some of the updates we implemented for the proactive chat were a new headline with better call to action, updated window skin, branding and button placement. The alignment of the buttons were originally on the left, even though  data showed us that primary actions performed best on the right.

An improved pre-chat window

If the client clicked the “chat” button in the proactive chat window, or clicked any of the chat entry points, a pre-chat window would open – of course, in another browser window.

Initial thoughts were that there was too much content on the window. This caused cognitive overload, for both clients with and without accessibility requirements, and the client would ultimately drop off the chat window to call Telephone banking. We had a 45% drop off rate.

For clients that were already signed in, the form would not prefilled with their name and/or email address. Clients were irritated to re-enter information CIBC already had on file.

Lack of brand tone

The old chat window felt very cold and impersonal, again lacking updated brand tone and style. The chat window was also too large for the user to manage and could not be resized as it wasn’t responsive.

It was possible that clients would get timed out of their online banking session, if they were only engaging with the chat window because no activity was being tracked within chat. In the event of a timeout, the client would have to sign back in and kicked out of chat.

No complex questions allowed

Once chat had ended, yet another window would open, asking the client to rate their chat experience. 

There were far too many questions for the client to answer, with a difficult to understand rating system of zero to 10. When we reviewed with our analytics team, the team noted that most of the NPS results were inaccurate since most clients would only answer a few questions and then close the window.

We had to improve our NPS scores and accuracy with the new chat experience.

Tracking old entry point designs

We updated all entry points as part of the new chat solution, the first being the pre sign-on contact page.

The “Chat with us” tile included hours of operation and a “Have a question” chat button. Well, it wasn’t really a button, but that was how it was originally designed. Sometimes the message would display (if an agent was available) but most times it would be hidden while 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. We also took a look at the pioneers of modern chat experiences 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 (wait time messages, chat bubbles, user names and or images, time stamps, resend failed messages, etc.) that we used as a baseline for our designs.

Targeting a wide range of clients

The chat feature would be launched with CIBC’s Personal Banking clients, but eventually rolled out to our Imperial Service and Private Wealth lines of businesses. As such, our team was responsible for the main solution so long as it considered the needs of the other business’ clients. We worked with our Simplii Personal Banking team to create user profiles that considered different users and their challenges. 

From those profiles, we were able to create user journey maps, client scenarios, use cases, and high level IA diagrams.

Building the foundation with flows

Discovering the best entry points

Pictured left is a diagram of the possible entry point flows clients could enter the chat experience from.

We wanted to update existing entry points to have consistent language and updated brand style. These  entry points included the contact page, help page, FAQs page, header, product pages and drawer menu for native apps. 

Helping clients to find agents

A new entry point in the form of a floating button was also introduced. The floating button could be applied to any page and persist through multi-tab sessions, even in co-browse state. This solution solved a business concern by allowing us to turn off or on the button, instead of placing it in the site header.

On the contact page, we replaced the old text “button” to be physical buttons. The button would be dynamic and an FAQs link beside it, so clients still had a way of getting answers if agents weren’t available.

The happy path

After understanding where the clients would be entering the chat experience from, their mental models and scenarios, we began creating the end to end flow.

Included in this diagram were external app flows and systems calls when data was pulled. This helped us understand the complex network of actions happening on the backend, to improve what was displayed to the clients on the front end. We worked with our business partners and leads to refine the flow diagram throughout the build.

Discovering the possibilities

Chat bots, automation, and fun

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), status and alerts if the client navigated to a new page 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 white label product as much as we hoped, but we were able to phase in updates over two releases.

Although a chat bot was possible with our vendor, we wanted to set our chat experience apart from the competition using real agents. The first release would include the main chat functions, where the second release would include more style customization and improved rating system for the NPS Survey.

Designing icon states to show agent status

We knew we wanted to update the chat icon and to include the ability to display different agent availability statuses. The original chat icon would disappear if agents weren’t available but this caused confusion becuase there was no communication about why the icon had disappeared or where to find it again.

By creating different statuses and status messages with the icons, we could keep the chat icon in the same location, but update the visual depending on agent availability.

Placement of the icon would be as a floating action button on desktop only (pre and post sign-on flows) and within the header on mobile.

Vendor compromise

Through design iterations, the vendor was only able to map three icon images to chat statuses, so we had to remove the “busy” status. If agents were busy, we would display the available icon but display a queue number once clients entered the chat.

Based on user testing, we also removed the text inside the floating icon (bottom box), as it was not necessary for clients to read the status. The only feedback was that they would want to know whether a new message was sent, especially if the chat window had been minimized.

For this, we included a new message dot, flashing icon and alert sound.

Improving our call to action

Proactive Chat was a way for CIBC to engage with clients in flows that were complex. The main flows clients would abandon were new product applications, etransfers and bill payments. 

We recommended having dynamic messages display alongside the floating button, relevant to the page clients were on. 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 instead of opening a new browser window. The message was a non-modal, which we worked with tech and accessibility teams to create a “polite” focus function, which meant the message 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.

A header icon on mobile

We weren’t able to place the chat icon in our site header on desktop due to tech constraints and business concerns. Stakeholders were concerned that we would not be able to support demand and be too discoverable. 

On mobile however, we did not have the same constraints. The floating button not possible though, since we were already using a floating button for other quick actions.

The header icon had three status, available, new message and unavailable. If the client interacted with the icon when agents were unavailable, an alert window would display notifying the client.

The new chat modal

If the floating chat button showed that agents were available, the client could click the button and the chat modal would open up. 

The new pre-chat content only displayed what was  the necessary data to collect from clients, which included their name and first question.

All of the lengthy text and descriptions from the old chat experience were removed, allowing clients to focus on simple tasks at a time, with straight forward action points.

If agents were busy, clients would see a message notifying them that they will be placed in a queue or they could click a link and go to the FAQs page. When agents were offline, we created a similar behaviour where we would direct clients to the FAQs page where clients could search for answers.

Expanded chat modal

The chat modal would be displayed near the bottom right corner of the browser window (above the scroll). We chose this location because the right side of the screen had the least amount of important data and links displayed both for pre and post sign on clients.

When clients would minimize the modal, it would return to the  floating button state. If they clicked the button, it would open the modal.

The modal was static and could not be moved around the page. Although an available feature from the vendor tool, it was not common for other chat apps online, and would make collapsing to the floating button and launching again to the moved location difficult for tech to maintain.

Setting queues for busy agents

When agents were busy, clients would automatically be pushed to enter a queue. This rule was made specifically for peek business hours, especially during marketing pushes.

Working with our LOB leads, we recommended creating a pre chat window when the queue was longer than five people. The pre chat window would display content letting clients know that they would be placed in a queue, but with the option to search answers to top questions from the page they were on. 

This was to help reduce number of clients waiting, and allow them to try and self serve if they didn’t want to wait. We also provided a link to the help page, if they did not find an answer in the list of questions provided.

This feature will be part of the phase two release.

Queue wait time functions

For clients that agreed to being placed in a queue, and were second in line but less than five, they were able to type a question to the agent as they waited to be connected.

By letting the client take action while waiting, they felt less anxious, and the agent could have an answer ready once connected to speed up the chat process.

Personalizing the experience with agent avatars

To create a more personal chat experience from a chat bot, we wanted to included avatars for agents.

Through user testing, the client feedback was positive and they liked seeing who they were talking to but wondered if the images were real of fake. Ultimately, for privacy reasons, we decided to hide agent avatars from the chat experience. This also helped visually balance text bubbles since the client would not have an avatar image.

Connected chat bubbles

The style of chat bubbles was important for us to create. The vendor solution was very structured and square, which felt too serious for CIBC’s tone of voice. Many competitive chat experiences also had rounded corners, and we agreed that his felt more friendly.

A phase two enhancement is to eventually “link” chat bubbles when multiple messages are sent.

The original vendor solution displayed a time stamp with message bubbles. We tried various solutions (within the bubble, displayed on click, etc.) but decided to remove the time stamp since the chat conversation would not be saved, would only be an average of 10 minutes and the client could not have an ongoing conversation with the same agent if they logged back in. There was no perceived value in displaying a time.

Another feature was to show an “agent typing” message so clients had live feedback of the agent’s behaviour. A phase two enhancement is to display an ellipse gif instead of the message.

Transferring to the best agents

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.

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, so we updated the chat to have all previous agent messages clear on transfer.

Discovering a better NPS Survey

At the end of a chat conversation, the client would receive a survey. This would be used to train agents and any client feedback would be used to improve the experience.

We user tested many different versions of the rating system, since a five star rating was not possible. For NPS scores, our backend systems required a rating between zero to 10. It was not possible to calculate and convert ratings out of five stars, to fit these needs.

Our solution was to display a rating of zero to 10 for the first question that was the only NPS specific question; and a more user friendly solution for the rest of the questions.

Our improved design although possible, the vendor could not build the solution in time for our phase one release, so this improvement will be part of our phase two enhancements.

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. This feature was available to clients within a chat but also to client who called into Telephone Banking. 

Clients who called into telephone banking, would access cobrowse via a url link and unique pin code.

The agent would have view only access, without being  able to screenshot information or click on content.  The agent was  however 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.

We shipped it!

Updated contact page entry point

Improved pre-chat screen flow

Delightful chats with live agents

An NPS survey clients understood

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 all 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.