Interactive Map-Based Website

Bicycle Air Monitoring Program

Interactive map that visualizes crowd-sourced air qualtiy data and allows the Group Against Smog and Pollution to reach out to the Pittsburgh community.

  • User Experience
  • Environment
  • Community Engagement
  • Awareness
  • Collaboration
  • Education

Student Group Project
Spring 2014 Carnegie Mellon University
Team Aero: Barath C.J., Andre Le, Philip Marchetti, Ramya Mallya
Client: Group Against Smog and Pollution

Concept

The Bicycle Air Monitoring Program is an ongoing project of the Group Against Smog and Pollution (GASP) in Pittsburgh. Air Quality monitors are attached to bicycles, which are ridden around the city. Air Quality data captured are then visualized onto a map, that is accessible from the GASP website. Team Aero's goal was to use the Bicycle Air Monitoring Program to facilitate a dialogue between GASP and the community of Pittsburgh.

Project Scope

In this project, my team applied a three-stage process in the four-month time frame to develop a high fidelity conceptual prototype. The first stage was research, the second was ideation and visioning, and the third was the iterative design cycle. Over the course of this project, we first determined the target audience for this project and designed a map-based solution that would provide the biggest impact for this audience as well as GASP.

Research

In the research stage, we sought to determine the target audience for this program, and the different ways it could be impactful to the community. We used a combination of online surveys, interviews with GASP collaborators, interviews with cyclists, and case studies to determine the target user group. We explored cyclists, other non-profit collaborators, and the community of Pittsburgh as possible audiences.
From our research we discovered three areas of opportunity for the Bicycle Air Monitoring Program - Awareness, Education, and Collaboration.
We developed several visions within this opportunity space, and after discussions with our client, decided to focus on collaboration.
We also studied various interactive map-based websites to gather inspiration and examine the competitive landscape.

Design

Through our design stage, we iteratively improved our concept over 4 prototypes, and produced a final conceptual prototype at the end of the semester.

Heuristic Evaluation

We started our design process by building a storyboard to evaluate our concept. We then used Heuristic Evaluation using Neilson's 10 Heuristics to identify issues with the current version of the map, and used our findings to guide future iterations.

Our evaluation indicated that the current version of the interactive map critically violated the following heuristics:

  • Visibility of System Status
  • Match between system and real world
  • Consistency and standards
  • Aesthetic and minimalist design
  • Help and Documentation

Static Prototype

Our first prototype was a static grayscale mockup. In this prototype we focused on providing a 'hook' to engage the audience when they landed on the webpage. We did so by providing insights from the visualized data, such as areas where the air is the cleanest or most polluted. We guided the viewer through the website by first providing information about air quality, the bicycle air monitoring project and a more descriptive key to the data. We allowed the user to filter the data based on districts in Pittsburgh and displayed variation in particle count over time. The key feature of this version was that it allowed viewers to share the map or download screenshots of the map. Thus, they could use this data in their projects and cite GASP as a credible source.

When we presented this version to the client, we found that due to the nature of the data, we needed to refrain from using much of phrasing that we had used to describe the data.

Pivoting to studies and building a narrative

Due to these limitations, we decided to let GASP take lead in conveying insights and recommendations from the data to the audience. We shifted focus of the map to lay emphasis on specific air quality studies conducted by GASP in Pittsburgh. This way, we used the map as a medium for GASP to reach out to the community and provide focused air quality information. We also included functionality that allowed GASP to use this map to call for volunteers and involve the community in planning these air quality studies.

In the second iteration of our prototype, we introduced the study-based map. This version introduced two viewing modes for the map. The overview mode visualized data as a heat map on a zoomed out map of Pittsburgh. Markers indicated where studies were conducted. The detail mode showed information about a specific study, which included both the data points on the map, as well as images and textual information about the study and recommendations from GASP based on the results. Testing this prototype in the field indicated the need for a narrative, which we built into the next iteration. This narrative was necessary to guide the viewer through the map and maintain engagement. We guided the design of our narrative by making sure our prototype provided the following four experiences to the viewer - Surprise, Engage, Learn and Takeaway.

Final Design Phase

In the final iteration of our prototype, we flushed out the visual design of our interactive map. Based on client feedback from our previous version, we changed the way we visualized data in the overview mode.

Final Project Report

We documented our project in a project report book, which contained our research, our details about our design and testing process and design specifications of the final conceptual prototype.

My Role

In this project, we worked collaboratively on all aspects until the third prototype was built, and the final design direction was decided. After that, we split up into two groups, one that finished the prototype, and the other that prepared the report book. I was actively involved with determining the scope of the project, developing and executing our research plan, ideation and visioning, heuristic evaluation, and the design of the first and second prototype. I then switched modes and dove into designing and compiling the project report.