FinTechna UI Kit is a self-initiated project to reconnect with my design process and further enhance my expertise in creating products related to financial technology. This project is an opportunity for me to explore FinTech landscape, and stay updated with the latest trends. It has been invaluable for enhancing my creativity and technical skills in the evolving FinTech industry.
Objectives
Create interaction that is clear and intuitive by design user flows
Design information architecture where content and screen would make sense
Build a solid design system that will create an experience that is cohesive and aesthetically pleasing
Make a UI that is re-usable by FinTech companies that is looking for UI for their product ideas
Research
FinTech product is pretty common is something I frequently use so it should be easy to design yet there are things I want to exand and in order to learn those things I have to do research.
The research involved in this process includes listing critical questions, look of answers to each questions and doing study of competitors/similar products.
Companies
Strength
Weakness
Opportunity
BPI
Great navigation
Gives user options to design
Fast and seamless login using FaceID
Has investment
User could manage debit and credit card
Pay bills on the app
User could subscribe to investment
User requires many steps to make transactions
Confusing navigation hierarchy
Poor visual contrast
Visual hierarchy could be improve
Difficult to read
Inconsistent visual design
Doesn’t feel cohesive
Typography could be better
Improve navigation contrast
Not focus on essential features
Feels bloated
Some good features are hidden and not prioritisings which user would care the most
Bad information architecture
Confusing investment feature
Redundant content architecture
QR code in under utilized
We could make our navigation clearer
Utilize to QR generator since most people are using it for seamless transactions
User could do investment using the only app
Use could login immediately using FaceID
Gcash
Great flow of borrowing money
Great contrast and hierarchy
Transparent transaction history
Allow stocks tradings
Different ways to make investment
Great transfer screen
Complex loan process
Feels bloated
Too much features that is not relevant
Messaging is used as notifcation
Inconsistent UI layouts
We could implement utilize QR in same way
Use their flow when making loans
I like how they listed the top banks to make quick select where to send the money
We could simplify the loan process and use the steps that are safe
Unionbank
Great pay bills flow feature where they are showing the recent
User could save account
Great animation
Great use of branding
User could create account online
Complex interface when sending and receiving money
Limited Features
Maybe user could make transaction again to the recent payments
We could so last bills into list instead of swipe
Use their sorting of transactions
Show ATM locations?
Maya
Beautiful user interface
Strong branding
Great emphasis on cash in and sending
Amazing crypto trading
Real time chat support
Consistent visual
Strong branding
Might be too minimalist and unfriendly for technophobes
Too niche
Can have usability issue for technophobes
We could create the account section section as wallet that shows the account balance
We would emphasis the receive and send money button
Below are the features that the company want to focus on
Use their Crypto for the userflow
Metrobank
Easy biometrics login
Has bank essential features
Poor visual hierarchy
Difficult way sending money
Bad button usabilit, feels to small
Repeated navigation
No search bar in some interaction where I have to find names such as bank
Shortcuts and navigations are basically the same
Take advantage of using QR Code when sending or receiving money
Create a favorite section to whom user frequently make transactions
Make hierarchy better
Make cohesive UI elements based on brand guideline
Make existing bank features more visible such load and insurance
Combine billers and pay bills
Move to dashboard essential features
Features
BPI
Unionbank
Gcash
Maya
Biometrics Login
OTP Login
Loan Online
Pay Bill and Buy Load
Set transaction limits
Online Support System
Crypto Trading
Stocks Trading
Create Bank Account
Insurance
ATM Locator
Receive Money (QR)
Send Money (QR)
Investment
Request Money
To conceptualize and identify features of the product, I conducted a discovery phase. By using user stories, information architecture, user flows, gathering UI patterns, and wireframing, I was able to create concepts for the FinTech UI Kit.
Story
Solutions
I want to be able to pay my bills within the app so I don’t have to use other apps to do it
Show account balance on top area
Add their name and account number
Maybe show also their last previous transaction
I want to see my credit card outstanding balance so I know if there is an amount that I have to this month
Show on homescreen their outstanding balance
Perhaps show aswell their current limit
I want to be able to pay my bills within the app so that I don’t have to use other banking apps or go to payment centers
Add pay bills
Give user option to save a billers they often make transaction to\
Maybe add notification if they have to pay a biller on specific day
I want to make seamless transaction using QR code so I don’t have to share my account number
Allow to receive or send money using QR Code
Add scanner when sending money using QR
Allow to import a QR if they don’t want to use their camera
I want to immediately access my account without entering password and constantly tapping use of biometrics
Send OTP to phone number
Give option to set their Biometrics
I want to easily track my daily transactions so I can view expenditure today
Add transaction screen
List all the transactions done for today
Allow user to filter based of specific date range
Give them option to down the transaction history
I want to do trading such as stocks and crypto currency
Add transaction screen
List all the transactions done for today
Allow user to filter based of specific date range
Give them option to down the transaction history
I want to make loan so I could borrow money immediately in case of emergency
Add transaction screen
List all the transactions done for today
Allow user to filter based of specific date range
Give them option to down the transaction history
I want to get notified when I there is transaction in my account so I can immediately see if someone hacked my account
Give notification setting
Give them option to get notification via SMS, Email or directly on their phone
Listing all the possible content gathered from research, and later organize them into a set of screens.
Organized the content into information archecture.
Using user flows to understand the interactions of key interactions that user would frequently use.
Curated various UI patterns to make sure that user feel familiar with the design based on fintech mental models.
Create set of low fidelity wireframes to conceptualize and experiment in creating various concepts
Setting the Figma's typography, variables, auto-layout, and grid for hi-fi mockups.
Visual Design
The visual solution for FinTechna is a straightforward UI that users can easily modify and reuse in their own products. To develop the visual design, I used a stylescape to define the style and ensured that frequently used components were converted into reusable elements. Additionally, I meticulously set up UI elements such as grids, typography, and colors, making them ready for immediate use by anyone using the UI kit.
List all the key components and UI elements that will be part of the design system
Instead of adding visual to each screens, I usually use stylescape to decide which visual direction the project will follow when adding visual to the hi-fi wireframes
Created base components for design system, this will eventually scale while working on project.
Urbanist
Urbanist is a low-contrast, geometric sans-serif inspired by Modernist typography and design. The project was launched by Corey Hu in 2020 with 9 weights and accompanying italics. Conceived from elementary shapes, Urbanist's neutrality makes it a versatile display font for print and digital mediums. It is currently available as a variable font with a weight axis.
Extra Light
Medium
Thin
SemiBold
Light
Bold
Regular
ExtraBold
Title
Heading One
Heading Two
Heading Three
Body Main
Body Small
Caption One
Caption Two
Filled
Ghost
Clicked State
Disabled
Placeholder
Typeing something
Success
Error
Login
Username
Password
Forgot Password?
Login
No account yet? Create one
As the project expand, so is the components, design system is like a living things that grow while the design scale as well.
Visual
Onboarding
Using onboarding, the UI could introduce key features and functionalities, helping them understand how to navigate and use the product effectively.
Walkthrough 1
Walkthrough 2
Walkthrough 3
Login
Login screen focus on ensuring that only authorized users can access their financial information and perform transactions. This is design in making the login process quick, easy, and intuitive. This includes password recovery options, and error validation messages.
Face ID Login
OTP Login
Change Password
3
Homescreen
The home screen of a FinTechna app provide access to various financial services and features such as loan, cryto trading, card management, send or receive money, make investment etc.
Transactions
Notifications
Idle Prompt
Card
Control
The card control on FinTechna app give users comprehensive management capabilities for their payment cards, enhancing both security and convenience.
Disable Card Confirmation
Disabled Card State
Set Withdrawal Limit
5
Transfer
Money
The transfer money enables users to conveniently send and receive funds between their own accounts, to other users, or to external bank accounts.
Send to same bank
Send to another bank
Enter recipient details
Transaction Status Prompt
6
Crypto Trading
Most FinTech has crypto trading, it offers opportunities for investors to participate in crypo trading.
Buy / Sell coin
Coin profile
Buy coin
Transaction Status Prompt
7
Account Settings
Account Settings serves as a key page where users can manage and personalize their account preferences, security settings, and other related options. It is designed to offer users control over their account details and enhance their overall app experience.
Disable Biometrics Login
ATM / Branch Locator
Enable Location
ATM / Branches Result
FAQs
Need Design Help?
Hire Me