Web UI/UX
FSI Public Website
U.S. Department of State
Works / Federal
Web UI/UX · Accessibility
Foreign Service Institute
U.S. Department of State — diplomatic training programs
Twenty-four separate web applications, built by different teams over different years, used by diplomats in posts around the world — and every one of them had to pass federal accessibility review before it was allowed to ship.
24
Web Applications Redesigned20%
Lift in Engagement100%
Section 508 Conformance9 yrs
Supporting the Program
01
The Challenge
A training institute running on twenty-four different interfaces.
The Foreign Service Institute is where the United States trains its diplomats. Its staff and students moved daily between two dozen separate web applications — course catalogs, registration systems, program portals, reporting tools — each commissioned at a different time, by a different contractor, with its own navigation, its own layout logic, and its own idea of where the important thing lived.
The cost wasn't cosmetic. Someone at a post abroad, on whatever device and connection they had, was relearning the interface every time they switched tools. And because this is federal, none of it could ship without passing Section 508 review — a hard gate, not a recommendation. A design that failed the audit didn't get revised later. It didn't launch.
02
The Strategy
Treat twenty-four projects as one system.
The obvious approach was to redesign twenty-four applications. The right approach was to design one interface language and apply it twenty-four times.
I argued for a shared pattern library first — navigation, forms, tables, states, typography, color — so that consistency was structural rather than something to police application by application. That reframing is what made the scope survivable on a federal timeline, and it meant a diplomat who learned one FSI tool had effectively learned all of them.
03
The Process
Audit before design. Always.
I started by inventorying all twenty-four applications: what each one did, who used it, where the patterns already overlapped, and where they contradicted each other. That audit produced the component set — and, just as usefully, a list of things that could simply be deleted.
From there: pattern library, then wireframes, then interface design, then accessibility validation against Section 508 and WCAG AA, then staged rollout. Proposal and capture graphics ran alongside on federal acquisition deadlines that did not move.
04
UX Decisions
Four choices that shaped the work.
Accessibility decided at wireframe, not QA
Contrast ratios, focus order, form labeling, and heading structure were settled while the layout was still gray boxes.
Because retrofitting 508 compliance costs more than designing to itOne navigation model across every application
The same structure, in the same place, with the same labels — whichever of the twenty-four tools you happened to open.
Because switching cost was the actual complaintContent hierarchy built for scanning
Dense federal content restructured so the task a user came to do is the first thing on the page, not the fourth.
Because nobody reads a training portal for pleasureResponsive as a baseline, not an enhancement
Layouts that hold up on whatever screen is available at a post abroad, including narrow ones on poor connections.
Because you cannot dictate the device to a diplomat overseas
05
Tools & Technology
What the work was built with.
Design
- Photoshop
- Illustrator
- InDesign
- Wireframing
- Pattern Library
Build
- HTML5
- CSS3
- Responsive Layout
- Front-End Specs
Standards
- Section 508
- WCAG 2.0 AA
- Federal Review
- Accessibility Audit
06
The Outcome
Twenty-four applications, one system, full compliance.
The redesign shipped across all twenty-four applications with full Section 508 conformance and a 20% lift in engagement. Every web and document deliverable met WCAG standards.
More durably: FSI came away with a component system its future contractors could build against, instead of a twenty-fifth interface.
07
Why It Matters
Accessibility is usually sold as a legal obligation. Twenty-four applications proved the opposite case — that designing for the person with the screen reader forces the clarity that helps everyone else too. The constraint made the work better, not smaller.
Start a Project
Have something like this to build?
The first conversation is free and takes twenty minutes. If it isn't a fit, I'll tell you.