TD Bank -
Online Account Opening
Agency: Capco
Role: Lead UX Designer
01/ Discovery
The Challenge
Increase Inline Account Conversions
My team was tasked by TD Bank USA to address their challenges in converting site visitors into customers, and as result improve their online sales. By mining their analytics data, we uncovered key barriers to conversion in the funnel. And qualitative interviews helped us learn the root causes of abandonment: users found the enrollment process complicated and confusing.
Current Offerings
The first step of this engagement was to inventory all the existing content and functionality. My UX designer, Matt Klein, and I painstakingly inventoried every field and function throughout all the different types of accounts that TD Bank offers. This also gave us the opportunity to get used to the current interactions and patterns that were currently in use.
Proposed Solution
Our solution involved re-envisioning the online application experience from the ground up. We focused on simplification– reducing the number of steps from 11 to 3, clarity– introducing interactive elements like in-line error checking, and integrated help content, and language– warm, friendly copy that elevated and humanized the brand. Over 3 months, we transformed a multi-step application into a fast and easy 3-stage process, and established a new standard for online account opening.
User Personas
Functionality Matrix
TD has three different types of users. New to Bank (N2B), which has no existing relationship with the company, New to Channel (N2C), which has an existing account but no online banking, and RiB which is a customer with online banking set up. We mapped the functionalities to find the overlaps and differences in this chart for reference.
Heuristic Analysis Summary
After doing a thorough inventory of all offerings and a heuristic analysis utilizing test accounts provided by TD, we had white boarding sessions to reimagine what was wrong with the current structure. Some of the conclusions we came to were:
The application was not dynamic, it would ask you preloaded questions even though they wouldn't pertain to the account you were opening. A lot of information was presented at once, causing cognitive overload, most of it being not of value to the task at hand. Our solution was to use dynamically loaded forms based upon the account type selected . We decoupled the account selection process outside the secure form, which allowed us only to send the type of form needed to complete that specific type of account, thus reducing useless form fields. We also present information with "progressive disclosure," only showing the information needed at the time.
The application was impersonal, the first type of questions were Anti-Money Laundering questions. We explained to the client that this approach was very forward and scary for someone new to signing up for a bank account online. We advised to take a more natural conversation approach, start with “The Basics” (name, phone number, address).
By starting with a more conversational approach, this allowed us to capture the contact information upfront without being invasive. In their current flow, they didn't get the contact information until the second page of the application, where a lot of people have already dropped off. Thus not being able to contact them to continue.
The disclosure page and other legalities were a long endless scroll on the third page that was pages of legal jargon any non-lawyer wouldn't understand. We advised to put the documents in an I-Frame and have the summary points at the bottom that they can agree to in 1 check box. This was the hardest part because we had to go through about 5 revisions with the compliance department to get it right.
They have a strategy of trying to cross-sell other products throughout the whole application, thus causing annoying road bumps throughout the process. Even though their own research shows that less than 1% actually go down the path of adding on another relationship account. We explained that they were catering to an edge case because of the sales departments willingness for extra conversions, but were in fact eliminating the majority from completing the form effectively. Our suggestions was to offer extra add-ons to the back of the form, the “go" page. This allowed the correct type of accounts to be cross-sold based upon the account just opened, and streamlined the process by having all the personal information already pre-filled.
Existing customers needed an easy way to successfully utilize their realtionship with the bank already. This was done by entering in your name, DOB, and SSN or by signing in with your online banking credentials. This sped up the process greatly and streamlined the forms. No 3rd party identity verification was needed except for a simple challenge question utilizing this approach.
Restructuring the Application
We proposed a three step process, Ready, Fund, Go, that will streamline the account registration process with the intent to reduce the user drop-off rate when opening a new account.
User Flow Example
03/ Wireframes and Final Designs
Wireframes
We designed for two breakpoints when approaching the wireframes. The system was built on bootstrap, so we decided to design for the < 992px breakpoint which is for laptop/tablet and <480px which is the mobile breakpoint. Every situation was documented and all accounts were wired, the final document ended up being 160 pages. These are a few examples.
Visual Design
The visual design phase was very straight forward with slight allowance of freedom. TD Bank has in place a new emerald design system that they are currently rolling out across all new work, ours being the first to go public. We used their living style guide to map to all the specific styles.