BallotBox

Rapid prototype

BallotBox is a mobile application meant to encourage public participation in the democratic process and build an informed electorate. The main function is to allow the user to identify their congressional representative and call them. The secondary function is to inform the user of trending political issues. An additional function I have included allows the user to see what their representative has said or voted on about a particular issue, thereby linking the two main functions.

Design

Search for a representative

The first time the user opens the app, they will be directed to the “Find Your Representative” screen where they can search by ZIP code or by street name in case the ZIP code borders multiple districts and they user doesn’t know their ZIP code extension. Once they find their representative, they can view their information, add it to their “Your Representatives” list, make a call, or send an email.

Add rep to list

Once the user adds a representative, they will show up automatically by tapping the “Your Representative” tab from the toolbar at the bottom of the screen. The user can add more than one representative by tapping the plus symbol in the upper right hand corner of the screen. This will take the user back to the search process. The user can also delete a representative by tapping the remove button under representative’s photo in the “Your Representative” tab.

Find a trending issue

The “Trending” tab will take the user to a page of trending political issues. They can narrow this searching for their state from the searchbar or by selecting a particular category. By tapping on a particular issue, the user can see how their representative has voted in the past and any relevant quotes they have made regarding that issue.

View history

In “History,” the user can see a list of previous calls they have made from the app and the date those calls were made. They can remove calls from this list by tapping “Edit” in the upper left hand corner. They can also toggle the segmented toolbar to see emails they have sent their representatives.

Userflow

Prototype

Analysis

The goals for building this prototype were to test the information architecture and user flow of the app, the discoverability of features, and the placement and labeling of buttons. Preliminary user feedback encouraged me to change the wording of the “Save” representative feature to “Add” representative because an iPhone doesn’t allow you to save in the way you would on a computer. I also changed the manner of accessing details of the representatives in the user’s list from a small arrow to making the entire sheet a touch target.

The user performed the test on a laptop rather than a phone so the results do not reflect how easy or difficult it is to tap on different elements. During user testing, the first task was to search for your representative. I had the user start from the perspective of not having any representatives in their list so they began on the Search page (see user flow), but clicking on “Your Representative” took the user to a page where they had representatives on the list, thereby bypassing the search function. This is a shortcoming of Invision that you cannot pass variables to know when previous actions have been performed. Once I explained what happened to the user they were able to use the Search function.

For the second task, I asked the user to call their representative and then hang up. The user didn’t have any problems, but commented that the “hang up” button was a little hard to see because he did not expect it to be gray. (On the iPhone this button is red.)

For the final task, I wanted to test if it was obvious to the user that they could tap on individual issues. The user was to view trending issues and see what their representative has to say about legalizing marijuana. The user clicked on the “Trending” button in the toolbar and then clicked on the entry on marijuana legalization where they found quotes and opinions on the subject by their representative.