Visual and Product Design
Screen Shot 2020-02-12 at 3.47 1.png

Bot Branding Plugin

Bot Framework Composer
Branding Plugin

Desktop - 19.png
 
 

our team needed a way to bring custom visual branding into a chatbot experience that was approachable by designers.

This project was started as a side project. I wanted to add this feature to an exisiting product called WebChat, we have so many clients that need to style their bots before they can add it to their channel, website or app.

Often the default design is just left in place or very minimal changes are made to add an avitar or a few hex colors. Engineering deadlines are tight and the files are easy to mess up for a non-dev.

Project:
Create a visual design tool allow a team to easily create a branded visual experience for a chatbot.

Role:
Design and create a prototype of a branding tool, to get team buy in and Manager and CVP approval to budget the hours for engineering to add to a sprint in the next fiscal year.

Research and Sketching

The chatbot visual space is still pretty young, most bots tend to look like an iPhone or more often a poor copy of an iPhone. My design approach to this was to examine a few finished products that our Mirosoft clients had created. What needs did they have? what would need to be editable? what controls would I want? What areas could be left the same on all bots…

So some sketches and then some better sketches, my typical flow…

Prototype 1

Composer Patent in the works for DESIGN Plugin

The introduction of the Bot Framework Composer App put this project on hold, but ultimately it will give us a better place to implement the tool into a tool. As we developed more and more plug-in features to Composer and add a greater ability to make use of a multi disciplined team.

Composer Plugin V2

Screen Shot 2020-07-23 at 4.19.27 PM.png

The addition of Modes was a great opportunity to reinvent and the Branding Mode I had wanted to get into a Bot Framework Product. This plugin will be my first patent with Microsoft, so it is getting a lot more attention than some of the other flows in our product.

To test how it might work I made this mockup to see what it would be like for the Vodafone team to re-create a branded chatbot that their team had spent a long time defining and using it to extend their brand recognition into a new space.

Rebuilding a TOBi Bot.

TitleScreenMobilecomponent.jpg