Looking For Fashion?




How to wireframe a Chatbot?


An approach on hand-drawn Low Fidelity Wireframes.

There is no substitute for the good old fashioned way of picking up a pen and paper. Ask any Illustrator, Graphic Designer, Animator, or Product Manager they’d tell you the same. This is what Wireframes are, an easy way to transform sketches. Usually incorporated at the start of a sprint in Product Development, they are the stepping stones to a Prototype and Product MVP.

In this article, we look at the step by step approach of how one can create a Chatbot Wireframe and Dos and Don’ts of the same.

The type of wireframe we will work on is a hand-drawn Low Fidelity Wireframe.

Problem statement

Demonstrate the User experience for a chatbot that provides general and disease-specific COVID-19 information. The info is from trusted sources such as World Health Organization (WHO) and The Centers for Disease Control (CDC). The user group is general users and the channel is Mobile Application.

(Chatbot implementation and usage has seen an unprecedented spike amidst the COVID19 crisis. Hence the above scenario)

Activities such as Market Research, Competitive Analysis, User Interviews, User Personas etc. are done before Wireframing. For now, we are going to leap frog to Wireframing based on the problem statement shared.

Step 1: Information Lineup

The first step is to identify information that the user expects and layout the hierarchy from the problem statement. The simplest way to do this is to identify your 4W’s (Who, What, When, Where). Let’s try and answer these.

Who is the user? (This helps us in identifying the user and the information to be shared)

What is the intention/motivation behind the bot? (It ensures we do not steer away from the original ask)

When will the bot be used? (It helps us to identify the user motivation)

Where will the bot be used? (This assists with the real estate and aspects such as screen orientation, user view etc.)

Let us line-up the 4 W’s we need to cover in COVBot (My inspiration for the name might be the word “Brangelina”). This info is grouped under Primary or Secondary.

Since the focus is on wireframing, its okay if you can preempt some and not all categories.

a) COVID-19 guidelines (Primary): These would be both factoid based and non-factoid ones where the info is fetched from trusted sources such as WHO and CDC.

b) COIVD-19 statistics (Primary): Make users aware of the latest reports, no. of cases, deaths etc. It is important to have a Data visualization technique zeroed in on and wireframe the same. More importantly, if the data is present in a static or dynamic way.

c) Helpline numbers (Primary): The dial-in numbers of the concerned authorities are showcased to the user with the functionality of making a call.

d) Mental well-being (Secondary): Involves therapeutic conversations by analyzing the sentiment of user input.

Once you know your content, the next step is to map the content towards a hierarchy.

Step 2: Information Hierarchy

This is where we derive hierarchy insights of the wireframe based on the content curated in Step 1.

Typical user behavior suggests when the volume of information to be shared is high, users tend to get confused and the information to be shared gets lost along the way. To avoid this, ensure the Conversational Design principles of Chabot development are to be followed.

The Wireframe acts as a Conversation purview. The idea is to connect and communicate with the user.

Below is the first draft of the information hierarchy

The first draft of information hierarchy for a user acessing COVBot
COVBot Information Hierarchy

The elements of the user screen are broadly divided into three sections with varying real estate.

a) Header Menu: It contains the Logo and the Name of the Bot. A must-have combination to re-iterate the purpose of the Bot and instill brand recognition within users.

Notice, there is no login button at the Header Menu. As in our case, the user downloads the COVBot app, submits their email id, provides necessary access controls and voila! Additionally, a tiled view can be provided in the header menu to add functionalities in the future.

b) Conversation Box: The Conversation box is allocated the maximum real estate as it has varying output. This varying output could be any of the info we lined-up earlier and classified as Primary/Secondary. It is a crucial component of the Chatbot wireframe.

c) Footer Menu: Lastly, we have the Footer Menu which contains all the touchpoints for the user to interact with COVBot. These touchpoints could be text input or actionable icons.

Now that we have identified both the information and its hierarchy. Let us wireframe the conversation box.

Step 3: Conversation Box

The idea here is to wireframe basis the scenarios identified in Step 1.

Some quick pointers before wireframing your conversation box are :

  1. Do not attempt to make this an if-this-then-that decision tree. This is a Wireframe to highlight scenarios before the NLP and Bot Training come into the picture.
  2. Cognizance of your conversation cycle. Avoid lengthy conversation cycle to give users the requested info. This has an impact on Conversational Experience, Drop off Rates, User Retention, and Customer Satisfaction scores.
The North Star for conversation box is Usability and Adoption.
COVBot Wireframe

The above wireframe has the below elements:

a)Text Bubble: All conversations are inside an outward pointing rectangular shaped text bubble. The type of text bubble depends on the dialog inside. Unless its a Manga comic, we do not want to attract too much attention to our text bubble.

b) Conversation icon: To make user and COVBot’s interaction legible.

c) Salutation: Also known as the Conversation starter/Welcome message. Typical must haves for this would be keeping it short and crisp. The text is shown through dashed lines as typography is not a part of low fidelity wireframes.

d)Actionable icons: These represent the Primary and Secondary information that COVBot provides under Step 1. These can be inform of Icons, Image cards, Carousels etc. consumed from trusted sources such as WHO/CDC website.

COVBot Icon Description

Another way to have them incorporated is within the User input as shown in the wireframes below.

COVBot Wireframe
While, there is a definite scope of improvement in how one draws their grid lines. Visual appeal is not our prime concern as long as the wireframe communicates efffectively to the audience.

e) Response purview: As the name suggests these are short, crisp and act as an introduction to the actionable icon. The source of response purview in our case is the WHO/CDC website.

Step 4: Wireframe Iteration

Source: Dilbert Comic Strip

Now that we have the first cut of wireframe around how COVBot works. The above picture sums up “What-Not-To-Do”.

Iterations are crucial to the Wireframing process. The principle of Lean UX states that with every iteration we get better. Its okay, if your wireframe looks like its drawn by a six year old (No offence to the six year olds of the world!).

This is an iterative process and should be treated like one. The wireframe iteration could come in from your Designer, Client or Team members. During these they may pose questions. If they do, so you are going in the right direction. Wireframes should always pose questions. For the above drawn Wireframes, one can also pick up the scenarios from Step 1 and wireframe those. This is akin to identifying User Journey.

Track your wireframe iterations by versioning them.

This brings us to the below questions.

Which type of wireframe should one go for? How much details should the wireframe capture?

The answer to above depends on the audience for the wireframe. If its internal, Low fidelity wireframes are a good point to start. If its external, High fidelity wireframe made using tools such as Balsamiq, Axure and InVision can be used.

Conclusion

The best of wireframes tell a story, they depict what can be achieved. Unlike websites and applications, chatbot wireframes pose several design limitations based on the interaction channel they are hosted on. However, this should not deter you from wireframes, as they are the perfect way to ensure usability for any Conversational platform let alone a Chabtot. Incorporating them in the Product cycle ensures user is the hero of your Chatbot story and every story needs a hero.

Would love to hear how you wireframe your Conversational Platforms. Have fun wireframing, everybody!


How to wireframe a Chatbot? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.