the banking app.
Fundementals of Interaction Design
the banking app. is a banking application designed and catered towards parents of international students and international students. The purpose of creating this application is to provide an older generation of parents ranging from 40-65 years old with a simple and easy to use mobile banking experience. In line with the recent COVID-19 pandemic, many people were under lockdown and could not leave their homes. Due to the intimidating and complicated nature of existing banking apps, older people such as parents of international students may be unfamiliar with them, or perhaps be reluctant to use them. Having to send money over to their childrens' school fees and living expenses, our banking app would be able to make their lives easier by utilizing a clear and user friendly interface.
Apart from its main functionality, which is to pay overseas school fees directly from the app, tba. also focuses on regular global transactions, local transactions, and transactions between accounts under the same name. It also has functions commonly found in banking apps, such as checking account balance, changing account settings app settings, and others.
​
Furthermore, transactions are among the most mentioned words seen in negative reviews on existing banking apps, showing clearly that apps available on the market do not do a good enough job of making their transactions easy to use. Our app will aim to eradicate as many of these concerns and dissatisfaction with transactions on mobile banking as possible.
Process
.jpg)
Screenflow of app
First, a screenflow of the potential screens of the application was put together. This includes key features, basic functions, and how users will interact with the application. The flow of the application and the connection from screen to screen was detailed through a mindmap like structure.
Low-fidelity sketches
A series of rough and high-fidelity sketches were then made of the application, where we could gauge a general idea of the look and layout of the application without having to spend too much time mulling over details.
​
In the high-fidelity sketches, a more complex and complete design of the screens were produced, where potential images, colours, and shapes and placing of buttons were considered.
Sketches
High-fidelity sketches
Wireframe
Wireflow of app
Next, we moved on to Miro to create some quick wireframes. Through creating a wireframe of our app, we are able to get a general idea of the physical layout of our app, including points of interaction that our users will be able to utilize within the app. Our wireframe serves as a solid foundation for the structure of our app, as we developed a wide, horizontal prototype of what various screens of the app would look like in medium fidelity.
​
Given the fact that familiar systems have been found to be easier for users, especially for those of older age, to use, as identified in the first phase of this banking app project, we realise that using existing apps for reference would largely benefit our users in terms of the increasing their satisfaction using the app, as well as reduce the amount of time it takes to learn to use it, hence our decision to take inspiration from popular and well received apps such as HSBC and ANZ.
Mockups
Mockup of screens
Colour Palette
When we were happy with our progress on our wireframes, we moved on to creating Mockups of our app. Deciding on our final colour palette for the app, we were able to define a consistent aesthetic for our app to suit its goal of being clear and straightforward for our users to navigate and interact with.
Final Mockup
Final Mockup of app