National Bank

Track and manage your money easily

Project Overview


Why I made this project?

I focused on improving this application because for many people, tracking their expenses is very important. The goal was to improve the interface so that users could more easily find their transactions, without having to look at previous months' statements. I wanted to offer efficient design with a modern aesthetic.

Where: Toronto
What: App IOS
Why: Portfolio Project
Role: UX Designer
Category: Finance
When: July 2022

Market Research


The claim

The online banking market was $11.43 billion USD in 2019. The market is projected to reach $31.81 billion USD by 2027.

Market Opportunity

More and more customers want autonomous management of their online bank accounts. They want hassle-free, reliable security, and to make payments quickly. 


The transaction search is very laborious, users need to remember the card they used, select a period with precise dates and browse the result list. It is not possible to search by keywords in a search bar. There are also reliability issues with respect to check cashing.

Comments on App Store

I've tried on multiple occasions to add money to my account, both through e-transfers and mobile deposits. There is ALWAYS a technical error which is incredibly frustrating. Tried as well to accept the e-transfer through the desktop website and the page just loads for minutes without any results.
Jonathan. V
The App is extremely slow! The account summary shows up fairly quickly. The problem is viewing the account details. This is the worst banking App I've ever used. Everything with NBC is just slow. I have restarted my phone and uninstalled the App many times. I'm still experiencing the same issue.
Harold. F
Not great. So many bugs, often doesn't let me access. Layout is very confusing and after several months using it daily I'm still not satisfied. I can't clearly read my balance at any given date in the past as I used to. I've flagged some issues but only got a generic answer.
Christina. K
I enjoy every moment of it. What has amazed me the most is how easy it is to access the service at all points of contact. Keep it up guys!
Michael. Y

Competitive Analysis

To begin with I analyzed the National Bank's app and 3 other online banks (Scotiabank, RBC, TD Bank) and found out the negative and positive comments.

National Bank

  • Easy to access the different bank accounts
  • Payment of bills and transfers is very simple
  • Authentication with fingerprint is very fast
  • The general navigation is quite simple
  • Mobile friendly
  • Difficult to find an old transaction
  • Difficult to block or configure your card

  • Many features are not easily accessible

  • Loading times are sometimes long


  • Regularly improves the user flow
  • Clean UI
  • Mobile friendly
  • User Friendly
  • Fast loading time
  • Helps to track expenses
  • Change of layout too frequent
  • Some technical bugs
  • Check cashing doesn't always work
  • Problem of authentication to the application


  • User friendly
  • Clear navigation
  • Update that seems to have fixed many bugs
  • Tracking of your credit score
  • Mobile friendly
  • Authentication problem
  • User interface looks old
  • Many users are unhappy
  • Security methods are very strict
  • Long loading time
  • E-transfer is not always reliable

TD Bank

  • User friendly
  • Reliable check cashing
  • Fast loading time
  • Security effort
  • Authentication problem
  • The User Interface is outdated
  • Problems with technical reliability
  • Functionality is not always intuitive

User survey

I conducted a quick survey, with 10 people who use their online banking app at least once a week. I asked them "What features should be most important in your online banking application?"

Additional Comments

It is very important for me to be able to find my recent transactions in order to do my accounts during the month.
Jenny. T
When I take the transport I would like to disconnect the contactless payment, because I am very suspicious of bank card hacking with the contactless option.
Diana. V
I sometimes look for my bank card, because I am forgetful, it would reassure me to be able to block my card when I think I have lost it and reactivate it when I find it.
Maria. R

Research Conclusion

There is a strong interest in being able to set up your bank card independently. In particular to deactivate and activate contactless payment.

Participants also want to find their old transactions and see their recent transactions


I created 2 personas based on two categories of users of the bank app. Marth Lyn who wants to easily track his expenses and Adam Taylor who wants to easily transfer money and control his payment cards.

Flow Diagram

To understand the basic features I started with a simplified flow diagram with the most important actions a user can perform once logged into the application.


After creating the flow diagram, I continued with the wireframes of the most important screens.


After the flowchart and wireframes, I chose an Apple "SF Pro" font. I then determined colors inspired by the national bank's brand image.

Alignment and grid

To respect proportionality, I chose a grid composed of multiples of 8 for this project (8p,16p,24p,32p,40p)

Accessibility Evaluation

Contrasts were tested to meet WCAG AAA or AA standards.

I researched and improved the color choices until I had satisfactory colors for high-fidelity prototyping.

Project Summary

Conducting research on the banking app market was necessary for the National Bank project.

A quick online survey of banking app users was conducted before continuing with a diagram, and then low-and high-fidelity prototypes.

The project culminated with a quality assurance audit on the colors and contrast ratio in order to comply with WCAG standards and provide better accessibility.