The goal
Providing the customer with a seamless chat support system that sits within the HSBC consumer website.
Research methods
Competitor audit, persona study, accessibility audit & journey mapping
Providing the customer with a seamless chat support system that sits within the HSBC consumer website.
Research methods
Competitor audit, persona study, accessibility audit & journey mapping
Introduction
HSBC UK was exploring methods in which to improve and also create a seamless customer chat system which works on multiple devices. As mainstream banking has to be highly accessible, HSBC asked us to create a design concept as well as to design the conversational guidelines which will create a base template for all UI/UX practices on the service. We tackled the challenge by first doing extensive research on best practices from other companies who do it well. We looked at the overall experience, pallete’s used, timing and interactions which hit our target’s for near AAA compliancy.
HSBC UK was exploring methods in which to improve and also create a seamless customer chat system which works on multiple devices. As mainstream banking has to be highly accessible, HSBC asked us to create a design concept as well as to design the conversational guidelines which will create a base template for all UI/UX practices on the service. We tackled the challenge by first doing extensive research on best practices from other companies who do it well. We looked at the overall experience, pallete’s used, timing and interactions which hit our target’s for near AAA compliancy.
Competitor audit
There are a very extensive amount of chat support systems on the web currently, from whitelabel bespoke services to complex saas integrations such as intercom. This already makes it a highly overwhelming product sector to audit, however, we managed to collaboratively decipher the very finest examples and services, dissect what makes them so capable at delivering what the business wants as well as of course how well they solve the customer facing issues.
Interestingly, we found that most banks were not very streamlined with chat support or they just ultimately directed the user to a telephone number, this then allowed us a lot of leeway to conceptualise a potentially market leading product.
There are a very extensive amount of chat support systems on the web currently, from whitelabel bespoke services to complex saas integrations such as intercom. This already makes it a highly overwhelming product sector to audit, however, we managed to collaboratively decipher the very finest examples and services, dissect what makes them so capable at delivering what the business wants as well as of course how well they solve the customer facing issues.
Interestingly, we found that most banks were not very streamlined with chat support or they just ultimately directed the user to a telephone number, this then allowed us a lot of leeway to conceptualise a potentially market leading product.
Hypothesis & Persona study
HSBC bank is a mass consumer bank with a broad target audience, we understood the need to ideate and design for a wide range of users, spanning from 18 to 80 years of age, with varying levels of accessibility needs, and representing diverse industries, social classes, and preferences. Although we had some initial metrics on which customer segments were more likely to use online support services, we aimed to cater to everyone in our design.
Accessibility audit
We then performed an accessibility audit on competitors' support systems against accessibility standards. This involved manually evaluating user interfaces, features, and functionalities, as well as examining conversational standards compliance.
The findings of the accessibility audit were documented, highlighting any barriers or limitations identified. This included the strengths and weaknesses of each system, along with screenshots or examples to support the findings.
This then allowed us to gather data on common patterns, trends and best practices to eventually draw up our designs.
Ideation & Design
During the UI design process, colours used were carefully chosen to align with the bank's brand identity, they were used in a way to give minimum visual noise and low cognitive strain on the screen, whilst ensuring maximum accessibility. Contrasting colours were used for the chat bubbles to ensure readability and visibility, taking into consideration guidelines for colour contrast as well as text ratios to ensure that the UI is accessible for users with visual impairments.
The layout structure for the widget was designed with a user-centric approach, keeping in mind the ease of use and again being accessible at all times. The chat bubbles were laid out in a clear and spatial manner, with a clean and minimalistic design that focused on readability, simplicity and container responsive to all conversational standards from the HSBC support team.
Accessibility was a priority in the UI design, with consideration given to ensuring proper colour contrast, providing alt text for images, and following other accessibility guidelines to make the system is usable for all customer types. Keyboard accessibility was also taken into account, allowing users to navigate and interact with the chat support system using only keyboard inputs.
Conclusion & Handoff
Working very closely with the PM's, the product owner who was a master of support best practices, copywriter handling conversational standards, we managed to ideate, reiterate and design a very modern, recognisable and fully accessible support system that HSBC can integrate and grow over the years to come.
