Office of Local Defense Community Cooperation

Redesigning a critical government platform to enhance accessibility, streamline community engagement, and improve information discoverability for defense-related local initiatives.

Role

UX Design

UX Research

Rebranding

Client

OLDCC

Programs

Miro

Figma

Confluence

Time

6+ Months

User Journey Map

Understanding the Grant Application Process

Mapping the user's experience from discovery to submission to identify key
opportunities for improvement.

User Journey Map - Grant Application Process
01

Discovering Opportunities

User Goal

Determine if OLDCC is relevant for their organization.

User Actions

Browse OLDCC site, review programs, and scan eligibility criteria.

Emotions

Curious, unsure.

Pain Points

Unclear eligibility, industry jargon, and difficulty assessing fit.

Website Opportunities

Clearly define who we fund/don't fund, provide concise program overviews.

02

Researching Grants

User Goal

Confirm eligibility and project fit.

User Actions

Read eligibility details, review case studies, and look for contacts.

Emotions

Cautiously optimistic.

Pain Points

Complex requirements, dense information, and few examples.

Website Opportunities

Use plain-English eligibility, showcase case studies, and provide clear contacts.

03

Applying for Grant

User Goal

Submit a complete and accurate application.

User Actions

Register for EADS, gather materials, and complete application forms.

Emotions

Anxious, high-stakes.

Pain Points

EADS friction, fear of mistakes, and unclear next steps.

Website Opportunities

Offer a step-by-step guide, EADS training, and accessible support contacts.

Success Indicators

Key milestones across each stage of the grant journey

Stage 1 Success

Continues exploring the website.

Stage 2 Success

Decides to apply for a grant.

Stage 3 Success

Application successfully submitted.

User Personas

User Personas

Understanding our diverse stakeholders in the OLDCC grants ecosystem for better accessibility and information discovery

Grant Applicant

Individual or organization seeking funding for community development projects

Primary Goal

Secure funding quickly with clear application guidance

Tech Proficiency

Moderate — Comfortable with online forms and documentation

Time Constraint

High urgency — Needs fast information access and submission

Accessibility Needs

Screen reader support, keyboard navigation, high contrast

Grant Reviewer

Committee member evaluating applications and making funding decisions

Primary Goal

Efficiently review multiple applications with clear criteria

Tech Proficiency

High — Experienced with evaluation platforms and databases

Time Constraint

Moderate — Balances review quality with deadline pressures

Accessibility Needs

Sortable tables, filter options, printable summaries

Community Member

Local resident interested in understanding grant impact and opportunities

Primary Goal

Learn about funded projects and available opportunities

Tech Proficiency

Low to Moderate — Basic browsing and reading skills

Time Constraint

Low urgency — Casual browsing and information gathering

Accessibility Needs

Large text, simple language, mobile-friendly design

Key Insight

Our user research reveals that 78% of grant applicants prioritize rapid information discovery and simple navigation over complex features. By designing with accessibility-first principles, we reduce cognitive load and enable users of all technical abilities to confidently engage with the OLDCC grants platform.

78%
Prefer Simple Navigation
92%
Use Mobile Devices
65%
Need Accessibility Features
UX Research Presentation - OLDCC Program Analysis

Finding Information about the Program

Users struggle to locate essential program details, eligibility criteria, and application processes.

Internal Users

Want easier access to information about projects (What are they? How do they get funded?)

Search process is difficult to use and hard to find information

Most users have some familiarity with OLDCC but limited details about what OLDCC does

External Users

Searching for requirements and process for applying eligibility

Small businesses interested in partnerships need clearer pathways

Need to ensure communities can access additional resources (FEMA, CISA, DHS)

Federal agencies want to learn more about programs and how to leverage them

Opportunity to connect with other DOD programs that OLDCC works with

Solutions

Homepage Visual Program Overview

Create small visuals with brief descriptions of each program, with expandable sections for more information

"Do You Qualify?" Section

Add prominent qualification button to homepage with clear eligibility criteria

Step-by-Step Application Process

Include clear instructions with a "More details" button for expanded information

Enhanced Mission Statement

Update mission statement to provide detailed information about the organization and its activities

Improved Readability

Add more white space to pages and reduce texture use for better content consumption

Eligibility Requirements List

Include detailed criteria distinguishing qualified from unqualified applicants

Lack of Interactivity and Storytelling

The website lacks engaging visuals, animations, and compelling narratives to communicate program impact.

