Overview

Over a 7-day period, I conducted a personal project on TD Canada Trust, the Canadian subsidiary for TD Bank. Through a heuristic evaluation of their online banking website, EasyWeb, I found an opportunity to assess & redesign the login & overview screens, and overall e-Transfer experience.

Role

UX/UI Designer

Scope

Heuristics & Redesign

Timeline

7-Days

Tools
Icon2

Background

TD Canada Trust ranked third in customer satisfaction among Big Five Banks for 2021, but sixth including midsized banks. Although the study measures factors like convenience, products, and channel activities to calculate ratings, I assumed channel activities (online banking) to be an area that may benefit from improvements. Focusing on TD's customer experience is vital in order to not fall behind their competitors.

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

EasyWeb & Interac e-Transfers

EasyWeb is TD's online banking website where customers can perform all of their banking needs. It allows for Interac e-Transfers, a funds transfer system between accounts, and I discovered reports of e-transfer fraud where funds weren't properly arriving to their recipient [1]. Therefore, I believed that conducting a heuristic evaluation could validate the "why" behind my redesign decisions and improve the experience.

EasyWeb-Icon-1
Inter

Proto-Persona

To advocate for the user while conducting my heuristic evaluation, I created a proto-persona, aka an assumption of a TD customer; they regularly monitor their bank account details & conduct e-transfers. However, they're unsatisfied with their online bank experience as they've previously faced e-Transfer fraud.

TD-Proto-min

E-Transfer Task Flow

How do e-Transfers work? To illustrate how our proto-persona logs in to their account and then sends money via e-transfer to a new recipient, I designed a task flow diagram. This flow is used to assess the screens that I would be conducting a heuristic evaluation on.

Task-Flow-TD

Heuristic Evaluation & Redesigns

Heuristic Evaluations is a tool used to help validate a redesign, but specifically, it's an overall review of a digital user interface design, with regards to the user experience. For each screen in the task flow, I assessed them against ten common usability principles to find usability issues, accompanied by an explanation.

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. My redesign addresses this to specifically indicate what is incorrect, so that users are advised what needs to be fixed.

Task-Selection-New

Explanation: This is a newly-designed screen providing users with different tasks to select from upon login, saving time that would be spent navigating through multiple pages to land on a specific page.

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as the contents in the side navigation bar are overwhelming (1), and the account details don't provide enough white space (2). My redesign increases the screen space & visibility by moving the navigation bar to the top, sectioning off related account details (with increased headings), and creating a new section to view recent transactions.

Explanation: This screen violates the "Visibility of System Status" and "Aesthetic & Minimalist Design" heuristics, due to the progress bar's poor visibility (1), and the absence of instructions on how to send an e-Transfer (2). My redesign increases the progress bar size and improves the e-Transfer section so users know what to do, and not become overwhelmed by the current screen.

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic, as the input fields to add a new contact are separated by text, which may cause confusion. My redesign simply moves the input fields closer together, effectively communicating a straightforward task for the user to complete.

ExplanationThis screen violates the "Aesthetic & Minimalist Design" heuristic due to the number of input fields and drop-downs that the user has to interact with. My redesign improves the lack of spacing for the current screen and removal of the 'message' field; it's unnecessary if the security answer needs to be externally provided to the recipient (ie. text message).

e-Transfer-Verify-New

Explanation: This is a newly-designed modal that appears after the previous screen. Users can enable an optional, secondary verification to send a one-time code (OTC) to recipients' mobile for additional security.  This minimizes transaction fraud, as both a correct security answer & code are required.

Explanation: This screen violates the "Aesthetic & Minimalist Design" heuristic as there is a lack of spacing that may delay users from verifying their details. My redesign increases this spacing and provides user control, with links allowing users to return to the specific screens to make any changes. In addition, I designed a toggle switch to enable or disable the secondary verification.

Explanation: In the final screen, it violates the "Aesthetic & Minimalist Design" heuristic as it displays the same details as the previous screen, which becomes redundant. My redesign shows what is truly important for the users: the confirmation, amount sent and how the recipient would be notified of this transaction.

Design Constraint

And that's a wrap! Or so I thought. I faced a design constraint involving the one-time code as I finished my redesigns; although it acts as additional security that can address fraudulent activity, banks must provide an input field for recipients to enter the code into, which may not be feasible. Nonetheless, I designed the initial screen that appears when a recipient were to acquire their money.

What did I learn?

I found that undertaking a heuristic evaluation and redesign as a personal project was more than just redesigning for the sake of it. It definitely required additional critical thinking and analysis to present and validate why I redesigned specific elements, and how it will provide value for the user.

Specifically, I learned to: gather background data, as it helps confirm reasoning behind a UX/UI redesign rather than just UI, take my time, especially when validating redesign decisions, and lastly, keep the brand consistent, as an overhaul redesign would completely stray from how branding is currently communicated.

“Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

“If you can't explain it to a six year old, you don't understand it yourself.” - Albert Einstein

© 2021 Anthony Chow