While RBC's online banking website is quite robust and offers many details and insights, it is quite cluttered and confusing. With RBC 2050, we wanted to create a new, revamped banking platform that allows for the clearest, most cohesive, beneficial and easy user experience.
We started by reducing and cleaning up the login screen to create a simple and straightforward screen, while still keeping the original's options, only less cluttered. "Create an account" has been grouped with "other online services".
Once the user has logged in, they are brought to their dashboard. The first important difference with RBC 2050 is that everything happens on the same page thanks to the use of modals. No more going back and forth between pages, timing out, resubmitting forms, etc. Everything is easy to read and use and all of it is available to the user one click away.
- My accounts: the user can view all their accounts on the dashboard, including banking, piggy banks (more on that later), credit cards, and savings&investments.
- Pay bills: the user can transfer money between accounts and pay bills.
- Interac eTransfer: previously a bit more of a hidden and confusing feature on RBC's current site, seeing how often we send eTransfers today we felt this feature deserved a clearer spotlight.
- Global money transfer: the user can send money to accounts with currencies other than CAD.
- NOMI insights: the user can view key and useful insights and tips about their money and spending
- Need help, contact, log out -Updates: a live feed of RBCs twitter for the user to stay up to date with the latest news from RBC, all on their banking home screen
On the dashboard, all of the user's accounts have been displayed in cards, which are clearer and easier to understand than the simple cluttered tables of RBC's current online banking. Clicking "view details" shows a summary of the most recent transactions associated to that account, as well as key stats and information about it, such as 30-day difference and largest purchase.
Piggy banks, a new feature, are made for users to be able to easily save up for their personal goals. They can "contribute" to them without having to create new physical RBC bank accounts; it is a virtual separation of funds, allowing them to more easily keep track of their money and their budgets, without having to keep notes and spreadsheets or other messy things of the sort. It all happens on their dashboard in an easy to use and easy to read card. They can add as many cards as they want.
Credit card details show a summary of transactions, important data and insights, as well as a new "Pay now" feature. Instead of having to switch between pages, make calculations, resubmit forms and re-sign in, you can now just click "Pay now", select an account to debit and the amount you would like to pay, and it's done! All from the same screen on your credit card's details card.
Lastly, the investments cards show key details and keep track of the users investments, including recent gains and losses.
Adding a new card or account to any of the above is simple, simply click on the "add a new" button to the right and it will guide you through the right steps.
We used the Argon CSS Bootstrap template as a base for our work, making it our own by customizing the CSS and template components in accordance with our project's style. We also included our own Javascript to implement a more smooth experience by allowing for dynamic actions to what were static components.