Here are my personal in for :

👉🏻 Wireframe and (re)create the user flow

If you are starting with a new 🤖 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. 😬

👉🏻 Personality

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. ✅



Source link https://blog..io/learnings-in-designing-ux-for-our-chatbot-swelly-deafc6bdde4e?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here