UX/UI Project : CashPro Mobile Application Design
In this article I want to talk about how I designed a personal finance mobile application as part of a UX Design course.
Scope: Developing a product with which people can keep track of personal finances. Control and forecast their income and expenses. Also, this app will help in capital saving and will provide a clear picture of what the most of the budget is actually spent on; this will enable a user to further control their expenses.
Basic business requirements:
-Users should be able to track expenses and income;
-Users should be able to view expenses and income statistics over a day, month, and year.
Target Audience: people aged 20 to 35, active users of mobile phones and the Internet, mainly office workers.
The design process is divided into 3 stages:
- Product design;
- Interaction design;
- Visual interface design
Stage 1.Product Design.
1.1 Business goals and needs
Objective: Selling a mobile app that will help users control their finances and change their savings for the better. Users will only want to use this app of all the existing ones, because it will meet all their requirements.
1.2 Users
Audience — people aged 20 to 35, active users of mobile phones and the Internet, mainly office workers, as well as private entrepreneurs.
Target Audience: people aged 20 to 35, active users of mobile phones and the Internet, mainly office workers.
In order to better understand the needs and problems of the target audience for which the product is created, I conducted a research in the form of an interview in 2 ways.
1. A survey using google forms in two languages, Russian and Hebrew, since I live in Israel. The questionnaire consisted of 4 questions only. (It) was posted on Facebook social network. A total of 14 people provided answers.
1. Tell us how you keep track of your finances, what tools you use?
2. For what purpose do you keep track of your finances?
3. What issues or challenges in tracking your finances are you currently facing? (using your own way of tracking)
4. Perhaps you have ideas on how to improve and make the process of financial tracking more convenient?
Finance Tracking (Translate)
Do you keep track of your personal income and expenses? If you do, please answer a few questions. Thank you : )
Tell us how you keep track of your finances, what tools you use?
Detailed answer
For what purpose do you keep track of your finances?
Detailed answer
What issues or challenges in tracking your finances are you currently facing? (using your own way of tracking)
Detailed answer
Perhaps you have ideas on how to improve and make the process of financial tracking more convenient? I’ll be grateful if you share them
Detailed answer
2. Live interview — 6 participants
Questions:
1. How do you keep track of your finances?
2. What tracking tools do you use?
3. For what purpose do you keep track of your finances?
4. What functions do you like in your financial tracking?
5. What issues or challenges in tracking your finances are you currently facing? (using your own way of tracking)
6. If you use an app, what do you like about it? What do you dislike?
7. Perhaps you have ideas on how to improve and make the process of financial tracking more convenient?
8. If you received notifications at the end of the day about expenses and balance, would that work for you?
9. Does the visual component of the app mean a lot to you?
10. Is security password essential in the app?
11. Does entering categories manually mean a lot to you?
12. Does it mean a lot to you for you to be able to set the monthly expenditure column yourself?
13. Would you like to have the option of manual depositing of cash, as well as its categorization?
14. Does bank and credit company synchronization mean a lot to you?
15. If it does, then is it important for there to be a categorization in place?
16. Is cross-device syncing required?
17. If the app meets all your requirements, are you ready to pay for it? And in what way: monthly/ yearly/a single sum?
The answers I got during the interview were formalized in a document with the help of the tool XMind.
Key User Profile
1.3 Examples, competitors
How users are already solving this problem and addressing their need:
- MoneyLover — Convenient and intuitive interface with the necessary information in the Transaction section, in the Planning tab there’s an option of determining the required budget amount, the amount will be displayed in the Transaction tab, and all the expenses will be deducted from there. There’s no synchronization with all the banks and credit companies, everything needs to be entered manually which is inconvenient.
2. ZenMoney — A very incomprehensible Transaction section, costs and income sums are a mess. There’s synchronization with banks, but they don’t automatically split into categories and just make a mess. I do realize it’s because of peculiarities of the Hebrew language, and after synchronization the app just doesn’t know where to distribute each amount. It was only in this app that I found a complete synchronization of costs and income across all banks, which is very convenient. During the day the app sends notifications about clear balance remaining till the end of the month. This way the focus is on the income rather than the expenses; this option was not seen in other apps. But, on the plus side, each category can be adjusted.
3. 1Money — I liked the user-friendly interface in the 1Money app, it’s clear and divided into categories, well, it’s a matter of preference, personally I have an easier time digesting info by means of various illustrated diagrams. On the minus side, data needs to be entered manually, which isn’t very convenient and one can often forget to do so do. There’s no bank and credit company synchronization.
4. Moneon — A clear, comprehensible and nice interface. There’s no bank synchronization. In the settings it’s possible to add categories.
General competitor analysis:
- All the apps pursue similar functions, such as finances, costs and expenses tracking over a month, with statistics and the option to view past months data. In some apps, such as 1Money, data needs to be entered manually, which isn’t very convenient and one can often forget to do so do. The app’s interface, though, is nice, clear and convenient.
- Only in the DzenMoney app there was a complete synchronization of costs and income across all banks, which is very convenient. In some applications there’s no synchronization at all, and even if there is, then it’s only in paid versions and not across all banks. For example, in the MoneyLover app, I didn’t find Israeli bank branches.
- Almost in all apps it is only in the paid versions that there’s cross-device syncing, picture and receipt syncing. As well as a total control over budgets, unlimited addition of wallets and categories.
- Some of the apps got an inconvenient and incomprehensible interface. As far as I understood people’s opinions, they can’t be bothered figuring them out because everything’s confusing.
1.4 Overview of the ideas generation and reduction process
Product Requirements:
1.5 User Flow User Stories
Anastasya went back home from work, as usual, by train. She worked in Herzliya, lived in Ramat Gan. She couldn’t help thinking that something had to be changed, because commuting took most of her time and it really irritated her. Anastasya really wanted to save up for a car, but she never managed to, the money would just vanish and she couldn’t save a bit. Anastasya knew that she was the problem, she’d tried to track her finances many times, but kept failing halfway through, forgetting to enter expenses and precisely match expenses and income, as a result she would get a mess and quit. Also, Anastasya had already downloaded apps in the past, but abandoned them because either she had to enter everything manually which she forgot to do or there was bank synchronization in place but the apps were very complicated and inconvenient. Still once again she decided to try and find an app that would work for her. She launched PlayMarket and began searching through budgeting apps.
1. First encounter with the service:
Anastasya opted for CashPro app and decided to try it out.
Registration:
Anastasya downloaded the application. In order to start using it, the app asks Anastasya to enter her email and make a password, which Anastasya does.
Next, Anastasya gets notified that she can log into the app using her fingerprint.
Categories:
Profile tab. Tapping the categories line she enters a section and adds the missing categories and subcategories.
Bank accounts syncing and currency selection:
Next, she connects bank and credit company synchronization. She selects her banks and enters the login and password of banking applications and credit companies.
The application synchronizes with banks and asks from what date to synchronize information. Anastasia decides that it’s better to synchronize 2 months before using this app. Then she selects the basic currency.
Setting monthly/daily budget:
When that’s done, she switches to the Planning tab and sets the monthly budget for spending. The app asks from what date to start the month and also it calculates expenses per day by itself. If there’s a balance left, then Anastasya can select the option to transfer the balance to Savings, otherwise the balance automatically goes to the next day expenses and it gives a sweet feeling that the next day you can spend more, also you can save the amount.
Savings:
This feature can be installed later. In the Planning tab Anastasya can set the total savings amount, which, calculated by the duration of the savings time by the dates, determines how much should be saved for that goal each month. The savings amount for each month can be adjusted.
Turning on notifications (can be set up later):
Anastya turns on a notification for a specific time, which will remind her about updating her daily expenses and income.
She can turn on a notification and during the day at the time specified by Anastasya it will notify her how much of the daily budget is left.
She also turns on a notification so that at a given time there’s a reminder of how much is left in the daily budget.
In addition, Anastasya turns on notifications if the daily budget is exceeded, so she can always stay alert and not exceed the specified amount.
2. Entering expenses/income
Further on, in the evening, Anastasya meets with friends in a cafe and pays by credit card, and then she goes to a shoe store and buys boots. After that she goes to a grocery store and buys groceries for cash.
Daily budget update:
At 8 pm Anastasya receives a notification to update her budget. She enters the Transactions section and sees two lines of expenditure at the café and at the store, she clicks the expenditure at the café and assigns it to the category it belongs to (in case the necessary category isn’t automatically determined), assigning the expenditure at the store to the category it belongs to as well.
In the Transactions section she enters into Expenses the sum she spent on groceries and selects the desired category.
All the expenses are deducted from the daily budget.
She looks at the daily balance and it’s there. This makes her very happy and she decides to transfer it to Savings. Clicking the balance, she selects the option to move that amount to the Savings. She receives an encouraging notification, ‘Woohoo! Anastasya, you’re on the way to your goal!’
Entering a check:
She also recalls that a client paid her for a freelance job with a check and it also needs to be included in the income. Anastasya enters all the check details, determines the desired category. Now it’s possible to accurately keep track of all finances including cash and checks.
3. Savings and reviewing overall financial condition
Transferring the amount into savings:
Anastasya decides that she wants to put aside the amount of the freelance check into Savings.
She enters the Income section, clicks the check line and selects the option to move the entire amount to savings. Great, she’s covered savings for two months in advance! And it feels awesome, previously she couldn’t manage income and had no idea exactly how much money was available, not to mention the savings. Income is distributed automatically by month. Again she receives a motivational notification, ‘Woohoo! Anastasya, you’re on the way to your goal!’
Analytics:
A week later, after the evening notification Anastasya logs into the app the same way, in addition to updating expenses/income, she also goes to the Analytics tab and reviews the overall balance, as well as expenses and income by category, checks which category the most finances are spent on.
Anastasya finally feels confident that she can control her finances and save up for her goals, this gives her confidence that the dream of buying a car is right around the corner and she’s even calculated over what period of time she’ll be able to buy it. There was no such feeling before; instead there was only panic and blank incomprehension of where the money was and how much was available. This was a sore subject for her, and now she’s completely calmed down and feels great with this thing!
Stage 2. Interface design.
2.1 Technical specifications, restrictions
1. Mobile version is developed for android, Apple — IOs (iPhone 11 Pro 375*812).
3. Setting password and fingerprint to sign into the app.
2. The app should convert currency; the user can select proper currency.
3. It has to be at least in 3 languages: English, Russian, and Hebrew.
4. There has to be bank synchronization. Security setting when entering a password.
5. The app should automatically recognize and bind the desired category in the expenses and income section in Hebrew as well. If it cannot distribute then the user. can set the desired category manually.
6. The calculator that carries out calculations in sections such as Transactions, Savings, and Analytics should be optimized.
7. The functionality to move amounts from tab to tab, that is, if there’s a daily balance in Transactions, clicking on it should display functionality to move it to the Savings tab.
8. The app should implement push notifications, a reminder for Transactions section update, savings notifications and so on.
9. The app should implement graphs in the Analytics section.
10. There should be a paid version of the app and option to pay for it via Google Pay and Apple Pay.
11. Cross-devices syncing option.
2.2 Scripts, Architecture, Feature Set and Provisioning
2.3. Interface prototyping
2.4. Testing Results
As a result of testing, tips for improving user experience were taken into account, which was reflected in the final design of the application.
The heuristic evaluation of my prototype meets most of the requirements. The user shouldn’t get confused, they should act consistently, see hints and elements that can eliminate errors. To even more accurately identify each possible shortcoming, I checked my prototype against the checklist.
3. Graphic Interface Design
Opting for purple and blue shades, these colors create a feeling of calmness, they inspire trust, represent stability and responsibility, which is very suitable for this objective. Also, these colors don’t strain one’s eyes and the elements don’t distract.
Standard font has been chosen for this application: Poppins.
It was also decided to include illustrated images in the app, because they not only bring in lightness and interest, but also break the seriousness of the situation related to finances and users will want to log into the app more often.
I’m attaching the design of several prototype artboards for purposes of illustration.
