Ask the Candidate

CLIENT

CNN

TYPE OF WORK

Personal Project

Interactive Design

Digital Product (UI/UX)

Artificial Intelligence

BACKGROUND / INSIGHT

When it comes to voting, research shows that most voters aren’t actually familiar with each candidate’s political policies and stances. It’s no surprise considering the torrent of clickbaiting and “alternative facts” that circulate around social media and news outlets at large.

IDEA

At AskTheCandidate.com you will be able to create a private town hall meeting with any candidate of your choice through video chat, allowing for the unique opportunity to ask candidates whatever politically inclined questions you might have. In order to ensure accuracy and honesty, each candidate will actually be an AI bot coded with information sourced from their respective (and fact checked) interviews, debates, social media posts, and political histories.

AWARDS

[ WINNER | 2017 Cannes Future Lions ]
Bronze | Clio Awards ]
[ Crystal | Ad Stars International Advertising Awards ]

#FF2B45

#4285F4

DIGITAL PRODUCT

WEBSITE

User Experience

#464646

#C2C2C2

#FAFAFA

#FFFFFF

This product is for everyone from young to old. So, the whole user experience must be simple, easy and straightforward.

I tried to make the whole process step by step in order to make easier to follow.

SIMPLE USER FLOW

LANDING PAGE

SELECT ELECTION

SELECT CANDIDATE

START CHATTING

UX / WIREFRAME

Landing Page

Simple Landing page with a line of our mission. Election button has a dark grey color to indicate to start and intrigue to click it.

Election Dropdown Menu Hover

When one of the dropdown menu button is hovering, it becomes red. And the election title pops up on the right side.

Election Selected & Next Step

When one of the menu clicked, the clicked menu stays on the bar with red. And candidate button becomes dark grey to indicate the next step.

List of Candidates

When the candidate button is clicked, the list of candidates show in vertical grids.

Candidate Hover

When the candidate image is hovering, white layer overlays and show the brief information of the candidate.

Candidate Selected

When the candidate image is selected, the detail information of the candidate shows.

Chatting

Start chatting with candidate by typing or voicing the questions. 

Add Candidate

Click + button to add another candidate to compare.

Compare Candidates

Another candidate is added, and able to check different stances.

WEBSITE

Visual Design

The whole experience and design should be smooth, and easy to follow. Mixture of white and grey make the whole design clean and provide systemic visual hierarchy.  Two primary colors make interesting visuals.

Layer 2_3x.png
Layer 3_3x.png