VoteSmart App — Capstone Project Documentation

John Cornelis
8 min readNov 29, 2016

--

This article is the documentation of my capstone project for the online version of UC San Diego’s Certification in Human Computer Interaction (HCI) taught by Scott Klemmer in ten multi-week courses. The capstone project took all the facets of the prior nine courses and applied them to a single production concept of our choosing based on one of three rather ambiguous concept parameters.

Of the three design parameters I chose “Design an interface that facilitates personal or social behavior change”, so with a major election coming up it made sense to think of an app that could help citizens connect with the political information needed to be a well-informed member of democratic process.

Here’s the idea:

The woman might think that somebody who owns a Prius aligns with her values, and based on that assumption would think she disagrees with Prop 54 too. Instead she uses the app to quickly research the measure and discover that she’s grossed out by the people who oppose 54. She marks her VoteSmart ballot “yes” (which sends a synopsis of the measure to her email) and she activates reminders for the upcoming election.

Need Finding

To get an idea of how people tracked down political information I did three remote in-person (via screen sharing) think-aloud behavioral observations where I asked subjects to answer four questions:

  1. How politically minded are you (scale of one to ten?)

2. When and where is your next local election?

2. What is one of the propositions that will be on the ballot?

3. What is the name of one of the representatives that sponsored or supports the proposition?

The findings were basically that none of the subjects had a definitive source for such information, and that the top ranked sources did not make it very easy to zero in on specific info. Everything related to government seems to be presented in such a way that one has to be really dedicated and sift through a lot of lists to find information relevant to them.

Ideation

The need for a convenient source of political information was clear, and some deeper needs had been uncovered during the need finding process.

My vision was an app that could not only provide information, but could provide it in a way that was highly relevant and meaningful way to the user.

The ideas came flooding in but the overall concepts were:

  1. If people could inform the app about the things that mattered to them, it should be able to deliver personalized content.
  2. The app could allow users to collect and organize the things that matter to them.
  3. The app could help users understand the complexities of governmental operations, and their place within that.
  4. Using location settings, the app could help users get involved with the political process at a local level.
  5. The app could eventually help facilitate communication and understanding between users across party lines by interconnecting the information and providing crowd sourced relevance.

Storyboarding

As instructed, I storyboarded two scenarios, which is less than I would normally do so I picked the concepts that were the most interesting to me:

Someone wants an easy way to decide on what to vote for, so in the app they “vote” yes or no on broad issues which then uses that information to produce a voter guide for the specific issues on their local ballot…

Someone hits a pothole and wants the city to do something about it. They provide details in the app which notifies the appropriate city official and informs them about the opportunity to attend a city council meeting…

Pretty fantastic right? :D

Paper Prototypes

The two storyboard concepts were turned into paper prototypes and the interactions videoed. The videos were released for feedback and there was concern about handing over the decision making process over to an app as well as some gaps in the pothole concept. These were both understandable concerns and I realized that these two different functionalities were a bit much to tackle for a project that I was doing in my spare time, so I scrapped these features and re-focused onto the original concept of simply making information readily available, without so much processing and personalizing the data.

Testing (round 1)

The simplified app was protoyped and tested on friends to get an idea where things got hung up. Since it was important that users input where they lived to get relevant info, I made the address input box (with existing information to simulate location awareness) persist over the app content until users A. closed it B. confirmed the pre-populated address or C. entered a new address. The persistence of this panel was not enough to get users to interact with it.

Another issue I noted was around the specific words I used to refer to things. “Location” really meant “home address” and “issues” meant “propositions” or “measures.” There isn’t a lot of room to explain things, so I wanted to find the right words to use.

Iteration

I thought of how I could deal with these issues and built them into a duplicate prototype. These two versions were to be A/B tested on usertesting.com using a special promo that the class has on the testing website.

I settled on “issues” and made the location panel obstruct the entire interface until users dealt with it, along with adding a little instructional copy.

Paid User Testing (round 2)

The test on usertesting.com can be fine tuned to include certain demographics, but I kept mine pretty broad other than that they had to be in the U.S. I did add a screener question to keep out testers who didn’t identify as at least a little bit politically minded since they wouldn’t likely be using such an app.

The four tests showed that forcing people to interact with the address panel was not an issue for them. It also showed that the verbiage needed to be very consistent throughout the app, as well as the instructions for the test. I called “issues” “measures” and it confused a couple testers.

Test Results

Overall, the app seemed very intuitive to the testers and positive comments were made not only about the UI but also that the concept intriguing. All four subjects answered that the app was something that they would like to use. So that was cool to hear :)

Since this project was just me in my spare time, it was just a tiny little scaled-down version of a real project where much more of the interface would be scrutinized. Instead I was focused on two problems, the verbiage and the location panel.

  • Testing confirmed my solution to the issue of people using the location panel works better than the original idea, but I wasn’t 100% pleased with the solution. I would definitely try to come up with something better
  • Testing showed that people don’t know what “measures” means. “Issues” seems to be the winner, but I would definitely try to come up with more words and do more widespread testing on that.
  • Testing revealed an issue with the main navigation which is not surprising since there was admittedly very little thought put into in the first place. Since the project dies with the end of the course, sadly the main navigation will never get the love it deserves :(

Reflections on the Concept

Although I had to settle on some pretty basic functionality, I believe there is a lot of potential for a political info app and that, if well crafted, could combat ignorance and apathy among citizens by making information on the issues and representatives (and their factual details and backgrounds) not only easily accessible, but highly personalized.

Here are some of the bigger ideas I would pursue for this app moving forward:

  • Political Profiling
    As users interact with the app and start to keep track of things they build up the system’s awareness of the things that they pay attention to, and the way they swing for/against them so that it can connect information in a way that makes sense to them. This allows the users to find and follow the things that matter to them most. It also allows the system intelligently introduce counter-information so that it’s easier for people to consider the reasons why others are “against” the things they are “for”, or vice-versa.
  • Crowd Sourced Relevancy
    One way the system can intelligently introduce content is by enabling users to highlight parts for others to see. Medium actually has the beginnings of this functionality with it’s “top highlight” feature (you can try it out by highlighting this text… see the little modal above? … click the highlight icon.)
    Now imagine instead of this article there is the full text of a proposition on the ballot. As you read through you can highlight the things that are important to note, and if you think they are good or bad things. When multiple people start highlighting the same thing it becomes more relevant and then when someone else comes along to look at the prop, they can see everyone else’s highlights for and against. Of course, there is some sort of knob or slider to adjust the threshold of relevancy so it’s not one big highlight, then users can dial in more and more of the golden nuggets worth paying attention to in the text instead of having to wade through the muck of legal jibber jabber.

Reflections on the Course

An online course for UX isn’t ideal because you work in a bubble. My favorite part about UX design is the collaboration involved and I think it’s an important skill to hone. I learned a lot in terms of some of the technical aspects of things I was less familiar with, and some good new vocabulary, but the most challenging thing was putting my mind on the assignments in isolation and in my spare time. I wouldn’t do another general UX course again, opting instead for specific workshops, talks, tutorials and experimentation, which have always been my best sources for learning new skills.

Thanks for reading

--

--