The best way to learn how to prepare for the future is to look at the past. As we talk about some of the challenges for building great UI and UX for WhatsApp Chatbots, let’s go back to the ‘OG’ social media platform.

For all intents and purposes, MySpace was one of the great social networking platforms of our time.

For an entire generation, MySpace was a gateway to the addictive social networking platforms that are now a ubiquitous feature of our lives. And for many members of that same generation, MySpace was a gateway to another inescapable part of modern life—writing code.

MySpace’s UI allowed you to use HTML and CSS to edit a number of features that allowed you to create and express a three-dimensional, digital version of yourself. Its customization created an unrivaled UX, users could use every pixel on the profiles to set themselves apart from the crowd.

And this strategy worked for the company, until one day, Facebook arrived.

If MySpace was a highschool locker, Facebook was a managing directors’ desk. With its sterile, more brand-friendly interface, Facebook became the preferred choice for customers and companies alike.

It’s been ten years since Facebook surpassed MySpace in traffic and user count, but the UI and UX lessons still remain.

Lessons from the past, learned for today

Messaging has since overtaken Social Media in those very same metrics, but the fight for  UI consistency goes on.

Think of the Chatbot Ecosystem as MySpace and the companies that operate in it as its users. Companies have their own strengths and weaknesses and they use design to highlight or hide those aspects.

Different Chatbot providers have different design interfaces that they choose to use. And of course, they do, branding and UX are integral parts of a company’s’ visibility to the public. Each company has different capabilities that they choose to display with different user interfaces.

In an ideal world, companies would find one chatbot provider, accept their UI and stick to them for life. But we do not live in such a world; corporate experimentation and rejection is a way of life, so companies are likely to cycle through multiple chatbot UI’s.

This dissimilarity makes standardization of user experiences challenging. Companies aim to establish brand uniformity across their offerings and subjecting customer to a changing  conversational interface from one quarter to the next is a less-than-ideal experience.

How to build a world-class WhatsApp user experience and interface

This brings us smoothly onto WhatsApp Chatbots.

The world’s largest messaging platform opened its APIs for enterprise use. And WhatsApp’s parent company, Facebook, aims to work its standardized magic again. As ever with standardization, there are lots of restrictions on what a company and/or user can and can’t do on WhatsApp Chatbots.

The UI and UX for WhatsApp Chatbot is the same as the consumer version of the app. It is imperative that companies building bots understand the limitations of the platform so they can build great conversational experiences.

It’s important to understand how to build a WhatsApp Chatbot, regardless of industry. A WhatsApp Bot for Real Estate is not built differently than one for E-Commerce.

Text-focused interface

Visual interfaces like apps and websites allow users to interact with a plethora of CTA styles. WhatsApp however, is a platform for texting. Adding visual elements like buttons corrupts WhatsApp’s existing UI. This means that you can’t use buttons like you would on a regular bot.

Buttons are an important part of a customer’s conversational experience. They allow users to quickly navigate a company’s’ offerings without having to manually type in text fields. Buttons offer a richer customer experience since typing is an effort-intensive activity.

So how do you allow users to choose from a list of options if you can’t display them using traditional elements?

The simple answer is that while it isn’t simple for you to build, it’s incredibly easy for your customers to use.

Customers on WhatsApp interact with lists in lieu of buttons. Consider the following as an example –

What would you like to do today?
Buy a car. Sell my car. Offers. Support. FAQs.

On a regular Chatbot, this conversational flow would look like this.

But since WhatsApp’s UI doesn’t support buttons, you’ll have to use a flow like this.

Customers simply enter a single number instead of typing “b u y a c a r” (nine taps, including spaces) and the flow proceeds as usual. Implementing this, however, requires having an intelligent backend system.

The bot should be able to associate the number ‘1’ to its respective action and do the same if the user chooses to type ‘buy a car’. Additionally, the bot should also understand alternatives like ‘one’ and ‘but a car’. Delivering excellent UX is a must, regardless of the channel.

Templates

From a UI and UX for WhatsApp Chatbot standpoint, companies can use the platform for inbound and outbound messages.

As we mention in the video, there are two types of messages you send using WhatsApp.

One is inbound messages. Inbound messages are when a customer texts a company.

The other is outbound messages. Outbound messages are when a company texts a customer.

Outbound messages can only be sent using ‘templates’. It’s important to note that WhatsApp has very strict guidelines for the kinds of templates that you can use.

Templates are the peak of conversational design expertise. WhatsApp frequently rejects templates for not meeting its many guidelines for acceptable templates.

Example:

• Welcome Message Template

"Welcome {{1}}. We look forward to serving you on WhatsApp."

• Confirmation Template

"Your order {{1}} for a total of {{2}} is confirmed. The expected delivery is {{3}}."

Opt-Ins

One of the large UI and UX problems of WhatsApp Chatbots is adoption.

WhatsApp has strict conditions when it comes to opting customers into corporate communication. These restrictions can be boiled down to four requirements.

1. A field for customers to manually enter their phone number
2. A tick box that users have to positively validate
3. An explicit explanation about what kind of communication they’re opting into.
4. And finally, a WhatsApp logo embedded in the form.

So what can you do to increase opt-in rates?

1. Use multiple channels: Talk to your customers on the platforms they interact with you. Some of these channels include.
   • Website
   • Existing Channels
   • Third-Party Channels
   • Existing System Process
   • In-Store
   • Contact Us Sections
   • Updated Sign Up Forms
2. Clearly establish benefit: Your customers are more likely to opt-in if they know what the advantages of moving to WhatsApp. Be honest to your customers about what you intend to use WhatsApp for and elaborate on how WhatsApp is a great channel for it.
3. At points of distress: Customers are more likely to sign up for WhatsApp related communication when they’re at points of crisis. Consider reaching out to them at established bottlenecks in your customer flow. Instead of long and unresponsive ‘contact sections’, change your UI to include an opt-in section with the promise of immediate service.
4. Advertise your investment: A WhatsApp Chatbot shows that a company is making all the right moves to be on the same platform as its users. Design material that communicates the advantages of WhatsApp and the upper hand it gives you over rivals. Talk about the benefits of that your company’s UX has seen since it implemented the change.

FAQ suggestions

One of the biggest advantages of using a Chatbot is the automation of low-level queries.

Suggested Reading: Customer Support Automation and It’s Importance

Alongside answering questions, industry leaders in the sector also proactively answer users questions by implementing FAQ suggestions.

Support tickets with regards to FAQs usually the 80:20 rule. 80% of all customer queries come from 20% of a dataset of questions. Automating this 20% allows you to substantially reduce the weight on your support staff, allowing you to run a leaner, more efficient team.

Much like buttons, displaying visual elements on WhatsApp is not allowed. You also can’t restrict your users from typing on WhatsApp, like you can on a Chatbot. The combination of these factors allows customers to have open-ended conversations with your chatbot on WhatsApp.

Untrained or sub-par bots suffer in these settings; a bad bot response can often be more infuriating than no response at all.

Adequately training your bot for responses becomes a huge part of the UI and UX for WhatsApp Chatbot (s). Prepare answers for questions about your bot persona, your product, and your company. Ensure the bot can make small talk and understand typos.