Role

Lead designer

Project Info

Capstone project

Team of 5

Duration

January - June 2024

(6 months)

Tools Used

Figma

Miro

TL:DR

Creating an internal recruiting tool to help NOAA diversify its workforce

My capstone team from the University of Washington’s Information School partnered with the National Oceanic and Atmospheric Administration (NOAA) to develop a recruitment tool aimed at reaching underrepresented students at community colleges, trade schools, and universities. Building on a previous project, our solution enhanced filtering options, UI, and integrated DEI resources.

Over six months, we conducted market research, user research, and iterative testing with NOAA staff to ensure the tool met their needs. I led design efforts, including creating the design system and facilitating all design discussions during weekly partner meetings. The tool is live, actively used by 6 NOAA staff members, and contributes to building a more diverse federal workforce.

PROBLEM

In 2023, 60% of the federal workforce identified as white

The National Oceanic & Atmospheric Administration (NOAA) is a federal agency focused on climate, weather, ocean, and coastal predictions, and conserving and managing coastal and marine ecosystems and resources.

As part of its commitment to diversity, NOAA must comply with Executive Order 13985, which addresses the lack of diversity in the federal workforce. With 1/3 of the federal workforce eligible to retire by the end of 2024, there's an urgent need to recruit a younger and more diverse workforce.

NOAA's Diversity and Inclusion Strategic Plan (2020-2024) outlines its commitment to diversity as a core value, ensuring equal opportunities for employment, career advancement, and access to resources. However, due to a lack of dedicated recruiters, NOAA staff struggle to connect with underrepresented students efficiently. Instead, the staff handles recruiting projects alongside other tasks, limiting the time available for focused recruitment efforts.

This challenge affects over 15 NOAA offices across Washington and California, emphasizing the need for tools to help meet diversity benchmarks.

PROJECT CONTEXT

Who are we?

We formed Team Citrus, a group of 5 seniors from the University of Washington’s Information School (iSchool), completing our capstone requirement. Our team consisted of 1 product manager, 2 designers, and 2 developers.

Our NOAA partner, Dan Tonnes, tasked us with utilizing pre-collected public school data from WA and CA to create a recruitment tool to support targeted recruitment at community colleges, trade schools, and universities, focusing on individuals from underrepresented groups.

PROBLEM STATEMENT

What question are we trying to answer?

How might NOAA staff conducting recruiting efforts achieve a more diverse workforce to better represent the communities they serve and advance NOAA's mission?

ORIGINAL SOLUTION

The previous internal recruiting tool

A previous capstone team created a recruiting tool for NOAA using R Shinyapps. This tool provided password-protected access to Washington college demographic data and a map of university locations. However, it lacked a user-friendly UI, scalability, a variety of school data, advanced filtering options, and school metadata on the map.

Our goal was to draw from this existing tool to create a new tool with a bigger dataset and better usability.

RESEARCH

Understanding the problem space

We conducted three types of research:

Our goal was to validate the problem and draw inspiration from existing tools on the market. Here are our key insights:

Diversity drives innovation, reduces attrition, enhances productivity, and attracts talent by fostering inclusivity.
One NOAA staff member claims, “I am the only woman of color in a lab of 40 federal staff.”
NOAA recruits from the same big universities and would benefit from branching out to smaller universities, community colleges, and trade schools.
Existing tools often include visually appealing landing pages to highlight their value and key offerings.
Data tools should prioritize clear, well-formatted information to enhance user understanding.

AFFINITY MAP

Organizing research insight to identify key themes

We created an affinity map to organize and synthesize research insights, grouping them into themes.

FEATURE PRIORITIZATION

What is a must-have feature?

We brainstormed features based on research and the previous tool, organizing them in a 2x2 grid to assess impact and feasibility.

Features were then ranked as Must-Have, Should-Have, and Nice-to-Have. All P0 and P1 features were included in the final design, while some P2 features were deferred due to time constraints and technical limitations.

USER PERSONA

Meet our persona, Elena Martinez

We created a persona to represent our core audience:

JOURNEY MAP

Establishing a minimal flow through the eyes of Elena Martinez

Before designing, I outlined the core workflow to visualize ideal scenarios and reduce friction—focusing on minimal pages and clicks required to complete user goals. The journey map shows how Elena navigates the tool, from the landing page to using the data and map tool to recruit diverse candidates.

LOW-FIDELITY

Laying the foundation for the internal tool in an hour

In the low-fidelity wireframing stage, I translated the user journey and features into a skeletal framework in Figma to validate the tool's structure and functionality.

