The Applicant Portal is the last step in the new account opening or loan application process. It allows applicants to add required documents, any additional applicants to their application, and message other applicants about related topics.
Project Type
Duration
2 person team project
Waterfall within Agile sprint environment
UX Researcher Spring and Summer 2022
Tools
My Role
Figma
Jira
Usertesting.com
AQA - Web Accessibility Testing
Google Meet
Lead UX Researcher
Lead UX / UI Designer
Skills
Competitive Research
Information Architecture
User Flow
Wire Framing
Design
Prototyping
User Testing
About
When the Applicant Portal was originally designed it was created to fulfill minimum requirements. It was the first iteration and with that the user experience, as well as the design were not an important aspect. Since, the first creation of the Applicant Portal, user testing has shown to be a pain for almost everyone that has to interact with it.
My job was to find a way to significantly improve the user experience and give the UI design a refresh to modernize the look.
*(Below you may find me referencing users or applicants, they are actually the same thing.)
The Challenge
How might we improve the overall user experience to be easy and efficient, show important information in prime areas, and create a design that feels modern?
The Plan
Since there was a live website that we were able to use for our first round of user testing. We wanted to find out where the pain points were in the Applicant Portal, especially the major ones.
We knew there would be issues, but did not realize how many there would be.
The Process
Research
Tasks Preformed
Heuristic Evaluation
Competitive Research
User Research
Journey Map
For the first round of user testing we used the existing live Applicant Portal site. We used Usertesting.com to preform unmoderated tests of 30 users. The tests showed numerous pain points.
Heuristic Evaluation
To start the heuristic evaluation we used the AQA accessibility assessment tool, and then we preformed a manual assessment taking screens shots and making notes to areas that need improvement.
Competitive Research
My teammate and I met to come up with a list of competitors we wanted to research, then we divided the list and preformed individual competitor research. We took screenshots of our journey's and presented our findings.
Target Users Need's and Behaviors
I watched all the Usertesing.com sessions tagging and making notes in the recordings. I created a quick snippet of the pain points and presented these findings to my teammate.
Journey Map
The journey map shown is the users path in the existing Applicant Portal. As you can see there are many opportunities for major improvement.
Analyze
Tasks Preformed
Identify opportunities and pain points
User Flow
Information Architecture
Ideate Solutions
Verify Requirements
Opportunity Insights
1. Remove username & password creation from Applicant Portal login.
2. Reorganize information to provide better direction for users.
3. Combine certain pages to reduce the need for users to navigate around the site.
4. Improve visibility of other applicants status.
5. Show the overall status of the application with clear identifiers.
User Flow
Information Architecture
The first step was to fix the login issues. Currently an applicant will have to wait for an email to receive a link to the Applicant Portal. This brings the applicant to the login page to create a username and password. Which is specific to the Applicant Portal, not their Online Banking login. Once, they are approved they need to create new credentials for their online banking access. These can not be the previously used credentials for the applicant portal. This step is very confusing to 98% of users. The users did not realize they needed to create new credentials, which repeatedly causes confusion and frustration for the majority of users.
Next, we organized the main page. We decided it would be valuable for the users to see important information that was hidden on other pages near the top of the main page.
Finally, we organized the remaining pages in a way to provide less friction for the user, removing the back and forth between multi-level pages.
Ideate Solutions
The best user experience, which has become our North Star would be to eliminate the jump between the application and our applicant portal. We wanted to design this new experience to feel like one application with one UI style. However, this dream would have to be worked towards over time. The first step would be to start adding the new UI to the existing experience. We met several times in working sessions to come up with a direction for the style. It was important to use elements in our new app design to make the product feel more cohesive.
Verify Requirements
Making sure we did not miss any important legal elements for our new approach we met with the compliance team to get approval.
Design
Tasks Preformed
Review pain points and requirements
Ideate low fidelity design
Create high fidelity design
Prototype and pretest
Review Pain Points and Requirements
Before we started on the design we reviewed our findings of pain points and opportunities. We also referenced the exiting Applicant Portal. See the below screenshots of the existing Applicant Portal.
Main Page
No organization of information. All item types are grouped together causing confusion and extra effort for the users to find the items that apply to only them.
Business Information Summary Page
The business summary page was an extra page and step that served the users no value.
Business Information Page
The business information page inputs feel actionable, when in fact they are not.
Applicant Information Summary Page
There is no clear CTA and the status indicators are not compliant.
Applicant Information Page
Applicant information page has an excessive amount of information that is not well organized.
Document Upload Page
On the document upload page the CTA to upload documents is not very discoverable for users. There are also too many CTA's on the page causing additional confusion.
Messages Page
The massages page followed the old design style needing updates to follow a more modern approach.
Ideate Low Fidelity Design
To save time, we started working in Figma from the start of the design process. As we created the first iteration of designs we could quickly see what ideas could work and which to abandon.
We also found a way to remove the major confusion of the username and password issues with the login to the Applicant Portal by removing that unnecessary step. Through this new method we were able to continue the online application process without the user having to jump into their email to find a link to open the Applicant Portal.
Create High Fidelity Design
Once we had a design we were confident would be a great user experience we presented our design to our UX team for any feedback.
Main Page
We brought important hidden information that was on secondary pages forward to the main page. We also added a loan or account information card showing vital information to the users, including a status updater.
From there we organized items by To Do and Done, which removes unneeded clutter. Additionally, we created categories with clear titles to assist the user to find the items they are looking for.
We also moved the ability to add optional additional applicants to the main page eliminating the unnecessary secondary page.
And, we added a similar status updater to each item card, allowing users to quickly see the status.
Another important element to note was the use of simple content combined with recognizable iconography. By combining the two we are able to maintain a passing grade for WCAG standards (WCAG is a list of standards or rules for all websites and applications to follow.)
Add Applicants Page
Once the main applicant selects to add a new applicant they are brought to a separate page to help them focus on the specific task at hand, which helps reduce their cognitive load. We also reduced the information required to add an additional applicant. After an additional applicant has been added, the new applicant is emailed a link for them to login and add the remaining required information on a simplified page.
Applicant Information Page
We moved unnecessary information from the applicant information form reducing the visual noise that was overwhelming users.
Upload Documents Page
We added the ability to drag and drop as well as upload documents removing multiple CTA's.
Business Information Page
We created a disabled look for inputs to better inform the user that they are not editable.
Messages Page
We updated the messages area by creating a more modern messaging style that works similar to Native SMS.
Create Prototype and Pretest
I prototyped the flow for our first set of user testing. Before starting the user testing, I reviewed all the data collected and made sure we did not miss anything.
Test
Tasks Preformed
Prototype testing
Prototype Testing
From there I created the user testing script for a unmoderated user tests. Then, I created the prototypes in Figma. The first test was an A/B test comparing the two sites. The second test was just the new prototyped portal design. I preformed the user tests using Usertesting.com.
Once, all tests were complete I reviewed the sessions and marked important findings. I calculated the data collected in the user tests to show in easy to understand graphics.
Finally, I created a presentation to share my findings with my UX team. The results were outstanding.
Conclusion
Measurable Improvements
The qualitative data found was outstanding. Some of the greatest improvements to the user experience are shown below as quantitative data.
Ease of login to Portal increased from 38% to 100%.
Navigation improved from 51% to 100%.
Comprehension went from 45% to 100%.
User satisfaction increased from 33% to 100%.
Thank you!
