Hero Collage
Digit7 Logo

Simplifying
Federal
Compliance UX

ROLE:
Senior UI/UX Designer
DELIVERABLE:
District nutrition directors, state agency
reviewers, school admins
INDUSTRY:
EdTech / School Nutrition / GovTech SaaS
Methodology:
Atomic Design, Design Systems, User Research, WCAG 2.1 AA

Turning a federally regulated, data-heavy compliance workflow into a clear, confident, and humane daily tool.

Project Overview

PrimeroEdge (by Cybersoft Technologies) is the leading school nutrition software across the United States, relied upon by thousands of K-12 school districts and state agencies to manage everything from point-of-sale to menu planning. Within this massive ecosystem sits the Eligibility module—arguably the most critical piece of the platform.

The Eligibility module handles Free & Reduced Price meal applications, Direct Certification (matching students to government assistance programs like SNAP, TANF, FDPIR, Migrant, Homeless), Income Surveys, Verification & Sampling, and audit-readiness for federal compliance. It dictates whether millions of low-income students receive daily meals, and it manages the compliance data that secures federal reimbursements for school districts.

As the Lead UI/UX Designer, I owned the end-to-end redesign of this module, transitioning it from a disjointed legacy interface into EDGE 2.0—a modern, unified, and highly accessible SaaS experience built on a strict Atomic Design system.

Laptop showing website
60%
Reduction in
Application Entry
Time
Faster Direct
Certification
Review
WCAG 2.1
AA
Accessibility
Achieved
1
Unified Design
System Across 6
Modules

Eligibility sits inside a 6-module enterprise suite — designed as one cohesive product, not six disconnected tools.

Context & Business Background

The users of this module operate in a high-stress, federally regulated environment. They include K-12 school district nutrition teams, state child nutrition agencies, and USDA reviewers.

The stakes are deeply human: meals for millions of low-income students depend on the speed and accuracy of these eligibility decisions. A delayed or incorrectly processed application literally means a hungry student. From a business perspective, PrimeroEdge's goals were strict federal compliance, dramatically faster processing times, better Direct Certification match rates (getting students benefits automatically without paper applications), and reducing audit findings.

Target Audience Personas

Mary - District Nutrition Director
District Nutrition Director

Mary, 48

Owns eligibility for 30+ schools. Juggles thousands of applications, strict USDA audits, and frantic family communications.

Carlos - State Agency Reviewer
State Agency Reviewer

Carlos, 41

Audits district compliance. Needs fast, remote access to unalterable evidence and historical timelines

Linda - School Office Admin
School Office Admin

Linda, 55

Non-technical user. Enters stacks of paper applications during enrollment week; gets stuck on federal jargon.

The Problem

The legacy Eligibility module worked — but it punished the people who depended on it most. Federally compliant ≠ humanly usable.

The core issues with the legacy system centered around cognitive friction and data entry speed:

Cognitive Overload

Cognitive
overload:

Dense screens presented hundreds of fields per workflow with no progressive disclosure.

Inconsistent Patterns

Inconsistent
patterns:

6 different modules built over a decade looked and behaved like completely different software.

Slow Data Entry

Slow data
entry:

Paper-to-digital application entry was brutally slow, taking 8–10 minutes per student.

Compliance Fragility

Compliance
fragility:

Status changes, audit trails, and Direct Certification re-runs were buried deep in the UI, leading to costly errors during state reviews.

Hypothesis: By unifying the interface under a strict Atomic Design system, replacing dense forms with guided wizards, and elevating status visibility, we could drastically reduce processing time while passively ensuring USDA compliance.

Discovery & Research Approach

Our research methodologies included stakeholder interviews (12 district directors, 4 state agency reviewers), contextual inquiry (shadowing a nutrition team during the chaotic enrollment week), a heuristic teardown of the legacy system, a deep-dive USDA federal policy review (forms 7CFR 245), competitive analysis (Heartland, Meals Plus, Titan), and an accessibility baseline audit.

Design Strategy & Principles

Clarity over Density

Clarity over
Density

Reveal complexity progressively. Don't show federal documentation fields until the exact moment they are needed.

Status as a First-Class Citizen

Status as a First-
Class Citizen

Every record across the entire platform carries a clear, color-coded state that is universally understood.

One Action Per Step

One Action
Per Step

Replace intimidating mega-forms with guided wizards. Let users focus on one logical chunk of data at a time.

Compliance Without Friction

Compliance
Without Friction

Audit trails, timelines, and timestamps happen invisibly in the background, rendering the district audit-ready by default.

We didn't design screens. We designed confidence — for parents waiting on a meal decision, for directors closing the books, for auditors signing off in seconds.

Applications list on laptop

Applications list — designed around the daily ritual: scan, filter, act. Status colors became the team's shared vocabulary.

The Atomic Design System

Atomic Design System - Sub-atomic, Atoms, Molecules, Organisms, Templates, Pages

Hypothesis: By unifying the interface under a strict Atomic Design system, replacing dense forms with guided wizards, and elevating status visibility, we could drastically reduce processing time while passively ensuring USDA compliance.

Atomic Design served as our strategic backbone. Before we could design complex workflows, we had to standardize the foundational elements. Once the Atoms (buttons, inputs, icons, avatars) and Molecules (profile molecule, status pill, filter row) were locked and codified, our Organisms (application card, eligibility summary chart, student row) composed predictably and beautifully.

The Eligibility module was the first to fully ship on this new system. Because we established strict rules at the atomic level, the subsequent redesigns of the remaining five EDGE 2.0 modules followed rapidly and cohesively.

Key Workflows Designed

