Studio  /  Work Concept · 2026

Concept redesign · Federal · UI/UX

VA.gov — A Task-Oriented Veteran Experience

A self-initiated redesign of VA.gov — the primary digital gateway to Department of Veterans Affairs benefits, health care, and services. Rebuilt from a directory organized around the agency into a path organized around what a Veteran came to accomplish, designed to Section 508 / WCAG 2.1 AA from the first screen.

Organization-first navigation Task-first · AA target
Agency / System
U.S. Department of Veterans Affairs — VA.gov
Role
UX research · IA · UI redesign · accessibility
Tools & Standards
Section 508 · WCAG 2.1 AA · responsive design system · Figma
Type
Self-initiated concept

Self-initiated concept. Not affiliated with, commissioned by, or endorsed by the U.S. Department of Veterans Affairs. Created to demonstrate accessible design capability for federal digital services. All content shown in the mockups is illustrative.

The redesigned VA.gov homepage open on a laptop: a deep blue hero reading “Your VA benefits, care & services,” one centred search field, a row of popular task links, and a grid of six benefit cards below — health care, disability, education and training, careers and employment, pension, and housing and home loans.
Fig. 01 — Redesigned VA.gov homepage · one search field, four named tasks

01 / The challenge

A service organized around VA — rather than around what people came to accomplish.

VA.gov is the front door to the full VA ecosystem. Veterans, service members, family members, caregivers, and survivors use it to access health care, apply for disability compensation, manage prescriptions and appointments, explore education and housing benefits, and track claims.

Unlike a typical information website, it has to serve two fundamentally different needs from the same entry point: helping people discover what they may be eligible for, and helping returning users complete a familiar task as quickly as possible. The legacy homepage gave both journeys the same information architecture, and placed much of the burden of navigation on the person arriving.

AreaWhat we observedImpact on Veterans
Organization-first navigationBenefits are presented according to VA's own service categories rather than the goal that brought someone to the site.You have to know how VA is structured before you can find your task.
Competing user intentsA returning Veteran checking a claim and a first-time visitor who doesn't yet know which benefits apply enter through the same architecture.Neither journey is served well by the compromise.
High choice densityBenefit categories and secondary resources appear at similar visual weight, across separate homepage sections.More to scan before a relevant path becomes obvious.
Value introduced too lateAccount creation is promoted before a person has established why signing in would help with the task in front of them.A prompt to commit before there's a reason to.
Accessibility at federal scaleThe experience has to stay clear and operable across assistive technologies, keyboard-only navigation, and a wide range of digital literacy.Any hierarchy failure is an access failure at population scale.

Observations describe the legacy homepage pattern shown in Fig. 02. No counts are asserted beyond what the figures on this page show.

The shift

Before & after.

The same entry point, in the same frame: drag the handle to wipe between the redesigned homepage on the left and the legacy one on the right. The redesign trades a welcome message, an account prompt, a search utility, and two separate link lists for one obvious primary action and a small number of clearly ranked destinations.

Before: the legacy VA.gov homepage. A welcome message reading “Let us help you get started” with an introductory paragraph and a “Get started with VA” link, an account-creation card promoting Create account, and below the fold a separate Search section with its own field, an “Other search tools” list, and a “Top pages” list of links. Before · Legacy VA.gov
After: the redesigned VA.gov homepage. A deep blue page with the VA lockup and a five-item horizontal navigation, a large headline reading “Your VA benefits, care & services”, one centred search field with a Search button, a row of four popular task links — claim status, appointments, disability claim, refill Rx — and a grid of six benefit cards below. After · Redesign
Drag the handle or use arrow keys Fig. 02 — Redesigned entry point (left) vs. legacy VA.gov (right)

02 / Our approach

From organization-first to task-first.

We reframed the experience around a single question — what is the Veteran trying to accomplish right now? Instead of requiring people to understand how VA organizes its services, the redesign prioritizes high-frequency tasks and clear entry points while keeping the full benefits ecosystem reachable. The resulting architecture supports two journeys rather than forcing one.

“I know what I need.”

  1. 01Find it
  2. 02Complete the task

“I'm not sure what applies to me.”

  1. 01Explore
  2. 02Understand eligibility
  3. 03Take action

This shift informed the homepage, benefit navigation, service pages, and application entry points — so the same interaction logic carries from one stage to the next.

Design decision 01 — A clearer front door

From informational welcome to immediate task discovery.

