Building chatbots poses a set of design questions before you that are completely different from any you have faced before. Bots are different from websites and apps in that the fundamental elements of every chat interface are immutable (chat bubbles and a user input area).

As such, rather than thinking about layout, and visuals, bot builders have to think about messaging and flow.

That said, there are a few elements that do continue from conventional interfaces into the conversational space. With TARS bots in particular, the design section is the greatest example of this. It allows you to control the visual feel of your bot which is a traditional design consideration that you face when making a website or an app as well.

→ Before you dive in, here is a help doc which explains how to make design changes to your Tars chatbots — http://help.hellotars.com/design/how-to-make-design-changes-to-your-bot

So how should you use this tool?

Our overarching aim with the design section is to make your bots feel like a real part of your website instead of a mere add-on. We understand that the default TARS colours of blue and grey message bubbles on a white background might not be familiar for your users.

So here are two ways we suggest on how to effectively use the design section :

1. Stick to the basics

The first method is simple. Make the bot colour scheme the same as your brand colour scheme. Chances are, your website uses this colour scheme, so the bot will not seem out of place amongst the other elements of your site. We have seen this in action and it works well. In particular, check out Northstories.io. The bot really looks like it could be a part of the site:

2. Take inspiration from your preferred messaging app

Messaging apps(think of WhatsApp, FB Messenger, Telegram, Kik etc)are ubiquitous the world over. Your users probably use at least one of them everyday. You probably use one everyday yourself. Take advantage of this, and make your bot sport a similar colour scheme to these apps. The user will likely recognise the colours and the experience will feel familiar.

It is worth noting however that this method works best if your customers all come from one particular region. There are a lot of popular messaging apps out there and they all look different, so if your customers come from all over the world — one particular app interface will not be as familiar to all of them. If most of your customers come from one region though, you could look into using this method of design, because regions as a whole tend to prefer one specific app. So for example, if most of your customers reside in India, you could use the WhatsApp colours. If most of your customers are in Japan, where LINE is the most popular messaging app, then make your bot look like LINE.

3. Custom Chat Background

Playing around with the chat background of your bot to relate it to your brand, not only helps in making the bot attractive but also drives credibility. Having your logo as the background helps your customer connect with your company right at the first step of their interaction. This primarily adds a personality to your bot. Having said that, it doesn’t make sense if you set the background as your logo if you’re deploying the bot on your website.

The best way to go about is to add the logo as the background if you’re using the chatbot in your landing pages or other marketing campaigns (SMS, Email, etc).

4. Make it visually appealing

Picking up from the point above, if you’re using the chatbot as independent links for your marketing campaigns or landing pages, adding a page background makes it agreeably more appealing. By default the page background is set to a neutral grey layout and can be customised to the colours of your brand. Check how Montana Vehicle Division has done this. They have colour schemed the page background to relate to their company. Pretty cool isn’t it?

While bots offer a new type of user experience, as a bot maker you still need to consider certain standard design practices that go into any piece of software.

A great example of this is the physical appearance of your bot. Using the TARS design section, you can make your bots feel familiar to your users and thus improve their experience. To summarise, we worked really hard on the design section, please use it 😛

Read more of Bot Building Best Practices :

https://blog.hellotars.com/chatbot-building-best-practices-3-rich-media-content-bcee038f909f

https://blog.hellotars.com/chatbot-building-best-practices-3-rich-media-content-bcee038f909f

https://blog.hellotars.com/chatbot-building-best-practices-3-rich-media-content-bcee038f909f

---

Like the bot design section and my thoughts here? Click the applause below. It lets others see the story and helps me in reaching out to a lot more people 🙂

We are a bunch of nice people working to create something really cool and valuable for our customers. Interested in working with us? Drop me a line at ish[at]hellotars.com