Benefit Eligibility System, State of Hawaii

Context

Hawaii residents use the Self Service Portal to apply for public benefits. Many are under stress. Some use screen readers. For a government service, accessibility is also the law, under the the Americans with Disabilities Act and Section 508.

My role

Senior User Experience Designer in a team of three. I produced the high-fidelity designs, owned the Self Service Portal design system and led accessibility research and testing.

What I did

Set the tone. Asking for help is hard, so the portal had to feel calm and trustworthy. I tested three moodboards. The teal and brown of “Empathy and caring” won.

Answer the first question. People arrive wondering if they qualify, how to apply, or how to sign up. The landing page leads with exactly those three actions.

Keep everything in one place. After sign-in, a dashboard shows the status of each benefit and links to renewals, documents and notices.

Make a long form less daunting. The application has nine sections. A short walkthrough on web and mobile explains progress markers, navigation and what’s needed to submit early.

Build accessibility in, not on. The design system uses a 60-30-10 colour rule with contrast of at least 4.5:1, Noto Sans for multiple languages, and a responsive 12-column grid. I also wrote a team guide that turns the Web Content Accessibility Guidelines into plain rules for keyboard access, Accessible Rich Internet Applications attributes, headings, alt text and skip links.

Outcome

Accessibility became part of the system and the team’s daily habits. It stopped being something fixed one screen at a time.

Moodboards, screens, design system and accessibility guide

Moodboard: Empathy and caring - teal and brown palette, Calibri, Hawaiian landscapes and community imagery with the State of Hawaii seal — Moodboard · Empathy and caring

Moodboard: Peaceful - navy and teal palette, Verdana, ocean imagery and friendly illustrations — Moodboard · Peaceful

Moodboard: Secure and friendly - navy and coral palette, IBM Plex Sans, Hawaiian sunsets and line icons — Moodboard · Secure and friendly

Self-Service Portal dashboard with navigation, program status for food assistance, financial and medical programs, and a prompt to continue an application — Main screen · Dashboard

Nine-step application onboarding walkthrough on desktop: welcome, main menu, progress navigation, section status, navigation buttons, add and save, and required information to submit — Application onboarding · Desktop

The same nine-step application onboarding walkthrough on mobile — Application onboarding · Mobile

Self Service Portal design system colour section: 60-30-10 rule, primary teal, secondary brown, neutral and semantic colour schemes, and contrast checks — Self Service Portal design system · Colour

Self Service Portal design system typography: Noto Sans, readability guidance, type scale and accessibility guidelines — Self Service Portal design system · Typography

Self Service Portal design system page layout: column grids, responsive 12-column grid, breakpoints, margins and layout guidelines — Self Service Portal design system · Page layout

Title: Web accessibility benefits everyone - addressing accessibility in Self Service Portal — Accessibility guide · Addressing accessibility in the Self Service Portal

Why address accessibility: one in four adults in the United States has a disability; the Americans with Disabilities Act and Rehabilitation Act Sections 504 and 508 — Accessibility guide · Why address accessibility

What is web accessibility, with visual, auditory, motor and cognitive impairments — Accessibility guide · What is web accessibility

Web Content Accessibility Guidelines overview — Accessibility guide · Web Content Accessibility Guidelines

Accessibility principles: perceivable, operable, understandable, robust — Accessibility guide · Perceivable, Operable, Understandable and Robust principles

Keyboard accessibility: visible focus and correct tab order, Web Content Accessibility Guidelines 2.1 — Accessibility guide · Keyboard accessible

Using Accessible Rich Internet Applications roles and attributes effectively, Web Content Accessibility Guidelines 4.1.2 Name, Role, Value — Accessibility guide · Accessible Rich Internet Applications roles and attributes

Landmarks, headings and titles: Web Content Accessibility Guidelines 1.3.1, 2.4.2 and 2.4.6 — Accessibility guide · Landmarks, headings and titles

Text alternatives for images, Web Content Accessibility Guidelines 1.1.1 — Accessibility guide · Text alternatives

Bypass blocks (skip to content), Web Content Accessibility Guidelines 2.4.1 — Accessibility guide · Bypass blocks

Select any image to open it full size.