Case Study:
Building AI chat interaction patterns
Role
UX Designer
Duration
4 months
Overview
Leading the UI redesign of Ceba the chatbot, building a chat specific components library and rethinking patterns.
UX DiscoveryUI DesignA long awaited opportunity
In the past years, our chatbot Ceba’s outdated tech stack and UI has set limitations on it’s potential to provide better customer experience. There were endless can’t do’s on our list of UX improvements.
Although this uplift was focused on the UI uplift, my stretch goal was to set the foundations for future messaging patterns to align with our future vision and address current pain points where possible
Vision storyboardIdentifying interaction patterns
As a start, I mapped out the end to end journeys of Ceba using several key scenarios in order to identify all the components and patterns that make up all Ceba interactions. This exercise allowed me to breakdown the interactions into themes and set out a skeleton for our future pattern library.
Breaking down into epics, stories and dev pipeline
With all the components now identified, these are translated into stories for us to design and build with. I worked with the developers identify what is in scope for this initiative and what is a future backlog item.
Due to the tight quarter deadline, we had to split the build between multiple squads. This meant that we need to ensure design is well ahead of development and all priority dependencies such as core foundational components are well considered.
Cross team collaboration is key to ensuring components are fit for purpose and aligns to our design standards.
Chatbots are always a snowflake when it comes to UI. We needed to ensure we are using our design system guidelines and tokens where ever possible, however in many cases we had to pivot and think about new interaction patterns that can better cater to chat interactions.
This involved numerous design critiques, design system team consultations, as well as tech and business discovery to figure out what is feasible.
Designing foundational patterns with the future vision in mind
I then had to consider the future state, where we think about bringing agents into the same conversation as the chatbot, we would need to think about things like the ability to differentiate different actors, and having system messages to indicate status and what's happening.
This means for each of the components we were designing I had to list out all the considerations and then discuss with the engineers what we could achieve for Day 1
A centralised source of truth for all chat components and patterns.
With the completion of the Ceba components library, this sets us up to now focus our efforts to future capabilities discovery and new UI components that can support better customer experience!
Other case studies
Unified Messaging
Helping customers find their messages quicker.
Woolworths customer journey
How can Woolworths continuously improve it’s digital capabilities to grow consumer adoption of digital channels?