Mobile App is an advanced banking and personal finance tracking application user interface built solely with Adobe XD and Adobe Photoshop. This beautiful template is meant to be a good starting point for your project which you can of course download for free.
The Mobile Payment Application UI template comes with a number of inner pages to get you going and that GUI includes the main home screen where you see all activities of previous transactions directly all in one user interface. The main page comes in two versions.
The first is the Blue UI, which shows past transactional activities in a list format with icons to quickly navigate an older transaction or add a newer transaction via the “+” button right on the main home screen. While the second main page design has the date wheel right at the top of the screen which can be navigated to easily locate the date of a particular transaction.
There are even much more GUI that came with the template which includes:
- A single Transaction page: This page is compulsory and can be used to display the information of that particular transaction that’s being clicked however, from a better UX standpoint, it might be a good thing to make this a “toast” or a pop-up instead of creating an entirely new page for it. That way, users won’t have to navigate to multiple pages to learn more about an individual transaction.
- The New transaction page: This is the interface where the user can create a new transaction. To arrive at this page, the user needs to first click on the “+” icon that opens a pop-up that allows the user to select (1.) Transfer Funds, (2) Recharge their smartphones
- The Transfer Funds Page: This page will be a pop-up that slides up from the bottom of the screen from which the user can select several options to transfer the funds they want to. This is basically a form that includes the following: (1) Select Sender Bank, (2) Enter Recipient Account Number, (3) Enter the amount to be transferred.
- Recharge Smartphone: Just like the money transfer, the account smartphone recharge (mobile voucher top-up) can be done the same way via a form. The difference here is that the color of the form is different. The form consists of the following: (1) Select Bank, (2) Enter Airtime amount, (3) Enter a phone number.
- Miscellaneous Pages: These pages include the settings page, account management, and bank settings. Basically, this application doesn’t require too many pages because it helps users make transactions as fast as possible without clicking too much.
As a developer or a user interface designer, you can tune this template to suit your need which is why all the information needed to understand the design architecture is well placed within the design layers itself.
You’ll be able to download the free mobile payment app UI template using the button below but before that, take a moment to see the narration via a Graphical illustration below. The pages and the elements as they’re being placed within the design but at the end, you’re still 100% in control as to what you’ll like to do with the design.
So feel free to download this payment app user interface template also, comment below what you think about the design and let me know if you want me to help you make tweaks to the design.