Case Study:
Unified messaging
Role
UX Designer
Duration
4 months
Overview
A multi phase project looking at helping customers find their messages quicker.
UX DiscoveryUI DesignUX Research👋 A little bit of context…
We need to uplift the customer experience for our chatbot Ceba and agent messaging to solve more customer queries without them needing to call the bank or visit a branch.
The bank wants to grow messaging to be the primary channel for customer service. But..
1.05M
Chatbot conversations were created in July 2023
217,321
conversations were handed over to agent messaging
44%
agent conversations were closed without a customer response
Pre-discovery: Understanding the problem
We know that conversations are being closed prematurely leading to customer dissatisfaction and higher call volumes, but what are the key customer problems and pain points?
Along with the UX Researchers, I researched the created an end-to-end Messaging journey map
What
Messaging experience is complex
Need a clear & holistic view of the Messaging experience so that we can communicate a shared understanding of the current state for stakeholders
Why
Our squad had a defined list of problems and opportunities to take into ideation, including:
Discoverability of messaging
Unclear handover from bot to agent
Lack of understanding around asynchronous agent response times
Outcome
Crafting the vision
Now that our team has a identified list of key problem areas in the customer journey, I ran a workshop to ideate on the opportunity areas, which I was able to take to rapidly prototype to usability test the concepts.
Workshop
Usability testing
From the synthesis of these activities and lots of thinking and tinkering… I created a list of opportunities and crafted our vision:
To create a blended hybrid chat experience and unify the entrypoint into messaging.
HORIZON 1: MESSAGE TILEROLE: SOLE UX/UI DESIGNERProviding a faster entry point into messaging
In order to achieve our vision in consideration with business and tech restraints, the squad broke the vision down into smaller opportunity areas to set the foundations to build towards the goal. The first one being to bring messages forward into the help page. I led the UX/UI design for this message tile uplift, working with my squad to define requirements, specifications and ship this feature.
From our research we found that it’s difficult for customers to return to messaging
Multiple entrypoints to return to a conversation which are not persistent and hidden under layers of pages
Not all customers receive a push notification. Some don't have notifications turned on and other times the notification fails
Up to 44% of conversations are closed without a customer reponse
Problem
How might we support customers to easily return to and continue their message on their own terms?
We’ll display active conversations directly on the Help page so that customers can more easily jump back into their conversations.
Proposed Solution
How might we effectively show the different states of the messages to the customers? Messages could be read, unread, closed or open and users could be authenticated or unauthenticated - all requiring a different indicator.
As a starting point, I set out to do a landscape review of popular messaging applications and how they manage states. I then explored different options which I took to design critique sessions to get more perspective. This also helps ensure alignment with our design principles, design system and existing patterns.
Challenge
Usability testing
I took the prototype to 1:1 Usability Testing Sessions in collaboration with our UX researchers to test the comprehension of the different states, here’s what we found.
All participants were able to navigate to the message tile
Most understood when they received a new message / update
What worked well:
Some participants associated the red dot as the messaging agent being online, rather than that there is a new message
What didn’t work well:
While there were hundreds of iterations done for this tile, here are some key changes I made based on feedback:
Incorporating feedback
1. Messaging queue names are not meaningful to customers.
From UT I saw that customers do not understand the difference between “Everyday banking” “General enquiries” etc. and unfortunately this is a business constraint meaning we are unable to alter the name of the messaging queue name. Thus by moving the actual message to the first line, customers can more quickly identify what the conversation might be about.
2. Avatars has no significance due to the lack of differentiation and add more clutter
Another constraint I faced if the inability to differentiate the queues using different avatars or icons. Different agents may jump into the same conversation at different points and hence we cannot show the agent profile either. Another pain point from feedback I gathered is that it is quite cluttered. So I opted to remove the avatar icons as to reduce the clutter, and played around with the timestamp at different locations.
3. Red is the main signifier colour in our design system, however users think this indicates live chat.
After consulting our UI design experts by bringing this to our weekly critiques, it was called out that red needs to be used as the main signifier colour in our design system. However from UT, users often thinks that this indicates that the agent is online. To mitigate this, the use of numbering tied to the red signifier helps indicate that this is related to the messages that are unread within that conversation.
Final solution
The final process is on mapping out all the scenarios including errors and edge cases. Using confluence, Jira and Figma, I created detailed UI specifications and worked with my PO, copywriter and accessibility managers to get final sign offs and approvals. I worked closely with my squad’s developers throughout the entire development and testing phase.
Customers now have a faster entry point directly into their new messages. We were able to see a 3% decrease in customer call backs after messaging consistently in the months following the release of the new message tile.
This initiative laid the groundwork for the unified experience, combining chatbot and agent messaging in our roadmap. Going forward, we continue to monitor the number of customers who are returning to their conversations to track the success of this feature.
Continuous improvement
Of course the work for the entry point doesn’t end here. From tracking feedback and usage of the tile, some potential improvements include:
More prominence in the affordance of the tiles, some users report struggling to understand that they are clickable and click to view all messages instead
The numbering of the number of messages in the conversation can be confused with the total number of unread conversations
We plan to use the learnings from this to implement messaging notifications into a universal inbox for all notifications in the bank.
Outcome
Other case studies
Making Ceba Smarter
Unlocking the future of Commbank’s AI chatbot.
Consulting costing tool
Design of a new web tool used by all EY people globally.