Loading Airflow Dashboard

AIRFLOW

DASHBOARD

I spearheaded the redesign of the Dept. of Energy's data visualization portal with efficiency in mind, resulting in streamlined workflows reducing work times by 20%.

INFORMATION RELEASE —
As per information release guidelines at PNNL, I am currently unable to show more images or details regarding this project. If you are interested in learning more about this project and its impact, feel free to contact me!
PROBLEM —
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.
RESEARCH METHODS —
ONE — ETHNOGRAPHY
— Observed primary users to understand the user journey with the original DataGrid.
— Using the fly-on-the-wall method, I was able to visualize how users interacted with the portal, as well as how long was spent on each phase of the user journey.
— To understand and empathize with my target user, I utilized the portal myself.
TWO — COMPETITIVE ANALYSIS
— Researched and used competitor data visualization portals used by researchers.
— By interacting with similar data visualization portals, I learned that successful designs often reduced the amount of visual information presented at any given time.
— It became clear that I needed to strategically decide what would be featured on every page of the portal.
THREE — USER INTERVIEWS
— Interviewed current users of the DataGrid to gather stories surrounding the experience with DataGrid.
— Through directed storytelling, I listened to real stories of current users. I learned that there was frustration around not being able to discover certain tasks within the portal.
— Generative workshops gave insight into visual directions. My target demographic didn't want a flashy interface, rather opting for a dark mode with a limited color scheme.
What do users of DataGrid have to say about the portal?
KEY LEARNING ONE —
OVER SATURATION
PAIN POINT
"[I] wish I could access some of the functions more readily," VG said.
— Information overloads the user upon launch, immediately slowing down the user. The first step taken was often collapsing panels that were deemed unnecessary.
— Regardless of a tasks frequency of use, there is only one level of importance, reducing discoverability.
It is difficult to learn how to use DataGrid, as the visual design is not optimized for data rather than people.
USER NEED
— An intentional prioritization of how and what is displayed. User's should be able to dive into data processing without altering the UI.
— A clear visual system to guide the user around the portal, rather than relying on prior experience.
All frequently used tasks should be displayed more prominently than lesser used tasks.
KEY LEARNING TWO —
LINGUISTIC COMPLEXITY
PAIN POINT
— The current design system relies heavily on text to convey meaning. This is hard to scan.
— Users expressed frustrations in datasets, functions, and information bleeding together.
— To locate a specific data set, the user has to read through an extremely condensed block of text.
USER NEED
— A streamlined design system that allows for quick access of information. This shouldn't rely on text.
— More breathing room between text is necessary to improve scannability.
— Visual signifiers and color should be implemented to callout touch-points and the status of data sets.
KEY LEARNING THREE —
NAVIGATIONAL OBSCURITY
PAIN POINT
— There is a lack of signifiers, users spend more time trying to find touch-points instead of doing their work.
— The user journey has been obscured by the need to discover where functions are housed.
— The unintuitive set up harms new users who are beginning to learn how to use DataGrid.
USER NEED
— Clear, communicative visual cues for interaction that reduce the cognitive load needed for navigation.
Group similar tasks to streamline navigation. This will reduce frustrations with information overload.
— The structure of the portal should be modeled after how a researcher interacts with the portal, not by trying to visualize as much data as possible.
Turns out, researchers spend more time figuring out DataGrid instead of actually using it.

How can I improve researchers' efficiency by simplifying and enhancing the visual interface of DataGrid to bridge the knowledge gap and provide a more intuitive working experience?
DESIGN GOALS —
ONE — VISUALLY COMMUNICATIVE
— Create a design system to allow for better information hierarchy.
— Reduce confusion around intent utilizing color.
— Organization should scale as researchers zoom in and out. This reduces information overload.
TWO — FUNCTION FORWARD
— As per my interview insights, the solution should prioritize functionality over the visual system.
— The main goal of the redesign should be to improve efficiency, not aesthetics.
—  Be pleasant yet unadorned.
THREE — TASK-FOCUSED
— Tasks (importing, processing, searching,) should be noticeably distinct at a glance.
— Clear information structure should prevent content bleeding together. This will aid in discoverability.
Information should be easily distinguishable and readily available.
PROCESS HIGHLIGHT —
MAPPING USER FLOW
— By mapping the user flow, I was able to pinpoint where users had efficiency issues.
— Once the Dashboard Overview is loaded, there are 8 primary tasks that are presented, despite the outcomes often overlapping. This needs to be narrowed down in the final solution.
PROCESS HIGHLIGHT —
WIREFRAMING
— I initially wireframed on paper to rapidly generate ideas.
These sketches were used in generative workshops with users to further improve upon the concept, as seen in blue.
PROCESS HIGHLIGHT —
ITERATING + TESTING
— Following wireframing, I utilized Adobe XD, Figma, and AI tools to create responsive prototypes.
— In between user testing, I utilized AI to estimate the users focus. This ensured iterations were heading in proper directions while preparing for future user testing workshops.
— As seen in the heat map, my goal was to direct focus to the green data section primarily, then date, then finally category.
After approval, I implemented my design with React.JS and VScode.

Here is the solution that I shipped, the Airflow Dashboard.
Now let's look at some design decisions.
DESIGN DECISION ONE —BREAKPOINTS
— Zoom breakpoints adjust the display of information. As the data gets more granular, individual cells expand to present more information.
— The broad overview displays the overall status to compare multiple data sets at a glance.
Concealing data within breakpoints decreases the information overload found in the original DataGrid.
DESIGN DECISION TWO — FUNCTION FORWARD
— Information is now grouped into relevant categories that prioritize high-traffic tasks.
— Information such as dates, status, and DataStreams now utilize strong contrast to be more identifiable.
— Collapsible panels give researchers the option to quickly access and conceal tools.
— The landing screen now only features tasks highly utilized by research, reducing the need to personalize the portal on each launch.
DESIGN DECISION THREE — VISUAL GUIDANCE
— The majority of visual changes were made to improve functionality and readability.
— In order to accommodate the numerous laboratories utilizing this portal, I chose to implement the Material UI component library for all visual signifiers.
— Based on insights from generative workshops, a custom color system was created to intuitively signify processing status.
— When iconography and color were used in tandem, the design system is able to communicate all status messages without text.
INFORMATION RELEASE —
As per information release guidelines at PNNL, I am currently unable to show more images or details regarding this project. If you are interested in learning more about this project and its impact, feel free to contact me!
REFLECTION —
My biggest takeaway from this project was the experience of working with non-designers. I feel that after this project, I was able to practice many hard and soft skills that allow to design and communicate more efficiently.

— I navigated cross-role collaboration, empowering effective communication with non-designers. This helped me gain insights into feasible development approaches and fostered inter-team understanding.

— Transformed concept-to-reality process with rapid coding, enhancing design validation. In turn, I practiced conveying ideas compellingly to diverse audiences, especially non-designers.

Worked under tight visual constraints, boosting confidence in problem-solving and creative limits.