Nimbus
Visualizing multivariate cloud simulation data from the Caribbean
Client
NASA JPL + Climate Modeling Alliance (CLiMA), Caltech
my ROLE
Design lead, frontend engineer
problem statement
How might CLiMA researchers visualize time-variant 3D and diagnostic variables from large eddy simulation data in order to understand and improve how their system models turbulent structures, including updrafts and entrainment zones?
Project Description
Nimbus is a web-based app designed to streamline the CLiMA team’s data analysis workflow by allowing them to view a variety of atmospheric variables as 2D slices of the domain, while comparing them to altitude dependent plots of diagnostic variables that represent the central quantitative results of each simulation.
The interface enables research scientists to compare these diagnostic plots across multiple simulations, allowing them to quickly iterate and test their model.
The interface enables research scientists to compare these diagnostic plots across multiple simulations, allowing them to quickly iterate and test their model.
Process
Phase I: Discovery
Contextual inquiry
Persona development
Concept exploration
Early sketches & wireframing
Core feature scoping
Persona development
Concept exploration
Early sketches & wireframing
Core feature scoping
The first part of this work involved familiarizing myself with the space and challenge areas. I met with key stakeholders on a weekly basis, utilizing as the primary method of research to understand their unique roles and responsibilities.
During our meetings, I asked them to walk me through their specific goals and their day to day responsibilities. I also requested them to show their workflows and describe challenges they faced with their current software tools.
This phase of work was focused on understanding our key stakeholders, persona development and concept ideation/exploration.
During our meetings, I asked them to walk me through their specific goals and their day to day responsibilities. I also requested them to show their workflows and describe challenges they faced with their current software tools.
This phase of work was focused on understanding our key stakeholders, persona development and concept ideation/exploration.
Key stakeholders
Fluid dynamicists, atmospheric scientists
Develops the physics equations and models for the simulation of atmospheric processes, post-processes diagnostics and visualization, and compares against other sets of simulation data
Software developers
Interprets the scientists’ prototype code into code that is more computationally efficient for the simulation, runs the simulation with updated models, and exports the data for analysis. Research scientists also take part in this.
User #1
Focuses on modeling and comparing the effect of physical equations on the model.
Wants to compare the same cloud regime with slightly different equations or inputs.
Wants to compare the same cloud regime with slightly different equations or inputs.
User #2
Focuses on analysis - studying turbulent features and their development over time.
Wants to compare/contrast different cloud regimes in different locations.
Wants to compare/contrast different cloud regimes in different locations.
User #3
Studies large scale climate features.
Wants to be able to analyze global scale data, or at least see large scale eddy results in a global context.
Wants to be able to analyze global scale data, or at least see large scale eddy results in a global context.
Phase II: Design & Prototyping
User stories
Wireframing
Code sketches
Design iterations & feedback sessions
Wireframing
Code sketches
Design iterations & feedback sessions
This phase of work involved several rounds of rapid prototyping and getting feedback from stakeholders early and often, which informed design iterations.
Our team was provided with sample data to work with, which gave us the opportunity to explore visualizations in both 2D and 3D.
Our team was provided with sample data to work with, which gave us the opportunity to explore visualizations in both 2D and 3D.
Phase III: MVP Design, Development & Testing
Visual design
Web development (HTML, Javascript (React, Node, d3), CSS
Feedback sessions
Testing & bug fixes
Web development (HTML, Javascript (React, Node, d3), CSS
Feedback sessions
Testing & bug fixes
Given the timeline of the initial scope of work (10 weeks), there wasn't enough time for a dedicated visual design phase - it's not surprising how often this comes up!
While some of the initial visual design exploration was done in Figma, a lot of refinement happened during development. We were already working within the realm of atmospheric and planetary sciences, with a focus on cloud simulation data, so it was somewhat easier for us to land on a color theme. I intentionally designed the interface with a dark theme to make the data visualization/imagery stand out more, and more user-friendly for data analysis (looking at a screen for hours at a time).
Switching gears from design into development, I built the web app using React, d3, Node, CSS, and also configured the project so that it could be deployed as a desktop app with Electron.
While some of the initial visual design exploration was done in Figma, a lot of refinement happened during development. We were already working within the realm of atmospheric and planetary sciences, with a focus on cloud simulation data, so it was somewhat easier for us to land on a color theme. I intentionally designed the interface with a dark theme to make the data visualization/imagery stand out more, and more user-friendly for data analysis (looking at a screen for hours at a time).
Switching gears from design into development, I built the web app using React, d3, Node, CSS, and also configured the project so that it could be deployed as a desktop app with Electron.
Early visual design, color palette
Final MVP deliverable
Phase IV: Additional Feature Scoping & Design
Web development (HTML, Javascript (React, Node, d3), CSS
Feedback sessions
Testing & bug fixes
Feedback sessions
Testing & bug fixes
At the end of the initial 10 week scope, I was asked to extend my engagement in the project. In this next phase of work, I was tasked with designing a set of features focused on being able to visualize simulation data from other regions on earth, and enabling scientists to upload their own data sets.
Client & Collaborators
Tapio Schneider, Caltech Professor of Environmental Science and Engineering, NASA/JPL Senior Research Scientist
Akshay Sridhar, Caltech Postdoctoral Scholar Research Associate in Environmental Science and Engineering
Lenka Novak, Caltech Research Scientist
Yair Cohen, Caltech Research Scientist
Akshay Sridhar, Caltech Postdoctoral Scholar Research Associate in Environmental Science and Engineering
Lenka Novak, Caltech Research Scientist
Yair Cohen, Caltech Research Scientist
Core Team
Rachel Rose Waterhouse (design & development)
Martin Bernard (development)
Barbara Alonso (design)
Martin Bernard (development)
Barbara Alonso (design)