10 Chatbot designs for inspiration

Last Updated: April 6, 2021

Chatbots have been here for some time now. Today almost all enterprise solutions have chatbots. They imitate real person conversations and provide instantaneous responses relevant to the context using artificial intelligence. AI Chatbots have been very successful in various domains, the most popular of which is customer support.

Chatbot Design

Although chatbots have plenty to offer in terms of functionality, a bad chatbot design can hamper the user experience. Simply put, one would prefer a human touch rather than a robotic experience.  A Facebook messenger bot is a good example where people interact to view product catalogs and buy them without human interaction. You may use technologies like Natural Language Processing (NLP) or Machine Learning (ML) to give a human touch. Artificial Intelligence chatbots can be designed to have a conversation flow specific to customers and their use cases.

Design is an integral part of Chatbot software. The conversational user interface (UI) of your bot has to be simple yet effective. Customers should easily be able to interact with the UI elements of the bot. While designing chatbots is not rocket science, It has to be carefully thought through. Many design prototyping tools like Botsociety and Botmock are being used to model, configure, and develop bots. 

If you are someone looking for chatbot design inspirations, you have come to the right place. 

Listed down are some of the design elements that will make your chatbot experience effective.

  1. A Warm Welcome Screen.
  2. Suggestive Cues.
  3. Typing Bubble.
  4. Subtle and smooth animations.
  5. Schedule a Meeting with Google Calendar.
  6. Get Feedback and Rating.
  7. Radiant Personality – Emojis, Text piece design.
  8. Branding – Color, Logo, Theme.
  9. Cards for better presentation.
  10. Familiar web design principles.

1. The warm welcome

Dazzle your customers with the first impression. Make a great welcome interface for your bot. List some things that the bot can do, and enlist frequently asked queries to make your customer navigate with ease.

2. Suggestive Cues

Customers approach your support bot intending to get instant help. They would love your customer service if the chatbot can direct the customers by providing cues. 

Sometimes, your customers may not see their desired question, and hence it is always a good idea to have bot suggestions like “I have a different question” which when clicked can provide more questions for the customers to choose.

3. Typing bubble to make the bot more engaging

A conversational interface should be engaging and appealing. A chatbot interface is no exception. A loader or progress indicator during the bot interaction will not give it a human touch. 

At times, bots may take a while to understand your customers’ input and provide a reply to them. To give the feel of someone typing, you can implement a visual design like a typing bubble just to indicate that the bot has understood your customers’ query and that it is in the process of finding the perfect solution for them.

Have your chatbot display a typing bubble and make the chatbot conversation experience more gripping for your customers. A typing bubble is a win-win because you give the chatbot time to process complex queries and provide the customers with a good old feel of someone responding.

4. Subtle and smooth animations

Animations are required to make things interesting. They enhance the design sense of the chatbots. Do not clutter the UI with tons of animations. Add them accordingly. If you are designing a voice-based assistance bot like google home or Alexa, this may not be applicable.

Provide a concise zero scroll response so that users do not need to scroll to complete reading the reply. Customers will be satisfied if the info that they see is at an eye level. They will lose interest if the content keeps on scrolling.

Yes, there will be cases where three/four lines would not suffice. In that case, break it down into chunks and present it to the user.

5. Schedule a meeting with Google Calendar

Chatbot use cases are no more restricted to answering customers with a text or an image. You can program the chatbots to schedule an appointment or a meeting for your customers. Design it in such a way that the customer can select a timezone, day, date, and confirm the appointment.

We have to keep some things in mind when designing complex functionalities like meeting setup. Primarily, the interface must be easy to use. An example would be to propose time slots so that users can easily click to schedule appointments.

6. Get feedback – helpful/ not helpful or Rating

Getting feedback is a crucial factor in measuring your support’s effectiveness. Always incorporate a provision to collect feedback from your customers. You can understand if the answers provided by the bot were helpful or not. 

As crucial as it may be, most customers tend to skip the feedback part because it does not add real value to them. This is where creativity and design must come into play. You can have emojis like thumbs up, thumbs down or choose to have two or three options like “Helpful,” “Not helpful” etc. Also, do not forget to collect a “What can be done better?” in case of negative feedback.

7. Radiant Personality – Emojis, Text piece design

What’s a bot without an engaging personality? One of the critical elements of a Chatbot is how its personality seeps into the design.

A rounded chat piece works better for an eCommerce site whereas a square text piece can suit more for an enterprise help. 

Emoticons can be used intelligently. They make the chat experience more engaging. However, emojis might not work too well in a business context. So use them to add a little sparkle.

Prefer image over text. An image is worth a thousand words. Customers will get bored with text replies and move away from the conversation. Throw in an image or two to spice up the flow.

Short videos can aid some queries instead of paragraphs of user instruction. GIFs can also be used, but we wouldn’t recommend it unless it is appropriate. We do not want the user to get irritated.

8. Branding – Color, Logo, Theme

Branding is really important. The color palette on the User interface must reflect your company’s portfolio. Google Assistant is a perfect example of one common theme. The theme has to be established right at the beginning, and it is uniform throughout the interface. For instance, A chatbot for an apparel company will be heavy on images and cards displayed in the bot. So we must keep in mind and design process accordingly.

The chatbot must not be mistaken for some widget on your company’s homepage. So make sure to have the logo as an avatar in the interface.

9. Cards for better presentation

Provide the responses in the form of cards. Why? Because the layout is neat and clean, and the text is not crammed. It is spaced sufficiently making the user read the info comfortably. Cards can accommodate images, text, and links in them. It can serve as a great design for communicating quick stories.

Again, do not go for one big card with images, text, videos together. Neatly, put together cards to show relevant info. Cards must have rounded edges with very little shadow effects.

Embed quick actions in the same card as “showing more info” or “showing similar items.” 

10. Familiar web design principles

Interacting in a chat environment is not a unique activity for customers. They have already been exposed to the Whatsapps and Facebooks of the world. This would have them ready for standard functionalities like a message being read or a timestamp when you send the message.

Hence try to incorporate some familiar design elements. We are not asking you to clone the design but make them fit within the scope of your unique design. This way, your chatbot would be unique and still be familiar to navigate. With Chatbots, apart from the above design concepts, the UX designer must follow certain design principles like

  • Fallback when the bot does not understand the query correctly. “I cannot understand what you are saying”
  • Always show compact information and provide an option to show more. We do not want to bombard the user with lots of data every time.
  • Finally, make sure that your design is compatible across all devices and mobile apps.

Follow all these tips for a great conversational experience with your chatbot.

With HappyFox, you can build custom Chatbots designed for your business needs.

Speak to our specialists. Get a one-on-one demo tailored to your needs and provide the best customer experience with our bots.