Conversational UI Principles — Complete Process of Designing a Website Chatbot

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: