Vodafone AI Chatbot UX/UI
A UX/UI PROJECT
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.
– 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
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
– 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
– 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
– Opening chat module from chat button (and closing)
– Typing indicator
– Handover to human agent
Defining the UX
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.
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?
More journey design
View a prototype video
39% of customer inquiries were resolved by TOBi in the first weeks after launch!
Vodafone Bundle & Save
LGBTQIA+ Events App
Aust. Export Licensing
Reducing a site's carbon output
Vodafone Secure Login
Vodafone Chat Bot
Vodafone Click & Collect