Personal Online Banking – Launchpad

Launchpad is a pre-built online banking portal, which comes packed with ready-to-use templates and widgets. Launchpad is a design for the next generation online banking experience. I lead the design of Launchpad to deliver the best user experience for people to manage and understand their financial status.

The prototype is created using HTML, javascript and CSS. The template is built based on Bootstrap and the data visualization is using d3.js.

You can play with the finished prototype here.→

This is only a prototype, it doesn’t have to be perfect, it suppose to quickly make something to demo and test.


You will see a dashboard after login. There is a summary of all your accounts to help you understand your total wealth and how much is safe to spend. All account information are summarized by cards. You can see the current balances of your account, pending transactions and available balances. Tags on the top right tells you the account type. You will also see a spark-line of your account balance to help you easily understand your account trend in couple months.

You can also analyze the top spendings of your accounts. Dashboard also include your pending bills, aggregated account balance chart and offers from the bank.

In the bottom, you can see a summery of where you money goes. You can also customize the dashboard by clicking the “customize” link on top right and drag and drop to reorder the widgets.

Account Detail

You can get to account detail page by click the account name in the dashboard or from the sidemenu. You can view the top spending categories in a donut chart. You can also see the 3 months transactions in bar chart. All the transactions in the bottom are summarized in cards. All of the data are related and linked. You can hover over or click the top spending donut chart to filter the transactions. You can easily understand how much you have spend in that category, in which days and which transactions.

Transaction Bar Chart

The bar chart helps you quickly understand your spendings trend. You can also hover or click the bar chart to filter transactions in that specific date. When you hover, you will view all the transactions and spending categories of that day.

Drag & Pan Filter

You can drag and pan to filter the bar chart by dates. This is especially useful to find transactions within a week or couple days.

Views of Transactions

You can see different view of the transactions in cards, list or vertical timeline.

Transactions Details

Click the card to view details of the transaction. You can see the description of that merchant, your average spending and budget in that category. You can also find the location of where the transaction happend in a map.

  • Jonas Nieminen

    great stuff, for sale?

    • yang140

      Sorry, Not actually