DistrictBuilder
Electoral districts in the United States are redrawn every ten years. These districts, which shape the outcome of local elections, are often fabricated behind closed doors, using proprietary software that leaves journalists, reformers, and the general public out of the process. DistrictBuilder is a free and open-source platform that brings equity to redistricting.
Client
My Role
At a Glance
- I was responsible for user research, wireframing, and design for the 2021 redesign of DistrictBuilder.
- I built an interactive prototype using frontend geospatial libraries to showcase potential performance enhancements.
- I supported business development efforts, presenting the project at a funders event that resulted in a $800k grant.
Interviews & Observation
From the start, my team identified a set of user types that we thought we could have the most impact on: Advocacy Groups, Journalists, and Concerned Individuals. We identified organizations and individuals that had been active in the previous cycle, and I conducted over a dozen user engagement sessions that combined interviews with observation, watching users drawing districts with their tool of choice.
While I had tested a few redistricting tools myself, observing experienced mappers was crucial for understanding their specific needs.
Opportunity: Improved Performance
From these conversations, we heard over and over that the previous generation of tools felt slow and unresponsive. That slowness limited experimentation and iteratation, resulting in frustrated users and lower quality maps. While we heard about opportunities for new map sharing and project submission features (and planned to address those as well), the message was loud and clear: our top priority should be improved performance.
We identified several key opportunities during user interviews and internal strategy sessions. This chart shows the opportunities stack ranked by priority, with improved performance at the top.
Prototyping Performance
Based on what we learned from users about the importance of performance, I set a north star objective of making the new version of DistrictBuilder the most responsive tool on the market. Over the next month, I built a frontend-only prototype as a proof of concept for how we could create a more real-time drawing experience.
I built a prototype using React, Mapbox GL JS, and TopoJSON to demonstrate how we could use frontend mapping tools to create a real-time editing experience.
At the time, our team primarily built applications powered by a PostGIS database, which could process large amounts of geographic data. This communication with the server added a delay where the user would see a loading spinner. My solution: leverage frontend libraries like Mapbox GL JS, Turf, and TopoJSON to achieve those same geographic calculations with instantaneous response time.
While not all of my ideas in the prototype panned out, several were implemented in production, and this work set the tone for prioritizing user experience.
Designing for Performance
Building on the real-time nature of my prototype, I was able to start designing performance-improving features that wouldn’t have been possible before. Below are a few of my favorite ideas, which were new to the district drawing space.
Real-time Rectangle Drawing
Other redistricting tools let users select census areas with a rectangle tool but only show the total population after they’re done drawing. My design improves this by showing the population count in real-time as they draw, making selection more precise and eliminating guesswork.
Real-time drawing tools are possible because we have access to all of the census data on the frontend. This is the first time this technique was used in a redistricting app, and it doesn’t require back-and-forth with a server.
Paint by County
A best practice for district mapping is to minimize “split counties,” where a single county is divided among multiple districts. I designed a setting that can temporarily limit drawing within the original county, making it easier to select census areas without accidentally drawing outside of the lines.
With "Paint by County" turned on, a user can draw without accidentally selecting a neighboring county.
Inline Population Labels
One of the biggest challenges of redistricting is that each districts needs to have the exact same population. In other tools, you would need to hover or click on a census area to see its population. I used geojson-polygon-labels to create a toggleable population layer that helps users quickly find the populations they need to complete their district.
For these population labels, using abbreviated numbers (e.g. 2.6K vs 2,639) allows labels to fit in small geographic areas and makes the content easier to scan.
Product Design
After finishing work on the prototype, I designed the remaining views of the application, including sharing features, new map creation workflow, organization profile pages, analysis tools, and onboarding.
Mockups related to sharing maps and community engagement, key needs of journalists and advocacy groups respectively.
Take a Look
Check out the DistrictBuilder Prototype, which I designed and built myself. You can also view the finished DistrictBuilder App, which I designed and contributed frontend code to, working with a larger development team. I gave a talk about the project for the Mapbox Elections Challenge.