Form Design Consultation
BACKSTORY
Recently, a young education-based startup, which offers students the opportunity to apply to hundreds of scholarships with only one application form, reached out to me to help them with the form design of their initial profile setup process. For them, the profile was one of the most important aspects of their platform since this data, entered by the students, was used to match them with appropriate scholarships. Without this data, the site couldn’t do its job properly. However, this form was lengthy, resulting in low completion rates.
OVERVIEW
Problem: Difficult to persuade students to complete the entire onbarding form because of its length, resulting in high drop off rates.
Objective: Optimize the form by applying “best practices” of form design, in turn, reducing drop off rates, user frustration, and false entry information.
Deliverable: Medium fidelity wireframes, prototyping, along with site audit.
MY FINDINGS
Since the vast majority of the students were accessing the form through mobile devices (with a large number visiting directly through sponsored “swipe up” posts on Instagram), I took a mobile-first approach.
THE COMPANY'S ORIGINAL FORM
I first analyzed the company's current situation and took stock of what they were already doing well.
My initial reactions:
-
It was a single-column form — Good!
-
They had clear labels above the input fields (as opposed to inside) — Maybe not “slick” but accessibility friendly!
-
Input fields turned an obvious red when a mandatory section had been left blank — Important!
-
I received a reminder email after I didn’t fill out the form completely — Nice!
AREAS OF IMPROVEMENT
Before tackling specific pain points within the form, there were 3 main best practices points that I noticed lacking right off the bat. When designing a form, key questions to ask yourself are:
1. What fields exactly are mandatory and what aren’t?
Marking fields as (Optional) is better than Required*, which the company had done, however when I went to submit, there were some unmarked fields that were highlighted as red and needed to be filled out and some unmarked fields that weren’t. It was very confusing.
2. Do you REALLY need all this data?
The shorter the form, the higher the completion rates. Take a hard look at every single question and ask “Is this really needed?”
3. Go from EASY to HARD
The company's form had no rhyme or reason when it came to the order of input fields. There was no natural, logical flow. Nobody likes filling out forms, therefore it is best to gently ease users into the process. Start with the easiest questions first, slowly working towards the more difficult/annoying ones. Users are more likely to plough through the entire process if they’ve already invested the time with the bulk of the easier/quicker questions up front.
MY SOLUTION
When making a form more digestible for users, it is important to define the flow. In this particular case, I grouped related questions together, split the form up into 4 logical sections, spread them out over 4 screens, and added a progress bar. This way, the user isn’t overwhelmed by a long, daunting questionnaire — they can tackle things screen by screen, monitoring their progress along the way, starting with the easiest questions first. Applying the "Easy to Hard" Rule, the first set of questions relate to name, address, etc. -- questions that are standard and that every user is familiar with. This eases the user into the questionnaire and by making use of AutoFill, the first screen can be completed quickly. By then they are already 25% done!
ACCESSIBILITY FIRST
Keeping accessibility in mind, I kept the labels above the input fields (as opposed to faded, sometimes hard-to-read placeholder texts).
TIME IS VALUABLE
To save the user time, I tried to reduce unnecessary clicks/taps. To do this, I eliminated dropdown menus where possible, putting clear buttons in their place. This also creates a better one-glance overview of content.
UNFAMILIAR TERMINOLOGY
Some of the terms used on the form were maybe not so well known, causing speed bumps. Here I recommended adding simple tool tips, so unfamiliar terms could be easily defined.
UNNECESSARY FIELDS
On the original form, I had noticed that users could choose SAT and ACT scores without even having to confirm if they took the tests or not. Why have the option to choose scores if the user hasn’t even taken the tests? This adds extra fields that may not be important to the user.
This could create uncertainty in the data the company receives. If a student chooses a SAT score but they didn’t mark "yes", does it mean they didn’t take the test and were just scanning through the dropdown menu of scores? Or did they simply forget to click yes?
My solution would be to have the input fields for scores appear only if the user actually confirms that they did take the tests.
CONCLUSION
By following simple best practices when tackling form design, an accessibility-first and user-first approach work best. Through the implementation of my suggestions, the company saw a spike in their completion rates. SUCCESS!
To me, form design is like a puzzle. It's one of the few elements of design where there really is a possibility of a "right answer". Through observing how users interact with forms and analysing the data, things can be tweaked until it's right. This excites me. (Nerd alert!)
NEXT STEPS
I would be curious to explore how this simple form could be taken further. Since implementation, what are the new pain points that users are facing? And how could those issues be solved? Perhaps this will be reassessed in the near future.
There are additional changes/suggestions that I made for this project, however I haven't included them all in this case study. If you would like more info or have any further questions, please don't hesitate to get in touch!