Overview
This project was a self-directed learning exercise to practice designing a government website using the U.S. Web Design System (USWDS). By creating a speculative agency (Department of Emerging Realities), I explored how to apply federal design standards, accessibility requirements, and content hierarchy conventions in a realistic setting.
Problem Statement
How can I build an authentic, compliant, and user-centered federal website using USWDS components and best practices, while developing fluency in Section 508 accessibility, federal UX tone, and scalable design patterns?
Research & Analysis
I audited real federal sites (e.g., FEMA, CISA, NNSA) to analyze navigation structures, content density, and UI patterns. I studied the USWDS documentation to understand component use, breakpoints, and default design tokens (colors, spacing, typography). I reviewed Section 508 guidelines to ensure color contrast, focus indicators, and keyboard navigation were addressed. A key insight: federal sites balance simplicity and authority, using modular systems that prioritize clarity over novelty.
Design Goals
Apply USWDS components correctly to build a modular, accessible, and responsive page layout.
Maintain Section 508 compliance with sufficient color contrast, alt text, and screen-reader-friendly structure.
Design Process
I scaffolded the page using USWDS grid and typography, incorporating system buttons, and timeline patterns to simulate real agency content. I validated color contrast ratios for elements. I structured headings hierarchically for screen readers and ensured actionable elements had clear focus states. I tested responsiveness across viewport sizes, adhering to USWDS mobile-first conventions.
Throughout, I intentionally limited “sci-fi” visual treatments to non-functional decor (hero image, copy) to avoid undermining cognitive accessibility or user trust.
Impact & Reflection
This project gave me hands-on experience applying USWDS principles in a real-world scale scenario. I gained deeper fluency in:
Adapting components without “breaking” the design system
Thinking through compliance not as a checklist, but as an embedded design principle
By working through constraints similar to actual federal projects, I developed a better appreciation for where customization is possible and where consistency and standardization protect usability.