ZippiPay
In this day and age of financial technology, it seems as though a new and inventive solution would not surface every day; in fact, the industry has given rise to a plethora of creative niches. I had to try my hand at creating another Fintech experience. I created a digital wallet as a result.
Why?
Basically, it's convenient to have all of your bank's ATM card information in one app, saving you the trouble of opening other bank apps to complete transactions.
It's the FinTech era, and hardly a day goes by without a creative financial technology solution being introduced, to the point where the industry now has multiple innovative subgroups. As a big admirer of Fintech, I couldn't resist creating my own experience. So I created a digital wallet(ZIPPIPAY).There are numerous ways to make payments online, including digital wallets, bitcoin, online banks, and credit cards. However, we'll concentrate solely on 'Digital Wallet'.ZIPPIPAY is an app that allows users to save all bank accounts and ATM cards in one place. So, it's essentially a cryptocurrency wallet app for ordinary bank accounts and ATM cards.
Research & Rationale
Based on research, I observed that most users don't want to be flooded with options and buttons, therefore I wanted to make the process of decision-making easier by decreasing interactions to the bare minimum.
Generally, the app users are:
-
Educated people; students, young professionals and senior executives.
-
The banked population.
-
With at Least a minimum understanding of technology.
There appears to be a gray area regarding the amount of information that should be presented at a glance. I determined that the app's overview/dashboard should display:
-
Card Balance (Total money in card-linked accounts).
-
Individual balance on card-linked accounts.
-
Summarize financial analysis throughout time.
-
Options for sending money or paying bills.
User Flow
The user flow chart for the Zippipay app outlines the journey a user takes within the app from start to finish. Here's the flow:
-
When the user opens the app, they are greeted with a splash screen.
-
If the user has already signed up, they proceed to log in. If not, they fill out a sign-up form.
-
New users then link their bank account and cards to the app.
-
Returning users are asked if they want to enable fingerprint authentication.
-
If they choose to enable fingerprint authentication, they move to an overview screen after a successful login.
-
If they choose not to use fingerprint authentication, they are directed to a login form.
-
After logging in, users reach the overview screen.
-
From the overview, users can opt to send money.
-
To send money, they first choose a contact, then fill out the send money form.
-
After the transaction is successful, users have the option to log out.
Users who have not yet signed up are directed to do so, while returning users are streamlined immediately into the app. The option for fingerprint login focuses on security. The procedure focuses on transaction convenience and security, with clear paths back to key actions and the ability to exit the app.
Initial Sketches
I sketched and designed low and mid-fidelity wireframes for the app's main screens. The goal was to make the user journey as simple as possible, thus I focused on content structure and main features. For optimal space management, I used a grid navigation mechanism for credit/debit cards, keeping user distraction to a minimum.
I have mainly covered three processes:
-
Onboarding
-
Linking a bank account and card with your Zippi Pay account
-
Sending money
Wireframes
Onboarding Process
Link an Account & Card Process
Send Money Process
Design System
-
Color Palette: Selecting a harmonious and accessible color palette, I prioritized tones that not only create visual harmony but also meet with AA criteria, ensuring our designs are perceptible, identifiable, and pleasurable for all users, including those with visual impairments.
-
Typography: The typography style guide for the app makes use of the font pairing Oswald and Lato. Oswald is used for headlines that is ideal for drawing attention. Lato, on the other hand, is utilized for body text which aids readability across a range of text sizes.
-
Iconography: The app's icon set includes a mix of minimalist and modern icons intended to aid user navigation and improve the overall usability of the interface. For these icons, I referred the Bootstrap icons (icons.getbootstrap.com).
-
Buttons: I followed UX rules when creating the buttons and interactive elements to ensure they were responsive and came in a variety of sizes to fit diverse needs. The goal was to create a user-friendly experience for all device kinds.
-
Forms: Design best practices were followed in the creation of the input fields and form templates, ensuring that they performed as intended. They are made to be visually beautiful and useful, which enhances the user experience overall.
-
Alerts: I made sure that the warnings were educational and pertinent to the situation, and I created them to help and direct users at every turn. This makes it easier for users to navigate the app's many features in a seamless and guided manner.
High-Fidelity Designs
