Banking
made easy

The TD app provides quick, easy, convenient and secure access to the customers TD chequing, savings, credit, and investment accounts on the web app, iPhone, and Apple Watch – all at a glance with Quick Access. TD Canada Trust iOS app is a counterpart of the banks existing web app, the mobile application helps online banking users to use the banking services anywhere at any time. Same as any bank mobile app, TD iOS app is packed with many rich features which can help users to quickly access features like sending money, paying bills and depositing cheques right from the mobile app.

Project
University Project
Year
2016
My Role
UI/UX, prototyping
Tools
Sketch, Principle

Current App features
and drawbacks

Current TD Canada Trust iOS app is a well thought out and designed app for their banking customers, but it lacks some basic user experience and features which would complete the app. Starting with no login screen to login into customers banking account is a big confusion as the app directs the user to “Dashboard” page which is same as what the user view after logging into the account and this login page is hidden inside one of the dashboard pages. Once the user logs into the account, the user’s account is pre-filled with multiple investing tabs which are not needed when a user’s account type is just an everyday banking account (TD bank’s naming for an basic account type).

The quick glance view on the top right corner (Dollar sign icon), can be added to the “Dashboard” page with the same data rather than hiding it. This allows the user to limit the number of unnecessary interactions on the app. Apart from these, there are some technical difficulties that the app encounters while depositing check and website redirects on some occasions.

Personas

Richard Hart

Richard Hart is a 23 year old single student from Victoria studying his Bachelors in Science from University of Victoria. He earns $2500 PM as a part-time employee at Super Store. He uses his TD app to do keep track of his student loan account and the money he spends on daily basis. He  is looking for custom savings accounts to achieve his future goals like paying loan and going on vacation.

Gary Peterson

Gary Peterson is a single male living in Vancouver downtown, and he earns $75,000 per annum as a business analyst at Intuit. Gary likes to enjoy his time, so he is less interested in savings and doesn’t worry about spending money. He uses  the TD iOS app sparsely to keep track of his monthly salary deposits from the company, every day purchases and paying his bills instantly using the app. 

Gary looking for much easier way to pay his bills using the app, a way to automate his bills every month so that he doesn’t have to use the app on regular basis and he is also interested in weekly or monthly summary of his account.

Adelle Charles

Adelle Charles is a mother of 2 kids, she spends most of her time with her kids and she manages the household finances. She is busy throughout the day with household activities like cooking, buying groceries and looking after the kids. This limits her time to spend on finances, but she spends 30 mins every month using the TD bank iOS app to pay bills and track expenses. 

Due to the limited time that she has, Adelle is looking for an feature that notifies her on the monthly bills, expenses, online shopping expenses. Along with the notification, she is also interested in seeing a quick graphical representation of how her expenses are scattered in different sections (shopping, bills etc.,). This way she can limit an over expenses like online shopping.

"custom savings accounts to achieve future goals like paying loans and going on vacation"

Wire-Framing

After nailing down on a persona and app analysis, I went ahead with working on the wireframes to get a visual view of the re-design app and new features specific to the selected persona. I worked with Sketch app to come up with multiple wireframes of the app, once completed I validated the screens visual language and user experience using Sketch mirror iOS app on my iPhone. This process helped in making edits to text, icon sizes and hand reach for different quick menu options on the app.

Kano Analysis

As per the persona's requirements, I have laid out a Kano Analysis based on desired, required, exciter and neutral features. Required as the basic features that are a must for all personas, starting from there I have created the entire analysis which became a deciding factor in designing the application that serves everyone.

Required
Login 
Savings Account 
Chequing Account 
Account Balance 
Money Transfer 
Pay Bills  Send
Money

Desired
Statements 
Credit Card 
Account 
Add interact transfer details 
Remember account number
Transaction History 
Bank Locations 
Touch ID to login
Open an account 
Quick view of your accounts 
Pre-authorized bill payments

Exciter/Delighter
Rewards for purchases Custom savings accounts No fee for money transfers iPad App Apple Watch App Apple Pay Android Pay Live chat

Neutral
Transaction notifications  Device optimization  Cross Border banking

Information Architecture

Existing app had a complex flow that made the user feel lost as they navigate through each page. After researching and analyzing other banking applications, I came up with a new flow that decreased the number of taps and inner pages by 60%. For example, sending money to a new account can be done in one page instead of five pages, this decreased the bounce rate when compared to the existing app.

Get to a Working Prototype

Having the wireframes designed on Sketch app has simplified my process of designing the high fidelity mockups as I just had to finalize the grey wireframes and then change the colours and icons accordingly to the brand guidelines.

Sketch mirror app for iOS & Android gave a better look at the app colours, text legibility, and experience. This helped in removing the extra step of user testing the design on mobile devices before moving forward to the development stage.

To provide a much more pleasing and interactive experience, Principle app was used to create an interactive flow using just the images generated from the design. Once implemented, I used the Principle iOS app to experience the app interactions on the dashboard, cards swiping, scrolling, goals and other pages.

Creating an interaction prototype was an eye opener experience, as a designer, I could experience the app even before it is developed. This immensely helped me as the designer to explain the UI interactions without documentation.

Chair image, logo and name are
property of TD Bank Canada.

What I have learned

Rinse and repeat

Creating an interaction prototype was an amazing and eye opener experience, as a designer I could experience the app even before is developed by the developer. This helps me as the designer to explain the UI interactions without any major documentation.

Facebook

TD Bank

Navi