Design Language

Design
Language

Unified UI across 6 legacy modules.

70% Reusable Components

70% Reusable
Components

Drastically reduced design debt and inconsistencies.

40% Faster Delivery

40% Faster
Delivery

Engineering velocity increased due to strict component libraries.

Baked-in Accessibility

Baked-in
Accessibility

Contrast and focus states solved once at the atom layer.

Application Entry

(The Guided Wizard)

We replaced a scrolling 47-field mega-form with a vertical stepper. The right-hand panel provides contextual instructions. The illustrated empty state prompts a primary "Find a Student" CTA before the secondary "Add a Student"—a crucial logic choice because 80% of entries involve existing students. There are no destructive actions without strict confirmation. Outcome: ~60% reduction in entry time.

Application Entry — a vertical stepper replaces a 47-field mega-form.

Application Entry UI
The Applications Workspace UI

The Applications Workspace

As showcased in the Chapter 04 discovery phase, the Applications list is the daily workbench. We introduced tight tab segmentation (All / Notifications / Pending / Verification) and program-year filters (since eligibility is strictly year-bound). We utilized column-level filters, prominent color-coded status pills (Submitted, Processed, Notified, Pending, Deleted), and a specific "Tags" column designed directly with directors who demanded fast triage signals for "Error Prone" or "Active Benefits" applications.

Application Detail

(The Single Source of Truth)

The top strip immediately surfaces the federally required outcome (FREE / INCOME / valid period)—this is exactly what the auditor needs to see first. A timeline component visualizes the application's lifecycle (Received → Processed → Approved). An eligibility band chart contextualizes where the household sits on the federal poverty bracket. Optional demographic info is collapsed by default to respect privacy and reduce visual noise.

Application Detail — one page, three layers: decision, evidence, and demographic context.

Application Detail UI
Direct Certification Summary UI

Direct Certification Summary

This dashboard turns abstract federal data matching into a narrative. Hero metrics (Matched / Total / Match Rate) tell the story in three numbers. The Before/After donut visualization explicitly quantifies the reimbursement impact ("Economically Disadvantaged Change: 8% → 22%")—a powerful metric directors take straight to their school boards. Below the fold, per-student notify controls and historical document trails ensure unshakeable compliance.

Direct Certification Summary — turning federal data matching into a confident, narrative dashboard.

The Eligibility Dashboard

KPI cards sit at the very top, followed by summary donuts and a 12-month bar chart highlighting seasonality (eligibility workloads spike violently in August/September). A recent activity feed in the bottom-right maintains a pulse on what the extended team is doing in real-time.

Eligibility Dashboard — answering the critical 9:00 AM question: "Where do we stand?"

The Eligibility Dashboard UI

UX Decisions That Mattered

Color-Coded Status Pills

Created a shared visual vocabulary across the team, reducing verbal miscommunications about application states.

Color-Coded Status Pills
The Wizard Pattern

The Wizard Pattern

Replacing the mega-form eliminated "partial save anxiety" and prevented fatal omissions in high-stakes data entry.

Persistent Help Footer

A sticky "Need Help? Check our documentation" anchor because compliance officers constantly reference federal USDA rules.

Persistent Help Footer
Triage Tagging

Triage Tagging

A dedicated tag column ("Error Prone", "Active Benefits") allowed for instant visual sorting on the massive Applications list.

Before/After Donut

Translated dense Direct Certification matching into a clear, board-ready story about increased federal funding.

Before/After Donut
Unified Module Switcher

Unified Module Switcher

Visual continuity in navigating between Eligibility, Production, and Inventory drastically reduced cross-training time.

Accessibility & Inclusion

Accessibility & Inclusion

Achieving WCAG 2.1 AA was a non-negotiable requirement. We enforced a strict 4.5:1 contrast ratio on all body text and built comprehensive keyboard-only flows for rapid application entry. Focus rings were designed and hardcoded into the atom layer so they couldn't be accidentally overridden by developers. Screen reader labels were meticulously applied to all status pills and charts.

Why it matters: The user paying the bill is a school district—but the people whose lives depend on this software are children and parents who often don't speak English as a first language. Ensuring language customization for parent-facing applications and guaranteeing screen reader compatibility wasn't just a technical checkbox; it was an ethical imperative.

Impact (Outcomes & Engagement)

60% ↓
Application
Entry Time
Faster DC
Reviews
+22%
DC Match
Rate
1
System Across
6 Modules
WCAG 2.1
AA Achieved
Zero
Audit Findings
(Pilots)

The engagement story mapped perfectly to our funnel logic: better dashboard awareness led to faster triage on the Applications list. This cleaner, more organized Application Detail page drove higher confidence during Direct Certification re-runs, ultimately culminating in cleaner, zero-finding state audits.

Post-launch analytics and user feedback were overwhelming. Nutrition directors were logging in earlier and spending less overall time in the system. Support tickets related to federal compliance jargon plummeted.

Most importantly, state agency reviewers noted that the clarity of the timeline and audit trails allowed them to significantly reduce their on-site audit days. On the household side, parent-facing application abandonment fell drastically thanks to the clear wizard approach and multilingual support.

Reflection

This project cemented a core belief: GovTech UX is real UX, and perhaps the most consequential UX we can work on. Federal regulation is frequently viewed as an obstacle to good design, but treating it as a hard constraint actually produces incredible clarity if you let it.

The Atomic Design system was the true multiplier here. By solving the complex interaction problems at the molecular level, we didn't just fix the Eligibility module—we laid the scalable foundation that modernized PrimeroEdge's entire multi-million dollar software suite.