List of Chatbot Design and Prototyping Resources

Chatbot Design Resources Header Image

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

BotSociety Prototyping
Screenshot, 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

Prototyping Messenger Chatbots with Botframe.com
Screenshot, Botframe.com

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

Animation by digitalbreed on GitHub

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

Prototyping Slack Bots with Walkie
Screenshot, Walkiebot.co

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)

Bots UI kit by Mockuuups
Screenshot, Mockuuups.com

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)

Messaging Design Kit
Screenshot, Layer.com

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

Landing Page for Alexa Skills and Google Actions
Screenshot, Jovo.tech

Market your cross-device voice apps with this landing page template. Find all the resources here: Jovo Resources.

 

Header photo by Tim Gouw, emojis by EmojiOne!

  • botsociety.io is pretty cool. a bit outdated (no lists for fb messenger) but in general looks great

    • Junaid

      You can try botmock.com – they support pretty much all templates