My name is Connor and I am a student at the University of Westminster in London, finishing a Master’s degree in Interactive Media and specialising in UX design. This article is the second half of my final major project for the year, and what it entails completely revolves around a mobile application that I am an extremely large proponent of named Monzo.
For those of you who don’t know, Monzo is a new kind of bank. The company issues you a debit card that you can top up from your actual bank account, and their mobile application keeps a really amazing log of all your purchases. It’s intended to help users manage their finances better, and whilst doing so, they also provide incredible customer service without the need to walk into a physical location. Needless to say are awesome. There’s so much more that the app can do, but for the remainder of this article i’m going to assume you know what Monzo is and how it works, and if you don’t know I encourage you to get on board.
I am in no way affiliated with the company, but I would really like to be. So if anybody at Monzo likes what they see here, You can get in touch with me via email at connorgettel@me.com.
Who Is This Article For ?
This article is aimed at anybody who is a really big fan of Monzo and who would hopefully see the benefits in some of the ideas i’m going to put forward - namely those people who are active in the forum. I invite anybody who reads this and who has an opinion to share it, and to provide constructive feedback and criticism if possible as well. My main object here is to improve my skills as a designer, and to showcase some of my work.
Improvement 1: More Detailed Visual Analytics
The first design improvement i’m going to put forward is making use of slightly more detailed visual analytics, providing more information about a user’s daily purchases. Figure 1 below shows the main home interface beginning in it’s current state. At the top of the interface, a continuous line graph is displayed, indicating card balance at any given time. Users can scroll through their purchase history, and the window in the top right corner will let them know their ‘balance’ and ‘amount spent’ on that day.
If you play play figure 1, what you’ll see is that if the user taps on the interface on the day they are currently on, the graph will expand downwards along with the purchase log, and a bar chart will emerge growing upwards. This bar chat indicates to the user their category split for the day, with each bar representing a target category. The window above each bar gives the category’s title, the total value spent in that category for the day, and the amount of transactions for that category displayed as ‘1 x TX’, TX standing for transaction. The number of bars in the graph will be determined by the amount of categories the user has made purchases in for that day. For example, if a user has only made 2 purchases — one on transport and one on food — only 2 bars will appear. If the user scrolls through his purchase history whilst this analytical mode is activated, the bars will update in real time. The height of the bar is determined by the amount spent in it’s corresponding category.
<a href="https://medium.com/media/b638ba0c5d7b2172b31c2190b226b140/href">https://medium.com/media/b638ba0c5d7b2172b31c2190b226b140/href</a>
Displaying data in this way gives users further insight into their spending habits on a day to day basis, instead of the current continuous and monthly format. Users will be able to visually understand where their priorities lie. When used in conjunction with targets (discussed in the next section) this form of deeper analytics be an extremely insightful tool to some users for balancing their financial lives. Conversely, it could be a wakeup call for others who are perhaps spending too frivolously within a category on a day to day basis. At least now, users will be able to see what their financial macro-split is for each day.
Improvement 2: Target Category Revisions
One of the main objectives Monzo strives to achieve is to help users monitor their spending. One of the ways the app accomplishes this is by implementing monthly spending targets on a category basis. Presently, the category list is well thought out and diverse, however there are many purchases that fall through the cracks and are allocated into the ‘general category’. This is easily rectifiable, as users can manually allocate a category to a specific purchase if they feel it wasn’t automatically categorised properly, but what happens if there is no appropriate category for a specific purchase? With the addition of 2 new categories as well as the implementation of an entirely new categorising feature, setting targets and categorising purchases can be perfected.
Category Addition A: Investments
The first addition to the category list is ‘Investments’ (See figure 2 above). Monzo’s targeting system mainly focuses on day to day consumerist items like entertainment and holidays, as well as necessities such as transport, food, bills etc. Currently, there isn’t any category solely dedicated to investment opportunities. A prime example of an investment item purchased through Monzo could be funding an account on a stock or cryptocurrency exchange.
Figure 3 — Screenshot of Coinbase Transactions
Figure 3 above shows an actual screenshot of the a transaction I made to Coinbase, a platform where users can purchase Bitcoin & Ethereum. Using Monzo for this purpose is perfect because it automatically tracks how much money you have invested in total, your average spending amount, as well as the total number of transactions. This is a great way to keep track of how much money you’re putting into your investments, compared to how well they are doing. There are however many different platforms and exchanges available for traders and investors to choose from apart from Coinbase. Often people will use different exchanges for different assets and currencies, therefore it’s important that they’re categorised appropriately so that users can keep track of their investment across all the platforms they are using. For this reason, a standalone investment category would be nice to implement.
Category Addition B: Dependants
With half of Monzo users being aged 18–30 and the other half being well into their middle and late ages, it’s easy to assume that many users will soon or already have some form of dependent who relies on them financially. Children no matter what age can be expensive, and it’s important for users with children to be able to keep track of their outgoings when it comes to their own offspring. Now, instead of expenses relating to dependents going into relative categories, a new dependant’s category would be able to keep track of how much money parenthood is really costing you (icon shown previously in figure 2). Additionally, this category will become a key player in a feature, soon be revealed later in this post.
Custom Categories
If a user still finds themselves unable to archive a routine purchase into a relevant category, then it would be wise to implement the ability to create completely bespoke, custom categories.
Figure 4 — New targets interface, with added features
Figure 4 above shows the familiar targets GUI with the addition of the two new categories, as well as the ability to create custom categories. Selecting this function would allow users to create a new category, give it a custom name, with a bespoke image (selectable from a library of choices that the user will deem relevant to the name), as well as a custom colour. The first of any future purchases will need to be manually allocated to this category however, as the application will more than likely place it into ‘general’ by default.
Figure 5 — Custom category settings
Figure 5 above shows the settings for custom categories once the user has pressed on the ‘Custom +’ button on the targets interface. The ability to name, set a custom colour from a Monzo colour palette, as well as choose a custom icon are all found here. Additionally, they will be able to manage their creations, with the ability to edit and delete previous category designs. The colour scheme for this settings interface is discussed later in this post.
Improvement 3: Custom Month Start Date
Figure 6 — Custom month start date located in ‘Date Settings’
To deliver an even more bespoke Monzo experience, Further flexibility with time scales needs to be implemented. Every Monzo user has a different interval in which they are paid. People on a salary tend to be paid once at the end of each month, whilst those who work in other industries such as service and hospitality tend to get paid at a slightly more regular interval (once a week or fortnight). Either way, it is rare that somebody’s financial month starts on the first of that month. Therefore, it would be more beneficial to start analytics on the first day that a user gets paid, instead of the 1st of each month as it is currently. For example, a user could set up their analytics to coincide with ‘payment interval July 15th to August 15th’. This kind of flexibility will give users better visual control over their money management, and will ultimately synchronise the application to their own real lives.
The ability to scale down intervals would also be incredibly beneficial to those who work in industries where they are paid at a more frequent rate. For example, if a user knows that they are paid every other Monday, then having Monzo analytics work around that 2-week time frame would be better suited to them rather than a traditional monthly succession.
Figure 6 above displays where the ‘custom month start date’ feature would appear within the Monzo application, which is inside the user’s card settings.
Improvement 4: Spending Forecast
Forecasted spending is a feature that has been discussed at length within the Monzo forum, and already implemented to a functional level within the app itself. In its current state, the only forecast a user can see is a faint line after their most current purchase, that diminishes in a linear fashion back down to what is presumed to be £0 as shown below in figure 7 below.
Figure 7 — Current Spending Forecast Implementation
With the current implementation, the user is unable to scroll forward onto this faint line, and no analysis of this line is accessible, the line is just simply there. As a basic improvement, it would be worthwhile being able to see forecasted values along the length of this faint line, so that users can see what their future balance might be, based on the calculation of their ‘Daily Average Spend’, which will be discussed in more detail later.
Figure 8 — Improved spending forecast
Figure 8 above shows a revised forecasted spending function. The faint white line in the previous iteration has been replaced by a blue line. The dot indicator which was previously white has been changed to blue also, to indicate that this is a predicted spending trajectory. The user will be able to scroll forward onto this line, and the window indicator above will tell the user what their balance is likely to be based on their daily average spend.
There is already an algorithm in place that calculates a user’s daily average spend based on their spending habits. However, a rudimentary calculation is as such; if a user has a desired monthly spending limit of £400, then they should be averaging that value divided by the amount of days in each month. For example:
£400 Limit ➗ 30 Days = £13.33 Daily Average Spend.
In figure 8, the user’s card balance at the start of the month is £200, and their monthly limit is £400. The blue line indicates that they are likely to run out of money in the middle of the month. The user has scrolled forward to halfway down the trajectory, and the window displays what the value is likely to be on the date of July 10th. Although it’s impossible to determine whether the user will be on target around this date, it’s a very good target to follow and aim for throughout the month.
Target Notifications
Figure 9 — Spending too quickly notification with advice
Currently, Monzo is great with push notifications when they are relevant. For example, when a user is spending too much money too quickly, they are told so. There is however one caveat with this feature, being that it doesn’t provide any form of advice to rectify excessive spending. If the user is spending money too quickly, they probably know that’s the case already. What would be a brilliant addition to this function is if the user was given a solution to their problem. Figure 9 above provides an example of a push notification with rectification advice for the user. It tells the user that they are spending money too quickly, but if they want to get back on track, they need to spend slightly less money over the next few days; in this case, it’s ‘don’t exceed £10 for the next 3 days’. This adjusted value that is given to the user can be calculated by taking their daily average spend and deducting a small amount that is feasible to follow over a realistic number of days. Therefore, if the application calculates that the user has spent £50 more than they should have in a day, they could be told to spend £5 less over a period of 10 days to get back on track.
Figure 10 — Letting the user know they are on track
In addition to notifying people when they are not on track with their spending, it could also be worthwhile letting users know when they are on track with their spending overall. Figure 10 above demonstrates this kind of positive notification. If users are consistently on track with not exceeding their daily average spend and staying within their targets, then they could also be rewarded for accomplishing this, bringing a slight ‘gamification’ to the app, achieving various milestones or badges perhaps.
Improvement 5: Animating the Splash Screen
The next improvement to the list of current features is a subtle one. Some people may deem it slightly unnecessary, as it isn’t detrimental to the function of the application; but it looks beautiful.
<a href="https://medium.com/media/b28de4befe9e84909765a3b1f9e5caad/href">https://medium.com/media/b28de4befe9e84909765a3b1f9e5caad/href</a>
The video in figure 11 shows the splash screen logo growing and shrinking at a very natural interval, synonymous with human inhalation and exhalation. Furthermore, the colours within the M shift around in a counter clockwise fashion, at a rate that is slightly more rapid than the growth. Finally, the transparency of the M increases and decreases very faintly at an interval that is slightly different to both the growth and colour change. Overall this creates an extremely dynamic yet subtle animation, that brings a great deal of character to something that was once completely stationary.
New Concept 1: Linking a Dependant Account
Monzo has so far proven to be a revolutionary tool for people to use independently, but the technology used could provide enormous potential for experimentation with linking accounts together. One of the more interesting concept i’ve thought about so far is the idea of having a main ‘Ruling-Card’, which can top-up and control multiple other cards directly from the user’s card settings in the application. This could be extremely beneficial for many people, including perhaps parents wanting to teach their children about money management when they are at the right age.
Currently, a user can do the following things from within the main card section of the Monzo application:
- View the title “Your Card”
- View the balance (below the title)
- View an image of the card with a few details
- Perform tasks: Top-up, freeze, view PIN, change various settings
- Access/Update personal info such as email & home address.
<a href="https://medium.com/media/3df7153610a15e8e3c3d5a80413348ca/href">https://medium.com/media/3df7153610a15e8e3c3d5a80413348ca/href</a>
Figure 12 shows the current interface of the card section with all of these features included, however there is one new addition to this section, which is demonstrated in the video to the left. The ability to swap between card accounts.
The Aux-Card: The Aux-Card is a secondary debit card that is linked to a Monzo user’s account and used by an additional person. This card can only be topped up by the primary account holder.
In figure 12, The Aux-Card shown in an electric-green colour is accessible tapping on the coral-coloured Ruling-Card. As this new card emerges, the title of ‘Your Card’ changes to whoever this card belongs to, in this instance it is “Alfie’s Card”. The original balance displayed will also change from your own to the balance of the Aux-Card. All the features available to your when the Aux-Card is selected remain the same, apart from the PIN function, which changes to a ‘View’ function, where the main user can see a summary of recent purchases made by the user of the Aux-Card. The Aux-Card can only be topped from the account of the Ruling-Card. Therefore, when funds on the Aux-Card become depleted, the person using it can request for their card to be topped up by primary account holder.
Figure 13 — Aux-Card in Electric Green
Any normal Monzo account holder can have up to 3 Aux-Cards linked to their account. However, they should probably need to be officially approved by Monzo in some way before they are issued.
Any money that the owner of the Ruling-Card spends on toping up an auxiliary card is categorised in their targets as ‘Dependants’. That way individuals will be able to properly log how much money they are giving to their dependants in each month.
New Concept 2: Monzo Pool
With their version 1.9.3 update released in February 2017, Monzo released an incredible new feature which allowed users to split the bill when paying for items, such as the price of a meal. This feature made it effortless for friends to pay for things collectively, regardless of whether they were a Monzo user by using Monzo.me, Monzo’s very own payment platform with absolutely no fees. Providing users with the ability to pay for things jointly is wonderful, but what if a group of people wanted to save for something special collectively? This where Monzo Pool comes into play.
Monzo Pool allows a minimum of two or a maximum if six Monzo users to deposit money into a virtual savings account, until a specific target has been reached. The individual who sets up the Pool is known as the ‘Pool Leader’ and has administrative control over certain settings such as group participants, share splits, and the overall financial target. There is no deadline to reach the target, and any participant of the pool can opt out at their own free will. Upon doing so, all the money the departing member contributed to the pool will go back into their own personal account.
Figure 14 — Monzo Pool Launch Screen
Figure 14 above shows the Pool Splash screen that a user will see for the first time when accessing the feature. It depicts the Monzo card character wearing a snorkel and arm-floats. Clicking on the ‘Set up Monzo Pool’ button will take the user to the Pool settings shown in figure 15 below, where they can set the various parameters of the pool, such as the name, participants, financial target, and the amount of each participant’s contribution.
Figure 15 — Pool Settings
Share Split Explained: With multiple participants contributing money towards something that could be relatively expensive, it’s important to determine exactly how much each person should contribute to avoid certain individuals paying too much and others paying too little. By default, the contribution ratio is split equally across the number of participants. For example, if a pool has a target of £1000 with 4 participants, each participant needs to contribute £250 until the target has been reached. If a participant were to leave the pool, then the split would be automatically readjusted, leaving the 3 remaining participants having to save £333.33 each. Customising the split is also possible to do, allowing certain members to pay less and others to pay more.
Figure 16 — Main Pool Interface
- Figure 16 shows the main interface of the user’s pool. It is nearly identical to their home interface, however instead of showing the amount of money that has been spent in each day in the top-right-hand corner, it shows the target amount.
- In the top-left corner, the current value of the total savings is displayed.
- The Line graph that previously provided a visual representation of a user’s card balance, now shows the progression of savings since the creation of the pool.
- The golden ‘target’ button allows the admin user to go back to the settings shown in figure 15 to further adjust the pool if need be.
- Below the graph, a chronological list of deposits to the pool can be seen, with the contributor’s name and value added.
- The golden star next to a participant’s name indicates that they are the creator of the pool and have administrative authority.
Figure 17 — Monzo Pool Analytics Alternative
Further Analytics: Figure 17 shows an alternative analytical example of the pool, with each participant’s current contribution represented by a bar chart. The window above each bar provides the participants initials, and what percentage of their savings they have achieved so far.
For example: Jack has saved 81% of his share split, therefore he has nearly finished, whilst Oliver has only saved 51% of his. If the share split is equal then all the bars will be of equal heights once the target has been reached.
Reaching the Target: Once the target has been achieved, the funds become accessible to any member of the pool. Funds can be transferred from the pool account to any participant’s account, but transfers need to be authorised by all members before the transfer is executed. This eliminates the risk of one pool member depleting the funds without consent.
Figure 18 — Pool Icon as it appears in navigation bar
Pool Icon: Because Pool is an entirely new feature and exists within a completely new section of the application it deserves to have its own icon as well, which can be seen above in figure 18. This illustration shows many smaller circles being joined together to a larger circle in the centre. The smaller circles signify each participant’s Monzo account, with the large centre circle representing the pool in which they all pay in to.
<a href="https://medium.com/media/5b0b0fc81498617887b9ff6b143521a1/href">https://medium.com/media/5b0b0fc81498617887b9ff6b143521a1/href</a>
The video is a short and basic demonstration through all interfaces of Monzo pool from the splash screen to the main interface.
New Concept 3: Monzo Vault
Staying with this notion of virtual accounts and saving, the final new concept theorised in this document is Monzo Vault.
Figure 20 — Monzo Vault Splash
Figure 20 shows the Monzo Vault splash screen, which provides a summary of exactly what Vault does:
“Vault lets you save fixed amounts of money in a virtual safe. Funds cannot be touched until an intended date. It’s the ultimate saving tool!”
Figure 21 — Vault Settings
Figure 21 above shows the Vault settings, which are accessible once the user clicks on the ‘Set up Monzo Vault’ button found in figure 20.
Vault Feature Set
Automatic Saving: The first feature in the settings is the ability to set up automatic saving, which can be toggled on and off. Automatic saving takes money from your main Monzo account, and moves it into your vault automatically. This is done continuously at a value and interval that is also determined by the user. For example, the user could set up their auto-saving function to take £20 from their account every week, or £2 every day. Auto-saving will stop automatically if the user’s balance goes below £30, to avoid the risk of the user completely running out of money in emergency situations.
Vault Name: A user can have up to three vaults running simultaneously, therefore it’s important to be able to name vaults accordingly. Different vaults may serve different saving purposes from one another. For example, a user could have one vault for a holiday fund, and another for a housing deposit fund.
Limits: The Limits feature gives the user the ability to set up the interval in which money is moved from their Monzo account into their vault, as well as the amount that is moved. This feature only matters if the auto-saving feature is switched on.
Date Settings: Finally, the date setting is where the user determines when their vault is going to end. Bear in mind that funds will not be accessible in any way until this date has been reached. Therefore, a user may want to set their vault expiry date to coincide with the beginning of their Christmas holiday, or around the time of a loved one’s birthday. If a user sets up very small amounts of money to be moved into their vault over a long period of time, it will be hardly noticeable that they are saving at all. By the time their vault has expired, they may have a very hefty sum of money to put towards something very special.
Figure 22 — Vault Interface
Figure 22 shows the interface of the user’s vault. This interface is once again extremely familiar, but it encompasses a few discrete changes. The line graph is identical to other interfaces, however the line’s trend will always be upwards, so long as the user is putting money into the vault. The top left numerical value shows the user’s total vault balance, and the top right value shows how many days are left until the vault expires. In the case of figure 22, the user has amassed savings of £6025.00 and has 172 days remaining until they are accessible. Needless to say, this individual is doing quite well.
The settings for the vault are accessible from the golden ‘settings’ button to the right-hand side of the graph. From here, the user can rename their vault, toggle off and on the auto-saving feature, and change the interval and amount deposited via the auto-saving feature. The user however cannot change the date in which the vault expires, once it is set, the time must elapse until the funds are accessible. Once the vault does expire and the funds are accessible, the user has the option to extend the vault time if they wish to do so.
Below the line graph, we have the chronological history of all the deposits that have been made into the vault. Notice that in this instance, the user has the auto-saving feature to deposit £10 into the vault every single day, so long as that their main balance is above £30. Auto-save deposits are listed as ‘Automatic deposit’. To coinciding with the automatic deposits, the user has also made a couple of manual deposits, listed as such.
Vault Icon: Finally, being a completely new feature and section of the Monzo just like Pool, Vault deserves its own icon to feature in the navigation bar. Figure 23 below shows this icon in blue as it appears when the feature is selected.
Figure 23 — Vault Icon In Selected State
Figure 24 below is a basic demonstration of Vault’s flow, including the splash screen, which has been brought to life in a subtle manner.
<a href="https://medium.com/media/8abf4cabecb482c7d221843bc4f2f6c2/href">https://medium.com/media/8abf4cabecb482c7d221843bc4f2f6c2/href</a>
Improvement 6: Expanding the Navigation Bar
With the addition of Vault and Pool, one must think how they are going to be accessible to users. The navigation bar already has 5 selectable items, namely: Home, Spending, Card, Contacts & Help. Adding an extra two sections will most certainly make the navigation bar rather cluttered. So how does one go about solving this problem whilst maintaining a practical and aesthetically pleasing design?
Figure 25 below shows how Vault and Pool become accessible through the expansion of the bottom navigation bar. Those extra two features are only a left swipe away from being pressed. Easy fix.
<a href="https://medium.com/media/a2860312da281028e74ed82a798a4034/href">https://medium.com/media/a2860312da281028e74ed82a798a4034/href</a>
Colour Scheme Revision for Settings
Something that may have been noticeable through this project is the colour revision implemented within some of the settings options. This new navy blue scheme — which uses Monzo’s classic #14243B along with a slightly lighter hue at #1B2C43 — is darker, and is intended to make the user feel as if certain setting options, such as those for the Pool and Vault setup, are a core part of the setup process.
Figure 26 — Grey Settings Interface in Pool Setup
Figure 26 above shows all the Monzo Pool Interfaces, with a classic grey settings interface in the middle. This grey scheme, although easily identifiable as an area for settings, does not feel look or feel like it is part of the core process of setting of the Pool.
Figure 27 — Navy Blue Settings Interface in Pool Setup
Figure 27 shows the same interfaces for Pool, however the settings interface is navy blue, matching with the splash screen as well as the graph in the main pool interface. This colour change ties the entire setup process of Monzo Pool together, and creates some further colour variation within the application. It also makes features such as Vault and Pool look new and special, and they’re easily distinguishable from other more classic feature settings as well
Community Feedback
If you took the time to read through this post from start to finish, thank you very much for doing so. I would love to hear some feedback from the community on my design ideas so that I can include them in my final hand in. Please comment freely.