How to prototype a Facebook Messenger bot with Keynote.Recently, I was asked by my pals at TalkBe to help them prototype an example of how a bot could work for a brand they work with in Facebook Messenger. There’s a few UI kits kicking around, and so they thought I’d be able to use one to showcase a conversation a typical user could have with the bot, and specific commercial actions that could be taken.
Here’s the problem; How can we showcase this conversation in the most easy to understand way? As this was essentially a pitch piece, how could we impress the client, while getting around the typical build time issues, and then put it into the best format so the client could see the idea we’ve had?
The conversation is the experience
This wasn’t a typical prototype or UX piece. The task here was to establish a conversational flow, and then bring it to life using many pieces of the preset UI Messenger already employs. Yes, we could attempt to own some visual flair with the content we would be presenting, but the main parts of the overall experience is how the user can develop a relationship with the bot, and deal with many of their common interactions with the brand through the interface.
Copy is often the most important part of both UX and digital service design, as it’s the persuasive element which can convince a user to transact, or signpost their way to another area of service. For IM, copy is the only thing you have in converting a user to your goals.
To begin, script your conversational flow either in a text editor, or through a flow charting exercise. Remember to indicate the type of message, and required callbacks/CTAs.
This might be easy for some of you, but the essential bit is to put yourself into both the shoes of the user, and the brand that the bot is representing. Then, have a conversation with yourself! To get the best out of the feature set that Messenger has, you’ll also need to familiarize yourself with the differing types of interface language available.
Let’s look at the different interface elements we’ll be using:
Comments behave just as you think they will, because they’re the speech bubbles you see between yourself and the bot. They display simple content, without any embellishments, save for URLs. Be aware of their spacing, and how they change when comments are delivered in fast succession.
Structured Messages can contain an image, title, description and calls to action. They might also contain a URL, but the key utility of this message type is to give call backs (CTA buttons) that the user can select to change the onward journey of the experience. They can also be used in a carousel.
Quick replies appear above the message input, and are designed to be fast answers a user can select without having to type. While these can be generated through machine learning and be relevant to content, they can also be hard curated based on the expected reply instance.
Persistent menu appears when the burger icon is tapped at the side of the chat input, and gives the option to launch a different function of the bot. So for instance, users can select “help” or “top sellers” as a fast action from the menu.
Prototype!
We’ll assume here that you’re familiar with editing template documents in Sketch. After all, there’s thousands of them out there.
Bots came out not long after Facebook announced the new APIs for Messenger.
Sketch App Sources has this rather good mockup which has some good UI examples and demonstration of how the flow can work.
Facebook have this rather excellent iOS9 UI kit, which contains some bits you might find useful later on. And if you’re reading this in a post iOS 10 world, they’ve probably got a kit for that too.
We’re going to focus on animating assets in Keynote, to demonstrate what a bot experience would be like. In the real world, for your own conversations, you might edit the assets in Sketch and copy them in to Keynote for prototyping. Or redraw the assets in Keynote, so you can edit them there. I’ll leave that one to you though!
Tutorial Assets
Project Assets
I’ve also included the completed Sketch file you can play with as you please.
Step 1 - Setup your Keynote file
Open fb messenger iphone template from the Keynote folder. Select “New document” when prompted.
Go to Keynote > Preferences > Rulers.
Select “Show guides at object edges”. The template provided has the necessary guides for all gutter alignments, so selecting this setting will mean the assets snap to the edge of the guides.
Reference:
http://jonthebeef.xyz/tutorial/2016/07/28/how-to-prototype-a-messenger-bot.html
