top of page

Project: WhatsApp chatbot enablement

Role: Experience Design

Duration: May to July 2022

Project objective

As a customer support and self-service platform, we aim to support and solve our customer's needs. In fact, many of our customers would like to contact us through WhatsApp, and Facebook because they can find the brand easily. Therefore, it is potential to enable the chatbot system to social channels and do further actions like continuing to purchase tickets or do extra promotions. Next, WhatsApp will be an example to demonstrate the design process.

Goal Statement

1. Lessen the workload of customer service agent

2. Provide a neat and easy way to communicate with the chatbot

Design Process

WhatsApp Channel Capabilities

Due to the capabilities and limitations of specific platforms like WhatsApp, they don’t have many clickable UI components such as the ‘Quick reply’ button. Therefore, from a design perspective, I was responsible to understand all the UI components that exist in WhatsApp and designing the following experience by the library.

Market Research

When developing a new product, it needs to understand how the other company is doing. I was being a new user to try the chatbot from companies and jotted down the pros and cons.

// Pros and Cons - KLM airline //

螢幕截圖 2023-03-05 上午12.42.03.png

// Competitive Audit //

Analysis of what we can reference and avoid creating a bad experience. This chart is part of the market research, to point out the comments in different segments like brand identity, humanistic UX design, content quality, and intent coverage.

User Journey

Getting started with a user saying hi, chatbot greets. The flow will end until the problem is solved, otherwise, our human agent will come to support the customer. Here’s the highlight: feedback or rating, because this is a new product of the company, we have to track the data and customer feedback for the next step to elevate our performance and intent accuracy.

Design Principles

Adopt the current guideline and add new design principles that create a focus to chatbot. The principles helps the team remember the chatbot proposition and responsibilities.

Define Conversation Guideline

Before the development stage, it is important to define all the UX and UI guidelines so every content can follow the same style and format. This guideline represents a design standard for everyone, like during the development stage, the developer will follow this guideline to clone all the existing intent to the new backend.


I have created the initial prototype for demostrating the flow of asking the baggage allowance. During the conversation, the bot will guide user until the find the answer.


Over 30+ conversational flow

Desktop UI

Thanks for watching.

bottom of page