Data Visualization

Root + STEM

Background

Prior to developing Root + STEM, only a PDF documented the STEM programs that were available in the state of Hawai’i. Our task was to turn the static resource into a living web app that had the potential to expand through community contributions.

We had two goals:

  1. Build an online portal where community members can submit STEM resources.
  2. Display the data as a searchable archive so that students, teachers, and working professionals can easily navigate those resources.

Part 1 of the case study focuses on information architecture, data design, and infrastructure.

Part 2 focuses on data visualization and the translation of information into visual design to make it accessible to a wider audience and merge it with culture, history, and a story.

Our Team

Kelli Borgonia, Project Lead, UI Designer
Jon Borgonia, Senior Software Architect
Te Vallee, Full-Stack Developer

My Role

I designed the data infrastructure and worked with the developer to ensure that it was implemented to spec. I designed all layouts and hand-coded all CSS.

Part 2: Data Visualization

Data & Infrastructure

After examining the team’s original Airtable database and reading the initial PDF report on STEM programs, I worked with the research team to define the properties that we might want to start collecting when users contribute STEM programs.

PIC - LIST OF PROPERTIES

Since the web application would house a combination of informational and community-contributed content, I planned to separate all editable content from the web app infrastructure.

Whenever possible, I design projects and infrastructures that are sustainable. I have witnessed so many projects where content change requests end up wasting 80% of a developer's time. To mitigate this inefficieny in the projects that I have control over, I always work with a CMS to ensure that content can be updated independently by content creators and managers, so that developer resources are reserved for functional change requests.

PIC - ROUGH OUTLINE OF INFRASTRUCTURE

I discussed my plan with Jon Borgonia and he expanded it to an actual infrastructure that utilized a variety of web technologies:

  1. Airship CMS (our internal product) for webpage hosting and conent management
  2. Firebase for STEM Programs, contributor data, and users
  3. AWS Somethingname for something
  4. AWS Somethingname for hosting contributor images

PIC - JON'S INFRASTRUCTURE DIAGRAM

See Jon Borgonia’s Case Study that outlines our experiment using serverless for this project, as well as our encounter with Firebase API rate-limiting and our solution to efficiently work with Firebase’s something cap.

User Flows

After the web infrastructure was planned, I mapped out the key user flows for website visitors.

PIC - FLOWCHART ALL USERS, INCLUDE EMAILS, INCLUDE APPROVAL STATES

  1. Community contributors submit STEM programs to the database.
  2. Website admins review and approve contributor submissions.
  3. Students and teachers search for STEM programs.
  4. All others end up at the website leisurely to browse content.

From a development standpoint, the web app was extremely simple and functional. However, coming from a visual design / product background, I am always thinking about how we can better engage our audience. I pitched the idea of strong infographics as a focal point to attract visitors and gain more traction through the rest of the web application. This would ideally also give those browsing for leisure more of a reason to engage with content.

PIC - FLOWCHART OF USER DRIVEN BY INFOGRAPHICS FOCAL POINT

The user flows mapped to the following web components: Programs, Contributors, Programs Admin, and Map. Each component is described below.

Programs

The Programs section pulled all STEM Programs data from Firebase and rendered it as a searchable, filterable list. I studied several similar websites and noticed that they all had very complex filtering and search capabilities. Since this was the site’s first iteration and there were less than 200 initial programs, I limited the filters to properties that would return the most general results: Program Type, Age Group, Industry, and Region.

PIC - PROGRAMS

Contributors

I structured the Contributors interface to be a simple and straightforward. Users could sign up, set up an organization, then fill out a 3-step form to submit a STEM Program. Once submitted, the program was set to a “Pending” status to be reviewed by a site administrator.

PIC - SUBMIT A PROGRAM

Despite its simple appearance, the Contributors UI was complex and robust under the hood. All form questions in the program submission flow mapped to data fields in Airship CMS. These fields could be modified and new fields could even be added via the CMS, without having to interrupt the developer's workflow.

PIC - DIAGRAM OF AIRSHIP TO WEB APP FORM FIELDS

I had designed a complex data structure that mapped form field types to CMS-managed content. This allowed me (and future content admins) the flexibility to update the exact text for fields and options asynchronously from the developer working on the web application infrastructure.

PIC - ALL DATA TYPES (MAYBE GH TICKET?)

In also meant that we could reduce development time and stack processes that usually need to occur in sequence.

PIC - GANTT CHART COMPARISON

Programs Admin

The Programs Admin interface allowed admins to log in and review pending STEM programs. After review, admins could then approve and publish, or reject the program with notes for revision.

PIC - ADMIN REVIEW SCREENS

Email notifications were also sent at key STEM Program state changes.

PIC - EMAIL USER FLOW

Map

The Map was a representation of all Hawai’i STEM Programs plotted on a roadmap that extended from Pre-K to adulthood. Building it was a collaborative effort between Te Vallee, the developer, and I. When building it, Te followed my very detailed notes on data structure and logic for filters, dynamic captions, and sequentially loaded data.

PIC - DETAILED SPEC

Each STEM Program visualized on the map had a shape and color that correlated to a value representing the STEM Program's Depth or Breath of content, Learner or Diversity Focus, or Geographic location.

PIC - MAP

There is much more information about the Map in Part 2. You can also interact with the live map here.

Dynamic Options

I spend a lot of time considering how to display categorical industry data

In form, show all categories and subcategories.

In search, only show itesm that have data.

In terms of program data, if you set a sub category, in search results your items should show if a parent is selected, or your sub category.

Also wanted it managed via CMS

PIC - OPTIONS CATEGORIES / SUBCATEGORIES.

PIC - HOW THOSE CATEGORIES ARE TRANSLATED.

!!! Part 2--> the kind of design you wish you had the skills and time to do in college.

!!!

From a development standpoint, the web app was extremely simple and functional. However, coming from a visual design and product background, I am always thinking about how we can better engage our audience. I pitched the idea of utilizing strong infographics as a focal point to attract visitors and gain more traction through the rest of the web application. This would also give those browsing for leisure a stronger reason to engage with content.

Part 2: Data Visualization

In Part 2, I explain the project's theme and my visual design choices. I also do a deep-dive to explain how data is visualized in the Map. Head over to Part 2.