Applications: forms, flow & …fun?

Applications as fun? Reading that title you might ask what is so fun about the ubiquitous form. There is actually so much thought that must go into building forms for the marketplace. Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design.

Non-linear vs linear flow

Adding co-borrowers

Masking (Phone, dates, dollar)

Required Fields

Navigating linear vs. non-linear

I expect a majority of applicants to go through the application process linearly since I ordered the sections in a way that begins with easier, and readily-available information to then more complex questions that they may have to do a bit more digging for. However, in keeping with our vision of creating a more transparent and open platform, we also gave the ability to search around the application and skip sections using side navigation.

This side menu helped in multiple ways to help the user through the application journey. 1) It allowed them to get an inventory of what the application contained so they were able to set expectations on how long it would be and cause less surprise. 2) It served as a method of jumping between sections of the application and working on the sections they felt comfortable with. And 3) it also provided status’ to indicate whether the section was complete, incomplete, automations were working in the background, or if a particular page needed their attention. On mobile, the navigation was also accessible to freely jump around between sections.

In order to address the use-case of an applicant moving forward in a non-linear fashion with errors on required fields, we leveraged in-line and server-side validation on the form fields. If a user tried to hit “Next” to go to the next page with a required field in error, we would prompt them with an alert and indicated a field that needs their attention (i.e. “Your email address appears to be formatted incorrectly”) before jumping to the next page. However in keeping true to offering a non-linear flow, we would still allow them to jump to another page via the side navigation but still indicate the page they just left still had errors in need of fixing. This offered flexibility to the user in working through the application but also helped to hold their hand in a non-intrusive way.

The side navigation performed very well in testing. Virtually all users recognized the steps as a list of to-do items that needed completion and also a means of navigation. They understood the site was saving inputs as they worked, and had no issue with going back and forth between pages. They noticed and liked the green checkmarks as they went through the process. One of the participants was quoted as saying:

“I like it. I like how it checks off as you go. It turns green so you know you’ve filled everything out correctly and you know you’re on the next step.”

Co-borrower mess (and clean-up)

An existing requirement on the 1003 URLA form is the ability to add additional applicants or co-borrowers. In the manual process they typically staple on more forms for the additional applicants, but on our product we needed a clean and simple way to add them in a way that was understandable and could scale. For each primary applicant, they have the ability to add an infinite amount of co-borrowers. Typically it’s a spouse who gets added on, but it can also include business partners who may ALSO want to add their spouses to application. (Talk about convoluted!) Once adding everybody, the primary applicant only needed to provide the names and email addresses for them to send out applications of their own to work on. So I had a few sprint sessions on a whiteboard to try and solve this a number of ways.

My first approach (stay with me, here) was to have the co-borrowers added incrementally using a stepper to indicate how many additional borrowers there would be (see image below). Then, for each added applicant we would produce cards asking for name, email and a checkbox to indicate if this person was a spouse or not. Then we would jump to an interstitial work-flow on the following page to map the co-applicants to their spouses if they indicated one. *Whew* Did I lose you? If yes, then you weren’t the only one!

After scrapping the previous flow, product and I continued to work and came up with a more elegant solution based on simple logic. After indicating that the primary applicant wants to add a co-applicant, we would incrementally add on additional borrowers in a logical flow. This method would put way less cognitive load on the user to think about all the other applicants at the same time and try to manage them simultaneously. No steppers, no interstitial screens, no sorting; easy!

Play with the (desktop) result yourself! (Hotspots are at the bottom)

  • Date March 2, 2019
  • Tags Interaction Design, Mobile, Prototype, Visual Design, Web App