I worked with a Back-end Web Developer on this project. While I designed and built the form, he integrated it and checked on submissions to the database. Working side-by-side meant we could each focus on the tasks we’re best at and get this form ready for users.
The client does regular A/B Testing, so he has a good amount of statistics to back up what works for his forms and what causes users to drop off. We were given the following requirements:
- It takes too long to fill out the form and it is hard to navigate.
- The form looks outdated.
- The client was worried the new form wouldn’t look like the rest of the website.
The old form looked like this:
Design is about solving problems within the contraints provided so I think it’s important to go through each requirement and treat each as a problem in which we are looking for a solution. Before touching any HTML/CSS I gave him a quick mockup of what I thought the new form should look like. The solutions:
Problem 1) It takes too long to fill out the form and it is hard to navigate.
Solution: We know that if a form is too daunting or looks like it’s going to take too long, a user will leave it instead of filling it out. A website should lead the user through it and a form is no different. We lead the user through a two page process. The first page displays basic, required information. Since some fields are only needed if a person answers questions a certain way, page 2 displays only the information required based on what they filled out in page 1.
Problem 2) The form looks outdated.
Solution: Created a more friendly, less intimidating look. Again, removing a lot of unnecessary fields helped with this. I also added rounded borders for newer browsers that have the ability to display them. Then I went for a more concise, column based approach and increased the font size of the input field labels to them it easier to read.
Problem 3) The client was worried the new form wouldn’t look like the rest of the website.
Solution: I kept with the look and feel of the rest of the website by using the colors, fonts, and slogans from the rest of the website.
The new form:
Please note: I was instructed to redesign only the form. The client updated the header on his own and the rest of the website was to be untouched.
The client said the new form is “gorgeous” and is including it in his A/B testing, when I get word of the results, I’ll let you know!
