Project Vision
Farmers’ recruitment team was interested in having us build out a form for their candidate application. They provided us a PDF with 30+ inputs to organize into the form. Additionally, certain decisions were needed to be made on how to store data, as there were some fields requiring user-sensitive information. This would require engineering involvement from the start to finish of the project.
I partnered with another senior designer to collaborate with, as we would need to deliver the full experience within a tight timeline. We set out to create a form experience that put the control in the hands of the user.
Responsibilities
I would take full ownership of the visual design and information architecture of the form, directing my fellow designer to help in the creation of UI components as necessary. We'd need to involve project managers and developers often, as the form introduced some complexity everyone needed to be aware of.
My Role
Lead Designer
Tools Used
Figma
THE GOAL
Organizing the Form
I did some research and discovered a pattern of presenting questions to users one at a time – usually paired with some sort of indicator displaying how many questions were left. I liked this approach, but displaying 30+ steps to users early on may dissuade them from completing the form, as it is hard to feel like progress is being made.
I first started mapping out typical top-down form experiences. This usually involves us stacking questions on top of one another vertically. However, this amount of data visible to the user would overwhelm them too easily. Also, the amount of inputs would excessively extend the length of the page.
This linear approach seemed like it would be less stimulating for the user and limit their ability to navigate through the form. The provided PDF did a pretty good job categorizing information into data sets. Using these sets of data somehow would allow users to navigate the experience based on topics rather than individual questions.
We decided to move forward with a modular system since the information provided was already divided into categories. Segmenting these questions would allow us to organize the experience in the same way!
We also came up with the idea of adding a progress bar. This is allows users to asses how much more of a section is left at-a-glance. This also implied a few good stopping points users can use as break points if they need.
Storing Information
Providing users the ability to save their progress creates a supportive experience. If users wished to return to the experience at a later time the form will auto-populate based on their previous answers. However, this form asked for sensitive information. In the case that users were completing this application form on a public or unsecured device, providing them an option to opt-out of this auto-save feature protects their privacy.
Unique Form Inputs
We started to notice a repeated input pattern type of click-and-type. Since users expect forms like these to resemble experiences from other sites, I did some digging into different form patterns to try and add some variety to the experience. To add variety, I added a few different form types and interactions for different data sets: organic inputs, date inputs and drop-down inputs.
Accounting for User Error
We wanted to warn users of consequences in case they didn’t allow us to save their inputs. Users shouldn’t unknowingly make mistakes like these during their experience. I suggested this pop-up to appear with a warning when users decided to leave. We built this component specifically for this form experience, which was informed by the already existing design system we had for Farmers.
Developer Handoff
This project needed to be completed in a timely manner but also needed to align with our file hygiene standards for smooth development handoff. This was a challenge due to the sheer number of components, screens, and prototype noodles flying all over the place. Luckily Figma had just released it’s sections feature which made file organization much easier!
Responsive Design
Because this form application would be featured on a web experience, a separate mobile experience needed to be built out to accommodate responsive screen sizing. This introduced additional complexity on how to organize the various categories of information that we presented in the sidebar for desktop.
We opted for a sticky header that follows the user as they scroll through the experience, allowing them to be in control at any stage regardless of what device they were using.
What would I do differently?
Unfortunately, due to the tight timeline we weren't allotted any time to test the decisions we were making on the fly.
Ideally, I would have liked to get some of these flows and solutions in front of users. This is essential for truly understanding if our decisions made the impact we were looking for.
What I learned
This project required laser-focused collaboration between myself and my design partner. Every decision we made was pivotal as we were constantly fighting against the clock.
I learned how to trust my gut and speak up for the direction I thought was the best. I’ve worked with designers who do this in an abrasive way, especially when tight timelines are involved. I knew that for this project to be successful I’d need to find a way to communicate in a way that was curious, collaborative, and inclusive to make sure I was acting as a team player.
