Projects
Projects
Home
Bio
Contact
Save Finance
A pocket experience for your everyday banking
Market Research
UI Design
Usability Testing
Accessibility Evaluation
User Flow
High-Fidelity UI
Prototype
Interaction Design
Micro-Interactions
Made in
Figma
Type
Android/iOS App
Reason
Portfolio project
Role
UX Designer
Industry
Banking & Finance
Timeline
4 Weeks
My Motivation for building this project
As a frequent user of banking apps, I have an idea of what I like and dislike about some apps, which led me to create a fictional banking app to practice my UI design skills and come up with ideas of how I could improve one. Although some insights might be biased, as I am the user and the designer, I tried my best to do as much research as possible to mitigate this.
Market research
Six Out of Every 10 Mobile Users Prefer Finance Apps Over Websites
Because of the increased trust in these mobile applications, Google found that six out of every 10 mobile users prefer to use them over mobile websites and other platforms to manage their accounts.
Approximately 90% of Users Use Mobile Apps to View Their Balance.
What many might find surprising is that people don't primarily use mobile banking apps to pay bills or transfer funds, as these actions come later. Instead, one of the key reasons people use these apps is simply to check their account balance.
97% of Millennials and 89% of Consumers Rely on Mobile Banking Apps
Mobile banking applications continue to evolve with the passage of time and continuing technological advancement. As a result, various banks and financial institutions have gradually begun to opt for mobile engagement for financial services.
The problem
Traditional banking methods can be time-consuming and often require customers to visit a physical branch. With the increasing demand for mobility and flexibility, customers are seeking a more efficient way to manage their finances.
Banking Apps Usage
Competitors
Competitor Analysis
3 Apps 3 experiences
In an attempt to understand what other banking apps do well, I analysed 3 banking apps I use personally, and captured the features that make my experience pleasant and hassle free.
I started by asking my self, how do these apps make my life easier and what problems do they solve for me?
The Good
Easy to transfer to anyone, or a specific account (App 1, 2 ,3) Multiple accounts displayed in a list for easy access and visibility (App 1, 2) Transactions are easy to view in multiple categories for quick scans (App 1, ,3)
The Not So Good
Notifications are hidden away (App 1, 2) Downloading statements can be confusing (App 2, 3) no clear signifiers to the different type of transactions (App 2,3)
Research
Trends & Surveys
One major trend that has emerged in recent banking app surveys is the increasing importance of mobile banking to consumers.
According to a 2020 survey by J.D. Power, 61% of bank customers reported using their mobile app at least once a week, compared to 41% in 2015. In addition, 42% of customers reported that their mobile app is their primary method of accessing their account, up from 29% in 2019.
Another trend that has emerged in banking app surveys is the importance of security and trust.
A 2021 survey by FICO found that 63% of consumers ranked security as their top priority when choosing a mobile banking app, followed by ease of use (54%) and functionality (44%). In addition, 72% of consumers reported that they would be willing to pay more for a banking app that offers stronger security features.
Finally, banking app surveys have also highlighted the importance of personalization and customization. A 2020 survey by Accenture found that 58% of consumers would be willing to switch to a new bank that offers personalized products and services, and 47% would be willing to pay more for personalized services. In addition, 54% of consumers reported that they would like their banking app to offer personalized insights and advice based on their spending habits and financial goals.
These are just a few examples of the insights and trends that have emerged from banking app surveys.
Personas
Flow Diagram
Below I outlined some of the functionality of the app, by using user flows of simple tasks that can be accomplished.
Wireframes
After having a clear idea of the possible user flows for the app, I moved to the ideation phase and started creating wireframes.
Hi-Fidelity UI Design Elements and Screens
Once I went through the initial phase of ideation and came up with some wireframes, I started working on my Hi-Fi screens and overall theme of the app.
Color palette
Shadows, Borders & Decorative
Decorative
Typography
Font: Poppins (Regular, Medium, Bold)
AaBbCcDdEeFfGgHh
Iconography
Outline + Solid for different areas
Base size: 16p x 16px
Base size: 24p x 24px
App style considerations
The app style was achieved by using a high contrast color palette to account for accessibility and usability, and maximise the inclusivity and reach of the target users.
App style considerations
Primary Blue to inspire confidence and security.
Dark Grey To maximise contrast on light backgrounds while being aesthetically pleasing.
Tinted White for dark backgrounds and negative space to achieve a clean and harmonic look
I created a total of 22 high fidelity designs
To cover different user flows of popular banking apps, I designed all the necessary screens and elements that would help a user complete a variety of tasks.
8-point Grid Alignment
I chose the 8-point grid for alignment and spacing for this project, as it gives more precision and control to achieve a consistent design. I used the same spacing techniques to establish a sense of Hierarchy.
High Fidelity Prototype in Figma
To give an idea of how the simple user flows work on this particular app, I created a clickable prototype to convey how would the user interactions work while completing specific tasks.
Prototype Link Here
Prototype Validation
To validate different prototype flows, I conducted some usability testing with 3 participants. Each participant was given a subset of the prototype designed to achieve a specific task.
The usability tests were conducted in person, where I asked the participants different questions about what they see and how would they go about completing the task, what they found confusing and what they found intuitive.
Usability Tests Results
(2 out of 3) participants were able to complete the task assigned to them in a short amount of time. According to the participants, the interface was intuitive and had a clear flow to complete task 1 & 2.
The participants however, did communicate their concerns about signing up with social media, because of security risks.
(3 out of 3 participants thought the name for the third tab as benefits, did not make sense for them.
Prototype Update
Participants did not understand what does the tab in their account related to, which prompted me to reconsider naming it to make the relation to the savings benefits clearer and give more context.
Accessibility Audit
After evaluating the app’s accessibility, I came across a low contrast issue that doesn’t follow the WCGA 2.0 standards.
Landing Page
To give the users a complete experience, and drive more traffic to the Save Finance app, I created a landing page with details about the products & services it offers.
Clickable Prototype
Project Summary
In this project, I conducted on a small scale, a market and industry research and viability of the product idea.
I created personas from the insights I gathered during the research phase, to keep the users at the centre of my design and consideration.
To go through the process of validation, I created user flows along side low fidelity wireframes, to test a few of the ideas for the app.
Once I had a clear idea of the screens and designs needed, I established a design style guide to keep the app consistent and design in an efficient way.
I conducted usability testing with a small group of participants, to validate my assumptions, gather more insights and get ready for the next iteration.
I conducted usability testing with a small group of participants, to validate my assumptions, gather more insights and get ready for the next iteration.
Finally, I performed an accessibility audit, to make sure the app is following the WCGA 2.0 standards and is inclusive for a wide range of users.

Tools

Navigate to other projects

HomeAbout