Right now, it seems like everyone keeps focusing on the development part of messaging bots. Whether it’s the large amount of bot makers popping up to help create bots, or the question if current artificial intelligence and natural language processing capabilities are enough–it’s always about the technical stuff behind bots.
However, we believe the user experience part in chatbot design is highly underestimated. There is a clear lack of resources that concentrate on the part that helps design, prototype, and test great experiences within messaging apps. This is why we compiled a list of current tools that might help you out. Enjoy!
General Bot Prototyping Tools
BotSociety.io
Not sure how the experience might look and feel like? BotSociety offers a smooth way to sketch out a messaging bot to understand and test the user flow of a conversation.
Prototyping Tools for Facebook Messenger
Botframe
According to its creator @almonk, Botframe is a “playground to design bots.” It lets you easily create a mockup for a chatbot conversation. The result is a nicely looking screenshot (here’s an example) in the style of a Facebook Messenger chatbot. Nothing interactive or super fancy, but way faster than opening up Photoshop and creating it yourself. You can also check it out on Product Hunt.
Facebook Messenger jQuery Plugin
Neat plugin that lets you display Facebook Messenger interactions on your website or in your web app. You can get it here.
Prototyping Tools for Slack Bots
Walkie
With Walkie, you can create mockups for Slack conversations. It’s even possible to export the dialog in JSON, which could come in quite handy! Here’s the Product Hunt thread for more discussions.
Chatbot Design Kits
Bots Messenger UI kit for Sketch (by Mockuuups)
Mockuuups is a platform that helps you put your product screenshots into nicely looking mockup photos. See this ProductHunt thread for discussions and download the Sketch kit here: bots.mockuuups.com
Messaging Design Kit for Sketch (by Layer)
Layer is a service that helps developers build messaging functionality into their products. Obviously, the scope of this design kit (since it’s messaging in general) is a bit bigger than just chat bot design, including rich media cards and vector icons. Nonetheless, it offers an interesting toolkit for wireframing messaging experiences.
Landing Page Templates
You’ve created your chatbot, what now? It’s time to market it. Here’s a list of useful resources to set up a landing page for your chatbot.
GoGo Bootstrap Template
Bootstrap template for a chatbot landing page.
Voice App Landing Page Bootstrap Template
Market your cross-device voice apps with this landing page template. Find all the resources here: Jovo Resources.
