UI Case Study: Democracy for America Pulse Poll

Interactive Ranked Choice Voting Web Application Workflow

Democracy for America repeatedly used this web application to poll their membership for their preferences for a variety of candidates and/or issues of the day. Most visitors were able to use the drag-and-drop interface presented here, but for those with accessibility issues we provided an alternative page using standard form fields.

This system was very successful, not only with our members, but was also used by California’s Courage Campaign as well as FairVote.org for whom it helped illustrate the workings of Ranked Choice Voting.

Upon initially visiting the website, visitors were presented with the instructions to drag and drop candidates from the array of images into the drop target area above.

The order of the candidates is randomized for each visit to eliminate presentation bias.

You can view an archived version of the polling site:

Archive of Polling

DFA Pulse Poll Initial Screen

When initiating a candidate click-and-drag (on mobile devices a touch-and-drag) the instructions disappear from the drop zone and three slots appear to allow the site visitor to drop the candidate based upon their order of preference.

Once dropped into place, candidates’ rankings could be swapped by dragging one of them over another. Or candidates could be removed from their slot at the top and returned to the pool below.

The candidates’ campaigns could be provided a special link to the poll which pre-slotted them into the top position in order to encourage their supporters to participate in our poll. Of course anyone receiving those links ultimately had the option to vote however they pleased!

This website was fully responsive, and at mobile sizes the drop zone stayed pinned to the top to allow separate scrolling of the list of candidates which facilitated dragging them to the drop zone.

Note that the site also supported write-in candidates, and a user could specify as many as three of them.

Mobile version of the drag-and-drop interface.

The fully populated slate of candidates ranked by preference priori to casting the vote.

The site visitor casts their vote providing us contact information and submitting this form. They receive a confirmation email that provides them with social sharing links that will display their top-rank choice… as well as a link that pre-populates the site with that choice. They’d also receive a follow-up email when the poll closes and the votes have been tabulated after vetting them for signs of mischief or multiple votes.

Having gotten the voter’s ranked choices of their top three candidates, we implemented a means for visitors to click on candidates to eliminate them from the vote, allowing them to see where supporters of those candidates’ second (or third) choices would be redistributed. This behavior was implemented in client-side Javascript, providing immediate feedback.

Eliminated candidates were visible in a panel at the bottom of the page and could be clicked on to put them back in the running.

In this image all the lowest ranked candidates had been removed until one candidate received a majority of the vote… which is precisely how Ranked Choice Voting works.

You can view an archived version of the results site:

Archive of Results