Represent cover image
Vote Responsibly.

Details

The goal of this application (prototype) is to help users make informed decisions when voting. It contains information about candidates and their party affiliations, bills, committees, websites, emails, etc. The assignment directed that the candidates should be displayed based on current location, an inputted zip code, or a random zip code. I used Figma to make the wireframes, and the ProPublica API to access all candidate information.

Wireframes and Interactions

Home
Home Screen.

My Represent! app opens to a home screen with 3 buttons: “Use Current Location”, “Use Zip Code”, and “Random Zip Code”. In this demo, I will first choose “Use Current Location”.

Current
Current Location Candidates.

The app finds the Senators and Representatives for my current location, Berkeley. Here, we can see the pictures, titles, names, parties, emails, and websites for each Senator or Representative. The names are written in blue to represent that each candidate is a Democrat. Each candidate has a “More Info” button. The demo assumes we click Barbara Lee’s “More Info” button.

Lee
Candidate Barbara Lee.

Here, we can see Representative Barbara Lee’s picture, title, name, and party. We can also see term information, next election, committees she is a part of, as well as recent bills she has worked on. Once again, her name is written in blue to represent that she is a Democrat. We can click the “Less Info” button to return to the previous results, and/or press back from the device to return to the main screen.

Home
Home Screen.

Here, we are back in the Main screen. I will now choose the option “Use Zip Code”.

Zip
Zip Code.

Here, the user is prompted to select a Zip Code. The user can enter any valid Zip Code. In my demo, I choose “94404”.

Zip Candidates
Zip Candidates.

Here, we can see the Senators and Representatives for Zip Code 94404. (Note: I used API to retrieve the county name for the manually inputted zip codes, as users should have some idea what zip code they are entering). We can see the pictures, titles, names, parties, emails, and websites for each Senator or Representative. The names are written in blue to represent that each candidate is a Democrat. Each candidate has a “More Info” button. The demo assumes we click Kamala Harris’s “More Info” button.

Harris
Candidate Kamala Harris.

Here, we can see Senator Kamala Harris’s picture, title, name, and party. We can also see term information, next election, committees she is a part of, as well as recent bills she has worked on. Once again, her name is written in blue to represent that she is a Democrat. We can click the “Less Info” button to return to the previous results, and/or press back from the device to return to the main screen.

Home
Home Screen.

We return to the Main screen. This time, I choose the “Random Zip Code” option.

Random
Candidates for Random Zip Code

The Zip Code “33647” is randomly chosen, and we can see the Senators and Representatives for Tampa, Florida. (Note: I used the API to retrieve one city and the state for the random zip codes, as users would have no idea where the random zip code belongs to). We can see the pictures, titles, names, parties, emails, and websites for each Senator or Representative. The names are written in either red or blue to represent each candidate’s party affiliation. Each candidate has a “More Info” button. The demo assumes we click Marco Rubio’s “More Info” button.

Rubio
Candidate Marco Rubio.

Here, we can see Senator Marco Rubio’s picture, title, name, and party. We can also see term information, next election, committees he is a part of, as well as recent bills he has worked on. His name is written in red to represent that he is a Republican. We can click the “Less Info” button to return to the previous results, and/or press back from the device to return to the main screen.

Conclusions

The assignment came with specific requirements and gradic rubrics, so there was not any user interviews or testing involved. Nonetheless, I enjoyed designing the wireframes and interactions. Thank you Eric Paulos for creating the assignment!