Simplifying our day to day banking needs and providing a transparent system helps consumers in understanding their financial well being. With a new and improved consumer-friendly application, consumers can now focus on financial freedom and set goals to achieve them. In this case study, we will go over my process, research and design efforts in designing an all-new mobile application for the next generation.
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 interactions which would make the app more approachable and user-friendly. To begin with, the app is in dire need of a login page as without one the user is perplexed about their first few interactions with the app. Once the user logs into their account, the landing page is pre-filled with multiple investing tabs which may not be the goal for 90% of their consumers. It is rather daunting to stare at an overwhelming amount of information and in some cases, this can act as an obstruction for the user from achieving their desired goal.
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 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 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"
Wireframes help in getting a visual representation of the re-design app and any new features specific to the personas. My choice of wireframing tools for this project was Sketch and Moqups. Coming up with multiple wireframes helps in validating user flows, experience. This process helps in synthesizing the app features before moving onto the design part of the project.
Kano Analysis helps in quickly analyzing consumers desires, requirements and excitements. By doing this, we can focus on the basic requirements which help most of the personas in completing their tasks.
Pay Bills Send
Add interact transfer details
Remember account number
Touch ID to login
Open an account
Quick view of your accounts
Pre-authorized bill payments
Rewards for purchases Custom savings accounts No fee for money transfers iPad App Apple Watch App Apple Pay Android Pay Live chat
Transaction notifications Device optimization Cross Border banking
The existing app had a complex flow that made the consumer 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 redirecting the consumer to five different pages, this decreased the bounce rate when compared to the existing app.
With the wireframes already designed on Sketch, revisions and re-designing made simplified as I moved onto high fidelity mockups. Next setup was a create a design system, which would make the design process quick & easy.
Sketch mirror app for iOS & Android gave a better look at the visual parts of the app like colors, text legibility, and navigation. 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 prototype using the designs. Once implemented, using the Principle iOS app I have tested the UI interactions on the dashboard, cards swiping, scrolling, goals and other pages with the help of existing TD banking users.
Chair image, logo and name are
property of TD Bank Canada.
What I have learned
Creating an interaction prototype elevates the design process. As a designer, I could experience the app before it's being developed. This helped me to define the UI/UX interactions throughout the design process.