👉🏻 Wireframe and (re)create the user flow
If you are starting with a new chatbot 🤖 or if you are improving an existing one, there are 2 things to start with: Wireframing ideas and creating flows. 🎨 It helped me a lot to create a bunch of screenshots and visualise them on a board. 🖼
For that, we used “RealtimeBoard” — it’s a whiteboard for remote team collaboration. 👥 The whiteboard is very easy to handle and gives you a great overview of your project (bot). Further, while creating the flows, you already get an idea of too complex functions. I also used it after I planned new features to visualise it for my teammates. 💑
👉🏻 A proper start into your bot
Before your users get into the chatbot, the “get started screen” appears. It should display a catchy picture on top 🌈 and an easy explanation. 🧐
Keep in mind that this is the first thing your users see!
I did some A/B testings as we saw that our clicks dropped from the moment users clicked on the “get started” to the first action in the bot. 😨
If you want to know which picture or intro message has the biggest impact, test several version of them!
The same applies to the welcome message. 🙋🏻 ️We now have a gif, a message and a quick reply. I came up with this arrangement as I saw that users tend to favour gifs over static pictures. 🙄 For the text, I suggest you: Stay as short as possible. We all tend to skip reading and just click on the action. 😅
Keep it simple but informative! (I know that’s not that easy 😉)
And last but not least, I even tested the quick reply in different versions. 😎
Some things to keep in mind but in the end, it’s worth it!
👉🏻 Failure Message
I often monitored that users tend to send emojis 🤪, stickers 🐰 or non-readable messages. 🈲 In those cases you need to provide a failure message, otherwise, the conversation would stop. ⚠️ I added an “Oops I didn’t get that” + an option to seek for help + further actions to proceed. ✅
The help feature gives the users the opportunity to learn more about the bot or to give feedback in order to get help. 🆘
👉🏻 Option to go back to the menu or to cancel
As mentioned, a chatbot has a conversational flow which means that it isn’t easy for a user to go back or to stop an action. 📴 In this case, you need to provide the user the option to cancel ❌ and/or to go 🔙 to the menu.
💭 For example, in Swelly you click on “invite friends”. 👨👨👧
The bot then sends you further introductions but you decide that you don’t want to invite anyone now. 🤷🏻
So Swelly is offering 2 options: Go back to the menu or keep on voting. 🙌🏻
💭 Another one: You click on “Create a Swell” and Swelly is asking you to send a picture. 🖼 If you don’t want to send any pictures from your phone, you click on “Cancel”. 🚫 This quick reply leads to that Swelly sends you the menu again. As easy as that. 🆗🆒
👉🏻 Use webviews
If you have features that are too difficult within the conversational flow or has visual content, it would be good to provide it within webviews. 📱
💭 For example in Swelly: Your profile, notification settings, etc. Why? 🤔Because in a profile you need to edit information and/or upload pictures. It’s way easier to do that in a webview. 📝
👉🏻 Edit settings
If your chatbot offers to receive news or other kinds of frequent information 📰, then it’s necessary to give the opportunity to edit the notifications. ⚙️ I guess we all understand why because it’s way too annoying if you get a push-up notification all the time. 😅
💭 That reflects also the feedback I got from users: That the reminder about new followers, new swells, etc. can get tiring. 😬
From the messages the bot received, I could see that users often asked questions like: How are you? Who are you? ❤️
So I started to define Swelly’s character with the most important facts. 🧐Further, I gathered the most asked questions 📒 and made up a list with them. In the next step, Johannes Meindl created the wording for the answers. 💘
I don’t want to go further into details 😘 but you can see that you are able to create a personality with already simple steps. 👣 Anyway, keep those things in mind as a personality creates a deeper understanding for the user. ✅