District Match

About

District Match is a web application that lets you match your addresses to legislative districts and elected officials. Simply upload your addresses in a CSV and District Match will return them stamped with the legislative districts and elected official information you requested.

My Roles

  • UX Design
  • Visual Design
  • HTML Development

Process

Step 1: Wireframes

I went through several rounds of wireframes with the product owner and customers. From a product standpoint there were a lot of inputs we needed to capture. From a user standpoint it was important that we made the long form easy to fill out and provide helpful feedback along the way.

Challenges
  • It's hard to capture validation and errors with a static wireframe.
  • The biggest painpoints for customers was keeping track of where they were in the form and making sure they provided accurate input.
Takeaways
  • I decided to break the long form into manageble chuncks of inputs.
  • I learned a lot about validation and empathetic feedback designing a form of this scale.

Step 2: Visual Design

The visual design phase helped the overal usability of the geocoder by introducing color to create a heirarchy in the UI.

Challenges
  • Incorporating the desing into the Cicero brand re-design that was happing organically as this project was underway.
  • The style guidelines kept changing as they were being adapted for the new Cicero website.
Takeaways
  • Left aligned form labels, while not eas easy to read as top aligned labels, helped keep the appearance of the form shorter and thus not overwhelming the customers.
  • I learned that it's not a linear handoff from visual design to HTML, becaus ein this case it kept evolving into the HTML phase of product development.

Step 3: HTML Prototype

For the prototyping phase I created a static HTML website. This allowed me to add in user feedback and validation which was helpful for getting feedback from customers, but also in communicating the small details to the development team.

Challenges
  • The visual design continued to evolve well into the HTML prototype.
  • Making the form just as easy to fill out on mobile was challenging.
Takeaways
  • The prototype helped explain the micro interactions and form validation such as progressive disclosure to the developers.

Final Design


More Projects

PayPal Experimentation

PayPal Monitoring

Cicero Website

District Match

Stormwater Interactive

Voting Information

More work can be seen at be.net/crtcreative