Improving Direct Deposit
- Stef Donovan
- Mar 30, 2022
- 7 min read
Role |
|---|
UX Research & Discovery |
UX Design |
Content Design |
Design specs and requirements |
Visual quality assurance |
Who I collaborated with | How they helped |
|---|---|
Product owner | Buy-in, expectations, and approvals |
1 Business analyst | Business insights |
1 UX Researcher | Assisted with testing and user interviews |
1 UX Writer | Writing copy for finalized experience |
2 Developers | Coded the final product |
Background
In 2021 over 129,800 users enrolled for their group health and life benefits through Canada Life's online member self-serve enrolment platform.
To prepare for an additional 750, 000+ federal employees in 2023, I was asked to start identifying the existing pain points in our user flow.
After reading through our enrolment report, I discovered that approximately 27% of our members were not providing their direct deposit details. This was a big opportunity to focus my efforts because our business would need to send out costly paper cheques to these users until they provided their banking details in their online accounts. The RFP requirements provided by the Government of Canada also suggested that providing banking information during enrolment would be mandatory for their employees. I quickly started exploring this area to better understand why we have such a large number of users skipping this page.
Project Restraints & Limitations
For this project, I had no access to interview, directly survey, or conduct usability testing with end-users due to privacy restraints. To get around that, I leveraged our enrolment report, analytics tracking, and customer feedback surveys to identify pain points.
My Process
Understanding the problem
Through analytics, I uncovered:
26% (36,000) of all form errors were encountered when users entered their bank account details
Users are spending almost 40% of their time on the banking page
I started wondering...
What is causing users to spend so much time on the direct deposit page?
How can we reduce the time that they are spending?
Why are so many users encountering form errors?
What form errors are the users encountering?
To answer these questions...
I continued to do a deep dive into our analytics. By device type, I documented total visits, the number of visits that encountered errors, exit rates, average time spent on-page, and the number of visitors that skipped banking altogether. These numbers not only helped to understand interface behaviour but also served as bench-mark key performance indicators to measure against once designs were implemented.
User Analytics
The banking page in 2021 received 122,059 total visits
70,550 visits (57.8%) desktop visits
50,846 visits (41.7%) mobile visits
652 visits (0.5%) tablet visits
36, 472 visits (26%) encountered at least 1 error with a total of 48,879 banking field errors
22,851 (47%) on the institution code
16,578 (34%) verification error
6,739 (14%) transit number
2,711 (5%) account number
The exit rate sits at 5%, equating to 6,207 visitors leaving the enrolment journey
2,411 (3%) desktop exits
3,776 (7%) mobile exits
18 (3%) tablet exits
The average time spent on direct deposit was 3 mins. 30 secs
3 mins 33 secs on desktop
3 mins 24 secs on mobile
4 mins 38 secs on tablet
The average time when errors occurred on all devices:
Transit number average: 3 mins 47 secs
Institution code average: 3 mins 38 secs
Account number average: 3 mins 16 secs
Verification failed average: 2 mins 53 secs
The average time for all devices when no errors occurred: 1 minute and 54 seconds.
33,519 visits (28%) skipped adding direct deposit information
14,500 (12%) on desktop
19,787(16%) on mobile
18 (0.01%) on tablet
I was able to start painting a picture of what was happening.
Users who don't encounter errors spend 1 minute and 54 seconds on the direct deposit page. Users that do encounter errors spend over 3 minutes.
This made sense to me because users that encounter errors would need longer to fix them. This still didn't explain, though why users encounter errors in the first place.
I wanted to uncover why it was happening.
Analytics is a great tool for getting insight into what is happening, but it didn't explain why users were encountering errors. I looked into our customer survey report to try and find some answers.
To better understand why the banking page was producing so many errors and better empathize with my users, I read through thousands of comments to find anything related to the direct deposit page.
Everything great except system 'couldn't' verify my banking information for direct deposit & now I have to figure out how to enter it again - frustrating!!”
“Maybe to save googling or asking, make it clear which numbers are the institution, transit and account number or the number of digits for each”
Read User Feedback Excerpts
General Banking Comments
“Everything great except system 'couldn't' verify my banking information for direct deposit & now I have to figure out how to enter it again - frustrating!!”
“I could not enter my banking information and have to do it at a later time.”
“I want to do my banking information and I am unable to.”
“I could not add my banking after 3 tries”
“I wasn't able to enter my banking information for automatic deposits even though the info I entered was accurate”
“Being able to input banking information upon application process instead of having to do it at a later time.”
“I wish I had been able to set up my banking information right away instead of later.”
Where to find banking information “When asking for check info.. a highlight of a sample check..i.e. where to find transit #.. might be good..”
“More information on where banking information is located would be helpful.”
“Maybe to save googling or asking, make it clear which numbers are the institution, transit and account number or the number of digits for each” ”an example of how to read the information on a cheque for entering the required banking information.” “For more recent generations you may want to give an example of an 'institution number', a 'transit number' and a bank account number (though they should be familiar with this one but I shouldn't make that assumption)” “I was unable to add my banking details. I was trying to get it from a personal cheque but I didn't know which numbers were supposed to go into the first two fields.”
Observations
Users are struggling to find their banking information
Users don’t know where to find their direct deposit information
Users are not seeing our ‘where do I find banking information’ drawer UI that contains a sample cheque directing users to find the right information
Users don’t know what numbers are supposed to be entered into the appropriate fields
Users are struggling to add their banking information
Users want to and are trying to add their banking information
Users are frustrated when they are not able to successfully enter their banking information for direct deposit
Users don’t know what to do if they can’t provide their banking information during enrolment
Empathizing with users
To communicate to my team what the users were saying, thinking, doing, and feeling - I created an empathy map. The purpose of this exercise was to help our decision-makers better understand the struggles that our users experienced when interacting with the direct deposit page. It was also used to help aid in identifying key areas of focus and making decisions for improving our experience with design.
To better understand what the users were seeing, and to uncover any catastrophic usability issues, I turned to test the banking page myself. The goal was to identify any usability problems with the individual UI elements to better understand their impact on the page's experience. Watch me play around with the banking page ⬇️
Key Findings
Errors are not prevented
The top-level error when fields are missed or when information is incorrectly entered is blank
The number of digits on the fields informing users how many digits to enter into each box were not provided
Instructions on where to find the digits that users are looking for (institution code, transit #, and account number) are hidden within a drawer UI
Errors are not clear, concise, or instructional
Error recovery isn't helpful
Field errors are generic, not descriptive of what happened
Errors should clearly indicate the problem and direct users on how to fix them
Defining the problem
What's the basic need?
To enable users to more easily enter their banking information to sign up for direct deposit.
Desired outcomes
Reduce the number of users who skip adding their direct deposit details.
Reduce the number of errors encountered on the banking page.
Reduce the time users spend on the banking page.
Who will benefit?
All users who have health or dental benefits and come through the Member Self Serve Enrolment journey will benefit from these updates. This is approximately 48% of our member-side users. Additionally, our business will benefit because if we are able to increase the number of people who add their direct deposit information, then we may subsequently reduce the number of cheques that need to be sent to these members by paper mail.
Problem statement
How might we... enable users to easily enter their banking information so they can sign up for direct deposit?
Design
I like to always stay in the know about what the industry is doing to tackle complex usability issues. I collected a bit of secondary research by looking at how competitors collect this information. My intention was to analyze the findings and use my best judgement on what is considered a best practice vs. what is not. There was no documentation on UX best practices specific to adding banking information, so I had to establish my own based on information that I found online about different criteria banks across Canada use on their void cheques.
Findings
Void cheques
From left to right void cheques always contain a Transit # followed by an institution number and account number (see below)
Void cheques provided by Hardbacon.ca
Transit Numbers
Transit numbers are also referred to as branch numbers
Must be at least 5 digits long
Transit numbers that are only 4 digits need a corresponding number at the end to indicate which province the branch is in (see below)
Institution codes
Institution codes are also referred to as Financial Institution Numbers
Institution codes are always 3 digits (see below)
Some areas online make it easy to capture institution code by having users select the bank that they use and signing in (see how Wealthsimple does this below)
How Wealthsimple has users add link banking accounts for direct deposit into their Cash App.
Account numbers
Account numbers may be broken up by symbols on a cheque, for example ⑆1234567⑈
Account numbers are 5 - 12 digits depending on the institution
Sometimes account numbers start with 0s
Account numbers should be entered fully and not include additional dashes or spaces
I always find it important to look for internal solutions that already exist within the company so we can leverage existing design patterns. This ensures that users have a consistent experience with our company and it reduces design and development efforts.
I found that we ask for direct deposit in our Internal GroupNet application and many of the elements that I had researched were already implemented. The key difference between our experience and GroupNet was that they did not validate whether account numbers were accurate - they simply accepted the information if the institution code, transit number, and account number were received in the correct format.
I leveraged what already exists, and improved it based on my research. I added some error validation to the fields with proper instructions on how to fill them. I also added a 'need help' modal that informs users on how to find the information they may need to add their direct deposit details.
Feedback
Unfortunately, because I would need users to provide their banking details in order to test my assumptions and design considerations for this page - I wasn't able to test with end users. However, significant instructional/directional improvements were made to this page in addition to added value with error validation.
Solution
For the purpose of demonstrating how the high-fidelity wireframes work cohesively together, I created an interactive prototype using Sketch and Invision's Craft.
Improvements made to existing designs based on research findings:
Error validation
Instructional and directional assistance
Field constraints and limitations
Tooltips describing what to enter in fields
Help section for finding institution number and last digit of transit number
Improvements made overall
Selecting institution instead of providing it, where possible
Better error validation and recovery instructions
Exposed cheque instructing users where to find information
Tooltips instructing users on fields limitations
Confirmation of banking information before continuation in the enrolment process
Happy Path + Tutorial of Modifications
When 'other' institution is selected
Error validation paths
Results
Coming soon! These improvements are in development now. This section will be updated in the coming months through close monitoring of our customer survey report and analytics.
My learnings
Through working on this project I learned a few things. 1. Close monitoring of analytics can help you to understand the 'what' is happening but not the 'why.
2. Survey reports are helpful for identifying user pain points when you don't have immediate access to users to gather their feedback or test an experience.
3. I was able to reduce the time spent by our developers by leveraging an existing solution within the company. I also reduced time spent designing myself, and was able to closely collaborate with a UX writer to establish copy that would help direct the users to properly enter their banking information.
Comments