TD Canada Trust

Over the period of 7 days, I completed a heuristic evaluation on TD Canada Trust's online banking website, EasyWeb. Using research that is indicative of customer frustrations, I found an opportunity to improve the user experience for the login and e-Transfer flows.

UX/UI Designer
Personal Project
Heuristics & Redesign
7 days


A 2021 study revealed that TD ranked 3rd in customer satisfaction among the Big Five Banks, but 6th when including mid-sized banks. Level of satisfaction could result from factors such as convenience and products offered. However, for this personal project, I made an assumption that channel activities (i.e. online banking) was an area that could benefit from improvements.

Insights into Opportunity

Focusing on the customer experience is vital in order for TD not fall behind their competitors. Therefore, I was determined to figure out a solution in the digital space, and wondered:

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

EasyWeb & Interac e-Transfers

EasyWeb is TD's banking website where users perform all of their banking needs. This includes Interac e-Transfers, a funds transfer system between accounts. With reports of e-transfer fraud, (funds not properly arriving to the recipient), I felt that this online service was a pain point worth redesigning. However, a heuristic evaluation was first required to validate the "why".

The Proto-Persona & Their Experience

To advocate for the user while conducting my heuristic evaluation, I created a proto-persona, an assumption of a TD customer based on my research. This person regularly monitors their bank account details & conducts e-transfers. Having faced e-Transfer fraud has led to a negative experience with TD's online banking service.


How do e-Transfers work? To illustrate this experience, I designed the task flow diagram below of a user who logs in to their account and e-transfers money to a new recipient. This flow is used to assess the screens that I would be conducting a heuristic evaluation on.

Task flow diagram

Heuristic Evaluations & Redesigns

Heuristic Evaluations is a tool used to help validate a redesign. More importantly, it's an overall review of a user interface, with regards to the user experience. Below, I assessed each screen in the e-Transfer flow against ten common usability principles. If there are any usability issues, I redesign the screens accompanied by a rationale.

1. login screen (BEFORE)
1. login screen (After)

Rationale: This screen violates the "Help Users Recognize, Diagnose & Recover From Errors" heuristic; the error message doesn't inform which input field is incorrect. My redesign addresses this to specifically indicate what is incorrect, so that users know how to resolve this.

2. task selection screen *NEW*

Rationale: This is a newly-designed screen for users upon login. Different tasks can be selected, which saves time from navigating through other pages to land on a specific page.

3. overview screen (BEFORE)
3. overview screen (After)

Rationale: This screen violates the "Aesthetic & Minimalist Design" heuristic; the side nav bar appears overwhelming (1), and the account details don't provide enough breathing room (2). My redesign increases the screen space with a top nav bar, grouping of related account details (with larger headings), and a new section to view recent transactions.

4. e-Transfer start screen (BEFORE)
4. e-transfer start screen (After)

Rationale: This screen violates the "Visibility of System Status" and "Aesthetic & Minimalist Design" heuristics; the progress bar does not stand out (1), and there are no instructions on how to send an e-Transfer (2). My redesign increases the bar visibility and improves the e-Transfer section to be simple and easy-to-understand.

5. e-transfer add contact screen (BEFORE)
5. e-transfer add contact screen (After)

Rationale: This screen violates the "Aesthetic & Minimalist Design" heuristic; the input fields are separated by text, which could cause confusion. My redesign moves the input fields closer together and properly communicates how to fill out this step.

6. e-transfer select recipient screen (BEFORE)
6. e-transfer select recipient screen (After)

Rationale: This screen violates the "Aesthetic & Minimalist Design" heuristic; there are too many input fields and drop-downs for the user to interact with. Staying consistent with the previous redesigns, the screen's spacing is improved once again. The 'message' field was also removed, since the security answer would need to be separately provided to the recipient anyway.

7. e-transfer secondary verification modal *NEW*

Rationale: This is a newly-designed modal that appears after the previous screen. Users can enable an optional, secondary verification that sends a one-time code to the recipients. This reduces transaction fraud, as both the security answer & code are needed to accept the money.

8. e-transfer verify information screen (BEFORE)
8. e-transfer verify information screen (After)

Rationale: This screen violates the "Aesthetic & Minimalist Design" heuristic; a lack of spacing increases content overload and delays users from verifying the details. My redesign improves this spacing and provides user control; users can return to the specific screens to make any changes. In addition, a toggle switch to enable or disable the secondary verification was also designed.

9. e-transfer confirmation screen (BEFORE)
9. e-transfer confirmation screen (After)

Rationale: In the final screen, the "Aesthetic & Minimalist Design" heuristic is violated; the same details are shown in the previous screen, causing redundancy. My redesign shows only the important details: the confirmation #, amount sent and how the recipient is notified.

View Interactive Prototype

Dealing with a Design Constraint

I faced a constraint while designing the e-Transfer Secondary Verification modal. Although the one-time code is an extra layer of security that can address fraudulent activity, banks must have an input field for the recipients to enter the code into. This may not be feasible. However, I decided to redesign the screen that appears when a recipient accepts the e-Transfer.

e-transfer receive money screen (BEFORE)
e-transfer receive money screen (After)

Project Takeaways

Completing this heuristic evaluation and redesign as a personal project felt like more work than initially thought. It required lots of critical thinking/analysis to present & validate the reasonings behind my redesigns, and how it provides value for the user.

Specifically, I learned to:
Next project