Payroll Mobile
Payroll Home Page
Income graph module
ING Payroll Home page
Mobile first responsive web redesing proposal for the payroll home page.
Designed with modules .
Content:
-
Navigation header with these sections: Home, Payments, My Products, ING Offer, ING Services
-
Account name, IBAN, entry point to further details (as account holder, BIC…)
-
Balance + currency
-
Chart about balance history, chart about expenses/incomes
-
Banner (just place an empty box, you don’t need to design it)
-
List of transactions with filtering options
-
Entry points to different pages / processes you can perform from an account: make a transfer, manage direct debits, download list of movements, pay taxes, bring my bills to the bank, account documents, request a credit card, close account.
Income graph module:
We have two buttons to select. Right now it is selected "Current" its active class is purple and when it is not activated, gray.
If we select general transactions, this will appear horizontally before being displayed. Once deployed, changes its position to vertical. When it is not displayed, you can see a bold h5, designed to inform the type of movement that we are analyzing. A small graph that estimates the proportion that corresponds to the total expenses, and the balance to which it refers.
When deploying the accordion, a more advanced graph appears in which we can analyze the most detailed movement, by weeks or by month.
Clicking on these buttons changes the graph. The graph has two corporate colors, the orange to indicate the highest balances and the purple to indicate the lowest balances, When clicking along the line of the graph we can go consulting the corresponding movements that appear in a small white button. We also have small indicator of the date referred to by the movement next to a calendar icon. On your right, a button for the download functionality of the graph.
All this functionality will be repeated in the same way, on desktop design.