Spending Insights

Mobile App Design Challenge

Context

Problem

Personal customers who actively manage money on their own behalf, need a way to view and understand their spending patterns to help them meet their financial obligations and enjoy life.

Goal

Give customers visibility and awareness of their income and spending so they can start to identify ways to improve their spending behaviour.

Awareness of money coming in and money coming out of their account
Aim to improve spending behaviour

Scope and Deliverables

Research what other banks or fintech are doing in this space to help inform your design direction
Create screens for iOS to show Money in vs. Money out of a customer's bank account/s and the difference between the two amounts
30 hours to complete

Discover

Research Goal

The research goal for this project is to learn how users manage their money or cash flow and understand what features are available inside their banking application to help them do this. I am also interested in the wide conversation about money, when, where and how we are educated on money, cash flow, saving etc and what responsibility lies with the bank to educate its customers.

User are:

Individuals managing their own money

User priorities:

understand their cash flow
improve their spending habits according to their goals

Bank priorities:

Present information to customers about their cashflow and spending
Provide ways for them to engage with the platform to improve their spending, eg goal setting
The more money banks help customers retain/save, the better they feel about their bank? and investing with their bank?
Customer retention, attracting new customers
Capture data on customer behaviour/changes in spending habits
Improve financial literacy
Improve customer experience and bank reputation

Concerns:

There is no improvement; presenting the information is not enough. Customers need to be educated on how to manage their money
Customers don’t know what goals to set to improve their spending habits/saving
The mobile app real estate is too small to present this information in an engaging way
It might also be worth exploring some kind of incentive to encourage users to engage with the feature eg higher interest rate on their savings account, points for some kind of loyalty program etc

User Research

User Interviews

I interviewed three people to gain some insight into how they manage their money, what banking applications they use and what features they like/dislike. I was also interested to learn about their financial literacy and where they learned about money.

Interview Insights

No one really taught me about money; my parents had lots of money.
When I started my own business, I learnt more about money and how to survive on very little money.

I don’t run out of it (money) and I am not a big spender but I could be smarter, have a better super fund, and have investments.

An education on budgeting or a budgeting tool for what is in your bank account inside the app, updates monthly, refreshes each month.

View the interview responses

Secondary Research

Westpac

Westpac has focussed more on cash flow and spending insights in their application features. These are all retrospective; there is no way to plan ahead or budget in the application.

Pro

Cashflow is visible on the homepage (customisable to make it so)
toggle between expenses and income
easy to change between different months to see amounts spent/earned
% of income spending is also visible
Can edit or create new categories for purchases made

Con

can only filter, and there doesn’t seem to be any way to customise or set goals for spending habits
‘Highlights’ doesn’t seem worthwhile as it is just a 12 mth view
Categories are included in different colours in the charts but the detail is very small in mobile view

Commonwealth Bank of Australia

The minimal colour palette here works really well alongside the icons. CBA has an investing platform that integrates with the monthly cash flow screen.

The monthly cash flow is a good high-level view of money coming in and going out and gives customers the option to view transactions separately.

Pro

Good visual representation of money in and out
Clear screens for users to digest

Con

No option to input recurring expenses
Just factual, not tailored to customers goals
No indication of money being saved

Other mobile screens

After taking a closer look at two live banking applications, I wanted to look at some other examples that were not from live applications. When you are designing without budget constraints, deadlines, developer restrictions etc there are far more possibilities to explore and a greater scope for creativity. I selected the below screens from Dribble to as a source of inspiration.

Develop

Sketches and Data Visualisation

With my research complete, I briefly sketched out a few options for the key screen of Money In vs Money Out. Focusing on data visualisation as the hero component and how it works alongside other elements complementary elements.

From here, I move straight into recreating my chosen sketched option and supporting screens into wireframes.

View sketches

Wireframes

Key screens

Slide over screens

Colour Palettes

I wanted to test out multiple colour palettes for this application on the Spending Insights screen. I was conscious that the screen would be very text and information-heavy but it also needed to be visually appealing and digestible for users. After asking multiple people for their opinions and spending some time considering each option, what I chose to roll out onto the wireframes is closest to a combination of Option 3 and 1. Magenta is the brand or clickable colour across the screens, which is supported by a dark blue and darker shade of magenta.

Option 1

Option 2

Option 3

Option 4

UI Elements

As per the project goals, these screens have been designed adhering to the native iOS guidelines with a focus on the components and interaction patterns. With Apple's minimal and meticulous style front of mind, multiple sets of cards have been developed to cater to various application functions and navigation patterns.

Focusing on iOS guidelines was not something I had highlighted in a previous project. It was a good learning for developing components that follow native interaction patterns and not something I had focussed so heavily on in previous projects. It was also a helpful starting point when it came to branding and styles as iOS was essentially a starting point for the branding.

Deliver

Final screens

From the research undertaken and the content in the brief, I think it would be worthwhile exploring the education or financial literacy piece, how banks can help customers learn good savings habits and educate them on financial strategies relevant to their situation.

Currently on a

monthly view

Opens a slide over to change the Insights view eg weekly, fortnightly etc

Added Goals content as a reminder to users to stay on track with their savings goals and to put money aside so that they can achieve them.

Gives users the option to track what they are spending on certain types of purchases, view their average and possibly even set a goal.

Slide between view frequencies

Detailed view indicates that customers have set up tracking for that category

Opted for a simple column graph separating money in and money out with branded colours.

Prototype

The final prototype takes users through the following screens:

App Home screen
Activity screen
Spending Insights screen for July, August and September
Money saved slide over
Switch Insights frequency slide over

There is also content to suggest that users can expand on the content presented to help them understand their money habits and set goals for their spending and saving.

View Prototype

Next Steps

Test with users
Explore additional features for the bank to implement to educate and assist its customers
Develop an Android version user flow/application
Explore other ways to visualise the information, and allow customers to customise the screen to their preference such as different types of graphs
Explore ways to improve accessibility. Some of the content is small and could be difficult for some users to read; consider accessibility and explore alternative views to see if this can be improved
Developer standards; these screens have been developed based on assumptions and iOS native guidelines, it would be useful to refine the design to develop standards as to not slow down the process.

Back to Work