Mic Product’s First Hackathon

The American electoral process has a lot of issues. How do you get more young people to participate? How do we get candidates to address their concerns? How can we make the process more user-friendly and informative?

“Hack the Debate” was created by Independent Journal to encourage millennials to participate in the 2016 presidential election. Mic exists to help young people make sense of a rapidly changing world. This hackathon was a perfect fit.

We needed to pick one issue to solve. Our Policy desk told us that among all their election coverage, their reportage on debates was among the most popular. As the product team of a media company, we felt most qualified to make things that accompany content, rather than things that could solve perennial issues like voter turnout (though maybe one day). So we resolved to make something that would enhance millennial participation in presidential elections through a debate-related app.

The concept

We met with Zeeshan and Stefan from our Policy desk to brainstorm products. We all agreed that presidential debate broadcasts fail to take full advantage of digital technology in general and social media in particular. The second screen that everyone now watches TV with holds a lot of potential for supplementing a debate broadcast. No one’s really tapped into this in the political sphere.

We emerged from the brainstorm with three concepts: “GIF the Debate,” a livestream of the debate with a button that makes a GIF out of the previous three seconds; “Rate the Debate,” where users input their reactions to candidates’ speeches and see aggregate reactions in realtime; and “DebateGlossary,” an automatically updating handbook explaining all viewpoints of a particular issue.

With these ideas we left New York for DC.

Arrival

We arrived in DC on the Sunday of the hackathon with heavy eyes, a few half-baked ideas, and the assumption that a product would come together somehow.

It was our first hackathon as a product team. At Mic, we have a solid process that enables us to ship early and often. In DC, we had to distill what we do in a weekly and monthly basis into a single day.

The hackathon took place at the Institute of Politics & Public Service at Georgetown. It was open to anyone, so there was a mix of college students, freelancers, and professionals working on the same problem. In total, 60 participants showed up. There were two panels of great speakers from the Google, USA Today, the DNC, the RNC, and Twitter.

At around 9am we got to work. Of the three concepts we had, we decided to go with DebateGlossary. It was the most substantive and had the greatest potential to inform watchers of the debate. Also, we renamed the app DebateMate, because DebateGlossary is a mouthful.

The medium

We didn’t want to build an iOS or Android app because the barrier to entry is too high. People are picky about what goes on their phone; convincing a friend to download an app — even if it’s your app — is really hard. A web app, on the other hand, can reach a large user base quickly, since all you need to access it is a URL.

So the goal was to build DebateMate as a mobile-first web app that would do two things: First, it would serve as a companion client to watching debates live by offering realtime metadata on the debate itself; second, following the debate, it would function as a reference for Mic staff and readers with which to evaluate each candidate’s performance.

Wireframes

The concept of a digital handbook was solid. The next step was to translate this complicated idea into a simple visual treatment that the team could start iterating on. As one of two designers on the project, I took it upon myself to layout the wireframes.

I didn’t bring a notebook, so I sketched out a few rough wireframes on whatever surface I could find: napkins, an engineer’s notebook, and the back of some printouts we had.

The key is to express visual ideas in whatever form is most convenient. It doesn’t matter if you manually sketch or make digital wireframes. The point is to clearly communicate your concept to the team and make sure everyone is onboard with the UX of the product.

After about 20 minutes, I had a basic understanding of how the app should work.

The app’s main feature would be a timeline of the debate, segmented into sections related to key issues like foreign policy and income inequality. Within those segments, icons of different candidates click-through to a feed of the candidate’s statements on the topic. The feed would consist of static images, GIFs, quotes, links to articles written about the candidate on a given topic, tweets about that candidate mentioning that topic, and a visual representation of reactions using emojis.

For example, clicking Carly Fiorina in the education section would pull up a feed of Carly Fiorina’s stance on education at the debate. Swiping left or right would take the user the next next candidate’s feed on education or another topic that comes up in the debate.

We also designed the app to be easily embeddable on desktop sites. This would allow other outlets to incorporate the app into their own coverage of the debate.

Delegation

We got to work:

• David, our lead engineer, focused on creating a working prototype of the emoji reaction graph by creating an app that strips tweets of all characters but emojis.
• Lisa, an engineer, and Anthony, our VP of Product, prototyped the timeline that would be used to power the app.
• Tri was in charge of the the complete UI of the app. He took the rough wires I sketched on napkins and translated them into pixel-perfect designs.
• In addition to managing the UX of the app, I worked on the presentation that we would use to showcase our idea to the judges at the end of the day.

Process

We created a Slack channel to communicate fast and send files to the whole team at once. A benefit of using Slack instead of speaking aloud was that it allowed us to communicate without other teams listening in, which is key if you don’t want to give away your ideas.

We also set up an Asana project where we listed out all the required tasks that needed to get done before the presentation. We assigned specific tasks to the appropriate team members, and some one-offs were left unassigned to be picked up once someone was free.

Working fast and efficiently managing time, we were able to make full use of the nine hours we had. Thankfully IJ / Georgetown provided an endless supply of food and drinks so that we could operate at 100% all day.

Demo