Knowledge is only truly public when the average citizen can afford the time to understand it. To that end, the Ward Leader Baseball Cards project (phillywardleaders.com)—founded at last year’s democracy hackathon—took aim at moving the opaque and confusing world of Philly’s ward politics out into the sunlight, in a form average citizens could intuitively explore. If you have no idea what a ward is or what its leader does, the Philly Ward Leaders homepage is a great place to start.
Lists and tables of data on office holders were searched for, cleaned up, combined, updated, filled in, and iterated upon in a Google Spreadsheet where anyone could help in real-time. Simultaneously, a web-based user interface was designed and prototyped in parallel. The two pieces came together in the final hours before demo time to produce the holy grail of hackathons: a Minimum Viable Product (MVP).
Ward Leader Baseball Cards provides a perfect case-study for what civic hacking means in the context of a hackathon, and all the ingredients that go into a project to deliver clear value.
Ingredients for a Great Civic Hackathon Project
1) An idea informed by on-the-ground experience
Code for Philly’s civic hackathons all begin with the same thing: a Community Needs Assessment. This is a social event where a minimum barrier to entry invites citizens, experts, and potential civic hackers from across communities to come together to discuss and share all the problems and ideas they can think of relating to the theme. Blank Post-it easel pads and markers are spread around, each one providing an anchor the community can build on for one problem statement or idea. Connected ideas can be moved closer to each other. Everyone who shows up gets a few stickers they can use to “upvote” whichever projects they want to show interest in, and small sticky notes and pens are available for adding suggestions, notes, and extensions to projects.
If you discover an idea you want to stick around and contribute to over the weekend, registrations for the hackathon are still accepted during the Friday night event ($10 for t-shirt and meals). Otherwise, you’ll be able to follow along live via Twitter all weekend, contribute remotely via our online chat rooms, or just wait to read media coverage and see if anything came of the projects you liked.
2) A robust and diverse team
If you can’t make the Friday night event or still aren’t sure where you’d like to help, show up close to opening Saturday morning for some coffee, and spend some time with all the project posters from the night before. You can still add notes or even whole new posters. Images of all posters will be shared online early for those joining remotely (see all of last year’s posters).
This project makes it easy to see why effective civic hacking projects need so much more than coders. While a web page that can illustrate politicians in baseball cards and have a little flip animation is cool, it doesn’t do our city any good if it doesn’t contain good knowledge and present what’s important in a consumable way.
Building the MVP for phillywardleaders.com took a diverse range of skills, knowledge, connections, and experience:
Subject matter expertise: The team needed to know everything about the ward system, so having people involved and within reach who could answer questions with confidence and break down concepts was vital.
Research: Where do you get details and photos of every democratic and republican ward leader? All over the place—and sometimes nowhere, it turned out. Most projects built on knowledge and data don’t enjoy finding all the current, accurate, reviewed information they need bundled up and waiting for them. Journalists, researchers, and spreadsheet warriors need to dig for, clean, structure, and verify the truth from the noise.
Outreach: Between those at the hackathon, Code for Philly’s organizers, and the greater community following online, Philadelphia becomes a pretty small place. Anyone with some experience in managing organizational relationships can tap into the network and get in touch with organizations and individuals to obtain resources and propose partnerships. While not all outreach yields fruit by the end of the weekend, some does, and the rest helps pave the project’s path forward.
Information architecture: An unfamiliar term to many outside information technology, information architecture (IA) is the process of cataloging all the relevant information at your disposal for a project and then organizing and prioritizing it. While it may sound like a technical process, IA is best performed by those intimately familiar with the subject area and the target audience’s needs.
Design: Artists and communicators lay out information effectively, making it intuitive and pleasant to consume.
Back-end coding: Aspiring and professional software developers build the code and services that live online and serve the public on demand.
Front-end coding: Lay out and wire up the user interfaces that run on users’ computers and mobile devices. For the web this typically means writing HTML, CSS, and JavaScript, but imagination is the only limit when it comes to providing people with interfaces to software. Modern software tools make myriad channels for information easy to use: smartwatches, chat bots, connected Things, push/email notifications, interactive phone systems, and more.
The team made use of a Hackpad to quickly compile and share resources, notes, and tasks.
3) Ruthless prioritization + time to focus + rapid iteration
With all hands on deck and meals covered for the brief sprint to Sunday afternoon’s demos, a diverse team can smash through obstacles that would otherwise seem insurmountable for any individual member. But the key to success is making effective use of the short chunk of time your team has together in person, during what is ultimately just the founding weekend of the project. As local developer evangelist Angel Rivera told us during the opening remarks on Saturday morning:
Don’t waste your time this weekend building login screens or debating the best server architecture for scaling.
The best things to get done during the hackathon are those that help concretely communicate the value of the project, getting the most out of the panel of experts’ feedback and exposure to the wider community of potential supporters for the next phase. Having something actually ready for real use by the end of the hackathon can be impressive, but when it comes down to choosing what to do with the final hours, it is better to demonstrate a slideshow of mocked up screens with made up data—illustrating the complete minimum experience with realistic-looking information—than it is to have only a fraction of the user experience built out thoroughly. Avoid getting caught up chasing real data if it means presenting it in an unmanageable format, and having to ask the audience to close their eyes and imagine the rest.
Philly Ward Leader Baseball Card’s did manage to ship a usable prototype with real-but-incomplete data by:
- Picking a prototype-phase tech stack quickly, deferring long term concerns wherever possible, and deliberately preferring “set it and forget it” technologies
- Cutting the first version down to the minimum it could be to demonstrate the core of the idea
- Providing value by moving good-but-not-vital ideas to the backlog for things to do if there’s extra time before demos, or if the project picks up steam on its own
- Ruthlessly prioritizing tasks into many “swim lanes” and removing obstacles, so different parts can come together in parallel
- Recognizing where being sloppy is worthwhile for sake of the weekend’s goals
The secret sauce
One simple but powerful tactic was the key to the project’s ability to mobilize a large non-technical team, put foundational technology in place quickly, and leave the weekend with a project ready for the public to use and contribute to: phillywardleaders.com uses a Google Spreadsheet as its database.
Core contributors were granted access to make changes to the spreadsheet in real time, while the wider public was solicited to access the spreadsheet via its anonymous sharing link, adding comments where they had corrections or missing information to offer. A team of researchers (local and remote) were able to start compiling the data right away, designers and information architects could see early what sort of data they were working with, front-end developers could start building early based on what they saw coming together, and finally the back-end developers didn’t even need to create their own database—instead they just used Tabletop.js to connect the site directly to the spreadsheet, empowering those with edit access to the spreadsheet to effectively update the website immediately.
4) Share and get feedback
When it came time to present on Sunday afternoon, the Philly Ward Leaders team had a ready-to-use website launched to the public, the complete source code posted to GitHub, their database well on its way to being filled, and a painless workflow in place for anyone to improve the data.
At Code for Philly’s civic hackathons, projects must be released under an open source license and posted to GitHub before presentation time. Requiring that all works at Code for Philly events be published under open-source licenses protects everyone in the community by giving everyone vital and irrevocable rights to the software they use and contribute to. Specific rights and conditions vary by license, but the general idea is building trust that no one’s contributions can be monopolized, and ensuring anyone can fork off and explore going in a different direction with any project.
Unlike most hackathons, we have a panel of experts rather than judges, and no places or prizes are awarded. Following each project’s presentation, the panel offers their criticism and suggestions and leads Q&A. As time allows, anyone in the audience can contribute comments or questions as well. The removal of ranking and prizes means that everyone is invested in every project, all projects go further when resources are shared, and expertise is loaned among them.
Why Hackathons are Vital to Democracy
In one weekend, Philly took a fuzzy web of information that was important to the public—but opaque and hard to follow—and put it at everyone’s fingertips. This jump forward was only possible because a diverse group of people brought their time and focus together for a short sprint across the void between idea and living project.
So what did the hackathon ultimately accomplish? It identified a problem and created a point of gravity for solving it. Many things were left to do, and the data was far from complete, but the project made the vital jump from a vague idea few could approach, to a demonstration tool anyone could see, touch, understand, and most importantly: contribute to.
Modernizing the way citizens interface with and influence their government is the key to reversing the trend of disengagement. Software is the canvas for information, but software developers alone can’t bring about the changes we need. This change must be driven by community members, journalists, and those fighting on the ground every day to improve Philadelphia’s future. And as this post shows, you don’t really even need coders to get started.
Photography Credits
All photos featured here from last year’s democracy hackathon (except the screenshots and poster scan) were contributed by Chris Kendig, who is not only an amazing photographer but also relentless supporter of the civic hacking community. Thanks Chris!
Further Reading
“Help make DemHack 2016 the best Code for Philly hackathon yet”: Code for Philly Executive Director Dawn McDougall’s take on what’s new and important for the democracy hackathon this year
New and refreshed public data being made available just in time for DemHack 2016
“8 reasons to code for Philly at this weekend’s Democracy hackathon”: The post I made ahead of last year’s event
Comments
Log in to post a comment.