Poligraph

About

A concept development and design mockup for CNN politics app. The idea was to integrate a quiz type section into the app that would allow the user to go through a series of questions/statements in order to see with which Presidential Candidate they align themselves with. The slider scale is used to indicate if the user agrees or disagrees with the statement. At the end of the quiz. there is a reveal that indicates with which Presidential Candidate the user identifies with based on answers provided.


CHALLENGE

Create an in app quiz that would present several known and less known statements about the 2016 Presidential Candidates and let the user decide if they agree or disagree with the statement in order to see which Presidential Candidate aligns more with their views in the end. The challenge of this project was to create an in app quiz for the CNN POLITICS app that could be folded into the original app. It needed to look similar to the existing look as well as be easily understood with minimal direction as to how to navigate the quiz. The elements needed to create the quiz are: question, timer, slider answer.

 

SKETCHING / FLOW IN PROGRESS

To work through the problem i sketched out some ideas as to how it would flow from page to page as the quiz is progressing. Initially when I thought about it I wanted more data to be collected about the user to show a statistics page at the end, but the more I worked through it the less it seemed important for the quiz overall so I got rid the user info page.

To prompt the user to know how the quiz works I thought about adding an overlay with short text info to guide the user before the first question. A timer with 10 seconds at the top would urge the User to select an answer within a short amount of time, in order for it to be an honest answer without too much debating wrong or right.

poligraph--wireframes

 

THE DESIGN

A red and blue gradient for the background displays the separated sides of the two political parties. Highlighted statement text and a large easy to see timer at the top displays the amount of time available to answer their stance based on the statement with a slider that swipes to NAY if they disagree or a YAY if they agree with the statement.

The last question, once answered would prompt which person the user identifies with based on their answers by revealing to either the Democratic Candidate or the Republican Candidate. The user then can share their answer on their social media by click on either Twitter or Facebook icons.

 

POLIGFRAPH-MOCKUPS

 

ANIMATED PROTOTYPE