Design for Understanding
Emory CS 485: HCI
As humans, we experience the world through an array of different sensory percepts: vision, audition, olfaction, gustation, and tactician. These senses come together to form the beautiful ensemble of consciousness. Interfacing with this ensemble can enable the robust transfer of knowledge and understanding. To successfully communicate complex information we face the unique challenge of developing evocative designs that target these senses.
For this design sprint, my group (Vanessa Goris, Ruochen Kong, Randy Truong) and I sought to communicate information about air travel throughout the COVID-19 pandemic using clearly communicated facts and persuasive visualizations. We focused our designs on vision and audition to develop systems that could accurately and evocatively transfer knowledge to our users.
THE DATA
We wanted to use this project to share information that was relevant and compelling to our users. Given the turbulence of the past few years, there was no shortage of compelling datasets. However, as we analyzed the impact of COVID-19 on the airline industry the data revealed a lens by which to tell a unique story full of insights about the impact of the pandemic.
To tell this story, we analyzed data collected by the U.S. Department of Transportation. This dataset showcased all domestic air travel throughout the United States between 2019 and 2021. It provided detailed information about the payload of the plane (amount of passengers, freight, mail) and the total travel (origin, destination, distance) for each month from 2019 to 2021.
THE STORY
The data from the U.S. Department of Transportation showcased how the volume of flights and number of passengers significantly decreased as worry about the pandemic spread throughout the world. This effect was consistent across the US with greater effects seen in states most impacted by the pandemic.
One of the areas especially impacted by the pandemic was the state of New York. As we compared the news reports from 2020 with the air travel data, a clear and compelling story emerged. This was a story of pain and perseverance, a story that characterized the changes we all experienced from the COVID-19 pandemic. It was the story of New York City.
The data showcased how the density of air travel from New York City (LaGuardia and JFK airports) fluctuated as the pandemic progressed. This data was especially compelling when we compared the number of passengers in May of 2020 with those traveling in 2019. The data showcased how the COVID-19 pandemic had reduced the number of passengers traveling from New York.
Based on these insights from the data we sought to create visualizations that clearly and persuasively told this story for both the United States and New York City.
COMMUNICATE
In this framing, we sought to showcase the significance of the story found in our dataset by clearly communicating the data about changes in national air travel trends to our users. We focused on creating a piece that promoted clear understanding about the impact of COVID-19 through data visualizations that focused on both monthly and yearly trends in the data.
Ideation:
To develop our visualization, we followed the five design sheet methodology for data visualization.
To generate initial ideas we created a broad range of sketches for potential displays for our data. These sketches varied from simple line charts and bar graphs to complex network diagrams and heatmaps. Each of these designs highlighted different elements found in the data.
As we compared the messages from the sketches with the story in the data we realized that the most compelling visualizations were those that could display the aggregate changes in the mobility of passengers across time.
Based on these observations we filtered our ideas to focus on heatmaps and bar charts that clearly displayed this information.
Once we identified our chart types, we shifted our focus to design user interactions and operations. Throughout this process, we contemplated how to develop an interface that allowed the user to clearly visualize and interact with our dataset. To do this we prototyped drop downs and sliders that would enable the user to filter the data by month and location. We felt that these interactions were important for our users as our dataset displayed a large number of geographical regions, but the most compelling components of our data came from specific interactions with geographical regions.
Furthermore, given that the pandemic had vastly different effects on regions across the timecourse of our data we wanted to enable our users to focus on key moments between 2019 and 2021 that particularly interested them. Therefore we decided to create two viewpoints from which to view the data: the general view to showcase yearly changes, and the monthly view to highlight monthly changes.
Implementation:
The communicative visualization can be accessed here.
Ruochen implemented the general view visualizations using Tableau to create box plots, bar charts, and heatmaps. These visualizations showcased how passenger air mobility changed from 2019 to 2021. Each different viewpoint allowed users to focus in on different elements of the travel data. The box-plot displayed the total number of passengers traveling at a given month. The bar-graphs further supplemented this information by showcasing the distance traveled by these passengers. Finally, the heatmaps provided an aggregate representations of the change in passenger mobility across the United States. These visualizations sought to showcase the data in a clear and compelling manner. Furthermore, we implemented hover interactions to refine the interpretability of the data by allowing the users to highlight and read about specific regions and datapoints of interest.
Randy implemented the monthly view design using VegaLite to create a cross-linked bar chart and heatmap. The heatmap visualized the total number of travelers leaving from a state in a given month. This visualization enabled users to see where air traffic was directed on a monthly basis between 2019 and 2021. To further communicate this information a bar chart was used to visualize the total number of passengers leaving a state. Hover and click interactions were implemented to enable the users to focus in on specific regions of interest to better understand the data.
PERSUADE
In this framing, we sought to share the story in our data through persuasive design that focused on showcasing the significant changes to New York City air travel throughout the pandemic. To design for understanding and persuasion we sought to create an immersive visualization that captivated the user’s auditory and visual attention.
Ideation:
To develop our visualization, we followed the five design sheet methodology for visualization.
Brainstorming
To generate ideas and enlarge our design space we developed several sketches that iterated upon different styles and design principles. We experimented with sketches that incorporated shapes ranging from simple circles to dynamic oscillations. Furthermore, we outlined several potential stories or questions we would convey through our visualization. This process of ideation provided us with an abundance of ideas that we filtered into three distinct design sheets.
Design Sheet 2: Mapping the Pandemic
Maps are fundamental components of information visualization as they convey information about specific geographical locations. In this idea, we explored the possibility of conveying flight changes over time and space by integrating flight data into interactive maps.
While ideating for this design we asked key questions about the scope and symbolism incorporated into the visualization. One question that we explored was the size of our regions of interest. We wanted to ensure that our visualization resonated with a diverse audience, therefore we considered integrating a global map. However, we found that as we increased the size of the regions of interest the availability of data became scarce. Furthermore, we found that focusing on specific regions provided a more cohesive and compelling narrative.
Visually, we explored the impact of contrast and shape by creating sketches with varied emphasis between luminance and darkness.
Design Sheet 3: Connection through Disorder
Our second idea sought to focus on the population level changes in air travel during COVID-19. To create a compelling piece we sought to leverage the power of network diagrams to convey information about changes in connection across networks.
By ideating for this design we began to see the importance of integrating humanism in our designs. Looking at this population-level data helped us to begin to think about how the pandemic changed the way we interacted with others. We felt that the visual display of networks paired with the audio from cities like NYC could create a compelling humanistic story.
However, we felt that this idea lacked context for the dataset we were portraying. No information from this visualization communicated to the user that our data was about airlines or travel.
Design Sheet 4: Air Traffic Control
In this idea, we sought to explore the possibilities of creating a piece that placed airlines at the forefront of a user’s attention. We sought to accomplish this by leveraging visuals and audio that one would expect to encounter in an airplane. Specifically, we focused on developing a visual radar screen that radiated information about the changes in flight frequency over the course of the pandemic. Furthermore, we used ambient audio from airplanes and airports to create an immersive atmosphere that represented the travel experience.
This exercise allowed us to ideate on the possibility of conveying large amounts of information in a persuasive and easily digestible manner.
Design Sheet 5: Realization
After comparing the pros and cons for each of the design sheets we settled on a design that combined our favorite aspects of all ideas into a single cohesive design. Our vision for this design was to showcase the impact of the COVID-19 pandemic on NYC through visual representations of changes in flight frequency, and auditory representations of changes in passenger density.
Visually, this design kept the aesthetic we developed in design sheet 4 by representing information through the lens of an air-traffic control radar display. We planned to showcase changes in flight frequency between 2019 and 2020 by using luminescent circles to represent each flight originating from NYC each month. We also planned to visually showcase the change in time by varying the month displayed on the screen.
Furthermore, we utilized audio to create ambient effects that immersed the user in the airport experience while also functionally communicating information about the number of passengers and the passage of time.
We anticipated that these features would enable us to create an emotionally compelling experience that best represented the story found in the data.
Implementation:
Vanessa and I implemented this design using the Unity Game Engine and deployed it onto the web as a WebGL applet on Github pages. Our implementation consisted of several interactions scripted using C# to make the data dynamically showcase the impact of the pandemic. Specifically users were able to hover over the city maps to hear audio from airports in NYC. The volume of this audio was correlated with the number of passengers traveling through NYC at the time. Furthermore, to help the audience relate the dates to the pandemic we implemented clickable dates that played key news headlines from 2020.
The persuasive visualization can be accessed here.
Limitations and Future Directions
In our attempt to design for multiple sensory modalities we created an audiovisual piece that communicated changes in air travel. While the interactions in this piece were robust, our implementation was limited by the constraints of our technological implementation. Specifically, we were unable to provide accessible options in all parts of this design.
In future iterations of this design, we hope to implement signifiers that are correlated with both the auditory and visual components of our interactions. This would enable those with deficits in one modality to still appreciate all aspects of the visualization. One specific type of implementation would be to create visualizations that correspond to the audio changes that we utilized in this piece. As we grow as designers we hope to create solutions like this that better accomodate for the needs of all users.
DEMO
To communicate the functionality of our visualization we created a demo video
CONCLUSION
This exercise in data visualization showcased the power and complexity of effective communication. By carefully thinking through the steps required to both accurately and persuasively communicate data we gained key insights into the trade-offs associated with information transfer across a limited number of modalities.
By designing a communicative design focused on the accurate portrayal of data we were able to effectively visualize air travel across the United States between 2019 and 2021. This visualization enabled us to swiftly communicate facts and trends within the data to a large audience. However, as we focused our efforts on clarity and accuracy through visual information transfer much of the emotions from the stories within the data was reduced.
Conversely, as we designed for persuasion we were able to highlight the emotion and context in the data. This allowed us to explore how information could be transferred across multiple modalities (audio & visual) to create immersive experiences. However, the more we leaned towards storytelling the more we lost specificity in our information transfer.
This experience showcased how design is a complex interplay of emotion and information across many different modalities. As I continue to grow as a designer I hope to refine my skills in communicating across the modalities to design immersive pieces that find balance within this interplay.
Acknowledgments
I would like to thank my wonderful groupmates Vanessa Goris, Ruochen Kong, and Randy Truong for their brilliant contributions to this project.