coverphoto_1.jpg
 

clinic website
chatbot

Visit the site

Role
Sole UX designer

Company
Syllable Corporation

Time
Sep 2017 - Jan 2018

Background

Before doing this product, the company spent half of the year building and using 12 healthcare related bots on different channels, ex. SMS, Facebook, Alexa. 

Result and Problem:

User(patient) side: 
- Users love to chat with bot for the answer, but hope it’s intelligent and can solve their problems.

Organization side:
- The organization side showed huge interest in having chatbots to assist their work. But they don’t want to put their chatbot on other platforms, such as Facebook. They worried about privacy issue. They want to have chatbot on their website or product.

design statement

Building the Syllable Chatbot(button) on clinic website page to help their patients get useful information and answer the right questions. To let the user quickly understand the concept of the chatbot and how to use it is the main challenge of the design.

results

Data from the first 2 weeks after launching on SRM(Seattle Reproductive Medicine):

process1.jpg
 

process

From the initial research to the final launching product, we did 9 rounds of user testing and kept modifying the design based on user testing.

process.jpg
 

research

 

Started from learning Chatbot and Conversational User Interface, I read Google CUI guideline Facebook Messenger Platform and other articles to have a basic and theoretical understanding of the product of Chatbot and its design.

WHY CHATBOT?

- Chatbots respond to users' input.
- Chatbots can educate users.
- Chatbots can be very conversational, like Siri, which can create a stronger connection with the user.
- Chatbots can assist staffs in healthcare organizations answering health related questions to their patients.

CHATBOT VS. WEBSITE?

Most content on a website is static, and the user scrolls through the webpage and decides what to read and what to ignore.
Conversational style bots is more effective at educating the user because they follow a specific flow that is designed to teach the user something
 

Competitive research

In general the goal of the research is to understand how chatbots interact with the user and give advice on what the user can do.

From design aspect, I focus more on:

  • Is there a prompt message? If yes, what’s it like?
  • How do they show message notification
  • Font type, size, and spacing
  • Quick replies design
  • Do they allow custom identity? What do they allow?
  • Do they play sound?

 

competitive research.png
 

clinic website bot

OVerview

The chatbot working for SRM(Seattle Reproductive Medicine) website

overview.gif
 

iterations of design component
& user testing

 

(a) Home

 

What is Home button? Why we need it?
1. One pain point for the chatbot product is that users are likely to get lost at some point when chatting with the bot. The home button can help them get the list of options.
2. The clinic wants their potential customers to check their eligibility to be an egg donor though filling out a survey form. So  the "home" button can guide users to that step.
 

 
home_transition.jpg

1. Home button

In our first plan, users can reach to this step by chatting with the bot and the "check eligibility" button will appear at some point. Another way is to click "Home" button and the "check eligibility" quick reply button will show up. 

User testing feedback
The user didn't click the home button because of lack intention and had no idea what the "home" button means.

 
0home1.jpg

2. Home tip
 

To solve the "Home" button problem, I designed the Home Tip which appears in the intro section at the very beginning.

User testing feedback
Even though the user saw the tip before they started chatting with the bot, they still didn't try to click the "Home" button.

 
0hometip1.jpg

3. static menu button

 
0menu.jpg

After having iterations of failed home button design, I explored another direction - putting static buttons at the bottom of the typing bar, and changing wording from "home" to "menu". The other static button is the important feature - "check eligibility". 

User testing feedback

The final user testing showed an extraordinary result. The user successfully clicked both the "menu" and the "check if I am eligible" button.

 

(B) Quick reply

User testing findings


Some users didn't know 'quick reply' button is for them to click. 
Instead of clicking the buttons, they typed out the question which is the same with the one on the button.

User testing on usertesting.com

Solutions


To make Quick Reply more like a button, I added a hover shadow effect to the button. The user testing result was very successful after making this small changes.

0quickreply.png
 

(c) SURVEY EMBEDDED in Chatbot

survey.gif
 
formsintro.jpg
 

Clinic Website Bot Design

 
flow.jpg
 
 
overall design1.jpg
 

summary

solving usability issues based on
design & user testing

 
overall-summary.jpg