Northend Online Banking Dashboard

Redesign the online banking dashboard for Northend Bank

屏幕快照 2019-12-25 下午3.39.45
Northend Banking Dashboard
屏幕快照 2020-01-12 下午5.17.37
Our client is a regional bank with over a century of banking experience. The majority of their customer base consists of Generation-Xers and Baby Boomers. However, their marketing team has realized that millennials pose a huge opportunity space. In order to tap into new market segments, they have been taking steps to modernize their online and mobile presence.
屏幕快照 2019-12-25 下午4.33.50
The original dashboard
User Definition

Who are the MillennialsBy information and data offered by our client, we found that they are:

● people making more money, but also paying more for debts like student loans

● with poor money management but strong consuming desire

● Thus it is hard for them to build wealth, save for retirement or even save for emergencies
bank mood
Pain Points

We found for most of people in the sample, they were:

● unaware of whether their bank provide tools to save money

● not actively seeking about budgeting tools while agreeing they are really helpful

● rarely reminded about their budget and spending

● mostly mentally keep track of budgeting

屏幕快照 2019-12-30 下午3.48.55
What if we keep reminding the budget and the spending?

● People do care about their budget, but always after over spending

● People tend to be lazy to do the calculation of spending money
What if we put budgeting tools on the dashboard?

● People are lazy to seek budgeting tools, they need handy tools just right there when they need it

● People need to know how much left to make the budget, so banking dashboard, where the account balance is presented, is the "right there"
屏幕快照 2019-12-30 下午3.55.06
What if people's saving plan can be done automatically?

● If it's too hard to overcome the desire of shopping, and there is always debts to pay or need of saving, why not just leave it to the emotionless system


Other than refreshing the UI style, we focused on bringing a handy budgeting tool to help money managing. For the first try, we collected a lot of graphs for every aspect of budget managing and put them on the dashboard. 
But later in our user testing, we found that such a "report" failed to catch people's interest. People failed to find a point they mostly care. Most of them just take a brief glance of the page and noticed nothing actually. 

So in our next iteration, we tried to put the most significant information in just one graph. It should be clear and eye-catching, if needed. 

We know our users are featured as "poor money management" and always just "mently keep tracking" of their spending, so telling them "you have been/ you are close to over-spending" is what we thought the most significant information. We tried several forms, shown as sketches below. 

Finally we decided on an innovated form that is able to tell the budget allocation, spending condition and over-spending warning simultaneously.

Web 1920 – 20
The budget is categorized in colors, and the width of each column indicating the proportion of the category, while the height is the proportion of spent amount. If the color bar exceeds the background, the category is over spended. 

Let's see how the graph works in detail. 

屏幕快照 2019-12-26 下午5.27.25

First of all, this is the new UI style and rearrangement of the dashboard. 

On the right we added the Spending Tracker section, as discussed above, on the dashboard and make it large so users will notice it everytime they enter the website. 

The grapg now is showing the beginning of a time cycle. Beside the bar graph is a list demostrating the budget and spending condition in numbers. 

Web 1920 – 19

Now it is by the middle or end of a time cycle. The excessive part of each bar is pretty eye-catching as an alert. 

In the list, if a category is close to the budget, the number becomes red. Also the corresponding alert icon will be shown nearby. 

Web 1920 – 18
Create Budget

Besides the original buttons Pay Bills and Transfer Money, we added our useful budgeting tools. The Manage Budget allows making a budget plan while looking at
the account balance. Users can manage categories, set numbers for each category and the total, set the time unit as days, months or years, and set the categories wanted to be alerted. These settings will be reflected at the Spending Tracker section mentioned above. 
Web 1920 – 17
Auto Saving

The auto saving is like a piggy bank that automatically put a certain proportion of users' salary, or any periodical paycheck, into a saving account, helping to fulfill the saving plans. 

Users are able to set any value in the formula, to get the wanted saving plan. 

Web 1920 – 10
My major contribution: Exploration, Prototype