How do we take a legacy solution and make it current?
Working for a large financial institution there is a lot of services that haven’t translated into the digital space. Many of the forms to apply for services are on paper and customers must go into a branch to fill out. Many have realized customer need these services to be available to apply for online.
Role
UX Design
UI Design
Interaction Design
Product design
User interviews
General asker of “Why?” (I’ll explain below)
Goal
Make it convenient and easy to apply online for services
Make the language easy to understand and simple
Provide a more current / industry standard experience
Planning Phase
The first step was to look through the almost 90 question paper form with the business team. My first question was “why are there 90 question?”
To this most answered they didn’t know, the form had always had the questions and questions were only added over time not removed.
I mapped out with the business team which questions seemed like account information that we should have and could pre-populate, was related specifically to the service the customer was applying for and which were unknown.
We ended up with about 15 account questions including name, address, and other personal or business information. About 5 question were service related, and the rest were unknown.
The business team and I met with many other teams including Legal to determine who needed the questions. We found some were used in underwriting, others were simply verification, and most were also unknown.
Talking to a development manager we found most of the unknown questions were not even entered into the database and stored but left over from other legacy systems.
I went to the product owner and made the case to remove all but the 25 questions we found that were actually stored in the database. She agreed.
Design Phase
By far the most challenging part was the many hours I spent in conversation understanding why certain groups needed questions or wanted information verified. I was questioning decades old process and work.
Many people were simply caught off guard by being asked “why?” since this had been in the process for so long.
I made the case that we should only ask the customer for data we didn’t have. This would streamline the process and we could ask for verification after the account was set up.
During this time I found another project that was also underway that would be a prerequisite to this form. I went over the data fields with this other team and brought back to the project that integrating with the other project would allow us to get all the personal and business data we were trying to verify. We wouldn’t need to verify it ourselves saving the user a lot of time and shortening the form.
After evaluating both projects I mapped out the questions and only 4 of the service related questions needed to be asked.
Implementation Phase
I worked with a front end developer to build out the UI in the React framework. We chose this because the dev environment we planned to push into was going to transition to a react framework in the future. The developer and i figured we could start that base architecture and templating for them.
It also had built in tools to leverage like floating labels, which the team wanted to leverage for a more up-to-date form field style.
Challenges
During testing the 25 question iteration, I found the brand styles we were given made it difficult to scan questions and were not optimal for the new features and functionality we were offering.
Specifically the styles called for disabling the continue button until required fields were complete. However there were not good indicators for what was filled and what wasn’t.
Thinking of solutions for this i added a left border on fields that needed input and created a “helper button.”
the button is always enabled but reads “enter (next field that needs to be filled in)”. Pressing the button will jump your input selection to that field and once all fields are filled out the button changes styles to filled and says “continue”. This concept is being tested on many levels within the institution and with A11y accessibility. It is gaining popularity and getting people excited.
Closing
I don’t think anyone walked into this project thinking it would take as much work as it did to move a paper form to digital. In truth it could have been a lot faster but it also would have been a horrible experience.
This project sparked a lot of change in mindset in many departments and individuals about what and how the institution should be thinking about the customer experience. I’m glad that I was able to initiate this and, fingers crossed, we got the form down to 4 questions.