Urban Parks.png


Data Visualization

Using Data to Promote Park Awareness


CONCEPT: Urban Parks is an interactive tool that uses Pittsburgh green space data to drive more park awareness and experiences. The website uses a series of interactive maps to show readers the characteristics of parks in their city. Finally, the data visualization allows readers to click into parks to explore them up close and personal.

CHALLENGE: Collect and visualize Pittsburgh city data to illuminate connections that helps viewers recognize, engage in, and think critically about their important relationships; 5 weeks

TOOLS: Principle, Sketch, Illustrator, Photoshop, Pen + Paper





How might we use city data to encourage people to learn and engage in their community?


1. Urban Benefits

Research has shown that public parks and green space provide a variety of physical, psychological, and social benefits to urban residents.

2. Belonging

Well-designed public parks provide gathering space for socializing, civic participation, recreation, and a sense of belonging.

3. Civic Engagement

Data can help users recognize, engage in, and think critically about the relationship between green space, themselves, and their city.



Collecting Data

Early on, I decided to focus on public spaces because I wanted to create a tool that would not just draw conclusions for people, but help them ask new questions and discover new places. To do that, I needed to pull data for different types of public spaces– such as parks, libraries and community centers. I also needed to identify other city data that might hold a relationship with parks, such as resident demographics or environmental quality.

Screen Shot 2018-12-31 at 4.54.48 PM.png
data logos@2x.png


Identifying Relationships

Once I identified my datasets, I began thinking about how I would organize each dataset. This was essential in helping me identify what visual elements would best represent my data, as well as how I would tell a succinct story.

1 — Coordinate System

Parks and green space was the main focus of my visualization. Since those data points are rooted in location and size I decided to use a geographic coordinate system, instead of in a cartesian format.


How should my data be organized? Based on my data categories, such as income and density by neighborhood, how is that type of data best organized?

3 — Scales

How do we scale these categories? I saw that most of mine are based on hierarchy, location and percent.

Stick Notes.png


Identifying Key Questions



Crafting a Narrative

As I was developing my visualization, I spent a good chunk of time considering my audience. Who would be interested in learning more about green spaces in Pittsburgh? And what value can I provide by combining that information with data on neighborhood demographics and walkability? I explored these audiences through storyboards and form ideation.

Find a hood that fits you_narrative@2x-100.jpg


First, I considered how this data might integrate into a larger system. I’ve moved several times and I know that I am always looking to live someplace close to public transportation and public space. What if we could allow couples to find a neighborhood that is the best fit for them, based on household income and other community facets that they value? Maybe it could allow them to compare neighborhoods and their features, such as parks and libraries.

Interactive article_narrative@2x-100.jpg


The other path I considered early on was an interactive article on green space in your city. In this scenario, you select your city and the scrollable article features highlights on the city’s green space, highlighting things like range in size, oldest parks and city demographics. Readers would see both data visualizations and photos of parks and access conditions to contextualize the data.



Peer Testing on Visuals

The appropriateness principle in visual design is about the “goodness of fit between form and meaning”. By going back to the relationships I identified in my datasets, I began testing out different forms, structures, and values to represent park and environmental data. To better show park size, I tested out using blocks instead of exact form. Additionally, I acquired air quality data and experimented with color and hierarchy to show which areas of the city have the lowest and highest air quality.

Screen Shot 2018-12-31 at 5.00.31 PM.png
Screen Shot 2018-12-31 at 5.00.44 PM.png

Peer feedback: The blocks were a really nice indicator of size, but they needed to show a valid comparison. For example, they would all need to be squares. They also felt like the literal representation of the city wasn’t necessary if I were using squares for the parks. In addition, there was a lot of confusion around the circles to represent air quality. Classmates recommended gradients instead of different hues to show change.



Exploring Color

I continued to test different color hues and values throughout this project. I found a number of resources, including ColorBrewer, which are diagnostic tools for evaluating the robustness of individual color schemes. I used these to better understand the connection between color, meaning, and data. In the end, I sourced a lot of my color choices for the background and green spaces directly from park photos. This meant a lot of color dropper and adjusting of tones . For the datasets that had more robust scales, such as median household income and density, I leaned more on tested color schemas – so people could make a quick cognitive connection.



Screen Shot 2018-12-31 at 4.58.17 PM.png


Screen Shot 2018-12-31 at 4.59.04 PM.png




I created all my layers in Adobe Illustrator, so I could lock and unlock, and play with different colors and textures before animating them. This was my home base for the designs. Next I brought these images into Sketch, and created the general layout and structure of my flow. It was here that I added in content, buttons, lines and labels for each of the interactive features. The final step was bringing the finalized elements into Sketch to animate.



One of the challenges I faced was layering a number of different interaction patterns on one page. The interactive website could be viewed by both scrolling and dragging. Then on each page, users could scroll, tap, drag, and enter data. In the end, I allowed user to explore the data through a set of map layers. Once they were oriented with the data, they were able to select a park and view its features in greater detail.




Identifying relationships between the data sets was extremely helpful. By this, I don’t mean drawing inferences from the data, but rather organizing the data early on. This helped me to understand how I should visually represent the data in a way that would strengthen cognitive connection for my readers.


In the end, I saw this visualization as a powerful tool that could be used by the city of Pittsburgh and partnering parks organizations to promote park awareness and drive more individuals to these spaces. I think there is huge potential in offering open data to citizens, and helping them understand that data by creating interactive tools and visualizations. City governments are always looking for more effective (and positive) ways to engage with citizens and I would argue visualizing your city’s natural assets is one of them!


Sometimes it’s easier to make data visualizations look good than it is to make them affective. People draw strong cognitive connections through color, form, and movement. As I do more design work with data, I will make sure to keep this top of mind.


I can certainly see myself developing this concept much further. Given more time, I would love to allow users to compare parks between cities. I also think it would be really interesting to incorporate community based sharing, where folks could track the parks they’ve been to and mark their favorite spots.