How the BBC and the Guardian tell stories on mobile
The visuals editors of the BBC and the Guardian open up about how they approach stories, the key principles they follow, the mix of skills in their teams and the rivals they admire
Build for desktop then shrink down to mobile, or start with mobile and then scale up? How do we make long articles and complex charts work for small screens and fat fingers instead of wide canvases and precise mouse clicks? These are some of the questions most media organisations grapple with on a daily basis.
Two key global media giants who have been pioneering forces in delivering high quality, innovative journalism on mobile are the BBC and the Guardian. We talked to Bella Hurrell, deputy editor of BBC News Visual Journalism team (and a speaker at GEN Summit 2018) and Feilding Cage, Visuals Editor of the Guardian, about how they make stories work on the small screen, their personal journeys, the key skills they focus on and their top tips.
In the beginning ‘At the BBC and we’ve been making charts, interactives and graphics in a responsive way since about 2012 or 2013 when the mobile audience began to grow significantly’, says Hurrell who has a digital journalism background. ‘Now the majority of our online audience comes to us each day on a mobile device, via our news app or responsive web, putting the mobile experience front and centre is second nature.’
Cage started thinking earnestly about mobile in 2012 while covering the election for the Guardian. ‘We produced election night results for both the desktop and mobile sites, but they were essentially two completely separate apps built by different teams. And, frankly, the mobile version was very limited that simply answered who’s winning without much detailed analysis.’ After this, all projects absolutely had to work on mobile. ‘Today, I spend a lot of time thinking about what the user is doing, when they’ll see it, and where they’re at. I tend to think how I’ll respond to something while on the bus listening to music. Will the autoplaying video annoy me? Will it work offline? I definitely spend more time thinking about the user experience and expectations on the user through a project.’
The teams The BBC team is about 30 member strong, comprising designers (infographics, UX and video specialists), front end developers and journalists all focusing on output for the website. ‘We produce quick turnaround daily news graphics up to more interactive content including ‘personal relevance’ calculators and longer form storytelling’, explains Hurrell. The department is also home to all the BBC’s TV designers and picture editors which has been an added advantage for mobile. ‘We learned pretty early on that designing content for mobile and social media has a lot in common with designing for TV — graphics need to have a single focus, larger text and be visual to grab the attention of the distracted viewer’, offers Hurrell.
The Guardian’s Visuals team has 20 members. The current avatar was created in late 2014 by merging the graphics and interactive teams with close collaboration with the data and photo teams. ‘A key component to our team is the mix of skills. We’re a team of about 20 with skills that include video, motion graphics, photography, graphic design, UX, data and coding, But most importantly, everyone on the team is a journalist’, says Cage. The team’s motto is ‘Explain the news when words aren’t enough’. ‘We produce visuals that are essential to understanding the news and that put the news in context. The Guardian’s newsroom is fairly digitally-savvy and so we spend a lot of time working with reporters on ideas already in motion. We’ve built chart and map tools to allow reporters outside of the team to produce some of the basics of visual journalism on their own’, Cage explains.
Key principles and projects The BBC team tries not to spend much longer than about eight weeks on any single project and collaborate on many of them with journalists and producers across the BBC. One of Hurrell’s favourites is What has President Trump said about your country? which she feels balances friendly design with interesting editorial content, has an accessible tone and provides great value as it is constantly updated with every new utterance of the US president. Then there are the calculators that follow a successful formula — explain a single idea in one sentence, allow basic inputs from the user to be entered in one mobile view, and then a reward in the form of personally relevant information. Some recent examples include the Tampon tax calculator that lets readers find out how much they have spent in value-added-tax on sanitary products in the UK, and the NHS tracker which shows the state of UK’s National Health Service by postcode.
Hurrell and her team try to keep it simple while working on these projects by focusing on one idea that the user can scroll through: maps, charts or graphics that are clear, engaging and tell them one thing rather than a complicated set of clickable options. Some of her top tips are:
- Don’t forget the basics
- Make sure your content is well written and properly subbed
- Don’t expect users to pinch and zoom, they won’t
- Remember ALT text and to check for colour blind accessibility
- Make it personal for the user. Assure them that their information is safe and you are not recording or storing it
- Love your user. Don’t make life hard for them by, for instance, by asking for information they don’t have to hand. They won’t go and look it up.
For Cage, the real mobile change day to day has been approaching how the team plans and edits stories. ‘We now consider a lot more the X number of things we expect the reader to get out of this and then clearly structure the piece around it. That allows you to make decisions about design, data viz and technical optimisation that are clearly focused on mobile. Then, if it works on mobile it works on desktop with maybe some small enhancements’, Cage explains.
Recent examples include tracking live London pollution data to see which site breaks legal limits in 2018 first and the card-based Mekong river interactive that also helped devise new ways to tell stories and develop user interactions on mobile.
His top tips are:
- Focus on the story
- Have a clear understanding of what you want to achieve
- Optimise for mobile and avoid the desktop add-ons
- Make it clear on the entry screen what the page is about and don’t expect the user to scroll a few screens to have a sense of what they’re going to get
- Have a clear process for planning and thinking through projects
Effecting change Despite hiring some of the best editorial and technical people, the larger and older media organisations often struggle to change the mindset and habits of their staff and decision makers developed over the years. It wasn’t very different for the BBC and the Guardian when it came to mobile.
‘Even though the prevailing orthodoxy from the outset (when the BBC’s mobile audience began to grow significantly) was that it was better to come up with a mobile solution first and then design out into desktop, that was a really tricky shift for many journalists and editors who loved the big canvas provided by their desktop screens’, recalls Hurrell. The most telling shift came in 2016 when the BBC’s product team changed the preview function of BBC News CMS — used by thousands of journalists to make online stories — to default to a mobile view.
For Cage, a big focus this year is to shift from being reactive to proactive. ‘By the time a story appears on a newslist, it’s often too late as the publish time is within minutes to a few hours. We’ve built in time to think about the week ahead, and sometimes weeks ahead. It’s not that we need weeks to build a single project, but the extra time whilst juggling multiple projects allows us to report and develop our ideas just like any other piece of journalism’, he explains.
Best of the rest The BBC and the Guardian may be news organisations that media companies around the world look up to for setting standards, but who do they envy and how do they see mobile storytelling shaping up in the rest of the industry?
‘Most news organisations have made big strides in terms of developing video that works best on mobile and social media. The Quartz app was an interesting move and since then some news organisations have been using conversational user interface-like explainers — refactored Q&A’s — to deliver context and background both on social media and within websites. I also think we will all get better at learning from audience data what really resonates with users and how to better structure stories. We can use them to create compelling content about sometimes harder-to-sell subjects like Yemen, Syria, climate change or Brexit’, offers Hurrell.
Cage is a fan of the Outline, the American digital publication that has been earning kudos for its mobile focused design and content: ‘I really like that they’re trying to push design and create a visually engaging experience.’
Bella Hurrell is deputy editor of the multi award winning BBC News Visual Journalism team. She works creatively with designers, developers and journalists across BBC News to produce cross-platform stories and interactive digital content. She is currently focusing on innovative storytelling techniques for mobiles.
She will take part in the session ‘When mobile takes all: four ideas you should implement by the end of 2018’ at the GEN Summit in Lisbon, 31 May — 1 June.
Feilding Cage is the visuals editor at the Guardian, where he has worked since 2011. Before that, he worked as an interactive developer at the Associated Press. He studied Journalism and mass communication at the University of North Carolina at Chapel Hill and holds an MA in graphic communication technology & management from New York University.
Correction: the BBC team has 30 members not 40 as originally reported.