Check: Verify breaking news online

Branding and visual design by Chris Blow, Design Director of Meedan.

Case study

Fact-checking the Internet

How I contributed to Check, a platform to help journalists verify claims & debunk misinformation online

From summer 2016 until this past spring (2017), I had the great privilege of working with the folks at Meedan, who were trying to build a better, faster version of their longstanding open-source media verification platform Checkdesk. They needed a front-end developer/designer, and my friend & collaborator Paige Saez put us in touch.

What came out of that collaboration was Check, a platform that helps teams of journalists and investigators identify which social media reports are true, and which are rumors, lies, or propaganda. Check has been used by ProPublica in their award-winning project Electionland, which covered voting irregularities in the November 2016 U.S. elections; CrossCheck, a similar project by French journalists covering the recent French election; Amnesty International; the renowned citizen journalism organization Bellingcat; and by Documenting Hate, a ProPublica effort documenting hate crimes.

Here’s my perspective on how it happened.

Background

Checkdesk had been used successfully for years by Bellingcat for open-source intelligence investigations, e.g. of Russian military operations and the war in Syria, as well as by Amnesty International in human rights investigations. So this was a tough act to follow.

Post on Bellingcat's Checkdesk instance about geolocation of Russian Buk convoy
A Bellingcat project on Checkdesk, the predecessor to Check.

Meedan wanted to improve upon Checkdesk in both technical and user-facing respects. Although it was clearly providing value to its users, it was slow by modern standards, and sometimes unintuitive to newcomers. When I joined the project in June 2016, engineering had already begun writing a new stack in Rails, GraphQL, and React. My dev role was to write most of the CSS and some of the JavaScript.

Design

But before I wrote any code, my first challenge was to help finish the new designs. Meedan had gotten an opportunity to present Check at a conference, and they wanted help meeting their new deadline. We knew we needed new ideas to improve upon Checkdesk, but there also wasn’t much time for endless design revisions.

And yet, after reviewing the app and talking to users and stakeholders, my conclusion was: Checkdesk needed more than cosmetic improvements. To me it seemed like a relatively general-purpose content management system (CMS) that wanted to become something more opinionated, with a more focused workflow.

And after as much exploration as time permitted, I sold the team on the notion that Check should, in its interaction and visual design, nudge new users to sort reports (social media posts, usually) into resolved states like “verified”, “debunked”, and so on – a bit like an issue tracker, if you know the genre. Here was my initial Sketch mockup of what that could look like:

Early project page concept for Check
My early redesign concept for the Check project page. This is the "zero state" before any URLs/reports have been added. (Also, note this is dummy content for design purposes.)

And here are early screencaps of this vision as it worked its way into the codebase:

Early Check project page with list of media items
Early version of a Check list of media items with various statuses. I'm glad we lost the Roboto Condensed later.
GIF of the first media status dropdown menu
GIF of the first media status dropdown menu in Check, circa September 2016.
Early Check media item with true claim from Trump: 'The security aspect of cyber is very, very tough'
Early version of a Check media item, with a status of "Verified"; see below for how it looks more recently. Note that typically media items are Twitter/Facebook/etc. posts, but you can also enter plain text and quotes.

The visual emphasis on verification statuses is even more prominent in the more recent, Material-inspired visual design concept by Meedan Design Director Chris Blow (translated to CSS/JS mostly by me):

Tweet by The Guardian with their false allegations of a backdoor in WhatsApp
A Tweet marked as false, with the menu visible.
Tweet by @sarahjeong: 'Oh my god I just had the stunning realization that the US is the Florida of the world'
A verified Tweet.

And here is a GIF of an entire simplified workflow: (1) seeing a questionable claim on the Internet, (2) pasting it into Check, (3) doing verification work, and (4) marking it with an appropriate status:

GIF of a verification workflow in Check
GIF of a simple verification workflow in Check.

That said – not every media investigation leads to a definitive verification result; sometimes the journey is more important than the destination. (If you’re a programmer, think of bug trackers like GitHub Issues, where many issues reach no clear resolution, and the most important info is in the comments and metadata.) For that reason, we worked hard to make Check opinionated, but flexible enough to accommodate multiple usage styles, e.g. by giving each media item a comment thread, questions & answers, and letting teams make custom statuses that reflect their particular process.

Development

After my initial design push last summer, Chris took over most design work, and I focused mostly on CSS/Sass and JavaScript. You can see my contributions on GitHub.

My CSS methodology included using the Block Element Modifier (BEM) approach, which uses a consistent naming convention and generally flat, single-class selectors. I think it goes a long way towards improving readability and preventing specificity conflicts, and meshes naturally with component-centric frameworks like React. You can browse the app stylesheets here.

The team had already begun using a popular Material Design React component library when I started, and I went back and forth about it over the course of the engagement. Many UI component libraries are like frozen pizzas – good insofar as they’re cheap and consistent; bad insofar as it’s hard to change the ingredients after the fact. And yet, on a small team, making pizza entirely from scratch on deadline is sometimes too resource-intensive. ¯\_(ツ)_/¯

Check search page circa November 2016.
Check search page circa November 2016. To be useful for Electionland, users needed to be able to search and filter reports quickly to find the signal amid the noise.

Beyond CSS, I did a lot of work implementing front-end functionality in React components, especially on the media and project pages. Also the search page just before Electionland (where it was used heavily), which featured two things I thought were important: readable, hackable URLs, and live updates of the URL and results in response to query/filter changes without having to refresh the page.

Source code of media page model for integration testing
Source of one of the page models I wrote for integration and browser tests.

I also refactored the Ruby Selenium integration suite to run faster and be more readable, largely by using a Page Object Model approach (above) as recommended by the Selenium maintainers.

(I probably couldn’t have made many of the React/Relay contributions above without the help of Meedan Senior Engineer Caio Almeida whenver I got stuck – thank you Caio!)

If you want to learn more about Check, contact the folks at Meedan via this form or check@meedan.com. You can also follow @check on Twitter.

« Home