Case Study: Michigan Multibenefits Project

Design a human-centered experience for low-income Michigan residents signing up for food stamps and health care.

Client: Michigan Department of Health and Human Services (MDHHS)

Team: Cylinder Digital, Code for America, and Civilla

Involvement: Product design | Prototyping | HTML/CSS Templates

Project Timeline: 3 months

Results: See Demo Site and open source project on GitHub.

The Challenge

Between 15–40% of people who are eligible to enroll in food and health care assistance are not participating due to a long, confusing, and onerous application and enrollment process.

The typical application process for both SNAP and Medicaid is very long and often requires multiple in-person visits to the Michigan Department of Health and Human Services office. Applicants have to fill out a 40+ page PDF application or an online form of a similar length.

The Project

Design a human-centered digital experience to help the government better serve the most vulnerable Americans.

The Michigan Multibenefits project is focused on converting the existing application into a new human-centered online application to improve enrollment and eligibility for people who apply for multiple assistance programs — starting with the Food Assistance Program (SNAP) and health insurance (Medicaid).

The existing Food Stamps and Medicaid Application PDF Application is more than 40 pages of paperwork.

Trello User Flow/Prototype

To convert the paper application to a web application, we mapped out all the application steps in Trello. We grouped application questions into intuitive categories (columns), made each card an application question, and used a system of tags to indicate nested questions and application type.

Trello application flow

Sketches

Before moving to higher-fidelity mockups, I used pen and paper to quickly sketch design ideas, explore flows and UI directions, and remotely collaborate with other designers. Staying lo-fi early in the design and ideation process was important to not get distracted by fonts, colors, and pixel perfection.

Notebook and whiteboard sketches

Application Flow

Once the user flow was establish in Trello and UI directions sketched out on paper, I mapped the user flow in Sketch and added it to Invision to create a prototype for testing.

See Invision prototype here.

Mobile-first user flow through the application

User Testing

Every Friday, Civilla designers visit an MDHH office to do on-site user testing. They test new flows with users applying in person and get feedback from case managers to ensure all the needed information is being captured in the application. Based on the user and office worker feedback we would iterate on the layout, language, and content and make quick turn-arounds on the design.

User Testing in Flint, Michigan.

In-Browser Design

With the application question flow designed and tested and a design-system in place, I designed the high-fidelity views in-browser with HTML and CSS.

Designing in the browser allowed the project to move quickly and allowed the engineers to make the application and submission functional.

The first steps in the application, designed “in-browser” in HTML/CSS.

See full demo application here.

Adding a Human Touch

To help users progress through the application and add a touch of personality and humanity to the process, we broke the application into smaller sections and added “Breather Pages” to:

  • celebrate user progress through the application
  • act as a transition between application sections
  • allows users to confirm information before submission (“does this look right?”)
“Breather Pages” to add transition between sections, personality, and encouraging user progress through the application.

Making it Accessible

After the application was built, I paired with an engineer to do an accessibility audit. We did manual and automatic tests with the following tools:

Based on our audit, we found multiple areas of improvement to make it more accessible, including issues with: keyboard navigation, color contrast, missing labels, and machine-readable hierarchy.

Based on these discoveries, we created and prioritized tickets for both design and engineering, addressed the issues, and greatly improved our accessibility rating to ensure a good experience for those with physical challenges & the elderly.

A design is only useful if it’s accessible to the user: any user, anywhere, anytime.

Conclusion

My involvement on the project ended with the successful launch of both the SNAP and Medicaid applications. It was piloted in the two of the MDHHS offices and hundreds of applicants successfully submitted applications through the web app.

As a result of our work on the project, Chan Zuckerberg Initiative began funding a new effort in partnership with Code for America to continue work in Michigan and pilot similar efforts in more states.


Client Recommendation

My experience working with Rachel was the same as others — it was an ideal consultant relationship. Rachel not only brought expertise and skill to the design of a complex product experience, but she brought a level of insight and professionalism that made the entire product development process more effective. Rachel was a crisp, clear and frequent communicator and stellar 1:1 collaborator. I can’t recommend her highly enough for fearless, fast and thorough design work.
- Alan Joseph Williams, Product Lead @ Code for America
Like what you read? Give Rachel Cope Smith a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.