American Express Web Chatbot

Using emerging technologies such as AI/ML to improve the customer experience within the web-based chat window.

Project Timeline:
24 hours | 2023
Team Size & My Role
Myself: UX Designer
Team: 3 UX Designers,
3 Web Developers, 1 Data Scientists
Tools Used:
Figma
Zoom
Slack
GitHub
Project Overview
Problem Space
24-Hour Amex Hackathon: Our Team (3 UX Designers, 3 Software Engineers and 1 Data Scientist) collaborated with Amex to explore AI / Machine Learning solutions for improving their web chatbox user experience.
Constraints
During the project, we were provided with only the How Might We question, lacking any data on the current performance of the chatbox, the technologies in use, or a style guide.
Goals
We aimed to come up with a high-impact, feasible AI solution to enhance the web chatbox UX for a strong Hackathon presentation.
Solution: AI-Powered Virtual Assistant providing faster, personalised response and sending chat notifications
1. Personalised and Humanised
The AI-Powered Chat Assistant taps into advanced natural language processing and machine learning. It swiftly grasps user account details and responds with personalised and human-like interactions.
2.   Independent Issue Resolution
This virtual assistant goes beyond language comprehension; it autonomously addresses issues by collaborating with relevant teams through machine learning.
3.    Automated Updates
With precise timeframe updates, the virtual assistant minimises human involvement. Customers get timely notifications straight from the system, guaranteeing a seamless and well-informed experience.
Process
An Unforseen Challenge
The Data Scientist was absent
Collaborating remotely presented its challenges, especially during the early stages of our hackathon journey. An unexpected twist arose when our dedicated Data Scientist was unavoidably absent due to personal reasons, adding to the complexity of the situation.
Rather than letting this setback hinder us, I took this opportunity to:
Delegate research tasks among us UX Designers, enabling quick analysis of research findings, translation into digital resolutions, and clear communication of designs to software engineers.
Coordinate multidisciplinary check-in meetings every 2 hours, serving as crucial touchpoints for progress updates and issue resolution. This proactive approach ensured alignment, maintained focus, and promptly addressed any challenges encountered along the way.
Research

Optimising our software engineers' time for crafting a functional solution, we chose the following 2 research methodologies as these were the fastest ways to gather information we needed for our solutions.

SECONDARY RESEARCH

Merging tech and human touch for personalised interaction can enhance customer experience and bring success to business

Based on our secondary research, we discovered that AI / ML technologies can contribute to a more personalised customer experience that feels remarkably "human", ultimately enhancing customer satisfaction, fostering business growth, and reducing labor costs.

of customers say they’re more likely to buy from brands that deliver a customised experience.
of the costs in customer support services can be reduced by using chatbots.
of users prefer using chatbots for personalised services in financial institutions.

CONVERSATIONS WITH AMEX CUSTOMER SERVICE

Virtual assistants are capable of handling multiple tasks that were traditionally performed by human representatives

Additionally, we engaged in discussions with chatbot users, the American Express Customer Service Team to ascertain the specific tasks that customers can and cannot complete online, so that we could narrow down our scope for solution.

Inights:
Majority of tasks could be efficiently handled online, except for those requiring heightened identity verification. Chatbots help freeing up human representatives to handle more complex issues.

PRIMARY RESEARCH- USER INTERVIEWS

Yearning for instant and efficient assistance

We recognised that customer opinions held the key to our solution, so we talked with 3 American Express account holders to unveil the core elements of customer satisfaction and expectations, shedding light on the factors that define a positive experience.

A consistent desire emerged - An earnest longing for immediate and efficient assistance from the bank.
Therefore, we decided to shape our solution direction by adopting the 9th strategy:​Streamlining Workflows for Greater Efficiency
This aligned with American Express's goal to enhance the customer experience, and their users defined satisfaction based on the speed and efficiency of the assistance provided by the bank.

Define
How Might We
use emerging technologies such as AI and ML to improve the customer experience by developing an intelligent system that can automatically understand customer needs, provide efficient personalised solutions whilst minimising the need for human intervention?

PROTO PERSONAS

Empathising with the American Express chatbot users

We developed proto-personas named Leah to present our target customers - who used American Express Chatbot.​It was crafted using research data and insights from a team member who had encountered the process of seeking reimbursement from a partnered airline company through American Express. Our personas played a guiding role throughout the ideation phase.

Ideate

THE STORYBOARD

Enhancing efficiency and user experience through streamlined workflows

To enhance comprehension and highlight our proposed enhancements during the presentation of our solution in this hackathon, we opted for a storyboard. Enhanced with intuitive illustrations by one of our UX designers, it offers a clear visual depiction of the journey and solution.​The below storyboard shows the AI powered chatbot efficiently handles user enquiries, offers accurate assistance, and resolves queries through the implementation of machine learning. The storyboard provides a concise yet powerful overview of the transformative impact our solution brings to the user experience.

NAVIGATING DESIGN CHOICES

Suggestion Chips VS Conventional Text Conversations

As a team, and in harmony with our software engineering team's aspiration to showcase their functional GitHub work, we discussed whether integrating suggestion chips might extend the development timeline on their end.

After multidisciplinary discussions, due to limited time, we opted to proceed with a conventional chat conversation approach, prioritising a functional product ready for presentation.

STYLE GUIDE

Bridging the Design-Engineering Gap

When handing off the design to our software engineers, Figma's code functionality posed an integration challenge, hindering functional solution development. To overcome this hurdle, I quickly created a simplified UI library adhering to the existing design system of American Express's chat function. This strategic move not only allowed for the incorporation of future updates but also ensured alignment with their established standards.

Delivery - The solution

PROTOTYPE

High fidelity prototype

Through Machine Learning, our AI powered Chatbot can:

· swiftly grasp user account details and responds with personalised and human-like interactions
· address issues by collaborating with relevant teams
· send automated update to users, minimising human involvement

The developers crafted the ultimate solution on GitHub, whilst the prototype was meticulously designed in Figma.For a recap of the conversation script, simply scroll within the chat window above or below.

Key Learnings

KEY LEARNINGS

Team Communication, Role Synergy, Speak the same Langugage
Team Communication
By keeping all team members informed and engaged throughout each stage, potential issues were swiftly detected, allowing for collective problem-solving.
Role Synergy
Gaining an in-depth understanding of each team member's role and capabilities is fundamental. This insight enabled us to harness our collective strengths effectively within the allotted timeframe, fostering seamless collaboration.
Speak the same Language
Learning a bit about each other's jobs is really helpful. For example, if we designers understand a bit about coding, we can create designs that fit well and prevent the design of elements conflicting with the development process.
Thank you for reading. 🫶🏻