Project Overview

During Spring 2015, my class (Speculative Civics Project Studio) of 12 people engaged in a civic project in partnership with the Atlanta Community Food Bank and the Arthur Blank Foundation to develop a digital map that documents grants, gifts, and other funding initiatives in the Atlanta Westside communities.This map will serve to provide greater transparency to these funding initiatives and the myriad community projects in the Westside neighborhoods.

The Arthur Blank Foundation donated 15,000,000 dollars to the Westside prosperity funds, to be allocated to various non-profit organizations and the development of Atlanta Westside Community.

This project studio investigates the making and use of civic media through speculative, participatory, and collaborative approaches to interaction and information design. The design process combines ethnographic research, human-centered interaction, science and technology studies, analysis of existing products and services, and the design and production of digital products and services.

My Role

Visual Design,
Wireframing,Interaction Design, Prototyping, Research

Project Type

Speculative Civics Project Studio

Design Process

Defining the Functionalities


Before we delved into the design for the maps, we first identified 10 areas of design recommendations that we deemed the map should incorporate. These functionalities include:

1. External Access
Implement an “export” Feature; the map is always view-able, but can be exported to a URL that specifies what layers/data types/points to be displayed on the exported version. It also requires authentication login.

2. Two Kinds of User-generated points

Implement a comment section and enable users to add comments to existing map pins. Comments will be generated through a submission form to be approved by website administrators.

3. Census-derived datas
A heatmap with census-derived information including population density, income, demographics, etc.

4. Other Resources in the area
The map layers display not only Blank-funded projects, but also other public services, aid projects, available grants, granted funds in the area. The purpose is to pool together these resources in one map so that we can see where services overlap and where the gaps are.

5. Public Transportation
Integrate the map with public transportation databases to display transportation coverage. No timetables are needed. Instead, show “How far away any given points are from the nearest transporattion point (MARTA stop, bus stop, etc.), using Google API, MARTA website, OneBusAway RESTful API.

6. Track the distribution of other resources
The primary goal is to track the distribution and results from projects funded by the Blank Foundation. Secondary goal is to track other resources to display redundancy and gaps.

7. The organization’s location
Each Blank-funded project should be displayable on the map as the POINT where the organization receiving the grant is located.

8. The area coverage
Each Blank-funded project should be displayable on the map as the AREA where the grant work is being carried out.

9.Area where people reside
Each Blank-funded project should be displayable on the map as the AREA where the people making use of the services reside.

10. Magnitude of funds
Once we have resolved #6 (i.e. ways to locate & display Blank-funded projects on the map), displaying Blank-funded projects on the map should show magnitude of funds in addition to textual metadata for areas (using heatmap) and points (translucent circles with varying radius).

Prototype I: Initial Design Proposal


During the initial round of prototype, we came up with several low-fidelity mock-up of the map visualizations for critique.







Client’s First Visit and Feedback Session


During our client, Ms. Garrett from the Atlanta Community Food Bank visited the studio for the first time on January 26 to give the class some information on the funds and the program. The key takeaways from her visit include:

1. Close the gap
The map occupies the middleland between funders and organizations

2. Interaction
The map should be interactive: people can track it, see it, for the neighborhood to know and see. Information makes people feel like they are not victimized and reduce the adversarial relationship.

3. Visual
The map should be visual. It need to address population density (what kind, youth, age, profession), where is the money going, holes, locations for summer feeding, transportation.

4. Data
The map is NOT a census map or transportation map, but the data is available.
People will make better choices if they are available to them, including grocery stores, transportation, etc.

5. Reduce Jargons
Reduce challenges for unprofessional grand writers to apply for a grant, read the jargon.

6. User Group
People using the map will be at the least knowledge level (residents in the area for the vast majority).

7. Representation of Projects
The map should have better representation of things. Did they finish the projects? People shouldn’t ask for the same things. Is locating my project here a better option than locating it there? Are my ideas unique? Can we join forces? Are people from the right funding for their programs?

8. Device
People are not going back in time, so the map have to be web-based. The map needs to be clicked and browsed on smart phone, mobile phones, not necessarily laptops. Lots of people have smart phone, mobile, not necessarily laptop. Can be clicked on, browsed.

Selecting Design Implementation Method


Initially, the class planned on implementing the map using a system called “Mr. Mappy”, developed by a Georgia Tech undergraduate student. However, after exploring the API, we were overwhelmed by the complexity of the code and did not know whether we could ever achieve the results we desired within the time frame.

A second option is “CartoDB”, a cloud computing platform that provides customization of maps on web browsers, and CartoDB.js library that can integrates data into web application.

After experimenting with CartoDB web version and CartoDB.js library, we quickly realized CartoDB API is the optimal solution to our design problem. We could import data from an external, updatable Google sheet, and built a customized web application interface with user-specific functions. We even got in touch with CartoDB employee who generously provides advice and free tokens for our web application.

Design Process

After deciding on CartoDB, the studio entered the design iteration stage, during which we employed the “Explore–>Feedback–>Implement” strategy.

Design Process: Explore

Iterative design process allowed concepts to be explored, presented, and honed. Over time, open exploration became bounded exploration.

Design Process: Feedback

• From client: focus on the users and their needs.

• From course instructor:focus on design process.

• From class: focus on design and function cohesiveness.

Design Process: Implementation

Decisions made based on several questions:
• What do we want to implement?
• What can we feasibly implement?
•What could we implement if we had other resources

Map Functionalities



Screen Shot 2015-11-17 at 12.37.55 AM


Next Steps: Incorporate Visualizations on the Website

Infographic #1

This visualization shows some of the sponsors/partners of various organizations. The organizations are all part of the Westside Community Prosperity Fund. The name of each organization is displayed in the center of the bubble and is surrounded by it’s partners/sponsors. All information is taken from the organizations’ websites.


Infographic #2

This visualization shows the year in which organizations were founded and the grants received from the Blank Foundation. The organizations are Westside Neighborhood Prosperity Funds grantees. The organization names are displayed on the timeline below the year in which they were founded. Green bubbles represent the size of the dollar amount.


Infographic #3

This visualization shows the various funders, the amount of funding and the various sectors to which the funding is going. The various colors of the organizations represent the different ranges of funding.

Through this visualization, it is easier to see which sectors are receiving more funding and from which organizations. The next steps in this visualization would be to make it interactive using a data visualization tool such as D3.


Infographic #4

This visualization shows the distribution of funding in relation to organizations, categories, and beneficiaries. It is intended to give prospective project proposers an overview of the projects to date, and make distributions and funding opportunities more easily identifiable.