Don’t overcomplicate it: redesigning forms

I recently was given the challenge of updating the main email subscribe form for National Wildlife Federation.

The goals were:

  • Streamline the form: clean it up and make it simpler to navigate and understand for the user
  • Change up the thank you page: make it more engaging and add easy calls to action
  • Highlight their social presence
  • Changing the design to match with the new look of the site

With those parameters I set forth to design. On the form itself apart from the general style clean up, and removing unnecessary elements, (with the help of the the team at NWF) I focused on cleaning up the opt in options. Having two separate lists was confusing, so the lists were merged and a clearer description of what each email list was about was written. By doing this we were actually able to fit more text into the form while using less vertical space – without compromising white space.

The thank you page which was previously somewhat of a throwaway page, we transformed into a colorful eye-pleasing page with calls to action that the user might actually want to engage with. We did this by removing the bulleted list of links and updating the text so that it was very clear to the user what we wanted them to do. We added imagery to capture attention (a picture is worth 1,000 words) and made a better use of the available space on the page.

The before and after

form_before

The form before

form_after

The form after

thankyou_before

The thank you page before

thankyou_after

The thank you page after

Always keep the user in mind

When you are redesigning a form, try to put yourself in the user’s shoes. Think of your form like a maze and every decision is a fork in the maze. The fewer decisions the user has to make the quicker and less painfully they will be escorted though the maze. Are you using any insider language that they may not understand? Is there anything that can be cut out? Do you even need this form? Where will they be filling this out? Will it work on a phone? By simplifying form elements and writing clearly you’ll save everyone a lot of trouble.

View the live subscribe form »

avatar

With a passion for communicating through design and an OCD level of pixel-perfection, Hannah continually seeks to refine the poetry of her code.
February 19th, 2014 // // , ,
ShowHide Comments
Loading...