Washtenaw ID Project

The Washtenaw ID Project has been working toward setting up a program for people in Washtenaw county who are unable to get state licenses (and anyone else) to apply for a Washtenaw County ID card.

Prompt

My group won a 2-hour design challenge with our mobile wireframes for the Washtenaw ID Project's online ID clinic and mobile site. The purpose of the ID Clinic is to walk people through the complex process of collecting the documents required to prove their identity and then taking them to the correct office for applying (or to a different office for help). The mobile site also needed to provide information useful to local business owners, community members, and potential donors. After that, I became more involved with the project and worked with the team to create the Washtenaw I.D. website in Wordpress, which provides the aforementioned groups with information. The I.D. Clinic is a subset of this.

Key Skills

  • Brainstorming
  • Workflows and information architecture
  • Wireframing
  • Wordpress site building
  • Building accessible and multi-lingual websites

Solution Overview

We created wireframes for a mobile-first website that includes the ID Clinic to walk users through the complex process of collecting the documents required to prove their identity and then directs them to the County Clerk's office to apply for an ID. There are categories and a point system applied to the documents, so potential applicants must gather 300 points worth of documents. That is the system that was set up by the organization. We grouped everything into three separate lists, which we show to users one at a time. The user is given instructions on next steps based on the number of points they collect. I built this form for the website using a Wordpress multi-page form add-on.

I also worked with the Washtenaw I.D. project team to draw up information architecture and wireframes for the rest of the informational website. The site is translatable and has voice and braille-reader options for accessibility. I presented the project with two other team members at exposition, and we were voted the best social justice project.

What I Learned

  • How to condense a large amount of information into a few key tasks and organize it in a way that avoids overwhelming the user.
  • How to add language translations to a Wordpress site
  • How to create multi-step forms with custom math functions



Initial information flow diagram

Mobile wireframes for the I.D. Clinic form

An early wirefram of the landing page for the Washtenaw I.D. Project website

Main page of the existing Washtenaw I.D. Project website

Second page of the I.D. Clinic form. Points are tallied as the user checks off what documents they have

Page explaining next steps toward obtaining an I.D., whether or not the required 300 points/1 residency document were gathered