Overview

TD Canada Trust ranks 5th in customer satisfaction when compared to mid-sized banks. I identified this as an opportunity to assess & redesign the online banking experience for their website, EasyWeb, through a heuristic evaluation of the login to overview screens and e-Transfer task flow.

Role

UX/UI Designer

Scope

Heuristics & Redesign

Timeline

7-Days

Tools
Icon2

Research

TD Bank's Canadian subsidiary, TD Canada Trust, is one of the Big Five banks and ranks second in customer satisfaction, but fifth behind mid-sized banks (ie. Tangerine). In order to not fall behind their competitors and potentially face customer attrition, improvements to the customer experience is vital.

Making an assumption

Customer satisfaction ratings can be a result of factors including level of service, ease of technology use, and available consumer products. However, I made an assumption that technology use was an area that could benefit from improvements to increase customer satisfaction, which a redesign addresses.

"How might we improve TD Canada Trust's online banking experience to help increase customer satisfaction?

EasyWeb & Interac e-Transfers

TD's online banking service operates as EasyWeb, which enables customers to perform all of their banking needs. One of the frequently-used functions are Interac e-Transfers, a funds transfer system between personal & business accounts. With reported e-transfer frauds where funds weren't arriving to recipients [1], I conducted a heuristic evaluation on this task flow that would support my redesign decisions.

FLT-ART-WORKS

Proto-Persona

Based on my research & assumptions, I created a proto-persona of my target user, whose goals are to easily view their bank accounts and send quick & secure e-Transfer transactions. They are not satisfied with their EasyWeb experience, as they often are overwhelmed with information and have faced e-Transfer transaction frauds.

TD-Persona-PNGx3

Heuristic Evaluation

Heuristic evaluations are an overall review of a user interface design, with regards to the user experience, and assesses a product, website or app against common usability principles to find usability issues. For this redesign, I've assessed both the login to overview screens and e-Transfer task flow.

Login-H

Explanation: This screen violates the "Help Users Recognize, Diagnose & Recover From Errors" heuristic as the error message doesn't inform the user which input field is incorrect.

Overview-H

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as the text in the side navigation appear to be overwhelming (1), and the account details, although clearly identified, are cramped too close (2)

Start-H

Explanation: This screen violates the "Visibility of System Status" heuristic as the progress bar doesn't stand out and is lost in-between the heading & instructions (1). It also violates the "Aesthetic & Minimalist Design" heuristic as this highlighted section doesn't communicate exactly what the user should be doing (2).

Add-Contact-H

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as the input fields in this section are related but are separated by text that could be consolidated/removed.

Select-Recipient-H

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as the number of input fields & drop-down lists to interact with, in addition to the in-between text, can cause confusion.

Verify-Info-H

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as there are a lot of details to verify here, which could delay the process, especially if users are in a rush.

Confirmation-H

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as it displays the same information as the previous screen, which could also make users miss the confirmation number at the top.

Screen Redesigns

By conducting the heuristic evaluation, these screens presented a redesign opportunity that addressed aesthetic & minimalism, and improvements to the visibility of system status and diagnosing of errors heuristics.

Explanation: I redesigned the login screen's error message to indicate the input field that causes the login error. The current screen doesn't inform users specifically what is incorrect, and this improvement helps to rectify it.

Task-Select-N

Explanation: I designed a *new* task selection screen with different options for users to select from upon successful login. This saves time to have to navigate through multiple screens to land on a specific screen.

Explanation: The overview screen's interface required an overhaul due to lack of spacing. I designed a secondary navigation bar at the top for quick access to the other tasks (1). With the content on this screen, I also grouped contents into their own section with increased an increased heading font (2). In addition, I designed a section for recent transactions, enabling users to have an overview of each account's activity (3). Mainly, this redesign focuses on maximizing the screen space to display quick & relevant information for the user.

Explanation: I redesigned the e-Transfer start screen to improve overall visibility, beginning with the increased progress bar size, using larger text and indicators (1). The section below faces more spacing between content and increased input field label hierarchy (2), which enable users to understand what needs to be done and not be overwhelmed by in the current screen.

Explanation: If users need to add new contacts to send an e-Transfer, this should be simple & straightforward. I simplified this screen by grouping the input fields closer by removing the text that separated the fields. This effectively communicates what the user needs to fill.

Explanation: In this redesign, I simplified the section by removing the 'message' input field that appeared once a recipient was selected. This crowded the current screen and was not required, since the user would have to communicate the security answer to the recipient afterwards (ie. by text).

Secondary-Verification-N

Explanation: I designed a *new* overlay modal to enable secondary verification, which is optional. Recipients receive a one-time code (OTC) to their mobile number and would be required as additional security. This minimizes e-Transfer fraud, as money cannot be accepted by answering the security question alone. 

Explanation: In the next step, users verify their information, but the current screen is once again crowded. This redesign addresses the section spacing & user control, with links that provide users an opportunity to make any changes if required, including a toggle switch that enables/disables the secondary verification.

Explanation: In the last step of the e-Transfer, the current screen communicated the same information as the previous step, and this redesign displays what is important for the users: the confirmation code, the amount sent and how the recipient would be notified of this transaction.

Design Constraint

I encountered a design constraint while exploring ways to provide secondary verification as additional security. Although a one-time code (OTC) can help combat fradulent activity, the input field to enter this code must be integrated into each bank's online system and may not be feasible. However, I still redesigned the initial screen that appears when receiving an e-Transfer and added this input field for visualization.

What did I learn?

As a personal project, I learned that much more is required other than just an interface redesign. There were a few key learnings that I gained from doing this. 

1. Gather background data: Redesign opportunities require data to support the "why should this be redesigned?" rationale, otherwise, it results in only a UI redesign rather than a UX/UI redesign.

2. Don't overhaul completely: Redesigning screens with new components for companies could be visually pleasing, but changing every pixel may stray away from how the company communicates its brand.

3. Redesigns take time: I began this redesign thinking that finding data, designing and then communicating the rationale would be easy, but it was more complex and time consuming. I found myself slowing down to continually validate my decisions to understand its effect to the users.

Copyright1-2
Email1