Product Design | Concept

Standardizing benefits applications

Work In
Progress

Overview

At Code for America's 2020 Day of Civic Hacking, I joined a group of volunteers auditing San Francisco's application for in-home supportive services.

As it turns out, many public benefits applications face similar challenges - inconsistent visual language, redundant information requests, obscure instruction, and so-on - that keep eligible applicants from receiving needed services.

This concept intends to provide public servants with a simple tool to create coherent, consistent, and accessible applications.

My role

As this is a personal project, I am the sole designer, researcher, and cheerleader.

Tools
Figma Circle.png
Photoshop Circle.png
After Effects Circle.png
AirTable.png
Miro Circle.png
Form Builder - Financials Composite.jpg

Inspiration

"An enormous number of interactions with government... involve filling out a form - and most of these forms are confusing, hard to read, and repetitive."

Cyd Harrell

A Civic Technologist's Practice Guide

Big disclaimer

There's a ton of research that still needs to be done.

This project is inspired and heavily influenced by the work of organizations like Nava, USDS, Exygy, Civilla, Code for America, and many others.

I've relied on the research and wisdom these teams have made available to inform my design process in lieu of 1:1 exploratory research and co-design methods.

Getting the lay of the land

Landscape analysis

I started by conducting an audit of public services in the Bay Area to understand the range of information being requested, and how it is currently collected.

 

I chose to focus on seven key sectors:

  1. Child Care + Family

  2. Health + Food

  3. Jobs + Money

  4. Housing + Shelter

  5. Immigration

  6. Veterans Services

  7. Businesses

Exygy's DAHLIA application, and Code for America's Get Cal Fresh application became my guiding light for unobtrusive form design.

Miro Board.jpg

Accessibility, Simplicity, Consistency, Trust.

Feature mapping

These are the four principles I hypothesize will make or break a successful form.

So, I began mapping out features and functionalities that would reinforce these priorities. 

The Plan

Prototype the "MailChimp" for benefits applications.

1

The Tool

Form Builder

Empower service providers to build effective applications.

2

The Output

Applications

Bake-in design standards so resulting forms are consistently accessible.

3

Maintenance (TBD)

Support

Create an applicant portal and auditing tools to help provide effective service delivery + communication.

Form.png

Starting with applicants

The number 1 goal with this project was to generate clear, accessible forms. So — guided by my audit of public benefits — I started by laying out all of the different types of information an applicant would need to confidently navigate various applications.

Once several critical screen templates began to take shape, I could get a sense of the icons, elements, patterns, and visual hierarchy I would need to build into the design system.

Form Builder.png

Moving on to providers

With the form templates sketched out, I then began reverse-engineering the form builder interface based on the controls a service provider would need to customize an application.

Inspired by other WYSIWYG builder tools, I focused on creating a library of customizable components that could be drag-and-droped into a live preview. This enables service providers to have full control over the content of the form, without compromising the visual layout.

One step at a time

Clearly defined sections

Applicants are guided through the form step by step, always with the ability to review and revise submissions or pause and return at a later time.

Before each new section of the form, applicants are advised on what to expect and how to prepare. Their progress is always identified via a step indicator at the bottom of each page. 

Navigation.gif

Keyboard nav

Accessibility

Applications created with the form builder tool are navigable via a keyboard, with clear focused and selected states.

 

Content is ordered to prioritize critical and new information sequentially, while demoting secondary or redundant actions. 

Applications,

WCAG 2.1 -ified

Compliant by default

By controlling the accepted inputs and formatting of the resulting output, the Form Builder tool ensures applications adhere to WCAG 2.1 guidelines.

High contrast, dynamic text settings, ARIA landmarks, and available translations are just a few of the baked-in accessibility features.

Take a look around

Feel free to poke around the working Figma file below to view additional features and work-in-progress.

Next steps

1

Prototyping the bare bones

Finalize an interactive demo that service providers can respond to.

2

Co-designing a functioning tool

Working with public servants to adapt the tool to their needs and resources.

3

Form auditor + applicant portal

Integrate supplemental tools and features that will further support applicant success.