Back to portfolio

A tagging interface to help understand the COVID-19 pandemic

Background

Beauhurst's data team tracks over 30,000 high growth companies in the UK, and the data is made available on the Beauhurst platform. When the Coronavirus pandemic started, we were in a good place to figure out how it affected these ambitious companies. This would be very valuable data for our subscribers in governemnt, at local council, and any others focused on analysis.

We wanted to tag companies on the platform with a status showing how they were affected by COVID-19, and we realised an effective way to do this is to visit the websites and social media channels of the companies and read their COVID-19 update posts. A very high percentage of companies with an active online presence have posted this sort of update.

To tag 30,000 companies quickly, we needed an interface to support the 20+ people doing the data work, which I was asked to design. Until the interface was ready, the Data team would use a spreadsheet to collect the data. This gave us something we could benchmark the performance of the interface against.

Project goals

  1. Release the interface as quickly as possible, since we had a lot of tagging to do. The earlier the data is available on the platform, the more valuable it is.
  2. Make sure the interface is faster than the spreadsheet, because if it's not we've wasted the development time.

We weren't focused on making the interface look good, since it'd only be used by Beauhurst employees. This was a good thing in terms of research, since I had easy access to everyone who would use the interface.

Discovery

The CEO, myself, and two developers had a call to discuss how the interface should work. The CEO, who is also the acting Head of Product, used a digital whiteboard to draw up a rough wireframe while we were talking.

The CEO's initial wireframe

We agreed on a few details that would help speed up tagging:

Since there were 16 tags, in both "Explicit" and "Implicit" categories, I realised we couldn't effectively use keyboard shortcuts for the actual tagging, so we agreed to stick with keyboard shortcuts only for the other functions on the page.

Focused on the scrolling issue, I wanted to know the worst case scenario to design for. I found out who had the smallest screen in the Data team. Since it was a browser-based interface, I asked that person to use an online tool that would tell them the size of their browser viewport, and set this as my maximum artboard size.

Design and development

Here's a mockup of the first interface version I came up with:

The first mockup

Some details to note:

The first mockup led to a round of feedback with the CEO and the Data team, and acting on that feedback led to this second mockup:

The second mockup

Some details:

With these two rounds of mockups done, the development team started building the interface, and quickly produced this first version:

The first build

I gave feedback to help bring it in line with the mockup, such as fixing the spacing issues, which led to this:

The second build

I was told that the coloured bars in my second mockup were hard to develop quickly, since our style guide doesn't support them. I decided on the alternative which you can see above - coloured backgrounds for the tags. This has the added benefit that it doesn't affect the layout of the page, which saves more space.

Results

We released the second version of the interface, and the Data team started moving from the spreadsheet to the interface. Early indications are very good. I measured how many companies a person tagged in an hour with the spreadsheet, and compared it to how many were tagged by the same person with the interface.

Using the spreadsheet, the person tagged a company every 1 minute and 33 seconds. Using the interface, they tagged a company every 1 minute and 12 seconds. This is a 23% reduction in tagging time. Over 30,000 companies, that's a saving of 175 person hours.

Back to portfolio