My high-level process

– Interviews with Customer Care to understand their needs and customer enquires to determine initial help conversation prompts
– Market research to inform UX and UI
– Interviews and workshops with 3rd party development team to understand UX and UI limitations
– Meetings with Vodafone Global Style Team to understand the Global Vodafone UX and UI
– Design, test, iterate

Defining the brief

The initial challenge was defining the scope of an MVP, as we didn’t know the detail of the UX and UI feasibility of the 3rd Party Solution

Understanding the problem

Environment scan

Determining initial UX direction

By understanding the business and customer needs, and drawing from existing chat experiences, I defined an initial list of key journeys and elements, and Design Principles to guide decisions on UX and UI pattern choices.

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

Technical feasibility

Using the discovery insights, I created basic wireframe journeys of a happy path and some conversation variations to use as a visual conversation starter with the 3rd Party Product providers to understand their product’s UX and UI feasibility for our needs.

I also went through each UI 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.

Working with the 3rd Party was iterative and involved constant check-ins as the UX/UI became more defined.

Vodafone Global Chat UX

Another consideration for the design was to understand and incorporate as much of the Vodafone Global Design. Each country were allowed to evolve the Global Design as needed, but there was always an idea that the Global Design would eventually cater to all countries, and so it was a a requirement we aimed to utilise the Global Design solutions as much as possible.

I reviewed the Global Design documents to identify UX/UI solutions. I mapped the Global designs to our journeys and needs to identify what I could maintain from the Global Design.

And prepared questions to ask the Global Team.

Unfortunately their design would require too much time from our team to replicate, such as their ‘tray’ design, so I had to rely more on maintaining the visual elements as a way of aligning with the Global look and feel as much as was feasible.

Designing key elements for the happy path

Evolving the intial wireframes and 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.

More UI elements

Addressing native OS experiences

Notifications were important with TOBi because responses from support staff can come at any time, even a day later, so we wanted to make enabling notifications as frictionless as possible. Usually, apps allow users to enable notifications from an operating-system modal, however, due to technical limitations with our app and the 3rd party tool, we had to direct users to the app’s Settings. I mapped both distinct iOS and Android journeys to explore these experiences for any major blockages. While iOS users would need to manually return to the Vodafone app, this tested fine without any drop outs.

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

While the MVP chat bot was limited in what customer inquiries it could help, 39% of customer inquiries were resolved by TOBi in the first weeks after launch!