How we created the best conversational UI ever

Dec 17, 2018 · 782 words · 4 minute read

This article was previously published on Medium

Microsoft and Google are pumping out frameworks, plugins and guidelines making it’s easier than ever to create a conversational UI. But are these plugins and frameworks actually enough to create a delightful experience? We experimented with doing it differently!

Conversational UIs are not just hip and happening, they pop up everywhere. Apple, Google and Amazon are scrambling to put microphones in your home, chat-bots are emerging like mushrooms on Facebook Messenger and Skype, and many websites are adding plugins to their websites so they have another way to interact with you. But I feel these conversational UIs are lacking something…

*Alexa is now also available on your wall!*

Problem 1: context 🔗

Common examples of problems with context are when a conversational UI ‘forgets’ about things you asked it earlier or when a chat-window on a website doesn’t know which page your are currently viewing.

Conversational UIs also don’t understand the context of compassion: whether you are sad, angry or happy, the computer always answers the same 😔

Problem 2: it’s all text 🔗

Conversational UIs focus very heavily on text, even though there are many more ways to interact.

Let’s say you’re on the street and you ask Siri “is this restaurant any good?”. You then have to give it a name and address even though you are right there. Why can’t you just point your camera at it?

This holds for chat as well. Usually chat windows only accept text as input. Compare that with the cool ways you can also interact with people:

Different interaction methods by Isil Uzum — *By Isil Uzum*

Problem 3: forgetting about the whole picture 🔗

Especially on websites, conversational UIs feel completely separate from the rest of the user experience. Designers and developers put a lot of work in making a website feel like a consistent experience and then chat-plugins are enabled and break that experience. Especially those boring ‘bottom-right’ chat-windows (the ones with the annoying pop-up notifications).

Movies and tv-series had this problem as well and they solved it. In the early days texting/chatting was shown with the actual phone or computer. It takes away valuable screen-time and it is a very boring visual.

Old way of displaying chat — *Look how boring chat used to be in movies:*

New way of displaying chat — *and look how cool it is now:*

Design experiment 🔗

We love innovation and experimentation at Angi Studio (my employer) and this year we experimented with chat-bots. Our goal was to create a conversational UI for our website that “introduces Angi Studio in a fun way”.

We wanted…

a structured conversation, inspired by conversations in computer games. With a structure we knew we could create a more natural flow, where answers of the user would influence the rest of the conversation
integration with other elements on the site
the chat to have a distinct feeling. A more dynamic and lively way of interacting than our other content. As we use a lot of emojis on our site, we wanted to use emojis as the base of our chat-agent

We immediately knew we were on to something… 🔗

The first thing we created was an avatar that does the conversation instead of a simple chat-box. The avatar interacts with the page: flying behind other elements, rolling and resting on boxes.

Chat interacting with the site — *Our chat avatar interacts with the site when you scroll through the page, instead of staying in the bottom-right corner. It already feels alive and more fun to use, no?*

We then started creating different prototypes: playing games in the page, cool animations, personalizing the website-content based on user-given answers…

User entering name and seeing their name appear everywhere on the website — *We personalize the content on our website using the answers people give in our chat*

Our second “oh my god” moment was when we created a prototype where the smiley answers a question by showing the answer on the page. This way the chat is really interacting with the content.

Finding content on the website — *Instead of answering a question using text, we navigate to, and highlight the content a user asked for*

The chat-prototype never went live, sadly, as we are working on even cooler stuff. But I do feel we that in just a short time we created something way more fun to use than any other chat-bot out there (prove me wrong! 😅).

Some exit-thoughts 🔗

Our experimental chat-bot was fun to use it almost felt ‘alive’. I think that’s because it shows agency and emotion: agency through an understanding of its context and emotion through animation.

In the future I will experiment more with how we can design intelligence and my assumptions are agency, emotion and empathy are key to creating the feeling of an ‘alive’ intelligence.

Really curious to hear your feedback on this!

Huge thanks to Sangeetha Jayaram and Angi Studio!

design