Political debate fact-checking in real-time
Cookie Jar is a user-driven application for fact-checking political debates as they happen. As a high-stakes debate unfolds, the audience can use the app (on phone, tablet or desktop) to create and view posts with the perfect video clip or research study to refute a false statement, an exaggeration or a bald-faced lie, catching the debater's hand in the proverbial cookie jar.
This project was focused on Axure prototyping across mobile, tablet and desktop layouts, as well as usability testing and visual design.
[When exploring the prototype, adjust your browser size to see the app adapt across mobile, tablet and desktop layouts.]
THE LANDSCAPE Cookie Jar is entering a landscape that includes social media and discussion forums Twitter and Reddit. These services' users can converse with and amplify the audience for each other's comments (via "retweets " or "upvotes") around particular issues. Conversations are organized by hashtags or forum headings.
In early October 2015, Twitter also rolled out "Moments," short, accessible summaries of trending topics, made up of leading tweets and lots of multimedia ("vines," gifs, images and video) through which users can swipe to get an overview of the topic, without having to seek out and "follow" thought leaders/other important figures that are tweeting about the topic. The "moments" are temporary, as the list of topics represented is updated throughout the day.
Cookie Jar, like Twitter or Reddit, is updated in real time while a debate is occurring. Like Reddit, users' posts can be "upvoted" (or "downvoted") to make supported claims rise to the top of user's feeds, instead of getting lost in chronologically ordered feeds.
Cookie Jar debate feeds are closed a short time after the debate ends, and are then archived, to be accessible for users' later reference (users are also able to search content by politician's name). The focus of our app is solely on political fact-checking, and the app allows for multimedia posts - photos, videos, links, .docs or .pdfs-- to substantiate users' fact-checking claims.
THE COMPETITION Several sites and apps exist to fact-check politicians and other public figures, such as the Pulitizer-Prize-winning Politifact (by the Tampa Bay Times), and SettleIt! Politifact's Argument Ender, an iOS and Android phone app that lets users: see if claims are true or false, take quizzes. and "alert their friends" about claims. The Washington Post's TruthTeller is not a specific application for smartphone or desktop use, but rather, it is employed across the Post's website and displays whether facts are true or false in real-time as video is played of a speech; TruthTeller achieves this by comparing the speech transcript against a database of known fact-checking claims.
FactCheck.org offers articles, Q&As (to which visitors can send questions), and the ability to look up content by candidate.
Cookie Jar stands out in this competitive landscape by the way it blends the energy, conversation and potentially huge contributor base of social media paths with a strict focus on fact-checking political debates as they unfold.
DEVICES This app, built as a responsive web application, can be used on desktop and mobile devices alike. The mobile experience is streamlined to focus users on their primary tasks (viewing/commenting, or creating posts), so that they may focus more attention on the debate. The desktop view will allow for increased functionality per page - quick access to archived feeds, profile settings, and more. Visit the prototype (also available at bottom of this page) and adjust your browser size to see Cookie Jar's layout adapt for different devices.
THE PROTOTYPE Our initial prototype was designed solely in a mobile (phone) layout. We used this iteration of our prototype for value testing, and to test process flows. In order to avoid outside factors when testing how users moved through the application, we gave users a specific claim to post in the feed, along with a URL to substantiate that claim.
Inspired by apps like Uber, we wanted a simple process flow that would get the user inside the app and right to where they can perform their desired task. Two screens, ideally, providing simplicity and stability. Our initial discussions led us to use a pop-up/layover screen, so that the process of logging in and selecting a debate feed didn't make the user feel like they were proceeding through several pages. Testers, however, expressed confusion at that design choice, saying they felt "uncertain whether or not [they] were in the app yet," because they could still see the login screen.
Next, we built out our prototype to create tablet and desktop layouts.
USABILITY TESTING Our primary concern was the ease with which a user could log in, select the live debate, and create a post. Tablet and desktop layouts created new challenges as we learned where users looked on the screen for the "New Post" button. We played with different ways of signifying menus or other entities on mobile layouts, so that we could reduce the amount of words on the screen.
Zero users tested had difficulty creating a post, once the post screen appeared. However, several hesitated to find the "Add New Post" button on the desktop layout. We relocated this button and addressed its depth in the visual design stage, so that it did not appear to be a part of the post or area it overlapped.
Of five users tested, all five said they were more inclined to primarily view posts than create posts. They found it entertaining to see politicians proven wrong, but were unlikely to be the ones to "find the evidence and shout out a statement."
What is Cookie Jar?
Visually, Cookie Jar is polished, bold. The Cookie Jar voice is intelligent and cheeky. The platform and its uses are entertaining and approachable.
After establishing the Cookie Jar brand identity, the first two priorities in the visual design stage were creating a color palette, and standardizing-- standardizing word choices (Create Post, or Add Post? - these needed to be the same across the application), typography, color, lines/borders, buttons and text size (key in creating hierarchy, especially on the possibly-text-heavy feed pages).
To create a bold, polished feel for the app, we consciously chose red and blue hues that differ from the bright red and blue commonly used to signify the Democratic and Republican parties. As hoped, one user noted these colors "made sense" for a political application, and did not suggest a party preference.
A post's vote arrows are highlighted in green (upvote) or red (downvote), when the user has voted on the post. In testing, users did not feel sure they had voted, because they did not notice the vote count change. The colors offer confirmation.
The logo changed from a closed cookie jar to an open jar (jar's color changed from blue to a neutral grey), to pair with the cheeky "Don't Get Caught" slogan.
Where the debate selector screen previously featured "Recent Debates" and "All Debates" options, we simplified it to offer "All Debates" and the current debate only.