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).
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.
Sketches
Before moving to higher-fidelity mockups, I used pen and paper to quickly sketch design ideas and explore flows and UI directions. Staying lo-fi early in the design and ideation process was important to not get distracted by fonts, colors, and pixel perfection.
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.
Test & Iterate
Every Friday, Civilla designers visit an MDHH office to do on-site user testing. They test new flows and designs 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.
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.
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?”)
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:
- 18F Accessibility Checklist, supplemented with the Wave browser plugin, to manually check selected user flows for accessibility issues.
- Axe to run automated checks and compare against the manual checklist.
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
