Near Earth Objects: 

Fireballs Website

Medium: Digital

  • Interactive Visualizations: Tableau

  • Layout: Adobe Illustrator

  • UX Presentation: After Effects

Date of Completion: March 2018

Supervisors: Andrea Gauthier

About: A design for an interactive webpage visualizing a CNEOS dataset on Fireballs and Bolides. Data is up to date as of March 2018. Note: this visualization was not made for profit or in collaboration with NASA, JPL, or CNEOS; this project was made independently for personal use.

ProCess work

1. Researching a Data Set and Ideating the Communication Platform

First, a data set was selected and researched to create a rough outline of a narrative. From this research, how this information would be communicated was ideated upon, focusing on generating quantity as opposed to quality. The most appropriate communication platform was then selected from this brainstorm.

Image: a few pages of rough preliminary notes made during this stage in production

Ideation sketches.jpeg
Research.jpeg

2. Visualizing the Data Graphically

Using the data available in the data set, some of the information was taken into Tableau to create interactive graphs to communicate the information; while other information was visualized through static or interactive non-graph elements. These were created in Adobe Illustrator, with the latter including assets that demonstrate the before- and after-states

3. Creating Supporting Assets

Consulting both Dr. Andrea Gauthier and content experts (i.e. corresponding with a representative from the CNEOS via email), supporting assets like the fireballs and the GOES weather satellite were created using a combination of Adobe Illustrator and Adobe Photoshop.

4. Creating a Mock-up/Wireframes for Feedback

All of the assets were compiled into Adobe Illustrator to create a mock-up of the website, and illustrate the possible user interactions. This was submitted to Dr. Andrea Gauthier for feedback on design and usability.

Image: an overview of potential user interaction with the website (above), and close ups of the individual screens (image slider below).

OverviewLayout-01.png

5. Making Revisions and Organizing Assets for Export

Based on Dr. Andrea Gauthier's feedback, revisions were made and the elements were organized and exported to create an animated demo. At this time, a short segment of loop-able music was also self-composed for the demo.

6. Creating an Animated Demo of the Website

The final demo was created using Adobe After Effects.

  • Colleen Tang Poy (LinkedIn)
  • @colspleen