In this article I’ll show you a case study describing an entire process of designing a conversational UI for a B2B website, including fragments of the conversation script, basics of the communication theory and some of the tips and tricks I think make this project a bit unique.

Opening

It’s late 2016. Many people say conversational UI is the future of web interface. IM apps, chatbots, text-based UIs or emojis probably have never been more popular. Some might say it’s just another design fad or that text-based interfaces aren’t anything new, but frankly — let’s admit it — with the advent of iPhone Messages, Slack or Facebook Messenger the way we exchange information changed irreversibly. Text messages have became extremely natural way of communicating these days.

So naturally, when a chance arose for The Rectangles to work on a conversational website for one of our clients, we didn’t hesitate a single second.

Come on — show me one team who wouldn’t like to work on such project now.

Project objectives

Client:

Chop-Chop — a web development company

Our main tasks in this projects:

design a complete set of conversational UI assets

create a conversation script

handle most common types of conversational randomness (meaning f*cks and dfdffjhfdjhfkfs)

convey the brand’s character (also by using company’s brand hero, Cody)

raise user (interlocutor) curiosity and liking

display the company web development skills

I’ll show you how we did it step by step, but first…

A bit of theory

Let’s start with the basics. I think sometimes it’s important to make a step back for a short while before diving into more complex matters. In this case it really helped us. Believe it or not, but reading through all those fundamental definitions opened our eyes on a few creative solutions and boosted the entire ideation process.

And I think you shouldn’t skip this part too.

The principles of communication

There are hundreds of definitions explaining communication. The one below is my hybrid version of a few I found.

Communication is a process of sharing meaningful messages

The messages (communication in general) can be verbal or non-verbal.

The most common verbal communication tool is language,which is a set of symbols used to exchange information in the form of words that can be transformed into meanings.

Examples: Hello; Thank you; You look great today

Non-verbal, by contrast, refers to any type of communication different from words. It can be gestures, facial expressions, tone of voice, but also actions or symbols which have a common social meaning.

Examples: 👍, 😞, 😀

Communication is a process where all the aspects affect one another. It means that communication is holistic and that the entire process creates a system in which all the elements (all the messages) work together for the common good.

These messages are functional which means we use them to obtain desired effects, but also adaptive — meaning that, depending on the situation, they can be modified and adjusted in order to achieve better results.

Finally, the language we use to communicate is based on communication code, which is a set of principles and meanings. They create the base for interpretation. This communication codes are also called rules; there are two types of them:

Constitutive rules: referring to the sense and the meaning of particular words, and how we should interpret them. Also, they tell us how to understand a message in a particular context. Normative rules: helping to determine a proper reaction based on a given message interpretation. In other words, they tell us what we should and what we should not do (say) in a particular situation.

And of course one of the most natural and common way to communicate is a conversation. So when discussing conversational UIs, I think we should also take a look at a sample conversation definition:

Conversation is a talk between two or more people, usually an informal one

So is it possible to create, without powerful AI mastermind, an interface that would meet the communication principles?

This is what a conversational UI (CUI) definition may look like:

An interface based on a holistic system of functional, adaptive and meaningful messages exchange, in which both sides of the conversation use and interpret the language codes, maintaining and complying with the constitutive and normative rules in a friendly, informal way

And we wanted to create such UI.

Theory into practice — building conversational UI

Defining goals

Chatbots in B2B have their function. People visit such websites for a particular reason, because they want something. It’s like going to a restaurant or entering a bricks-and-mortar shop. Of course, sometimes people do it because they have nothing better to do or they just want to amuse themselves, but generally — there’s some purpose behind it; ordering food, buying a pair of shoes, or learning about prices. On the flip side, a waiter or a shop assistant also have their tasks and scripts to follow when talking to a client. A conversational website can work exactly the same way, and a chatbot’s role can be similar to a shop assistant or a waiter.

In this case we knew exactly what we wanted to achieve, as we’ve worked with Chop-Chop for years (actually, I co-founded it in 2010), but if you need help with defining chatbot’s / user’s goals, you can use User Centered Design Canvas.

We specified the following goals for our chatbot:

express Chop-Chop brand character

use the website per se to show Chop-Chop web development skills

provide the user with information about Chop-Chop services

encourage user to bookmark the site

learn something about the user (name, occupation, email, phone)

help getting in touch (CUI as a contact form alternative)

encourage users to sign up for the newsletter

Part 1. Designing the verbal communication

Building the conversation script

UX designers should be able to anticipate. In this project we knew that this is the only way for us to build a holistic communication system without AI support. We needed a great conversation script using an adaptive syntax which would also make the conversation pleasant and meaningful for users.

1. The conversation frame

Using a whiteboard, we started with a simple mind map. Having the chatbot goals in mind, we jotted down all the possible topics and conversation parts. We wanted to check quickly how complex the final script might be.

Early stages of writing conversation script

Then, we divided and arranged the parts in functional groups (we called them blocks). We already started to see some patterns. Some of the groups were goals-related (we called them cores), others were responsible for making the conversation less official (chatters), yet another group provided the user with options or additional information (extras), and there were also reactions to user answers. Finally, skips could fast-forward the conversation to a different script block.

The final list of script blocks: