Case Study:
Building a chat component library
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.
With Ceba’s migration to a new platform and the organisation shifting to a new design system, the opportunity finally came upon to redesign Ceba’s UI to align with our new design system and standards, as well as rethink our design patterns to set a better foundation for future uplifts.
I was given the opportunity to lead this piece of design uplift, to coordinate the design components pipeline and work with our tech lead to build and release this all within a quarter - tight timeline! I wanted to ensure not only do we design beautiful and seamless user experiences, we also set the foundation for the other teams now venturing into AI chatbots and looking to integrate with Ceba. So I set out to create the Ceba component and pattern library with aid of a fellow UI designer.
Identifying 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.
Simple interactions are extremely complex
A message input just needs to allow customers to type what they want, whenever right? Well, yes, in the case of a regular messaging application like Whatsapp. For Ceba, we still needed to consider tech limitations in the nature of how it processes customer enquiries, capture data, call APIs and errors.
So I needed to clearly define when a message input should be disabled and consider the waterfall effects. Sometimes this means that there is no perfect solution for every scenario, and we needed to weigh the pros and cons and risks of the interaction pattern, and whether this aligns with our future vision capabilities. This process involved lots of bartering with the developers and problem solving on workarounds - a process I oddly enjoy as a casual coder to deepen my technical understanding.
A centralised source of truth for all chat components and patterns.
Using the new figma dev mode, I captured all specification details in our figma components library and detailed all accessiblity, animation, behaviour guidelines. I worked really closely with our developers to ensure they understand the specifications, and that I covered all scenarios and edge cases.
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?