What was the problem ?

Bank of America noticed a threshold value in the number of online application for Home Equity(HE) loan submitted. The exhaustive ad and letter camping for HE loan did not see a significant spike in the number of loan applications submitted.  The users were calling call centers for assistance to fill up this application and the percentage of form abandonment was high. So we decided to investigate the issues in the application process.

Research

I decided to test the existing application flow (heuristic evaluation) and a round of user testing with users from different background. Here are some of the observations from the evaluation:

• The users had to fill up a really long form with no logical breaks
• The form fields provided very little information on what to be filled.
• The error correction was really difficult for the user because it was a long form.
•  The results from user testing also revealed the same pain points again.

We analysed the form abandonment data and found out that more that 60% abandanment occurred from mobile devices. So most of the users were trying to access the form from their mobile devices.

 very long form - not self explanatory - error correction was difficult  - no cross device accessibility - 60% of the users were trying to access from mobile /tablet devices

Design Process

Based on the evaluation result we created a new objective for this project

"To create a responsive form that is self explanatory and easy to fill in. Also the form should have logical breaks and save points"  

Drawing board

I considered breaking the form in to a multiple steps, so that it would be easy for the user to concentrate on a particular section at a time. I also decided to add a "Get started" section to inform user what kind of information (eg. SSN, property tax info, mortgage payment info etc) they would be needing to fill this form completely. 

I got to the drawing board trying to explore and visualize how a multi step from should look and also how it will work on mobile and tablet devices.

Sketching

I started sketching form pages after the user flow was decided. I considered both desktop and mobile interfaces in this phase. I mocked up different kinds of visual indicator for the user to let them know in which step they are in. Also the step progresser will give an idea of how much of the application is left to be filled. Here are some of the glimpses of that. 

Interaction design

• We had to address some of the major interaction design concerns we had with this form.
• The first and the foremost was error handling. Previous error handling was done when the user has filled in the entire form which made error fixing difficult for the user. So we decided to give contextual error message to fix erroneous data then and there.
• Since the form was broken up in to small steps, you had to deal with only a small amount of error messages on a particular step.
• Also some of the fields were given detailed hint text as to what kind of information is required in that particular field.
• Detailed information layer was added to tell the user why sensitive data is collected. The challenge here was to design controls that would work both on desktop and mobile interfaces.
• I also decided interaction for review and submit.  Finally continue and cancel and exit interactions were laid out with appropriate error handling and alert messages.

Responsive Design

• While Working on the interaction design aspects of the screens, I started looking at how the pages would adapt responsively for other devices.
• I considered 3 breakpoints: Desktop, iPad and mobile.  
• I started off with desktop screen and then moved on to the other breakpoints. The desktop and iPad screens resulted in similar layout but there were significant style changes.
• I then moved on to designing screens for mobile. I designed how the controls would adapt for a mobile screen and also how the styles would be changed.
• The resulting screen had fields stacked on one another which would be easy for the user to scroll and fill up data. I also tucked away the call and chat option under the header for compact look.
• The step progresser was translated in to small dots to give the user an idea of what step they are in currently. 

Visual design

• I worked along with a visual designer to create visual mock ups for the screens.
• I wanted the screens to be simple and easy to fill in information. 
• Since this is a form, I wanted the fields to stand out visually and make the hint text in the fields clear.
• We discussed on how the brand should be incorporated in the designs.
• We decided to keep the font and color schemes same for all the devices also we worked on the layout to make it more responsive.

User testing

• The next step of the process was to take the screens for user testing. I partnered with a usability engineer to conduct this test.  
• I created questioners based on the screens we designed and on the list of issues the users ran in-to in the previous design.
• We selected different kind of users based on the various factors like:  age, demographics, Bank of America user, non account holding user.
• Each test was conducted as 40 min session with one user. Users attention to a particular component, how they read the text, how they fill out the form, how they corrected their errors etc were noted down during this session.
• We mostly received positive feed back about the usability and the  look and feel of the form.
• The user had some questions about why we asked some fields. So we decided to add explanatory text around the fields as shown in the figure.

Result

• Once we launched the form into production, we started monitoring form fall-out percentage and  checked with call center clients if they received any complaints. 
• The call center reported that there were no negative feed back or customer calling in to get help for this application. 

"The overall form submission percentage increased by 60%. And 40% of that came from mobile and iPad channels."