The challenge
High-traffic sites such as BBC News have perfected the art of keeping people’s attention on the internet; knowing that easy-to-scan visuals will let readers scroll through a story and see if it’s worth closer reading.
The BBC had created a tool to help journalists create graphics to accompany their editorial but it was becoming outdated. It was clunky to use, uptake was stalling and it couldn’t support the formats required by mobile content publishers such as Google, Facebook and Apple, meaning stories were missing graphics on many platforms.
As a result, many journalists had turned to a specialist in-house team for help with bespoke graphics, 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.
How do you design a tool intuitive for journalists, versatile for varied content types, and robust enough for one of the world's leading news platforms?
The proposition
On the face of it, our task was simple: build the BBC a new tool, only better.
Less 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.
The project journey
We began by interviewing journalists. What frustrated them about the existing tool? What did they really want? Success rested on improving usability and encouraging more journalists to create their own graphics, we stayed in 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. 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.
The impact
The new tool lets journalists drag and drop images, text and data from tables into a simple interface so they can build their graphics – with a live preview to show views on different devices – all 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 such as news aggregators.
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.
Case study
Developing Polpeo’s proprietary crisis simulation tool
Polpeo’s big idea was a true-to-life digital simulation, populated with realistic scenarios that would immerse their clients in an engaging way. It would enable clients to develop crisis skills in a private and safe environment, learning powerful lessons and gaining invaluable insights that would help protect their brand in the real world.
Get in touch
We craft trailored solutions for unique challenges, not off-the-shelf or one-size-fits-all. We thrive on finding beautiful answers to complex challenges, using our experience and expertise to create results you can rely on.
The Isotoma way
Teamwork is at the heart of everything we do - trusting our people has always been one of our key values. With mixed-function development teams, we run our projects along agile lines.
You may also be interested in...
