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.
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.
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:
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".
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.
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.
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.
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.
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.
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.
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.
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.
.png){kind=spacer}
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.
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.
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.
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.
