How to create your first Facebook Messenger mockup (Botsociety tutorial)
Articles Blog

How to create your first Facebook Messenger mockup (Botsociety tutorial)


Hello everybody! I’m Vittorio co-founder
and CEO of Botsociety. And today we’re going to create a Messenger mockup
together. The mockup that I would like to create is a New York City cab driver. He
drives around New York City since years and he knows all of the stuff about the
city. So you can ask him about it! Alright so I would like to call it like
New York City driver. Something like that. New York driver! Then I’ll upload a
profile picture maybe this! This is of course Botsociety and I created a
new mock-up. Now here I select Facebook and start designing. Now, the first thing
that you want to do when you design a conversational interface is to come up
with the Happy path. The Happy path is the best interaction possible between the bot and
the user. Is the interaction where everybody understands everything it goes
smooth towards your business objective. Now in this case my chat New York driver
knows everything about the city so my objective is for the user to discover a
new place. All right so let’s start designing the Happy Path.
I’ll just click here and then I will start I will type some messages here
I’ll keep adding messages until I feel like I’ll i reach my business objective
all right let me see I should have actually already something prepared all
right so I prepared this design this is my happy path as you see I added a lot
of text messages and quick replies messages and so the bar asks for our
borough the user selects Manhattan and then what you want to discover “Prohibition
era bars” and then it proposes one prohibition-era bar. This is my happy
path. I’m kind of happy with it! I want to iterate more I can click Play on the top
right corner here and I will see an exact and instant preview of the final
user experience so by watching at this by looking at this I will be able to
iterate in my design and probably make it better more funny or nail the
personality better or make it more clear now I will do this later. What I want to
do now is to design another path which is the one which is not the happy path
so let’s say that here when the chat bot asked tell me if there is a borough that
interests you or just type your question the user actually types question so if I
click on the arrows here I can switch between the answers through plain
stating on all this is empty because I didn’t design it yet if I click another
time I will select another option which is the remaining one tell me cool bars
in this case the user didn’t select any quick replies by just hyped in tell me
cool bars I design a date previously this is the not so happy path so I
started to add messages see you I can say bars right and all these great bars
and then the chocolate asked prevision euro bars or other time
when the user makes provision era actually want to bring the user back to
the previous experience so how do I do that what I can do is here as you see I
have a link to I have a button to link to message so I can link it is not so
happy path to the EPI path in this case the Prohibition era – and so if I click
here I will say this now this is a representation of all my messages if i
zoom in i can breed them okay okay secret I think it’s here so now it’s
connected if I click suit on click go path then I
will switch to you know I get back and see the happy path how do I get back to
the previous one well I can open the flow chart a little here
and now I also see how this looks like from our logical can I see the user
experience well I just have to click play and I’ll take a look at it so in
this case the bot says ok presents itself I can go live with foster year’s
reference and now the users is telling totally cool bars instead of choosing
the food reply now the bot is
making me choose pretty sure Negro bars and now if the user clicks will actually
go back to my jacket back now why is important ring user back
there because that’s my auntie Pam it’s where I want the user to reach that
objective because that’s the objective of my design
in this case how to get him or reserve or coldest bar so now that I design both
the fppad for another one I should continue and define all the main use
cases which may be there the user may be interested in other neighborhoods or he
may have a totally different interaction is up to you and your imagination so
let’s assume that I created all of this stuff for writing otherwise he will be a
little bit too long as a tutorial so now that I’m done creating this stuff I can
share it with my colleagues with my coworkers I just need to click share and
add the copy button here where I can invite them an email or embed it on my
website I can even make it interactive by switching this I can do a bunch of
other cool stuff here I can go in edit mode
I think the settings and for example visualize how this would look like a
nexus 4 right for what I can do is I can ask her out so if you’re not sure what
to do remember you can always ask for stuff here on the top on the bottom
right corner alright there’s been everything today I
hope you enjoyed this tutorial if you have questions please leave them down
below and keep designing

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top