Internal & External Users

Information about projects is difficult to find

Website is not engaging and could benefit from animations and graphics

Images and photos are old/not relevant and should be updated

Project locations are difficult to find

Solutions

Infographics for Storytelling

Use infographics to display relevant information and serve as powerful storytelling tools

OLDCC History Timeline

Create a "Our Journey" timeline on homepage or dedicated page showcasing organizational history

Homepage Banner Announcements

Continue using homepage banner to highlight timely announcements and updates

Project Catalog Experience

Create an engaging experience that properly catalogs community projects with visual elements

Reduce Text-Heavy Pages

Move away from text-heavy pages and use more imagery and infographics across the site

High-Quality Project Photography

Showcase higher-quality photography from actual projects to demonstrate impact

Restore Project Pages

Bring back Project Pages as most "clicks from search" originate from them

Case Studies & Data Pages

Create community-focused case studies with impact metrics (people helped, schools built, etc.)

30-Second Explainer Video

Add informational video on homepage explaining site content and navigation

No Clear Scenarios

Community planners lack understanding of OLDCC's role and the application process needs better scenario-based guidance.

Internal & External Users

Community planners don't know who OLDCC is or what they do

Want an easy to read, or a short excerpt for when they send link

Confusion exists between qualified and unqualified end users

Solutions

Under-Over Application Instructions

Develop clear documentation for eligibility and application process for every program

Uniform Page Heading

Design uniform page heading style for consistency — Hypothesis: this might help to apply branding and recognition

Flexibility Claims Set

Provide flexibility for submitting final details for eligibility to address non-conforming applicants

Individual Design Principles

Make each program page visually distinct while maintaining a cohesive brand, ensuring ease of navigation and user context

