Vodafone AI Chatbot UX/UI

A UX/UI PROJECT

Introduction

TOBi was Vodafone’s first AI powered chat. It was asynchronous, meaning one chat could occur over days at different times, and it would transfer users from the AI chatbot to a human agent when needed.

The Challenges
– Improve customer service while reducing calls to care with Vodafone’s first AI Chatbot
– Adhere to brand style guidelines, but as it was being built using an out-of-the-box 3rd party product, it had limited UX/UI customisation.
– Adhere to Australian Vodafone digital style guide while aiming to introduce new Global Vodafone chat styles

Discovery

Understanding the challenge

Interviews, data analysis, market research

– Interviews with 3rd party development team to understand tech limitations
– Market research to inform UX and UI
– Interviews with Customer Care to understand their needs
– Investigating data about customer enquires to understand user needs
– Meeting with Vodafone Global Style Team to understand their chat design experience

Defining the brief

The discovery phase defined my scope of journeys, elements, and best practices to design

Key journeys
– Entry and exits
– Asynchronous conversation flow
– Multi-user account flows
– Enquiry solved by chatbot
– Enquiry transferred to human agent
– User directed to external links
– Notifications (Activiating and receieving)
– Fail/error scenarios

Key elements
– Chat container (Close, minimise)
– Conversation elements (speech bubbles, time stamps, typing indicator, suggestion chips, buttons, video and image content, keyboard
– Links to external content and return function
– Chatbot and human agent icons

Animations
– Opening chat module from chat button (and closing)
– Typing indicator
– Handover to human agent

Defining the UX

Design

Defining styling feasibility

As a challenge to the UI design, the 3rd party product was limited in what styling could be changed.

To better understand this, I identified all the elements and layouts required by the UX, sat down with one of the 3rd party developers, and went through each element and layout to identify what spacing, colours, fonts, etc, I could change.

Going through this in detail first saved iteration time by giving me clear styling boundaries.

Designing key elements for the happy path

Drawing from pattern and best practice research, I started with the key conversational elements and interactions. I developed the styling based on the app style guide and common chat UI designs.

Interaction design

Addressing an unhappy path

In Phase 1 release, the Chat button would only be available from the home screen.
If TOBi directed users to content on another page, and that content wasn’t useful or they wanted to ask more questions, the user would need to navigate back to the home screen to ask for more help.

How Might We make it easier for the user to return to the home screen chat?