How to prototype a chatbot
Thanks to AI, chatbots now have a firm place in user experience design. Here is how to get started prototyping your own
Artificial intelligence is revolutionizing the world of technology. It has given us more convenience than we’ve ever needed and has profoundly changed the relationship that we have with technology.
Chatbots are one emerging user experience that has risen in recent years thanks to the growth and development of artificial intelligence and machine learning.
Prototype your own chatbot in Justinmind. Have designs that speak to users.
Now when you shop online, you’ll be met with a smile (or better, a ‘:)’) from a chatbot who is more than happy to serve and satisfy your shopping needs. Looking for a particular sweater? No problem, North Face’s Watson will ask you a series of questions to match your preferences.
Did you go a little over budget last month? Let Erica, Bank of America’s chatbot, give you the advice you need to get back on track.
Chatbots serve many functions, from customer service and therapy to giving you the news all the way to tracking flights.
As is customary with many emerging technologies, the question comes up of whether or not a particular technology is a genuinely useful user experience or simply a gimmick.
But with refinements in the technology and the slow but steady adoption by large corporations, chatbots have found a space of their own in the world of user experience design.
In this post, Justinmind will get stuck into all things chatbot and give you a how-to on prototyping your own chatbot. Are you ready?
Creating your own high-fidelity chatbot in Justinmind
Prototyping is a very useful method for ironing out any chinks in your design and showing key stakeholders a glimpse of things to come. Since prototyping is effective, cheap and easy to do, it’s a powerful way to understand whether or not your idea is viable or not.
When it comes to prototyping a chatbot, you can make your own high fidelity version in Justinmind that looks the part. In this walkthrough we’ll help you create your own messenger chatbot.
Before we can get started, download Justinmind and then create a new prototype from our selection of templates. Chatbots are predominantly used in messenger apps so for this how-to, let’s use a mobile template.
Prepare your script and interactions
As we’re making a high-fidelity prototype, we don’t have the luxury of tapping into an API or natural language processing. We have to make the magic ourselves though drafting a script, which we will put into a Data Master later.
(Note: A Data Master is a mini database that you can populate with your own real data which you’ve imported)
Create your chatbot user interface
Since a chatbot requires input from a user, you’ll want to ensure that your user interface has an input text field and button. Rename the button with ‘send’. You can drag and drop these from the Bars, Menus and Tabs section of the iPhone iOS widget library directly onto your canvas. Make sure to group them together and rename the group ‘input-text-box’.
In the same section, you can drag a Header top widget to make the interface more realistic.
It’s best to keep your interface clean and with as few distractions as possible so that people are focused on the chatbot aspect of the user experience.
Populate your Data Master for added realism
To create a flowing conversation, we’ll use a Data Master. Next to the Outline palette, you’ll find a Data Master tab. Add a new Data Master. Name it Chat. Add 3 fields: Text, Time and Toggle. Toggle’s type should be changed to ‘True/False’. Click OK.
Now you should drag a rectangle widget above the input text box that you grouped earlier. This rectangle will act as the background in your interface. Change the color to white and round the corners.
After this, drag a Data Grid onto your canvas. A dialog modal should appear. Here, write Messenger in the Identifier field. Move Text and Time from left to right. Resize it, as per the example below. Be sure to reduce the number of columns to 1.
In your Outline tab, open the ‘Grid_cell’ in the Data Grid. Delete the ‘Time’ text box. Then, rename the Value of he ‘Text’ text box as the name of your chatbot.
To give your chatbot a face, drag an image widget into the canvas next to the chat box we’re creating and add your image.
Next, group all of these UI elements that are in the Data Grid into a dynamic panel by highlighting them and right-clicking. Ensure that the image is the first element within this new grouping.
To simulate a response, we just need to duplicate this dynamic panel and change a few things. Once you duplicate the dynamic panel, change the image, name and position of the panel.
To finish, create another dynamic panel. Resize it and change the layout to Vertical and change the alignment to Bottom. Place the data grid inside this in the Outline tab.
Finally add two variables in the Variables tab: name them “Chat-text” and “Toggle-variable” respectively. The default value of the Toggle variable should be ‘2’.
Make sure that your UI elements look like the hierarchy does below:
Make your chatbot interactive
Justinmind has powerful rich Events that simulate real interactions. To make your chatbot all the more realistic, you’ll want to add events. This means that when you type into the chatbot, the bot’s response comes on screen as well as your written message.
To find out how to make your high-fidelity chatbot more interactive, follow this walkthrough which starts halfway down the page.
Once you’ve added the interactive elements you desire, you should be ready to simulate your mobile chatbot. And that’s how you prototype a chatbot!
What are chatbots and what do they do?
A chatbot is a computer program that communicates with users through a mimicked conversation.
Chatbots are used to automate specific tasks, provide information and to guide users to a self-initiated task. If you ask a chatbot about discount clothing, for example, it’ll provide you with information which you can do with what you want (buy or not buy).
The chatbot is able to respond appropriately thanks to the data sources available in the API that it is connected to. Connecting to an API means the chatbot can deliver information on demand (for example, if you want the weather for that day).
Chatbots also develop the language that they use. This is important because the bots need to be able to distinguish between different user queries and requests.
Aided by machine learning and natural-language processing, chatbots are able to tweak and tailor their responses accordingly. What happens is that a user inputs information and the chatbot is trained to translate that into a desired output.
Gillian Armstrong sums up chatbot learning pretty accurately with: “to know how to answer a question correctly, it needs to know the correct answer”.
Chatbots in action
Since chatbots are relatively new in terms of technological development, that means their uses are not fully understood yet. In spite of that, there are times where you’re more likely to come across a chatbot than others:
• Customer service
• Providing references or ideas
• Marketing and engagement
It’s usually easier to explain via example these uses. Let’s say it’s the holiday season and you’re looking to buy a gift for your significant other. A chatbot can provide you with ideas and inspiration based on that conversation.
CoverGirl used a chatbot in what they called the first influencer chatbot marketing campaign.
The chatbot was based on Kalani Hilliker, a 16 year old American dancer and TV personality. The chatbot simulated Kalani’s conversational style to define its persona.
The campaign resulted in 14 times more conversations with the chatbot than with an average post by the real Kalani and a 51% click-through rate on the coupons delivered at the end of interacting with the chatbot. Talk about boosting engagement.
Why would you use a chatbot?
Chatbots are especially profitable for corporations that want to automate tasks previously carried out by human labor but customers, users and teams can benefit from chatbots too.
Given that bots can be placed in messaging platforms, like Telegram, WhatsApp or Facebook Messenger, there is ample audience for corporations to target their customers. But what are a few other benefits chatbots provide?
Chatbots are always available and extremely efficient
How many times have you suffered through a badly connected phone call, journeying from number to number on the dialpad to reach a customer service representative only to find out you’ve got through to the wrong department? Probably more times than you’d be comfortable with saying.
The beauty of chatbots is that they’re 24/7. No longer do you need to endure terrible hold music.
A chatbot can access large amounts of data at once, while simultaneously helping thousands of customers, and still provide relevant results. This makes them more efficient than humans and may be leading to the death of call centers.
If chatbots are an end to 10 minute waiting times, miscommunication and back and forth emails, sign us up.
Chatbots automate repetitive work and boost productivity
Slack, the popular collaboration tool, has loads of bots, which act like virtual team members, getting your work done faster and more efficiently.
Need a bot to assign tasks to your team members? How about carrying out a poll or survey? And don’t worry about those daily standups, Geekbot can run those meetings for you.
Heck, there’s even a bot that can help you strengthen your relationship with your colleagues by matching you with someone you don’t work with very often to have a coffee.
Not only can bots boost productivity by taking care of any repetitive and mundane tasks but they can be used to create better relationships and harness empathy in an organization.
The jury is still out whether or not chatbots are here to save us. For some, they’ll always be a gimmick, ever hoping to break into the mainstream. But for others, chatbots are already a viable and successful way to enhance the user experience of their customers and bring true value.