OLDCC Design System
Source Sans Pro Brand Typeface
#1B3A5C Primary Navy
#8C1A2A Accent Red
11 Components
Tokens
Components
Design Tokens
Color Palette
All colors derived from the OLDCC website. The primary navy scale drives headings, navigation, and interactive elements. Accent red is used exclusively for high-visibility CTAs.
Primary Navy Scale
900
800
700
600
500
400
300
200
100
50
Accent Red Scale
900
800
700
600
500
400
300
Semantic & UI Colors
Success
#2D8654
Eligibility checks, confirmations
Info
#1D6FAE
Program updates, notices
Warning
#B45309
Deadline notices, cautions
Error
#B91C1C
Validation errors, alerts
Footer BG
#1C2B3C
Site footer
Page BG
#F9FAFB
Page background
Neutrals
900
800
700
600
500
400
300
200
100
50
Design Tokens
Typography
Source Sans Pro is the sole typeface. Bold 700 for display headings, SemiBold 600 for UI labels and sub-headings, Regular 400 for all body copy.
Display / H1
60px · 700
Community Noise Mitigation Program
H2 / Page Title
36px · 700
Our Programs
H3 / Section
30px · 700
Second Competition
H4 / Sub-section
24px · 600
Eligibility and Requirements
Body Large
18px · 400
The Community Noise Mitigation Program is a competitive grant program designed to assist state, local governments and tribal entities impacted by military fixed-wing aviation noise.
Body Default
16px · 400
The program is authorized under the Consolidated Appropriations Act, 2022 and allows for noise mitigating insulation at covered facilities, including the installation of air conditioning.
Body Small
14px · 400
A $1,005,541 federal grant to the Wisconsin Department of Military Affairs to install noise mitigating insulation in 8 private residences.
Label / Eyebrow
12px · 700 · Uppercase
OUR PROGRAMS · ON THIS PAGE · INSTALLATION READINESS
Design Tokens
Spacing & Radii
4px base unit. All spacing tokens are multiples of 4. Border radii are intentionally modest — this is a government site, not a consumer app.
Spacing Scale
space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-6 · 24px
space-8 · 32px
space-12 · 48px
space-16 · 64px
space-20 · 80px
space-24 · 96px
Border Radius
none
0px
sm
4px
md
6px · Inputs, btns
lg
8px · Alerts
card
12px · Cards
pill
9999px · Badges
Shadows
Card shadow
0 4px 12px rgba(0,0,0,0.06)
Modal shadow
0 10px 24px rgba(0,0,0,0.12)
Components
Buttons
All buttons use Source Sans Pro SemiBold 600 with a 6px radius. Primary navy is the default action. Red CTA is reserved for high-visibility grant/award links only.
Button · Variants
primary-navy · primary-blue · cta-red · outline · ghost · disabled
Button · On Dark Background
Use inside hero sections or navy banners
Button · Sizes
sm · default · lg
Components
Badges & Status Pills
Pill-shaped status indicators used in tables, cards, and grant listings to communicate status at a glance.
Active Awarded Closed Pending Draft Inactive
Badge · Variants
blue · green · red · yellow · navy · gray
Components
Alerts & Banners
Left-bordered alert boxes for system messages and program updates. The OLDCC Program Update box is a distinct variant used on program pages.
Program Updates
September 19, 2025 – All awards have been made for the Community Noise Mitigation Program. Please see below for more details.
Grant Awarded
Your application has been submitted successfully. You will receive a confirmation email within 3 business days.
Application Deadline Approaching
The deadline for the Second Competition is October 15, 2025. Incomplete applications will not be considered.
Submission Error
There was a problem with your submission. Please review all required fields and try again.
Alert · System Alerts
info · success · warning · error
Program Updates
September 19, 2025 – All awards have been made for the Community Noise Mitigation Program, please see below for more details
Alert · OLDCC-Specific Patterns
program-update-box · sign-up-banner
Components
Navigation
The global nav sits on a white background with a subtle bottom shadow. Page-level sidebar navigation uses a minimal list style with an active highlight.
Global Navigation Bar
White background · Gov banner · Logo + links + search
OUR PROGRAMS
Community Noise Mitigation Program
A competitive grant program designed to assist state, local governments and tribal entities impacted by military fixed-wing aviation noise.
Page Hero Banner
Navy background · Eyebrow + H1 + body · Used on all program pages
On-Page Sidebar Navigation
Sticky left nav · Active link bold · No border/bg on items
Components
Cards
Four card types covering programs, leadership profiles, document/report covers, and contact information.
✈️
Community Noise Mitigation Program
A competitive grant program to assist state, local governments and tribal entities impacted by military fixed-wing aviation noise.
🏗️
Defense Community Infrastructure Program
Designed to address deficiencies in community infrastructure that supports a military installation's readiness and lethality.
🏭
Defense Manufacturing Community Support
Supports long-term community investments that strengthen national security innovation and expand defense manufacturing capabilities.
Program Feature Card
White · 12px radius · Circular icon · Used in 3-column grid on programs page
👤
Patrick O'Brien
Director
👤
Doug Brown
Deputy Director for Operations
👤
Liz Chimienti
Deputy Director for Community Adjustment
Leadership Card
Photo area + name + role · Used in Leadership grid
Defense SpendingBY STATEFiscal Year 2024
Defense Spending by State FY2024
Defense SpendingBY STATEFiscal Year 2023
Defense Spending by State FY2023
Defense SpendingBY STATEFiscal Year 2022
Defense Spending by State FY2022
Scott Spencer
📞
(703) 697-2133
✉️
scott.j.spencer.civ@mail.mil
Report Card & Contact Card
report-card · contact-card (navy bg)
Components
Tables & Lists
The projects table uses a clean borderless style with row hover and uppercase column headers. The eligibility checklist uses green checkmark icons.
State Installation Program Area Federal Grant Award
AKJoint Base Elmendorf RichardsonDefense Community Infrastructure Program$14,000,000.00Details
WITruax Field Air National Guard BaseCommunity Noise Mitigation Program$1,005,541.00Details
WANaval Base KitsapDefense Community Infrastructure Program$20,000,000.00Details
CTNaval Submarine Base New LondonDefense Community Infrastructure Program$5,784,330.00Details
Projects Table
Search + filter bar · Borderless rows · Hover state · Pagination
  • Located within one (1) mile of a military installation or another location at which military aircraft are stationed or within a day-night average sound level of 65 decibels or greater.
  • Located in an area impacted by military aviation noise within one (1) mile of a military installation or another location at which military aircraft are stationed or within a day-night average sound level of 65 decibels or greater.
Eligibility Checklist
Green circular checkmark icon · Used on Eligibility and Requirements section
Components
Form Controls
48px input height, 6px radius, Source Sans Pro Regular 16px, gray-400 placeholder, gray-300 border. Focus border turns navy-400 at 2px.
Use your official government email address.
⚠ This field is required.
✓ Installation verified.
Form Controls
text · select · disabled · email · error · success · action buttons
Next
Next

PHX