Visual and UX Designer

Finance Overview

Improving existing banking app feature by adding an
overview of your financial state.

Background: 

“I have some savings accounts from TD, a mortgage and RRSP with BMO and a chequing account at Tangerine…but I don’t know how I’m doing financially. Should I be saving more? I think I’m doing okay financially…. but I’m not sure.”

Challenge:

How might we provide our clients with a clear picture of their current financial state?

My role:

  • Product strategy

  • Competitive analysis

  • Wireframes

  • Prototyping

  • Usability Testing

The Process
Finance Overview

Competitive Analysis

Based on the objective of the project, I conducted competitive analysis and research for apps that are in the market to identify what works and what doesn't.

Findings:

Mint: Personal Finance and Money App

  • Access all your accounts, including bank, credit, and

  • investment accounts from one place

  • Transactions from different banks are displayed together

LevelMoney

  • Level has three options, and they are all vague and difficult to differentiate: “Normal “Income” “Don’t count”

  • Can’t handle complex (or unusual) financial situations

Gini – Smart Spending tracker

  • Connect accounts and credit cards in all currencies in one spot

  • Grouped by account types

  • Access all your accounts, including bank, credit, and

  • Transactions from different banks are displayed together

Finance Overview

User Flow

Scenario: Find out how much money in Chequing Account and find transaction detail

Design Exploration
Finance Overview

Sketches

I started the design process with low fidelity sketches. The main purpose of these sketches is to ideate, brainstorm and test what works and what doesn't.

Findings:

  • Users need to relearn interaction when swap between a familiar interaction to a new one (cards)

  • Users like to see everything on one screen without having to navigate from screen to screen

Design Iterations:

  • Changed cards into tiles

  • Users can expand and collapse details without leaving screen

Finance Overview
Design iterations based on testing results

Design iterations based on testing results

Finance Overview

Prototyping

In these mid-fi prototypes, I cleaned up and spaced out UI elements so that the information hierarchy is clear. I tested these prototypes in-person and remotely and refined the hierarchy and UI further.

Findings:

  • Users like to see what they have in each bank account displayed on one screen without navigating

  • Users can associate brand logo to their banks

  • The "+" icon is confusing and inconsistent with the rest of the app. Users associate them as adding items instead of expanding the view.

Design Solutions:

  • Added top 2 items they wanted to see from each bank in one screen

  • Added icons beside the names of the bank

  • Replace "+" icon to ">" chevron to expand

Finance Overview
Design iterations based on testing results

Design iterations based on testing results

Final Thoughts

After a few more testing and iterations, I added a second option for users to see their financial overview in another view. Based on my testing results, some users like to sort information differently, now they can choose to sort by Bank Accounts or by Account Types. Users can see the entire dashboard on one screen without having to navigate from screen to screen or waiting for page to load. 

This is by no means the final solution to the problem. I see this as an on-going iteration to continue testing and refining the design.