Website Chatbot Design Guide for Non-Designers

Please note that 'Variables' are now called 'Fields' in Landbot's platform.

No-code is here to stay. These tools offer a simple way to achieve results in all areas of development from flows, web insertion, creating new pages to design editor, etc. Landbot is not an exception. However, even with a no-code designer, designing the right chatbot interface for your brand can be hard.

From UI/UX design perspective, it's not very beneficial to use the colors, sizes, and fonts that come to mind at that precise moment. No-Code tools make the users' daily work much easier, but be careful!

Misuse or not following your brand r product guidelines can be a double-edged sword.

For example, in sports, one of the first things that you are taught is the rules—you learn what is allowed but, above all, what is NOT allowed.

We cannot start building or designing something without being clear on or understanding the rules of the game.

One of the strengths and pillars of a solid and recognizable brand is coherence and consistency. Brand guidelines help us to always maintain that coherence in all the products we are going to create.

When we talk about guidelines, it's not just about putting the company logo everywhere. Colors, typography, tone and voice, and use of negative space are just a few examples of brand elements that, when consistent, help very fast some of the world's best-known brands.

This article will explain the most essential points to consider when you are designing your chatbot.

OK, but… I Don’t Have Brand Guidelines

If you don't have brand guidelines, you should read these five reasons to have them:

1. Brand Consistency

When a user visits your website, you are showing them your business card. They are perceiving… soaking in your brand regardless of the content they actually consume. By establishing rules and restrictions, you can communicate consistent brand identity.

Consistency is vital to make your brand recognizable and reliable.

2. Sets Standards and Rules

And... How do we use the visual elements? Brand guidelines should include when and how to use a logo, how to space it, color palette usage, typography, use of negative space. And above all, it should include how to apply the rules to specific products/projects, in this case, a chatbot within your website.

3. Avoid Usage Confusion

This problem starts to arise when your brand or your company starts to grow. We must avoid the telephone effect and the fact that each person interprets the use of the brand in their own way. The guidelines ensure the coherence and cohesion of your brand are maintained and understood in the same way by all members.

4. Relationships and Scalability

If you share projects with partners, affiliates, investors, or journalists, it's your responsibility to provide them with guidelines to help them optimally represent our brand.

5. Get Value

Remember that without guidelines, it's nearly impossible to keep your branding consistent. So, to build and maintain a powerful brand, you need brand guidelines to achieve it.

Yeah, We Have Brand Guidelines

As mentioned in the "10 Usability Heuristics for User Interface Design" article by Nielsen Norman Group, failure to comply with brand style guidelines can cause you to miss some basic usability points that lie at the core of positive user experience.

Hence, your brand guidelines should always be followed and applied thoroughly.

Here's a quick brief regarding the Landbot Brand application:

Pink: For call-to-actions & highlighted elements
Dark Blue: Text and dark backgrounds

Following the guidelines, we can make our chatbot look very on point with the brand.

‍

Let’s Start!

Once you have your chatbot completed, proceed to the Design stage of chatbot creation.

Navigating Landbot's Design Editor

The design section offers two options:

Start from scratch
Build the look around a template

For this tutorial, I used a template closest to the final result I want to achieve:

General (Background & Fonts)

If your corporate font isn't included in the selection of fonts in the designer, you can use simple CSS to add any of the fonts from Google Fonts, which offer a much wider selection.

In this case, the Nunito font available in the editor font selection is very similar to our corporate font, so I'll use it for the purposes of this example. I assigned the font size of 16px as that is our base size in Landbot guidelines.

Next, I apply a gradient background with two colors that we use in Landbot: #FFFFFF #E4E6F6 by entering these color values in the corresponding fields.

Layout (Header & Launcher)

In this section, you can modify your Header Style.

In Landbot, we use the Dark Blue (#3A3D5C) to highlight and achieve contrast between the main content and the header.

After the Header updates, I'll move on to modify how it will look when the bot is closed. In Landbot, we usually use our bot icon with our Pink Primary Color in the background.

Chat (Avatar and Elements)

The next step in this section is selecting the correct color for our content. I am going to adjust the message bubbles, buttons, and forms elements.

Messages: This element is very important to differentiate the conversation flow between the chatbot and the user. Bot message will use the font in Landbot's Dark Blue on a white bubble background. User messages will display on the Pink background to align with other user interactions, such as button CTAs.‍
Buttons: Keeping the default border-radius, I select the primary Color (Landbot Pink) and assign white as the main text color.‍
Forms Elements: These elements are always on a white background, and to define box borders, I'll use a neutral color from our Brand's Neutral Palette (#A0A5CE).