The legacy homepage opened with a broad welcome message, an account prompt, search tools, top pages, and benefit categories distributed across separate sections — each competing for the same attention. We consolidated the starting experience around the actions Veterans are most likely to need, and made search a central interaction rather than a secondary utility. Claim status, appointments, disability claims, and prescription refills are now reachable from the first screen.

2 journeys → 1 screen
the returning Veteran and the first-time visitor now enter through one ranked hierarchy, not two competing ones
Task-oriented search
A route, not a utility

Search is positioned as a primary way into the VA ecosystem, so anyone who already knows what they need can bypass category navigation entirely.

High-frequency actions
Surfaced earlier

Common transactional journeys sit on the first screen instead of being reached through informational content.

Reduced decision load
One hierarchy, not five

Navigation, search, common actions, and benefits are brought into a single coherent order rather than competing across independent homepage sections.

Design exploration — Hero direction

Two heroes, one job.

Two treatments were carried in parallel for the entry screen — not a draft and its revision, but two complete directions built against the same job. Both use the same headline, the same single search field, and the same four named tasks; the only variable is what sits behind them. One is a flat navy field, the other a montage of Veterans over a flag. The flat direction became the primary, and the reasoning is worth showing, because a hero is the easiest place on a public service to trade access for atmosphere.

55% → 78%
of the visible entry screen spent on the hero before the first benefit category — the photographic direction takes 23 points more
Direction one: the redesigned VA.gov entry screen with a flat navy hero. The headline “Your VA benefits, care & services” sits above one centred search field and four popular task links, with the first row of benefit cards — health care, disability, education and training — already visible below.
AdoptedFig. 03a — Flat field · hero ends at 55% of the screen
Direction two: the same entry screen with a photographic hero. A black-and-white montage of five Veterans and a family member over a flag fills the space behind the headline, search field, and popular task links, pushing the benefit cards out of the visible area.
AlternateFig. 03b — Photographic · hero ends at 78% of the screen
Contrast
One background, one ratio

Against a flat field, the contrast behind the headline is a single measurable value. Over a photograph it changes with every pixel behind the type, so one measurement never describes the whole screen.

The cost of the scrim
Dark enough for the worst case

Holding an AA floor over the montage means a scrim heavy enough to protect the darkest-to-lightest transition anywhere the headline can land — which dims the photograph until much of what made it worth using is gone.

Kept, not discarded
Where the photograph earns it

The montage stays in the system as a campaign and landing treatment, where the hero is the message rather than the doorway to a task.

Percentages measured from Fig. 03a and 03b, against the same screen bounds in both mockups.

Design decision 02 — Two ways in, on any screen

Discovery for people who don't know the vocabulary yet.

Search only helps if you know what to search for. For the Veteran who doesn't yet know which benefits apply to them, the redesign offers a short eligibility path — three plain-language questions, answerable without signing in — that ends in a specific next step rather than a reading list. On a phone the layout re-ranks rather than compresses: the search stays primary, the benefit cards stack in priority order, and the eligibility path stays reachable with a thumb.

Two phone screens. The first shows the VA.gov homepage with the headline “Your VA benefits, care & services,” a search field, popular task links for claim status, appointments, and disability claim, and the first benefit card. The second shows an eligibility check headed “New here? Check what you may be eligible for — 3 quick questions, no sign-in required,” with a progress bar at step 1 of 3 asking whether the person served in the U.S. armed forces.
Fig. 04 — Mobile · task entry and the three-question eligibility path
Plain-language entry
No terminology required

The eligibility questions ask about service history in everyday words, so nobody has to learn VA's vocabulary before they can start.

No sign-in wall
Answers before accounts

The path runs without authentication, so the value of an account is demonstrated before it's requested.

Re-ranked, not compressed
Hierarchy survives the breakpoint

The mobile layout reorders by priority instead of shrinking a desktop grid, so the primary action stays primary at every width.

One consistent model
Same patterns, every screen

Navigation, search, and card behavior carry across breakpoints, so the interface doesn't have to be relearned on a phone.

Design decision 03 — Service pages as action pages

From information-heavy pages to clear next steps.

Service pages such as VA health care previously introduced people through long-form explanatory content before presenting the actions available to them. We strengthened the distinction between understanding a benefit and acting on one. Clearer page hierarchy, shorter content blocks, recognizable service categories, and prominent next steps let someone answer three questions quickly — and the same interaction logic continues from the homepage into each individual service.

