Mingda Tang
Digital Product Designer
macbook-pro-clay.png

NASA AgroSphere - International Award-Winning Web Application

Tackling a global design and data visualization challenge that attempts to bring humanity one step closer to a solution of a major sustainability issue on Earth.

 

NASA AgroSphere - 3D Data Visualization Web Application

 
 
Down-Arrow-PNG.png
 
 
 

Given nine weeks and virtually no budget, I, along with four other interns, was given the challenge to build a web application that would help bring humans one step closer to a solution for a major global issue.

As the only designer on the team, I needed to create an experience that intuitively displays complex datasets while telling a narrative of Earth in possible danger.

 
 
 
Down-Arrow-PNG.png
 
 

AgroSphere's main application interface

 

Global Design Challenge

The WorldWind Europa Challenge, an open-source competition hosted by NASA and the European Space Agency (ESA), aims to help address a major global issue, such as education, health, etc., through innovative design and use of data.

Specifically for our team, we discovered that there is a need for an application that would allow people of all ages, especially secondary school students, to explore large amounts of valuable, underused agriculture and climate data. This can potentially inspire people to become more aware of how Earth has changed over the years.

Business and Technical Constraints

  • Must design and develop the app using the NASA Web World Wind Software Development Kit (SDK)

  • Virtually no budget due to the open-source nature of the project

  • No design mentor or anyone with a design background

  • Only one other intern on the team had a strong web development background

  • Nine week deadline of design challenge

 

Design Solution

I designed a web application that displays both climate and agriculture data trends on a global scale via an intuitive web interface.

The team and I created this web app partially as a platform for schools and non-profit organizations to use as an educational data-visualization tool.

 

My Responsibilities

  • Worked with four other interns, including two high school students, as the designer of the team.

  • Designed the user interface and possible interactions through datasets and any UI elements

  • Established the design roadmap of the application to ensure that the app was ready for public release by the end of the internship

  • Iterated on designs and prioritized features based on existing user metrics of previously-created NASA data visualization applications and recommendations from NASA professionals

 

Tools

  • Brainstorming, wireframing, & prototyping

    • Adobe Illustrator, Sketch, whiteboard, markers

  • For front-end development and live prototyping

    • HTML5/CSS3, Bootstrap, JavaScript, jQuery

 
 
 
 

Conducting Research and Planning

One idea was to plan out how parts of Earth would be categorized so users can click on each region of the world to engage with its available datasets.

 
 
 

Because this project was a standalone design challenge, there was no user metrics to leverage during the research phase of the internship.

Instead, I conducted informal stakeholder interviews with NASA professionals with different backgrounds to gain insights on possible ideas for the project.

Some of the ideas we came up with were:

  • Creating and Implementing a separate lesson plan for the app

  • Show the types and amounts of renewable energy in different regions on Earth

    • Estimate the optimal type of renewable energy in a region based on existing data

  • Map out different types of natural disasters

    • Show the average number of certain disasters for a region based on casualties, costs, etc.

After countless hours of closed-door meetings and numerous ideas for the project, we collectively decided on an application that would use weather and agriculture data to visualize possible historical trends.

Specifically, for me, I had to decide where datasets would show up on the menu. I also implemented appropriate affordances, such as clickable icons, on the globe so users can easily interact with the available datasets.

 
 
 

Storyboarding and Brainstorming

 
NASA WorldWind Storyboard_Artboard 15.png
NASA WorldWind Storyboard_Artboard 12.png
NASA WorldWind Storyboard_Artboard 14.png
 

Here I designed some initial concept storyboards while my team and I were in the process of uncovering which features and components were technically feasible and which ones were not.

 

What followed was two full weeks of data scavenging and product feature planning through sketches, concept storyboards, and iterative mockups.

Our team gathered global historical weather and agriculture data from NASA, National Oceanic and Atmospheric Administration (NOAA)United States Department of Agriculture (USDA), and other government-affiliated organizations. Most of these datasets include data from the early 1900s.

The most difficult part of this process was finding reliable and usable datasets from smaller countries and countries during times of war (Ex: China, Russia, African countries). Some data formats were almost impossible to display on the application UI in an intuitive way without our smart use of JavaScript libraries, including plot.ly.

 
 
 

