I get asked a lot: “I’m building a mobile app chatbot” or “I’m putting the chatbot inside my website”. “Sounds great”. “How do I design the conversation there? I have custom colors! And headers! And more”. Fear no more. Custom chatbot design is here! You just need Botsociety and any simple graphical tool. In this tutorial, we are going to use Sketch, but you can also use GIMP (which is free), Figma, Photoshop or any other similar tool. I’m going to show how to use Sketch to design the visuals and Botsociety to design the conversation itself. Ready? Let’s start
Create your mobile app chatbot
This is very, very fast. Just sign up on Botsociety – it’s free if you just need 1 project. After the signup, you will be able to create a new design. Decide the name of your design and upload a profile picture. For the sake of this tutorial, I’m going to create a Real Pizza bot. This custom chatbot will leave on my (fictional) RealPizza mobile application. In this step, I select “Generic template” as the platform:
Then I click “Start designing”. I am now in the main design mode, where I can add messages from the user side or the chatbot side:
I can add text messages, as in the screenshot above. But I can also add image messages, carousels, lists, buttons and more. Note that the header and the footer are kind of ugly and do not match with my brand. This is fine for now, as I can change it later! For now, I just add the main messages of my interaction just to have an idea of how it will look. This is what I got:
Now that I have the basic interaction designed, I want to see how this is going to look like on my mobile application. To do that, I just click on “Settings”. I can now change those settings:
In this screen, I’m able to set my own:
- Chatbot header
- Chatbot footer
- Chat Icon
- Welcome screen
- Chatbot bubble color and text color
- User bubble color and text color
Now I’m ready to start designing my custom header and footer. Since I’m using Sketch, I’ll just go ahead and download the Sketch library linked there.
Create the custom chatbot design
Now I can open the Sketch file. It contains different objects that I can use as a canvas for my custom design. Since I want to start with the header, I will go ahead and look for the canvas named “Generic conversation header canvas”:
Each canvas is showing me the exact size of each component. Now what I’m going to do is add an Artboard with the same size as the footer. I then design my custom footer inside the artboard. I then repeat for all the components I need for my mobile app chatbot. This is the final result:
I’m not fully satisfied yet, as the footer and the welcome screen are too simple and not very good looking. I will get back on that later. Now I want to see how all of this is going to play out in my conversation. I export each artboard as a separate PNG on my computer, by selecting it and then clicking on the bottom right corner “Export”:
Now I have all my PNG on my disk, I just need to go back to Botsociety, open the Settings page and upload them to the right place:
Note that I also changed the color. I’ve selected the exact color code from Sketch, copied it and pasted it into Botsociety. You can also use a color picker inside Botsociety if you want, but it was faster for me to copy paste from Sketch, as this is where I have the brand colors saved.
Bringing it all together
I can now design my mobile app chatbot with my custom design. If I click play on the top right corner, I will be able to preview the whole user experience and iterate on my design. I usually find out that a lot of things can be refined and improved by prototyping the interaction and looking at the final result. I can even preview if on different devices!
Now I’m able to design the rest of the conversation, starting from the happy path and then designing the rest. If you want to learn more about this process, you can check out this tutorial that shows how to create a facebook chatbot. The design process is very similar.