clinic website

Visit the site

Sole UX designer

Syllable Corporation

Sep 2017 - Jan 2018


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.


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



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.




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.


- 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.


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


The chatbot working for SRM(Seattle Reproductive Medicine) website


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.


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.


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.


3. static menu button


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


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.


(c) SURVEY EMBEDDED in Chatbot


Clinic Website Bot Design

overall design1.jpg


solving usability issues based on
design & user testing