Sketching and Outlining Features

During one of our team meetings, we mapped out the libraries and frameworks we needed to build the application, as well as how and when some of the datasets would be loaded and displayed on the screen based on user interactions.

 
 
 

As my team and I were gathering more data, I leveraged user flows to map out how different user interface and data elements would be organized on the screen when certain UI elements are active.

I also continued to sketch out ideas to display data on the 3D globe of Earth.

 

Sketch of side navigation where a graph of a dataset is shown. The navigation is resizable to allow a better view of the graph.

Sketch of data placemarks (flags and weather stations) and the interactions with those placemarks

 
 

Throughout the design process, I periodically referred to features of existing NASA data visualization applications and communicated with program managers and engineers to ensure that I included the essential features that would make this application successful. This was extremely important given the nine-week duration of the internship.

Then we began the coding process...

 
 
 

Iterative Design and Usability Testing

 

Two types of navigation that I sketched before creating mockups in Sketch and prototypes in live code.

An animation of one of the navigation designs I created in code.

 
 

The application went through several iterations through design tools (Illustrator and Sketch) and live code (HTML5, CSS3, Bootstrap, JavaScript). Every week, I presented my work to stakeholders, including NASA program managers and developers, to receive feedback.

I also conducted several rounds of usability testing in-person and via Skype with our target users with a variety of computer proficiency.

I made it very clear to my team members that it was essential to validate our application with potential users. Doing so would allow us to discover bugs and to see whether or not the app would be actually useful and usable in a realistic setting.

Results of the test allowed us to:

  • Reduce the initial load time and dataset load times

  • Add some more clear descriptions for datasets (to eliminate confusion for those who are not familiar with certain climate/agriculture nomenclatures)

  • Implement the ability to view multiple datasets simultaneously and side-by-side

 

After nine long weeks, the application was finally complete. The application runs both on desktop browsers and mobile (tablets and smartphones) using Bootstrap. This is to make it accessible to as many people as possible.

You can watch the mobile demo here (external Youtube video).

 
 
 
 

Application Completed

 

User interface and graph data of Almonds in the United States.

Navigation for agricultural data comparisons between countries.

 

Menu tooltips

Menu is draggable and the graph is resized as well

 

Global agriculture data comparison between countries - Maize production in this case

 

Amount of apples produced for countries changes as time progresses

 
 
 

Typography and Color

 

Libre Franklin
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

 #90EE90

#90EE90

 #313A7D

#313A7D

 
 
 
 

Design Results and International Competition

The finished application was awarded first place in the WorldWind Europa Challenge as well as the winner of the GODAN Open Data Challenge. I also presented the application with my team at the annual NASA summer research project symposium at NASA Ames Research Center.

We were offered an expense-paid trip to Helsinki, Finland to compete in the finals against eleven other finalist teams. I, along with my team, presented our application to a large group of technical experts and executives in Europe.

The application piqued the interest of non-profit organizations in Europe. They contacted us interested in using the app as a platform to spread the awareness of the value of 3D data visualization, especially in regards to climate and agriculture data, and to seek to sponsor the application for greater use.

The application demoed to visitors during the day of the presentation.

 
 
 

What I Learned

Prototyping in code and developing my own designs have their own set of challenges.

Prototyping in a design tool like Sketch is an essential skill for a UX designer to have. However, creating the same interactions with mid-to-high visual fidelity in code presented its own difficulties. For example, I found, many times during the development process, that some interface elements and interactions were extremely difficult to recreate. In addition, certain aspects of the design had to be changed given the technical limitations of the SDK and code libraries we used.

Communication between stakeholders and team members is critical.

As a designer, I often gathered insights from my team members and other stakeholders in the NASA division I worked in. They brought with them their own diverse skill sets and experiences, and they helped me out during key design decisions. This saved me a tremendous amount of time conducting research and boosted the success of the application.

 

Business constraints are real.

Due to the open-source nature of this project, my team members and I received virtually no budget to build this application. The only resources that were available to us were the Internet and the stakeholders in our NASA division. These limitations overwhelmed me initially, but by the end of the internship, I felt more independent as a designer and I am glad that I gained experience working in such an environment.