Nicki Stearns | Sprout Social Bot Builder
16684
portfolio_page-template-default,single,single-portfolio_page,postid-16684,ajax_updown,page_not_loaded,,qode-title-hidden,qode-theme-ver-16.8,qode-theme-bridge,qode_header_in_grid,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

BOT BUILDER

Self-serve bot building experience for Twitter and Facebook.

Overview

Sprout Social provides a powerful social media management tool. One of the newest features within the product is the Bot Builder. As part of my role on the Bots Squad, I worked on designing an experience for a self-serve bot builder for both Twitter and Facebook.

SproutSocial-Logo
2017
Sketch, Illustrator, Axure, InVision

1.0 › Bot Builder homepage in the settings section of Sprout Social.

Challenge

I started the process of designing the bot builder by researching other builders within the market. Many bot builders at the time were in alpha or beta stages, like It’s Alive, Talkbot.io, Chatfuel, and Firebot.

 

From this analysis, a few trends were identified:

  • Either a tree or form layout was used.
  • Welcome message, quick replies, and auto-responses were ‘must haves’.
  • Most experiences were complicated and overwhelming.
  • Most builders focused only on the Facebook experience.

2.0 › First round prototype of tree-style builder concept.

Approach

For my approach, I started by prototyping a high-level vision of where I’d like to see the Bot Builder go in the future to align with what was available in the market. This included a tree-style builder with a card-style homepage.

 

After several rounds of discussion and brainstorming, the squad decided to start small and focus on building a form-style builder for Twitter. Based on the analysis, Twitter was a market gap within the other builders and a form-style builder was easier to build on a shorter timeline.

 

After prototyping a basic form-style builder, we tested the solution internally with several Sprout users to validate assumptions and solve any issues with the experience.

Prototypes

Vision
Axure Prototype
Form-Style Builder
Axure Prototype

3.0 › Second round prototype with form-style builder concept.

4.0 › Screenshots from Twitter bot builder experience.

Solution

Once our solution was fully vetted internally, I began the design process. At Sprout, our design system, Racine, is the ‘go-to’ for UI components and styles, but since the bot builder was a new feature, it required new components. Working with the Bots Squad design developer, Eric Boyer, I was able to design and build new components for our design system.

 

The Bot Builder was a new venture for Sprout and with that came a few unknowns, like ‘Is this something our customers will want?’. To validate this, we launched the first version of the Bot Builder to only a small set of power-user customers. This was our Beta phase.

 

During the beta phase, we released updates and improvements until a full rollout to all enterprise customers. Not long after our Twitter Bot Builder release, we launched the same experience (with some subtle tweaks) for our Facebook Bot Builder.

5.0 › Screenshots from Facebook bot builder experience.