Hi there! Please visit me on a larger screen ☺

LinkedInResume

Loading Airflow...

Airflow Dashboard

A data visualization portal for climate researchers
my role
Product Design
User Research
Front-End Development
Team
Pacific Northwest National Laboratory
Duration
June 2021—Sept. 2021
Mentors
Elvis Offor
Carina Lansing
Overview
Atmospheric Radiation Measurement (ARM) is an international, multi-laboratory user facility that maintains atmospheric monitoring stations integral to climate research.

Collected data is processed and visualized by DataGrid. However, DataGrid is not designed to accommodate the user’s intuition leading to increased work times.

I spearheaded the redesign of PNNL's data visualization portal with efficiency in mind, resulting in faster workflows.

* Due to pnnl information release guidelines, I have limited media I am able to share. Please contact me for more information.
Context

An antiquated tool forced to process modern data

In need of a refresh.
While robust in features, DataGrid was designed with data in mind, not the user. "I [just] wish I could access some of the functions more readily." said a DataGrid user. I realized my redesign had to follow the intuition of a researcher.
Research
Time to take a deep dive
Ethnography
Fly on the wall observation to understand where slowdowns occur
Utilize the original DataGrid myself
Create a user journey map based on my experience with DataGrid, as well as the observations of others
Competitive analysis
Utilize competitor data processing portals adjacent to DataGrid
Understand competitor information architecture and hierarchy
How do competitors mitigate information overload?
User Interviews
Host user interviews and workshops with current researchers at PNNL
Through directed storytelling, listen to the personal stories of users
Generative workshops lead visual design direction and tone of the portal
Research methods, and what they address.
Overheard at the water cooler.
A sample of the quotes I collected during my research. There was a clear trend that the current UI lacked clarity, creating pain points throughout the user journey. There was an exasperation towards the functionality, and a lack of interest in the visuals.
Roadblock one
Mitigating my knowledge gap
Taking the time to understand.
As I was hosting generative interviews, I realized that I needed to better understand ARM's goals with the redesign in order to empathize with my target user.

To address this, I spent 3 weeks speaking with program directors, attending team meetings, and utilizing the portal myself to better understand the problem space.
Studying the original portal
Introducing the OG
Variety... and more variety.
I was noticing large portions of the interface were saturated with important information, without a clear way to distinguish them. There were 15+ color styles on the dashboard alone, obscuring the few signifiers available.
Oversaturation
Information overloads the user upon launch—an immediate slow down
All actions are displayed with equal importance, reducing discoverability
It is difficult to learn how to use DataGrid, as the visual design is not optimized for data rather than people
linguistic complexity
A lack of visual signifiers leads DataGrid to heavily rely on text
The reliance on text causes datasets and information bleed together
Finding a specific data set requires the user to read through large condensed text blocks, increasing workflows
navigational obscurity
There is a lack of signifiers, users spend more time trying to find touch-points instead of doing their work
The user journey is obscured by the need to heavily search for functions
The unintuitive mental model harms new users trying to learn DataGrid
Opportunity
An intentional prioritization of how and what is displayed, based on frequency
Opportunity
Visual signifiers and color should be usedas signifiers instead of text
Opportunity
Compartmentalize similar tasks to promote stronger discoverability
Insights and opportunities.
Popping the question.
Alright—the question we have all been wondering about. I realized the crux of the problem was DataGrid's UI did not align with the intuitions of its users. To boost efficiency, all aspects of the interface (visual system, flow, architecture,) would need to be reevaluated.
Early process
Getting used to constraints
Visual communication
Create a design system to allow for better information hierarchy
Reduce confusion by utilizing color
Organization should scale as researchers zoom in and out
function forward
Users expressed that visual design was not a priority to them
The goal of the redesign should be to improve efficiency, not aesthetics
Be pleasant yet unadorned
information hierarchy
Tasks should be noticeably distinct
Clear information structure should prevent content bleeding together
Information should be easily distinguishable and readily available
My design goals.
Visual constraints.
One of the struggles I faced during the redesign was working within strict visual constraints. As a government tool, I was only able to work with a handful of typefaces and visual styles. This was due to the widespread use of the platform, privacy interests, and the array of operating systems this portal would need to run on.
Roadblock Two
User journey: clarity & discoverability
Navigational obscurity: old journey.
When I created a flow map for DataGrid, I realized that once the dashboard loads, 8 primary tasks are presented with overlapping outcomes. This large pool of choices was the direct cause of navigational obscurity for many current users.
Redrawing the [ journey ] map.
The updated flow organizes main content into broad sections, compartmentalizing similar functions into categories. This clarifies the mental model needed to navigate the portal.

Additionally, filters are now integrated into each page, enabling researchers to efficiently parse data at any point as required.
Wireframing and refining
From paper to pixel
Wireframing, pen to pixel.
A few samples of my initial explorations for the dashboard. I began by brainstorming all potential ideas on paper. Once I down-selected ideas, I recreated the sketches in Adobe XD.
Updated flow
Early ideation
Over saturation: presenting data.
One key design decision was the redesign of data display. Originally, DataStream's relied purely on color to convey processing status, sacrificing information on specific data packages.

Airflow dashboard maintains the horizontal timeline view while presenting data packages as individual cells, allowing researchers to examine granular data at a glance.
Using AI to save time.
Following wireframing, I utilized Adobe XD and Figma to create responsive prototypes. In between user testing, I utilized AI to estimate user focus. This ensured iterations were heading in proper directions while preparing for future user testing workshops.
Final product
A tool reforged
Targeting navigation: drawers!
The collapsible drawer element adjusts content based on the page, keeping potential tasks hidden until necessary. Researchers can focus on data without distraction by hiding the drawer. Segmented controls help users navigate and organize the portal effectively.
Targeting signifiers: breakpoints.
Zoom breakpoints adapt the display of data. As data granularity increases, cells expand for detail, while maintaining a broad overview for comparison. Concealing data within breakpoints reduces information overload.
Targeting navigation: frequency of use.
Information is grouped into relevant categories focusing on high-traffic tasks. Dates, status, and DataStreams utilize strong contrast for better identification. Collapsible panels offer quick access to tools. The landing screen highlights commonly used tasks, minimizing the time spent searching.
TAKEAWAYS
Working within a team, not just designers
How to convey my ideas, without confusion.
Working with non-designers was my key learning from this project. This included facilitating cross-role collaboration and accelerating the concept-to-reality process through rapid coding. I learned to present my work in a format that was understandable to the whole team, not just my fellow designers.

It was also good practice to design within constraints. As I was given a set of strict guidelines on what typefaces and colors were permitted, I learned to work within the needs of a client.
Next project
Otto
Jump
A dropdown icon