How we created the best conversational UI ever

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! 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 😔

When chatbots go wrong When chatbots go wrong

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.

Look how boring chat used to be in movies:

Old way of displaying chat

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

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…

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!