Visual and Product Design
Screen Shot 2020-07-29 at 2.49.57 PM.png

Bot Framework & ABS Websites

Bot Framework &
Azure Bot Services websites

thumbnail_IMG_1625.jpg
 
 

What started with a heatmap and dreadful drop off rates.

The Bot Framework is an SDK on GitHub used to create chatbots and virtual assistants. Developers access the site from various sources like GitHub, Stack Overflow, web searches, Azure, and Azure portal.

Initially, this project seemed straightforward. The project manager, who had previous experience at Amazon, provided extensive metrics. A heatmap revealed that less than 70% of visitors scrolled below the fold, and even fewer engaged with the site or interacted with our CTAs. Although the final work may not have been flawless or solved all intended problems, it served as a demonstration of the challenges we aimed to address.

The whiteboard diagram above, while confusing, attempted to depict the various paths in our Customer Journey. Even with abundant data, multiple individuals still held different ideas about the problem and its solutions.

As the saying goes, "Too many cooks spoil the soup." This idiom, which can be expressed in different ways, emphasizes the challenge of having too many individuals with diverse opinions and approaches.

The original website and heatmap provided clear indications that visitors were expecting something different from the site. Our plan was to devise a solution and create a similar version for Azure Bot Services. Both versions would offer the same products and solutions, but one would be hosted on GitHub while the other on Azure.

Original website

Heatmap

“What should the copy say?’

After discussing with the project manager and design manager, I began by exploring competitor websites and sketching ideas. However, we faced a challenge: we lacked marketing team support for copywriting. We attempted to hire freelance technical writers, but it became evident that writing about AI, bots, machine learning, and NLP without being a developer was exceptionally difficult in this emerging field.

This is where things became complicated. We decided that our team would have to write the copy ourselves and develop marketing materials for our clients. We gathered input from the sales team, who shared real customer stories. With wireframes and ample feedback, we proceeded to determine the best course of action.

 

breaking it down on the whiteboards

 
Desktop HD Copy 3.jpg
 
 

After a premature jump into mockups, we took the proper steps into content and flow without the distraction of visuals.

 
Bot Frameworks 2_MBv4 - BW.png
 

This is when things started to become overwhelming, as input poured in from project managers, engineers, VPs, and even executive assistants. As a new team member and contractor, I had limited control over the project compared to what I would usually have. However, it provided me with valuable insights into how the team operated and the immense dedication to explaining our product to customers. I took charge of creating all the graphics, illustrations, and designs in these compositions.

A new direction

Around 6 months into the project, we discovered that another team in Cognitive Services had hired an agency to create an animated video. Although well-executed, it required some color adjustments and aligning with our brand language. We were contemplating a two-pronged approach for customers: one for those familiar with our offerings and seeking to dive right in, and another for those exploring and searching for what we had to offer.

The illustrations in this mock were not created by me, but I had permission to manipulate them to make the assets appear more extensive by using them as spot illustrations.

Home page with front loading information and then a place to jump off for Developers or Explore for a more marketing-focused story.

Animation Based Design.jpg

This was the Explorer journey - customer stories and how cognitive services can be used to enhance a bot.

MarketingPath.jpg
Cognitive Services Blades.jpg

This plan looked nice and gave us some fun animation options and vector assets to use for other things, but in the end it was shot down by our CVP as giving to much focus on cognitive services.


Final comps sent to production.

We revisited and revised one of the previous versions that showed promising results. The Azure Marketing Team provided us with updated information and a new grid. Eventually, we arrived at a simple and straightforward website, which ideally shouldn't have taken 9 months to create. However, at the end of the day, most people were satisfied or simply exhausted from ongoing debates, and the analytics are showing significant improvement.

I'll share new heatmaps once I receive them.

 

LAPTOP

December 20th - Version 5.jpg

TABLET

Tablet 768x.jpg

Phone

iPhone 8 375x.jpg

Azure Bot Services

After we completed this website, we then sent that file to the Azure Design Team to get a template to create a version that would work and then began the process of adapting the ABS story translation of the Bot Framework site.

There are some similarities and some new sections that are specific to the ABS bot building in the Azure Portal that make this a different experience.

AzureBotServices.jpg