Complex Forms Made Simple

A deep dive into user-friendly long form flows with multiple branches

Brooke Nankin
SEEK blog

--

Sometimes there’s just no way around it. In order for organisations to complete a certain business process, they must ask a lot from their user in terms of specific details and intricate pieces of information. Some common justifications for this are:

  • setting up a billing account
  • applying for a job
  • publishing a listing on an online marketplace.

Although rarely straightforward in process, these actions nevertheless must be done given the general nature of business rules and information requirements.

Here at Certsy — SEEK’s credential verification and background check platform — this challenge is indeed par for the course. In many of our user flows, users will often divulge some of the following:

  • personal details such as name and date of birth;
  • images of documents as evidence;
  • document information such as licence number and expiry date;
  • historical details such as former names and address history;
  • taking a selfie with ID card in hand, clear in frame.

In this article, I will take you through some key findings that came out of re-designing our most complex form flow to date — our police check process. To give you an idea of just how complex this form was to design, it currently boasts over 80 screens and 2,403 unique user flow scenarios, depending on what choose-your-own-adventure the user opts to take.

My hope with sharing these findings is to go slightly beyond the sort of advice we’re probably all familiar with, such as presenting the information clearly whilst removing any distractions, and delve just that bit deeper into the nitty-gritty specifically associated with complex, long form flows.

Uncovering the pain points

You may have noticed that the term “re-design” was used when I mentioned Certsy’s police check application process. We weren’t working from scratch here; this feature happened to be Certsy’s very first offering as a burgeoning young start-up. But as is the case with many new products, we made trade-offs in order to get to market quickly.

Cut to 3 years later, it was high time we revisited the design and usability of such a feature now that it had reached a certain scale and, with it, amassed a decent amount of valuable user insight (as well as the team gaining a willing and eager UX designer).

Here is what we were working with:

Certsy police check flow v1.0

Although an admirable starting point, this flow was ready for a dramatic transformation in both style and functionality. The main user pain points and limitations we had uncovered during this legacy form’s lifespan are true for many a complex form flow out there:

  • no ability to change device mid-flow;
  • lack of adherence to brand style guide;
  • inconvenient hierarchy of mobile responsive elements
Due to the positioning of the navigation/progress indicator, the user is forced to scroll on every screen
  • clunky progress indicator in general (ours grew in length once the user passed a certain point);
  • high friction where users are required to upload documents, likely due to the amount of input fields required of them to fill;
  • incorrect or poor-quality document images frequently being uploaded due to users not being clear on requirements;
  • cluttered composition with little room for hints and suggestions, which are often overlooked amongst the jumble;
  • stricter rules being rolled out by government authorities, meaning additional steps or branches are required.
TFW more branches are forming in your form than the multiverse…

The solution

After reviewing our pain points, a solution became relatively clear. As well as implementing some much-needed usability improvements, we would move away from our cluttered, scroll-heavy composition of old to a cleaner, one-step-at-a-time approach, known more commonly as a “form wizard”.

Why a form wizard?

  • Future-proofing for eventual mobile app: A form wizard nicely sets up a company or product when the time comes to transition to a fully fledged native mobile app as the primary platform. The lack of scroll translates perfectly to mobile device screens and provides a cleaner interface with fewer distractions.
  • More real estate: One step per screen opens the composition up to a lot more real estate, which becomes incredibly useful for more complex steps that would benefit from a small prompt or suggestion to mitigate user confusion — prompts or suggestions that would be overlooked or hidden within a longer form page.
Lots more room to relay useful messaging such as this one, offering peace of mind
  • Less cognitive load on the user: Another endorsement for individual steps is that they are less overwhelming from a usability standpoint, with fewer requirements being demanded of the user at any given time.

Abracadabra!

Since rolling out our new form wizard to not only our complex police check flow that I’ve been referencing throughout this article, but to our credential verification range as a whole (such as Right to Work and Australian Driver’s Licence to name but a few), valuable insights were discovered and nuggets of wisdom collected.

As promised, here are some of those learnings that I think will be beneficial for anybody looking to design or improve upon their own long form flow:

  • Don’t rely on standard responsive patterns: Our new design goes beyond the standard responsive behaviour of resizing or stacking components to suit the device size. Instead, change the positioning and style of key elements for mobile in order to meet the expectations of the user.
You may notice that our Next button is fixed on mobile so that it never gets hidden below the fold
  • Group associated fields: Early iterations of our design separated every step individually so that only one action was required of the user per screen. The initial rationale behind this approach was to avoid reverting back to our old ways of cramming too many elements and fields onto one screen. However, an issue soon arose regarding the three individual name field steps, being First/given name, Middle name and Surname. By separating these fields as three individual screens, we were inadvertently creating confusion for edge-case users who are only known by one single name (as it wasn’t clear to them which of these fields should be used to capture their single name). However, once we grouped these three fields onto one screen, the expectation of what name was required for each field became much clearer.
Grouping associated fields, such as three name fields, in one screen
  • Use natural language patterns: Speaking of grouping, have you ever thought to use the “Mad Libs” approach to group related form fields? The idea simply involves embedding your input fields within a naturally written sentence. Take a look at how we revised our Purpose screen to not only flow more naturally but also make it more intuitive and understandable to the user.
The legacy version with it’s seperate accordioned sections vs the simpler “Mad Libs“ approach
  • Consider a staged progress bar: Up until re-designing our police check form, we had a relatively simple progress bar that relayed to the user what percentage of the flow had been completed thus far. The police check, however (due to how lengthy and convoluted it was) required something with a little more transparency. I opted to expose the main stages of the flow into bite-sized portions so that a user can more readily comprehend and prepare for what is up ahead.
Simple vs “staged”. Which one works for your form?

I hope this article has inspired you to put on your own wizard hat and conjure up some creative improvements to your own complex forms to keep your users enchanted and thoroughly engaged.

Special thanks to Xavier Russo and Catriona Murdie for their help and feedback on draft versions of this article.

--

--

Brooke Nankin
SEEK blog

UX designer from Melbourne, Australia. Enjoys training in krav maga and has recently taken up piano.