Dashboard Design

A dashboard design using Axure for a personal financing and budgeting website.

Problem: It is a tedious task for individuals to track the activity of various bank accounts like personal, savings, and credit card; and get the complete picture of their financial status at a glance. One has to login to individual bank sites to check that particular bank activity and then login to another to check other.

Solution: A personal financing and budgeting application allows user to have a central place to track down all of their financial activities. This dashboard provides a complete financial picture to a user who has multiple accounts and finds it difficult to track all. It eliminates the hassle of logging into individual bank websites and applications looking for specific information from a specific account.

Goal: The goal was to design a dashboard for a personal finance management website. This is an analytical type of dashboard that helps user by providing an overview of all necessary information they need to know in order to maintain a healthy financial status.

Features of the Dashboard
  1. • To be able to check all account information at one central location.
  2. • Browse through recent transactions from all accounts.
  3. • Check spending patterns to cut down costs and increase savings.
  4. • Check if there are any upcoming bills due for payment.
  5. • Check budgets and credit score.
  6. • Get alerts and helpful tips.

Color selection for dashboard
The dashboard prototype has four colors excluding white and black. The panels headers have a green background as green symbolizes money and finance in many cultures. The four colors are red, green, blue and orange. Red, green and blue being primary colors while orange is secondary. I tried to keep the total number of colors and contrasts to a minimum following Shneiderman’s color guidelines. There is adequate contrast between the text and the background. The text in the dashboard follows the rule of legibility which states dark on light is better than light on dark in case of text. Green and red are contrasting colors hence used in bar graphs depicting contrast nature in the ‘Cash Flow’ section. Whereas, progress bars in the ‘Budgets’ panel are related so they have the same color.