Pictures that tell a thousand words
We built a tool to help busy BBC journalists build eye-catching graphics that capture the essence of a story.
Keeping people’s attention on the Internet is a constant battle. High-traffic sites like BBC News have perfected the art — they know that easy-to-scan visuals will let readers scroll through a story to pick out the information they need and see if it’s worth their time to read on.
But journalists aren’t graphic designers, and they rarely have the luxury of time to create high-quality graphics to accompany their copy. The BBC had created a tool to help them do this, but it was becoming outdated. Journalists found it clunky to use, and uptake was stalling. And it couldn’t support the formats required by mobile content publishers like Google, Facebook and Apple, meaning stories were missing graphics on many platforms.
As a result, many journalists had turned to a specialist team at the BBC, which makes bespoke graphics to order. But this team is supposed to spend its time on complex, high-profile stories, not the everyday graphics that journalists could be building themselves if they had a more user-friendly tool.
Usability is the key
On the face of it, our task was simple: build the BBC a new tool, only better. What was not so simple was making sure the tool is easy for journalists to use, able to output graphics for any channel, and capable of supporting translation into more than 40 foreign languages. It also had to fit seamlessly into other tools — like the web CMS — that journalists at the BBC use and which are built by different teams. Finally, the interface had to comply with the BBC’s design and accessibility guidelines, which we were familiar with from our previous project with the organisation’s R&D department.
We began by interviewing journalists to understand what they wanted from the tool, as well as their frustrations with the existing one. Because the features were already well-defined, the project’s success was about improving usability and encouraging more journalists to create graphics for their stories. This required constant liaison with design, development and accessibility teams across the BBC.
We built the tool using React for the front end and Node.js for the back end. Node.js is a core part of the BBC’s technology stack and is perfect for applications like this, where a large proportion is built on a serverless architecture using AWS Lambda. We also knew that Node.js could handle the highly asynchronous communication between multiple systems that this build requires.
At its heart, the tool had to be capable of building graphs, and we chose a graphing library called Vega to handle this. Because we were handing the project over to the BBC after completion, we needed a well-supported open-source library with a large and active community so we could guarantee long-term support. Compared to the other libraries we investigated, Vega was also the most flexible, providing us with options beyond the immediate project roadmap.
One of the main successes of the project was the speed with which we could deliver so many production-ready features.
Ready for the newsroom
The new tool lets journalists drag and drop images, text and data from tables into a simple interface so they can build their graphics. As they type or add content, a live preview shows what the output will look like, which can be toggled to show views on different devices. All this happens directly in the BBC’s web CMS that journalists use to file their copy, so they don’t need to leave the main service they work in.
One of the main successes of the project was the speed with which we could deliver so many production-ready features. The tool can handle twelve graphic types, which we built in two four-month blocks. Instead of one output that has to be manually manipulated for various channels, our tool produces responsively sized images, HTML, or envelopes to be used on the BBC’s website, apps, or external publishers like news aggregators.
We’re not done yet
Our first releases have been really well received, so we’re looking at further phases to build new functionality, increasing the range of tools available to journalists across BBC News, Sport and the World Service.
If you have complex tools or services that need a new lease of life to increase adoption, we’d love to hear from you.