The redesigned “Apply for VA health care” page. Three summary cards across the top state time to complete — about 35 minutes, cost — free to apply, and save your progress — 60 days to submit. Below, an “About this form” panel explains VA Form 10-10EZ beside a “Ready to apply?” panel offering “Sign in and start” and “Start without signing in”, with a link to check the status of an existing application.
Fig. 05 — Service page · commitment stated before the first field
Question 01
What is this?

A short, concrete description of the benefit and the form that carries it, ahead of any procedural detail.

Question 02
Does this apply to me?

An eligibility route sits beside the description, so the qualifying question is answered on the page rather than somewhere further in.

Question 03
What should I do next?

The action panel is a peer of the explanation, not a footer to it — including the path for someone who has already applied.

Design decision 04 — Before the first field

Reducing uncertainty ahead of a complex form.

Applying for a federal benefit can involve significant time, personal information, and uncertainty. Rather than dropping someone straight into a form, the application entry experience sets expectations first: how long it takes, what it costs, and how long progress is kept. That turns the entry page from a procedural gateway into a decision and preparation layer.

Clear commitment
Time, cost, and save behavior

About 35 minutes, free to apply, 60 days to come back — all visible before the application begins, as shown in Fig. 05.

Contextual sign-in
Authentication where it earns its place

Signing in is introduced at the moment its benefits become meaningful — saved progress and prefilled answers — rather than as a prerequisite to exploring the service.

Reduced abandonment risk
Know before you begin

Understanding what's needed and what to expect before committing to a long flow gives people a reason to start when they're ready, not when they're prompted.

03 / Why it's compliant

Accessibility as part of the interaction model, not a final pass.

The redesign was built toward Section 508 and WCAG 2.1 AA from the start, with accessible patterns embedded across navigation, search, service pages, forms, and responsive layouts. Each decision below maps to the success criterion it satisfies.

1.4.3 · Contrast (Minimum) — AA
Legible at every level

Core text and interactive states were designed against AA contrast targets, from the hero through to form labels and helper text.

1.4.1 · Use of Color — A
Meaning never by color alone

Status, emphasis, and availability each carry a text label or icon alongside color.

2.4.5 · Multiple Ways — AA
Two routes to the same service

Search and category navigation both reach any benefit, so neither journey depends on knowing VA's structure.

2.4.7 · Focus Visible — AA
Predictable keyboard operation

Navigation, search, calls to action, and application controls were designed around a logical keyboard order with clearly identifiable focus states.

3.3.2 · Labels or Instructions — A
Explicit form patterns

Application patterns use persistent labels, logical grouping, contextual instructions, and clear validation and error behavior.

1.3.1 · Info & Relationships — A
Assistive-technology ready

Consistent headings, content order, landmarks, and component patterns give screen readers a real structure to work with.

3.2.3 · Consistent Navigation — AA
One interface, three stages

The same navigation and interaction principles continue from homepage to service page to application, so nothing has to be relearned mid-journey.

1.4.10 · Reflow — AA
Priority survives the breakpoint

Responsive layouts re-rank content and preserve essential actions instead of compressing the desktop view onto a phone.

4.5:1 / 3:1

The contrast floor applied across the concept — text against its background, controls and interface states against theirs.

0

Actions or states that depend on color alone. Emphasis, status, and availability each carry a text label.

WCAG 2.1 AA

The target the patterns were designed toward, for Section 508-aligned implementation and later conformance validation.

These are the rules the concept was designed against, not test results. Conformance is a property of a built system — validating it would come after implementation.

04 / What changed

What the redesign puts in front of a Veteran.

Every number below is visible in the figures on this page: the tasks that reach the first screen, the questions between arriving and an answer, and what the interface states before it asks anything.

4
High-frequency tasks on the first screen

Claim status, appointments, disability claim, and prescription refill — named and reachable from the homepage, beside the search field rather than behind it.

Source — Fig. 02, this page
3
Questions to an eligibility answer

Plain-language questions about service history, answerable without an account, ending in a specific next step instead of a reading list.

Source — Fig. 04, this page
3
Commitments stated before the first form field

About 35 minutes to complete, free to apply, 60 days to come back and submit — all visible on the entry page, ahead of any question.

Source — Fig. 05, this page
8
WCAG criteria addressed by design

Each mapped to the specific pattern that satisfies it, rather than asserted as a blanket conformance claim.

Source — § 03, this page
Have a public-facing service that needs this?
All work Start a project