Design to improve life on Earth through data visualization
Helping students visualize the effects of climate change
Overview
I worked with a team of 4 to design a web application that displays agriculture and climate data on a 3D view of Earth to help students visualizes the effects of climate change.
Organization
NASA Ames Research Center
Project Type
UX Design & UI Development
Web & Mobile
MY Role
Design lead & UI developer
Tools I Used
Sketch, Adobe Illustrator, Git, HTML5, CSS3, JavaScript
Timeline
Summer 2017 - 9 weeks
Team
Patrick (Scientist & Teacher)
John (Dev lead)
Me (Design lead)
Stacey (High School Dev)
Atreya (High School Dev)
Nick (Teacher-in-training)
Problem
Create a web application that aims to make Earth more livable.
Solution
AgroSphere is a web and mobile browser app that displays historical climate and agriculture data trends on a global scale through an intuitive web interface.
The goal of the app is to allow secondary school students and teachers to utilize the power of large amounts of valuable, underused agriculture and climate data.
International Competition
This project was based on The WorldWind Europa Challenge, an open-source competition hosted by NASA and the European Space Agency (ESA).
This competition seeks talents across the globe to bring innovative solutions to any global sustainability issues.
The main constraint is to use an open-source dev kit called Web World Wind.
Measures of Success
🛬 Expense-paid trip to Finland to compete against 11 other finalist teams at Nokia HQ.
🏆 First place in the competition!
🏆 Winner of GODAN Open Data Challenge for Agriculture!
1) Discovering 3 main challenges
What issue do we focus on?
Who are our users?
How do we build this app design to code all in 9 weeks?
2) Choosing an issue and our users
Literature Review
What world issue do we focus on?
First, we conducted a literature review to gather peer-reviewed articles in the science world to select and choose the right idea for our app.
Science education
How is technology current involved in science classrooms?
Natural disasters
Show the average number of certain disasters for a region based on casualties, costs, etc.
Renewable energy
Estimate the optimal type of renewable energy in a region based on existing data.
Climate change / global warming
Visualize possible historical trends and correlations between the agriculture and weather data.
After countless hours of closed-door meetings and research, we collectively decided to focus on increasing the awareness of…
Climate Change & Science Education.
Why this idea?
Educate young students who have science as an integral part of their education.
Design a lesson plan for teachers to use as a guide for their classrooms.
Impactful insights from peer-reviewed articles.
“Each degree-Celsius increase in global mean temperature would, on average, reduce global yields of wheat by 6.0%, rice by 3.2%, maize by 7.4%, and soybean by 3.1%. “
- Zhao, Chuang, et al (2017)
Crop Yields Decline Under Higher Temperatures
- Mishra and Cherkauer (2010)
“From 1880 to 2012, the average global temperature increased by 0.85° C.”
- United Nations
Potential changes (%) in national cereal yields for the 2020s, 2050s, and 2080s (compared with 1990) under the HadCM3 SRES A1FI with and without CO2 effects.
- Parry, Martin L., et al. (2004)
Personas
Who are our users?
With a focus on education, we wanted our users to be students.
We talked to them as well as some other personas we thought we would gain insight from.
6-12 grade students
Bored of the traditional way of how they have been learning in science class. (lectures, videos, etc.)
Like to click on random, interesting elements to explore when they first start using any interactive application.
Science teachers
Seek to implement an Earth science related, interactive web app into their environmental science class lesson plan.
“My students are such fast learners!”
Earth scientists
Use tools such as R and Excel to manage scientific data, and therefore has no need or interest to use such an app.
The anti-persona.
3) Building our app through ideation and code
How do we go from design to code in 9 weeks?
Key design decision #1 - determining visual style
Because our users are students, I first focused on more of a cartoonish and children-friendly look-and-feel.
Why this visual style?
We assumed it would be more approachable, fun and, engaging to our users.
Also, we thought it would set us apart in the competition.
Our decision? No.
But after showing this concept to our users, we realized it was wrong to assume.
“This app looks like it would be great for 3rd graders, but I wouldn’t use it.”
We ended up going for a more traditional and more professional look.
Rapid ideation & iteration 💡
With our more professional visual approach, I ideated back and forth between paper and code because it was efficient, and I quickly figured out what would work and what wouldn’t.
Coordinates that create shapes of countries and clickable icons on the globe
Yes! Works on the dev kit.
Key design decision #2
During our development process, we found a data type called WMS (Web Map Services) that display data on the global level.
Why use WMS?
You can just load them into our code files, and they would show up without much work.
There are literally hundreds of these datasets!
Our decision
After countless discussions and tests with our in-progress app, we decided to focus on —
Not using WMS data
Use different data types and show data in other ways
Why not? And the alternative?
Unreliable loading
Static - only shows data at one time of the year
We ended up finding and using Plot.ly, a JavaScript library that allows us to implement datasets in a variety of ways relatively quickly.
A reel of the capability of plot.ly!
Sketch of side navigation where a graph is shown in the external navigation, which would be resizable to allow a better view of the graph.
4) Final application
View agriculture data
By clicking on any country flag
View weather data
By clicking on any sun icon (weather station)
Compare agriculture data globally
Starting the 1900s
Usability testing
As the app ended its development, I led several rounds of usability testing in-person and via Skype with our target users with a variety of computer proficiency.
Results
Reduce the initial load time and dataset load times
Implement the ability to view multiple datasets simultaneously and side-by-side
5) International competition and success 🏆
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 Finland to compete in the finals against eleven other finalist teams at the Nokia HQ. 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 regard to climate and agriculture data, and to seek to sponsor the application for greater use.
6) Reflection 🧠
My failures & What I could have done better
My team and I really didn’t have a plan when this started. I tried my best to apply the UX design process, but it was very difficult considering that we had to develop the app all on our own.
i explored many visual design ideas but could not implement most of them due to lack of time and proficiency in coding.
In retrospect, I would have managed my time better to optimize the app in terms of UX copy, visual hierarchy, and smoothing out the overall experience.
Prototyping in code has its own set of challenges and put me far outside of my comfort zone.
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. Also, certain aspects of the design had to be changed given the technical limitations of the open source platform and code libraries we used.
Teamwork makes the dream work.
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.
References
Mishra, V., & Cherkauer, K. A. (2010). Retrospective droughts in the crop growing season: Implications to corn and soybean yield in the Midwestern United States. Agricultural and Forest Meteorology, 150(7-8), 1030-1045.
Parry, Martin L., et al. "Effects of climate change on global food production under SRES emissions and socio-economic scenarios." Global environmental change 14.1 (2004): 53-67.
United Nations, United Nations. “Climate Change.” United Nations, United Nations, www.un.org/en/sections/issues-depth/climate-change/.
Zhao, Chuang, et al. "Temperature increase reduces global yields of major crops in four independent estimates." Proceedings of the National Academy of Sciences: 114 (35).