Design iterations based on testing results
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
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
User Flow
Scenario: Find out how much money in Chequing Account and find transaction detail
Design Exploration
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
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
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.