OVERVIEW
I used Figma to create the design specification and prototypes.
COLORS
Accessibility Tool Adobe Color for checking color blind safe
I checked the Contrast Ratio by Contrast checker:
#1A479E (Foreground color) and #FAFCFE (Background color) is 8.37:1
#F6EACB (Foreground color) and #1A479E (Background color) is 7.19:1
TYPOGRAPHY
MOOD BOARD
ASSUMPTIONS
The citizen bank is a Canadian national bank for day-to-day banking needs. The Citizen bank provides security, convenience, and accessibility to individuals in terms of managing financial requirements. Individuals can keep track of their money and plan to save or spend it.
Have smooth money transfers between their internal and external accounts.
Well-organized and manageable dashboard for their bank accounts.
The account holders can get their monthly account insights, which allows them to manage their money in and out to spend and invest in what matters to them.
The website has lots of tooltips for typical and immigrants to learn faster.
Mid-Fidelity Prototype
Home page
Sign in page
Dashboard
Confirmation page
Dashboard activated
Account detail page
High-Fidelity Prototype
Dashboard webpage
Account detail webpage
References
https://material.io/
https://webaim.org/resources/contrastchecker/
https://www.rbcroyalbank.com/personal
https://unsplash.com
https://support.google.com/chrome/answer/157179?co=GENIE.Platform%3DDesktop&hl=en#zippy=%2Cwebpage-shortcuts
Justifications
There are many tooltips on the website's interactive elements, such as text fields, which help new users and seniors learn and interact with the website with no/fewer errors.
The users' dashboard has a section for account insights based on users' incoming and outgoing money. The visualized data can support the customers' financial decisions. The users can see where they spend their money and get recommendations on investing opportunities.