Real artists steal, but some just redesign stuff they like. Since I wanted to learn more about conversational design, I will be redesigning famous chatbot examples with Botsociety. Today I’m going to redesign Swelly for Facebook Messenger. In the future, I would like to redesign Yes Sire for Alexa and Butter.ai for Slack.
All right, ready? Let’s start!
Swelly is a very successful Messenger chatbot. You can make choices and share them friends. You can try it out here.
In order to start the redesign, I’ve tried the bot. This is what it looks like in my browser:
So it basically has three main choices plus another set of three.
The first part of my redesign will just me reporting again the same design as a starting point. I logged into Botsociety, and created a new mockup for the Messenger platform. I then clicked on the “Bot says” button, then switched to the “carousel” message type as below:
Now I can add the same labels as in the real chatbot. I just have to type them in:
I can choose from all the emojiis and they will render just as in Messenger. I’ve added all the options like in the real bot, then I clicked on the “Create a swell” option. That is the scenario I would like to design! I then added the text message: “Ok please send me the first picture”. The following message is actually a “Quick reply” message with only one option: “Cancel”. So I add that as well. This is what I have right now.
Now I would like to reproduce also the other option “Start voting”. So I choose “Start voting” on Messenger to get an idea:
Ok. So it’s basically a carousel with an “OR” picture followed by a “Quick Reply”. In order to design this scenario, I go back to Botsociety and click on “Start voting”. I then add a carousel and a quick reply. This is the final result. I’m pretty satisfied with it!
Chatbot examples: Redesigning the Swell
Now, let’s start the redesign. What I like about the Swelly experience is that it immediately gives a set of options to the user. On the other hand, when the users have to decide between “Start voting” and “Create a Swell”, there is no indication of what they may be voting about. Users are used to having small previews of what they are going to click. Thumbnails! Thumbnails everywhere. So how do we recreate a thumbnail-like experience inside a conversational interface? Well, the label of the button may be dependant on the Swelly that the user is going to vote for. Let’s try how that feels! Keep in mind this is just one of many chatbot examples.
In order to start the redesign, I want to create a copy of my current design, so that I will end up with two files – the original design I just created, and the proposed redesign I will be working on. In order to do that, I just click on “File” and then “Make a copy”:
Now I’m going to edit the first message in order to add a hint of what the user is going to vote. Take a look:
As you see, there is another card on the right-hand side! That is because I’ve also added another carousel card by clicking on the green icon on top. I want the second card to display more votes options: “The best team”, “Best skateboard”, and maybe more!
This may look like a small redesign, but it’s actually a very big change of the inner workings of Swelly. But I think it may increase substantially the engagement because the users will start browsing the thumbnails until they find a topic or object they are interested in voting.
In order to prove my theory, I can run a user testing with my two Botsociety mockups. I can then assess the performance of the current design, versus the new one. The user testing session takes 5 minutes to set up, and 10 testers would be enough. Plus, it’s free! You can use it on your own chatbot examples as well.
I will show how to do that in my next blog post. In the meantime, you can try my new design here
Also published on Medium.