FLUID: NASA satellite data
for the public
Role
UI/UX Design +
Front-End Dev Intern
Timeline
June 2024 - ongoing
Team
1 UI/UX Designer, 3 Advisors
Context: NASA Goddard Space GMAO
NASA Goddard's GMAO (Global Modeling and Assimilation Office) generates and distributes a number of products that make extensive use of NASA's satellite observations.
One of their products is FLUID (Framework for Live-Invoked User Data), a web-based tool that supports satellite missions and field campaigns used by researchers and scientists at NASA.
Problem
There were two primary problems - busy scientists on-the-go are not able to use FLUID efficiently due to its lack of organization. Secondly, FLUID has difficulty attracting new users, as they have trouble navigating FLUID because it is so different from a usual website experience.
PROJECT GOAL
Redesign FLUID's interface to be more intuitive and accessible for people across different professional backgrounds, both within and potentially beyond NASA.
Initial observations: Inefficient use of space, lack of hierarchy, and unfriendly to first-time users
I typically approach redesigns by annotating initial observations on the existing site. Overall, the inefficient use of space means users lose time scrolling, and a lack of hierarchy may confuse new users who are not familiar with the layout of the site.
Hypothesis: FLUID’s disorganization slows down workflows and deters new users
Following my initial observations, I hypothesized that the disorganization of the current FLUID not only decreases the efficiency of a scientist workflow, but deters new users from becoming comfortable with the tool.
I outlined the following steps to get started:
Conduct evaluative user research to understand the current workflow and pain points to identify areas of improvement.
Solidify FLUID as a web tool experience by creating a home page to familiarize user with GEOS + allow users to practice navigating to pages they want to see.
Reduce unused space and modernize interface colors for a more engaging user experience.
Initial ideation: User flows
Before going into interviews, I wanted to have initial ideas sketched out. This is the home page, which would have a hero introducing the tool, a new navigation bar, and pages listed directly on the home page with their graphs listed underneath.
This flow outlines how a user would navigate through maps under Weather Forecasts, and then find the tool they are looking for.
Research overview
I spent two weeks talking to 1 new user and 4 researchers and scientists at NASA. My objective was to understand who they were, what they did, and why they used FLUID. I investigated their workflow and any difficulties that came up.
After interviewing 5 users, I took note of the patterns in pain points I noticed amongst them.
Poor site organization and
unclear navigation
“FLUID’s biggest problem is its lack of organization.”
“I have to train others to use FLUID because you can’t find graphs at a top level.”
Dr. Emma Knowland, NASA GMAO scientist
“...no hierarchy, just a bunch of links pointing to what feels like random content”
Dr. Fred Shic, new user and researcher
Slow and inflexible
interface options
“I work around slow graph generation by directly editing the page URL.”
Dr. Allison Collow, NASA GMAO scientist
“Graph animations...sliders instead of drop-downs, selectors for start and end dates...”
Dr. Patricia Castellanos, NASA GMAO scientist
Lack of help documentation
and context for new users
“A lot of scientific jargon...confusing for someone who isn’t a meteorologist.”
Dr. Fred Shic, new user and researcher
“FLUID needs to be more approachable to students, researchers, and media.”
Dr. Allison Collow, NASA GMAO scientist,
Key objectives: Addressing pain points
To address these pain points, I defined key objectives for the FLUID redesign.
Poor site organization and
unclear navigation
Consistent organization of content
with intuitive navigation
Slow and inflexible
interface options
Refreshed user interface and
thoughtful selection options
Lack of help documentation
and context for new users
Define technical terms and provide
information on how FLUID works
Frontend development
During my internship, I began learning about frontend development. FLUID relies on React, a JavaScript library, and Tailwind CSS for styling the user interface.
REACT
JavaScript library for building interfaces with components (like lego bricks). Makes for quick updates.
TAILWIND CSS
Framework for styling website. Instead of manually writing rules, you add brebuilt class names to your HTML.
The FLUID redesign
Still in continual communication with scientists and presenting my work on a weekly basis, I wireframed the next version of FLUID on Figma. Note: redesign is ongoing.
Home page
In the original FLUID, users immediately land on the Weather Analyses and Forecasts page. In my redesign, users land on a cohesive home page. This is especially important for new users, who need to be eased into the FLUID experience and navigating the site.
Navigation
The navigation bar offers users another way to explore the site - through interactive hover states that preview the tool and its information.
Search
I spoke NASA scientists specializing in different fields, and a researcher who mentioned wanting more freedom to explore the site. If the user is interested in a given topic or specific graph, they can search using key words.
Tool page: Weather Maps
It was important to note that each of these graphs have specific field requirements - and not all of them follow the same template.
For instance, the MERRA-2 weather map required a single selection field as well as multiple drop downs and the ability to generate graphs with or without tropical cyclone tracks.
During my interviews, one of the scientists specifically requested to have an animation option, which would put together maps in chronological order from a given time and date.
Tool page: Meteograms
It was important to note that each of these graphs have specific field requirements - and not all of them follow the same template.
For instance, the MERRA-2 weather map required a single selection field as well as multiple drop downs and the ability to generate graphs with or without tropical cyclone tracks.
Metograms had the specific need of requiring a condensed location selector.
About page
FLUID currently has an about page that is about a paragraph long. It was important to keep in mind that FLUID is a tool powered by NASA data, used by researchers at NASA and outside of NASA. Consequently, a positive user experience on FLUID may strengthen public perception of NASA, and a user who uses a tool knowing it is piloted by NASA might place more trust in the data provided. A lot of these sections on the redesigned about page - why FLUID, how does it work, and use cases - serve to contextualize FLUID as a trustworthy resource.
Mobile views
Users reported that they use FLUID on the go, particularly for field mission support. It was important that FLUID continue to be accessible on mobile.
Conclusion
UX design is not something NASA typically prioritizes, but in this instance with FLUID, it was shown to be useful - and has made a case to consider user experience in other projects.
View more work
