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.
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.
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:
And here are early screencaps of this vision as it worked its way into the codebase:
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):
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:
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.
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. ¯\_(ツ)_/¯
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.
(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!)