RED Resilience | 2018


A persistent problem in Atlanta's westside neighborhoods, particularly Vine City and English Avenue, has the proliferation of abandoned and un-maintained housing. While this is clearly a symtom, not a cause, of poverty in the area it remains a problem for residents. As part of the 100 Resilient Cities project by the Rockefeller Foundation we were tasked with assisting residents with improving their neighborhoods through housing code violation reporting.

Technology NodeJS , React
Role Design/Developer, primarily on NodeJS
Links Github , 100 Resilient Cities , Website


The result of this project is a working prototype website where authorized residents of the neighborhood can upload photos and data about housing violations in their communities. The website then takes that data and stores it in a Google Sheet and the photos on Google Drive. This Sheet and Drive account are owned by a volunteer we worked with for the project. This kept data in the hands of residents and not

Professor DiSalvo


The process began with our Professor, Carl DiSalvo, giving us an overview of his field of study, civic design. He walked us through some of the history of the field, and the history of Atlanta and the 100 Resilient Cities Project which he was working on.

As he explains it, civic design differs from traditional design because of the way it differs in it's relationship to it's users and the way prototyping occurs. Because the users are citizens, and the clients often cities or governments, extra care needs to be taken in the design process to meet the needs of public. This can mean hearings, public workshops or town halls.

In addition, city officials in particular have trouble seeing the value of the prototyping process. They see the value of a process, but in their minds the end result of government spending should be actionable results, not a prototype that doesn't actually solve a problem but merely outlines a solution to be built. This led us to focus our efforts on something functional, not just a screen prototype.

Sketched idea

During this process, I did a sketch based off an observation I had during an interview with a resident of English Avenue named Leslie. Leslie was a volunteer who was personally walking the blocks of his neighborhood and reporting housing code violations to the city. We focused on designing something for him to help make his manual process of walking, note taking, tracking and reporting code violations easier.

At the time, Leslie was doing nearly all of this by hand. However, from my standpoint this process seemed ripe for automation. He was recording data that could be standardized about each house, so an online form and database seemed the ideal way to track all his information.

Leslie and my groupmate


To that end, we started designing a web form that he could use to track this information and possibly deliver it to the city automatically. We started with low-fidelity wireframes, but given that we needed a functional prototype we had to move quickly into development.

Prototyping process discussion

Early interface iteration

Alongside the development of of the prototype (an early version of the interface is pictured above) the rest of the class was working on other media to support Leslie. We were one of the last links in the chain, which started with outreach to the community and the city and included other ways of reporting and releasing this data.

One of the key teams though was working on a paper form to work alongside ours. It was designed to match ours somewhat in style and, importantly, match our data schema. This way, residents could fill out a paper form in the field and submit online later or hand off to a volunteer to do in batches.

Our initial design didn't match the paper form entirely however. We designed a way to submit multiple forms at once with the sidebar pictured above. Each photo was connected to it's own form. This proved confusing to Leslie and to our classmates. We ultimately decided to remove it and mimic the design of the paper form instead, so any user could nearly directly transcribe physical forms to digital data. This is pictured below.

Final interface behind paper form

Iterations on data visualization

We had hopes to support mobile and devise data visualization tools for the residents, as reporting from a phone would simplify the data entry process and given our use of Google Sheets as a database we had access to any Excel behavior. However, these were also features that were cut as we needed to make sure that the final product was functional.

2018 © All rights reserved. Made by Pierce with ♥