Bot management for everyone

The problem

As part of Cloudflare’s mission to make the internet safer, protecting traffic from malicious bot attacks is a big deal. Bots take up 30% or more of total internet traffic at any given time, with peaks above 40%. What started simply as a proposal to show what percentage of traffic was automated became a thorough engine for controlling bot responses.

However, Cloudflare has multiple customer types, and a super granular approach to traffic and mitigation wasn’t the right one for everyone. With this project, we tried to understand what the balance for hand-holding and in-depth traffic response control was for each type, starting with the most complex use-case. Simpler preferences get bigger immediate results, but with less control over the nitty gritty.

Content played a massive role in this work, as a big part of it was communicating at the right level for each customer tier. We had the opportunity to create unique landing pages and different levels of control for each customer type, and if we were going to use language around upgrading, I wanted to make sure that we were working in tandem with marketing for a cohesive approach. This wouldn’t be possible without this collaboration, implementing event tracking and actually following up on the data. 

a big data challenge

This was an excellent example of collaboration efforts between design and engineering, since with the first deadline being only a week long we co-created in design and code without handovers. The result was a new chart experience: giving customers the ability to filter their traffic based on the manipulation of a draggable bar. This bar showed the concentration of traffic organised by scores that went from definitely automated to definitely human. After testing that this approach was not only feasible, but desirable through using clickable prototypes to get validation, this was launched and added to our component library. This interaction preference to the usage of regular filters is monitored through Amplitude, and the results are undeniable: people love it. There is an average of 300% preference for adding filters through it, and a staggering 1000% preference for editing them through it. This means they can manipulate their data in real time, alternatively to using the usual input controls for filtering.

An interesting challenge here was figuring out what type of chart was appropriate, and we were down to 2, proportional VS total requests count. While the latter was the most common way that our internal team visualised this kind of data, we actually concluded that it generated a false impression of the data for a very simple reason: people go to sleep, bots don’t. So showing a proportional view of the traffic actually gave a false impression that there were more bot attacks late at night, when, in fact, there were just less people awake. It was only possible determining this so fast because of how closely w were working with engineers and customer support, giving us the ability to check on the viability and legibility of data in real time.

The proof is in the pudding

But is the thing we made valuable? This project was a great example of the Return Of Investment of Design. One  of our biggest bets was that we could offer a compelling case for  upgrades from pro to business plans. This was done through promoting more granular data visualisations to power customers to control their automated traffic. And it paid off! Today, bots is our highest converting feature from pro to business plans by the amazing figure of over 1000%. In fact, this our highest converting feature for business plans. This wouldn’t be possible without collaboration with marketing for content, implementing event tracking and actually following up on the data. 

You can read more about Bot analytics here.

Opportunity for accessibility improvements

That doesn’t mean we don’t have opportunities for improvement: with this work it became obvious that we still have a long way to go when it comes to applying accessible principles to our charting work, not limited to this. I raised the flag that our colours were not 100% accessible, and that is currently being addressed by an extensive audit and work across all products in Cloudflare. We also want to add the ability to click on the chart legend to filter through the data.