5 Examples of Fantastic Chatbot UI

Chatbots evolved from being purely text-based interfaces to little interactive assistants full of personality. It’s fascinating, but it also sets the bar really high.

Customers will likely abandon your chatbot if it can’t keep up with them or is too frustrating to use. Putting careful thought into your chatbot’s user interface is the first step to avoiding this.

Getting started can be the hardest part, so we’ll share some of our favorite chatbot UI examples and actionable steps you can take. But first, it’s important to know the definition, role and expectations of your chatbot user interface.

  • What is a chatbot UI?
  • What’s the difference between UI and UX?
  • 5 examples of great chatbot interfaces
  • Three things to consider when creating a chatbot UI
  • The Logic Bot: Set up a chatbot UI that delivers
  • 1
    What is a chatbot UI?

    A chatbot user interface (UI) is a series of graphical and language elements that allow for human-computer interaction. There are different types of user interfaces , chatbots being a natural language user interface. This means users can communicate on their terms, not the computer’s.

    However, a chatbot’s communication skills will vary depending on the interface you create. A chatbot UI that relies on predetermined answers, such as button options, limits what the user can ask and what the chatbot understands.

    But contextual and many rule-based chatbots are often designed to understand and respond to a variety of text and voice inputs. However, they’re often more costly in time and money to build.

    2
    What’s the difference between UI and UX?

    In simple terms, UI is the means by which a human and a computer interact. UX, or user experience, is the overall experience a user has from using a product like a chatbot or website.

    Based on our research , customers are willing to speak to a chatbot first, but they still want the option to easily escalate an issue to a human rep. This is likely because people have talked to chatbots that were incapable of handling difficult issues. For the user experience to be positive, the user interface needs to exceed expectations.

    Carefully considering every detail of your chatbot’s functionality will help create a better user experience. It may also help ease customer skepticism and improve their chatbot perception.

    3
    5 examples of great chatbot interfaces

    A quality chatbot interface allows you to achieve several things:

    • Create a personalized branded experience
    • Communicate with your customers in a humanlike way
    • Handle a variety of tasks ranging in difficulty
    • Assist many of your customers at one time

    Here are examples of companies who put careful thought into their chatbot UI:

    Lark - healthcare chatbot

    Lark is a contextual chatbot prescribed to help patients. It’s designed to have humanlike conversations with users via mobile app.

    image of conversations with user about their personal activity and diet
    Lark explains how it works through interactive conversation.

    Lark has a friendly, kind and humorous persona that appeals to seniors, its largest clientele. Users can engage with the chatbot through chat, voice and button options.

    Lark CEO Julia Hu reported that seniors use the chatbot as a sort of social outlet, which is a testimony to its UI. Research shows that seniors are more resistant to using new technology because they lack the confidence to do so. Lark created a chatbot user interface that gives seniors authority over their health and is simple to use without help.

    image of older man chatting with Lark
    Lark even offers behavioral health coaching to help people manage stress and anxiety during the COVID-19 pandemic

    The health chatbot’s primary color is green, which symbolizes rest, tranquility and good health . Lark’s messages are motivating and uplifting, which works well with its calming color scheme.

    What you can do:

    To mimic Lark’s UI approach, pick a color that best captures the instinct and emotion of your brand. Use images, graphs and praise to create a lively experience and inspire your users.

    Lark also puts a lot of emphasis on tone in its script. Write with your audience in mind by using words, slang, jokes and phrases they use. A good place to observe this is in your live chat conversations with customers or on social media.

    Chatfuel - Facebook chatbot provider

    Chatfuel lets you create Facebook Messenger chatbots that are decision tree-based with some contextual capabilities. It’s used by major companies such as Lego, Netflix and Adidas.

    When designing for Messenger, you’re far more limited in terms of unique design. Each chatbot generally looks the same — black text, white background, blue and gray speech bubbles — but there are elements you can use to personalize the interaction.

    image of conversation about gifts with Ralph
    Large images help keep the conversation visually interesting. Source: Chatfuel

    Chatfuel chatbots often use a mixture of images, button options and text to interact with users. Chatbots, like Hello Fresh’s Freddy , can detect and respond to a variety of food related keywords and phrases in messages. It even recommends playlists to listen to while cooking.

    This chatbot approach could be considered rather minimalist in design, but it’s easy for your Messenger users to navigate. It resembles and functions similarly to the conversations they’re already having with their friends.

    What you can do:

    Creating a chatbot for Messenger gives you less freedom in UI customization, so make the experience unique by using GIFs, quizzes and images. You can also create an interactive conversation by offering a mix of button options and typed commands.

    And don’t forget to give your chatbot a very distinct icon image so it’s noticeable in your customer’s friend list.

    Replika - self-help chatbot

    Replika is one of the most human-sounding chatbots on the market. It’s a contextual chatbot that learns from conversations with its users to the point where it even starts to mimic the user’s manner of speaking.

    The intelligent chatbot was created for those in need of a companion. Replika, which can be named anything the user wants to make the friendship more personal, adjusts its mood and tone based on the user’s mood or the conversation topic.

    conversation with Replika about the Sims
    Replika expresses its own opinions instead of always agreeing with the user. Source: Reddit

    To keep the conversation moving, users can select from a variety of topics or issues that they’d like to discuss. You can now even write a song with your Replika. It then awards personality badges the more it learns about the user.

    Replika is available via web and mobile, and has a customizable interface. Users can switch to night mode, customize the background and upload a photo that represents their Replika. The UI is focused on creating a personalized, cozy “environment” for conversations.

    screenshot of Replika's customization settings
    Replika has free themes, but you need a paid account to access their full collection.

    What you can do:

    To capture some of Replika’s personalized touches in your own chatbot, let users change the background and color scheme of your user interface. Studies show that personalized content satisfies a person’s desire for control, reduces information overload and makes the experience more relevant and interesting.

    For fluid conversation, write a long list of creative responses (I recommend the “yes, and” approach ) to keep conversation moving or for when your chatbot doesn’t understand a message.

    Milo - website builder chatbot

    Standing out from the norm, Milo greets you right at the top of An Artful Science’s homepage. The conversation appears like it’s floating and is well-integrated into the website’s quirky design.

    screenshot of Milo's welcome message

    Made with Landbot.io , Milo is a button-based chatbot that gives the user limited control over the conversation. However, for what it lacks in conversational abilities it makes up for with its entertaining script.

    Milo is a lovable character that speaks and behaves like a longtime friend. The button responses you can choose to respond with are in step with the chatbot’s casual tone.

    screenshot of conversation with Milo

    A tasteful use of GIFs and images spice up the conversation. If you leave the page, Milo asks if you’d like to start again or continue from where you left off.

    When you’re done speaking to Milo, you can just keep scrolling. There’s no lingering window in the corner or flashing notification beckoning you back into the conversation.

    What you can do:

    If you plan for your chatbot to welcome new visitors to your website, try integrating it into the landing page. It’s a rare approach, but that’s what makes it exciting.

    Milo greets the user by stating its purpose and asking how the user is doing. Next, it offers a free gift visitors can claim if they continue chatting. Take a leaf out of Milo’s book and introduce your chatbot’s role in its welcome message. Keep your visitors hooked by giving them incentives to further engage with your bot.

    Erica - banking chatbot

    Erica is like Siri, but for banking. The Bank of America chatbot is voice- and chat-driven so customers can make text or voice commands to check all things bank account related.

    image of Erica's conversation options
    Erica has its own knowledge base just in case you’re not sure what to ask but want to learn more. Source: Medium

    The app-exclusive chatbot uses text, images and graphs to communicate a user’s spending habits, recurring charges, account balance, etc.

    screenshot of conversation with Erica about account balance details
    Erica shows a user’s spending habits and suggests ways to save money. Source: Chatbot Guide

    Its navy blue interface evokes trust and dependability , and Erica’s use of emoji and praise add a human touch to conversations.

    What you can do:

    Create messages that share unique insights about your user’s habits. Use generated graphs, clear language and the rare emoji for a personalized yet professional feel.

    Set expectations about what your chatbot can do by creating an About section similar to Erica’s. Include a few FAQ questions at the beginning of the conversation to help users quickly jump to the information they need.

    Want to talk to a human about chatbots?

    We'd be happy to answer any questions you have about using chatbots in your business and how to get started.

    Book an appointment

    4
    Three things to consider when creating a chatbot UI

    What is your chatbot’s purpose?

    Many businesses , but their popularity and cool factor is just too alluring. If there’s no game plan or use for it, why waste the money and effort into building it?

    Give your chatbot a purpose so it doesn’t become a talking website accessory. This can range from giving your brand a voice to helping customers with simple tasks. Comparing Milo and Erica, Milo lacks Erica’s functionality and intelligence, but does a great job at giving visitors a taste of the company’s brand and style.

    If your chatbot will help with tasks, what does this include? Create a list of everything you want your chatbot to achieve and then break it down to what’s viable for your budget, time and customer base.

    Also, determine where and how often you’ll use your chatbot. Will it live solely on your website, or do you want to offer it on a variety of channels?

    How will your chatbot look, speak and behave?

    It’s easier to write and plan a character when you have a profile to work with. We created a guide on to help with this process. You’ll determine how your chatbot looks, behaves and speaks as well as its strengths, tasks and weaknesses.

    Once you know its characteristics, you may find it easier to create a catchy name for your chatbot . There doesn’t seem to be a trend or preference for which names work best (human names versus cutesy ones), so brainstorm options that fit your brand, are easy to pronounce and fit the look of your chatbot.

    All of this preparation will help with script writing, the longest yet most important element in chatbot UI creation. You can use our post “6 steps for creating a smooth chatbot conversation flow” as a pain-free guide to help you get started.

    No matter if you use a button-based, decision tree or contextual chatbot, its speaking mannerisms and tone are important for achieving that humanlike feel. Prepare for topic deviations, words or phrases that have double meanings and misunderstandings.

    What platform and data will you use?

    You have your choice of chatbot builder varieties, from advanced to no-code options. We created a list of the 10 must-try chatbot providers for every budget to help you decide.

    image of botsociety's bot builder
    An example of what building a chatbot flow can look like with Botsociety.

    To choose the right provider, consider how you want your users to interact with your chatbot — how can you simplify the interface so customers don’t have to press a lot of buttons and repeat themselves to get what they need?

    Pumping your chatbot with data will also improve its ability to assist customers. Start with your company knowledge base (who you are, what you provide, common concerns and questions) and then group other interactions you’d expect your chatbot to have.

    There are also pre-made data sets you can incorporate into your chatbot to improve its natural language processing, or if you need a place to start data-wise.

    5
    The Logic Bot: Set up a chatbot UI that delivers

    At Userlike, we offer a chatbot connected to our customer messaging solution that achieves what a quality chatbot UI should.

    Our Logic Bot functions as an active member of your team: it can greet customers, answer questions using simple syntax and help with tasks such as creating tickets, finding lost packages and giving product suggestions, just to name a few.

    Example image of Userlike's chatbot sending a return label to a customer in the chat
    The Logic Bot can send documents and media directly in the chat.

    It’s an all-in-one solution that works as a proactive first contact for customers, as backup for your agents or for requests received outside of service hours.

    If you’re interested in learning more about our Logic Bot and chatbot services, start a chat on this screen to talk to a member of our team or sign up for a consultation.