Web UI/UX - Front-end Programming - Research - Visual Design

Designing For A Better Tomorrow

iMac Pro.png
 

Role

UX/UI Design Intern

Team

4 interns (2 high school students) + Mentor/Program Manager

Duration

June 2017 - Aug. 2017

 

Background/Problem

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. My internship team participated in the challenge.

Responsibilities/Solution

As the only designer of the team, I worked with my team in creating an web application that displays historical climate and agriculture data trends on a global scale via an intuitive web interface. We used both design tools and code (HTML, CSS, and JavaScript) to design the app. The goal of the app is to allow middle and high school students to explore large amounts of valuable, underused agriculture and climate data.

 

 
NASA data.png

Internship 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

  • Limited access to certain climate/weather and agriculture datasets

  • 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

  • This was my first internship ever!

 


 

Process

1 - Exploration

  • Stakeholder Interviews

  • Exploring App Ideas

  • Scavenging for Data

2 - Define

  • Storyboarding

  • Creating Personas and Scenarios

  • Insights From Users

3 - Ideate

  • Sketching

  • Feature Outlining

  • Weekly Reviews

4 - Design / Iteration

  • Design Mockups

  • Development Prototyping

  • Usability Testing

5 - Competition

  • Symposium Presentation

  • Live Release

  • International Competition

  • Pitching to European Executives

6 - Reflect

  • Takeaways




Exploration

Because this project was a standalone design challenge, there was no user metrics to leverage during the research phase of the internship. So it was up to my team and I to navigate through ambiguity.

App Idea Exploration

First, 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:

  • Lesson plan
    • Prepared for secondary school teachers to use as a guide for the app.

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

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

  • Agriculture and weather - climate change
    • Visualize possible historical trends and correlations between the two different types of data.

One way we initially brainstormed 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.


After countless hours of closed-door meetings and numerous ideas for the project, we collectively decided on the last option along with the lesson plan due to a few key reasons:

  • Importance and potential impact

    • Supporting scientific research on the effect of climate change on agriculture on a global scale

    • Educational impact on students - students may be able to find correlations between agriculture and climate datasets

  • The large amount of historical data that was publicly accessible

Exploring App Design and Scavenging for Datasets

 
 

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.

We ended up reiterating on the kid-friendly concept and gave the app a more professional look. We also removed the tutorial process because we thought that the app needed to be self-explanatory rather than relying on an elaborate, guided tutorial.


 
 

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

Most of the datasets we gathered were public and start from the late 1800s to the early 1900s.

The most difficult part of this process was finding reliable and usable datasets in two ways:

  • The file formats that we had knowledge of implementing into our app (namely CSV files)

  • From smaller countries and countries during times of war (Ex: China, Russia, African countries).




Define

My team and I derived these personas through our exploration above, discussions with current students and teachers, and our continued stakeholder interviews at our NASA division!

 
Tirsa - 9th grade student.
Is interested in and curious about exploring the history of Earth through an interactive platform.
Jamie - high school science teacher.
Is seeking to implement an Earth science related, interactive web app into her environmental science class lesson plan.
Anti-Persona Albert - expert Earth scientist.
Uses tools such as R and Excel to manage scientific data, and therefore has no need or interest to use such an app.
 

As a team, we aimed to create the app as an exploratory platform to allow students to learn about changes in agriculture and climate in the past century.

We also created a lesson plan for the teacher to use as a guide for his classroom!

Here’s a scenario of a teacher and students using the app.

Key User Insights

  • Students are bored of the traditional way of how they have been learning in science class. (lectures, videos, etc.)

  • Students like to click on random, interesting elements to explore when they first start using any interactive application.

  • Teachers want to use real data as another way to solidify the content they are teaching to students.

 
 



Ideation

Sketch of the interface and placemarks (flags and weather stations) and the interactions with those placemarks that reveal agriculture and climate data

 

My responsibilities in the ideation phase involved deciding how and where datasets would show up on the side navigation and on the Earth view. I also implemented appropriate affordances, such as clickable icons, on the globe so users can easily interact with the available datasets.

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.

One huge constraint we faced was the lacking of data that was available to us to implement. Because this was an open-source project, we did not have the privilege to access more weather data than we would have liked.

Then we began the coding process...

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

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.




Design / Iteration

At this stage, we tested out different UI elements, navigation, and methods of showing datasets on the Earth view to see which was most easy-to-understand.

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

One of the very (very) first prototypes I created in code. (GIF)

NASA demo2-min.gif

Playing around with Time series - showing changes in climate in through the year

NASA demo-min (1).gif

Exploring the different countries and markers of cities around the world

Students become curious when they see stuff like this!

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 software engineers, to receive feedback.

Our time with software engineers was very limited and we only were able to communicate remotely. Many of them were very busy, but I took action to reach out to them for design and code feedback.

We ended up focusing on showing graphs of data in the side navigation as well as interactive 3D data on the globe.


Usability Testing

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 the app would be useful and usable in a realistic setting.

Results of the usability tests 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


Throughout the design and development phase and near the end of the competition submission deadline, I completed two key tasks:

  • I tested the application and its features on different browsers (Chrome, Safari, Firefox, and MS Edge.)

  • I added concise, yet easy-to-understand comments in my CSS and jQuery code in case any future developers wanted to add to our app.

    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).




Completed Application

nasa.gif

Clicking on a country flag allows the user to view that country’s agriculture data.

Chrome-Browser-Mockup-Free.jpg

Annual apple production (in tons) in the US since 1960



Chrome-Browser-Mockup-Free3.jpg

Annual temperature (in Celsius) since 1989



Chrome-Browser-Mockup-Free+-+Copy.jpg

“Geo-Comparison Data” feature - Comparison of apple production between countries in 2014

Country colors:

Green (above average compared to other countries with available data)

Yellow (average)

Red (below average)



earthhhhhhh.gif

Number of apples produced by countries changes as time progresses (GIF)



 
Menu tooltips.  (GIF)

Menu tooltips. (GIF)

 
 
 


Menu is draggable and the graph is resizable so the nav bar can be adjusted based on users’ liking. (GIF)



earthhhh.gif

Comparison of maize production between countries

(GIF)



 
 

Style Guide

Libre Franklin
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

 
 
 
 



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 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 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.

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

 
 



Takeaways

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. In addition, certain aspects of the design had to be changed given the technical limitations of the SDK and code libraries we used. Given that this was my first internship and that our collective technical knowledge was very limited, we tried our best!

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.

 

I felt like I was working at a startup.

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. This is why there were some aspects of this web app that I felt could have been improved if we had more time and resources. For example, we were not able to find enough data for ocean temperature, the amount of shrinking ice sheets and snow cover, etc. We were also very limited as a team in terms of technical knowledge, which made it difficult for us to fix some of the usability issues we still had by the deadline of the competition.

However, by the end of the internship, I still felt more independent as a designer and I am glad that I gained experience working in such an environment. Despite this, I realized that there were many things that I could have done better on the app, but hindsight is always 20/20!



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 Meteorology150(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.

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 (2017): 9326-9331.



Special Thanks To:

Patrick Hogan, Former NASA World Wind Program Manager

John Nguyen, Intern

Stacey Chen, Intern

Atreya Iyer, Intern

Nick Rubel, Intern

Miguel Del Castillo, NASA Software Developer