MEDIUM-FIDELITY

Refining low-fidelity wireframes

We spent two weeks creating medium-fidelity designs to validate our concept. While the visual design wasn’t finalized—particularly on the data and map tools—we made progress toward high-fidelity by establishing a design system.

USER FEEDBACK

Getting feedback directly from NOAA staff

Our design process was highly iterative, incorporating continuous feedback to refine the tool. I led design feedback sessions during weekly partner meetings and user validation sessions with 5 NOAA staff members using medium-fidelity designs. Toward the end, we conducted final user testing with the same staff members to make adjustments and ensure the design met their needs.

Here are some of the positive sentiments we received:

Here are some opportunity areas that we addressed:

    
    User Insight Table
    
                User Insight
                Change
            
                “Where did this data come from?”
                Displayed an illustration and message on the landing page indicating that the tool uses publicly available data on WA and CA schools.
            
                Users felt that the NOAA logo alone could make the tool appear as an official government website.
                Created a NOAA-UW logo to signify this was a collaboration and added call-outs on the landing page.
            
                “How is this going to live beyond your efforts?”
                Detailed the hand-off process on the landing page.
            
                “I don't know what the filter acronyms stand for”
                Added information icons, providing explanations for filter acronyms.
            
                “I wish there was an added filter to explore this demographic…”
                Added new filters. Ex. Tribal Colleges and Universities (TCU), Hispanic-Serving Institution (HSI).
            
                Users had difficulty distinguishing between NOAA offices and schools on the Map tool.
                Updated the map from school and office icons to simple blue and green pins with a key for clarity.
            
                Users were confused by the two CTA buttons on the landing page, as they performed the same function but had different wording.
                Standardized "Explore Tool" language on landing page CTA buttons.
            
                “Be more explicit on the project’s mission”
                Added a section on the landing page explaining the mission, purpose, and hand-off.
            
                “If I find a demographic to target, how can I connect with that institution?”
                Clicking a school pin on the map opens a pop-up displaying the school's name, address, email, and phone number for outreach.

Here’s just a glimpse of the feedback we received. We implemented over 16+ points of feedback in our final design, leading to a significant increase in user satisfaction from validation to final testing.

SOLUTION

Bringing in a more diverse generation to NOAA’s workforce

DESIGN SYSTEM

Driving the creation of the Citrus design system

I created a design system to ensure consistency and make elements easy to reference as I was working with other designers and developers. The design system consisted of:

Foundations: color, typography, and grid system
Components: filters, inputs, overlays, navigation, slideshows, and cards
Assets: logos, data visualizations, illustrations, imagery

I incorporated aqua and dark blue as the primary and secondary colors, drawing inspiration from NOAA’s branding. Additionally, I requested photos from previous intern cohorts to highlight the variety of programs NOAA offers.

HAND-OFF DOCUMENT

Passing the torch to our NOAA partner

The project was completed in Spring 2024, and Dan has taken over the GitHub repository, Figma prototype, and design system, collaborating with NOAA’s IT team for future maintenance and development.

To ensure a smooth transition, we provided comprehensive handoff documentation covering the project’s purpose, relevant research, design and UX direction, and code. This documentation was made for an audience with limited technical knowledge so it can be widely referenced.

NEXT STEPS

Building on our capstone success

With a successful hand-off to NOAA’s IT team and the class complete, our work for NOAA officially concluded. However, there’s always more to be done:

Strengthen NOAA-school relationships:
- Explore ways to connect NOAA with school career services beyond email and phone numbers to enhance outreach efforts with underrepresented target schools.
Future development opportunities:
- Important future developments include collecting data from additional states and implementing search functionality within the map tool for increased usability.

REFLECTION

One final goodbye to the University of Washington

This capstone project was my final requirement for graduating. I’m grateful to have worked with such a talented and dedicated team, and I’m proud that we were finalists for the Social Justice Award out of 175 Capstone groups. Dan was also incredibly satisfied with our work and communication throughout the two quarters. Here’s what I learned:

Leverage strengths
- Our team effectively leveraged each other’s strengths, stayed realistic about our limitations, and supported one another to meet every deadline.
Prioritize clear communication
- Before our weekly meetings with Dan, we sent detailed agendas ahead of time and came prepared to present our completed action items. This clear communication fostered a strong partner relationship and streamlined our workflow.
Create with empathy
- Hearing from a NOAA employee that she was the only woman of color in her lab of 40 federal staff reminded me of the importance of this project and its potential to drive meaningful change.