Mobile app design for iOS and Android

“My Money” app

“My Money” is a personal finance app for people that want to organize their finances and optimize spending. It should be achieved by documenting all expenses, incomes and money transfers between accounts and setting strict budgets to follow. App will cheer users if they stay on the budgets that they set and will send messages and push notifications in order to prevent/cut spending on specific budgets.

Main Points

1) Design should follow iOS and Android system patterns. It should look as close as possible to each other, but should consider native UI/UX guidelines. It should be portable and compatible with tablets as well, e.g. list views should be designed that way so on tablet they will look like a grid without or with minimal changes.

2) File with design should be provided in Sketch https://www.sketchapp.com format.

3) Things to be designed: 

- app icon for iOS/Android apps (vector format, should be in Sketch, square, looks good when exported between 29x29px up to 1024x1024px), may have transparent background for Android;

- screens for iOS/Android, see Screens below.

Screens

1) Sign In with email and password or with Facebook.

This screen should have 2 fields to enter email and password to Sign In into existing account AND “Facebook button” to Sign In via Facebook.

2) Sign Up with email and password or with Facebook.

This screen should have 3 fields to enter email, password and password confirmation to Sign Up AND “Facebook button” to Sign Up via Facebook.

3) Restore Password screen.

User should be able to enter email and click button that will send email instructions to reset password.

4) Categories screens:

    4.1) list of all categories in a tree-view with search bar (including empty state);

    4.2) form to create/edit category.

Categories are nested, each category can have children, maximum nesting level is 5. For example category called “Food” can have children categories called “Groceries”, “Meat” and “Water”. There should be an ability for users to create child category for each category on the list. Categories should have title and optional icon. Set of free-to-use icons should be provided with design.

5) Tags screens

    5.1) list view of all tags with search bar (including empty state);

    5.2) form to create/edit tag.

Main purpose of tags - to attribute something that falls out of category domain, e.g. you bought groceries for your mom, so the category is set to “Groceries”, but to attribute that this groceries does belong to your mom you can add tags #mom and/or #groceries_for_mom. Tags should have title and color.

6) Projects

    6.1) list view of all projects with search bar (including empty state) should have switch active/archived projects;

    6.2) form to create/edit project.

Projects are here to help people group their expenses by application, for example “2019 Apartment renovation”, “Car fixes”, “Baby shower”, “Transfer to Berlin”, “Summer trip to Turkey”, etc. Projects should have a title, start date and end date (optional). If end date is set - project will be moved to “archived” list.

7) Places

    7.1) list view of all places with search bar (including empty state);

    7.2) form to add place (Google Places with autocomplete).

This part is to attribute transactions to specific geographical location, like country, city, specific restaurant, etc. “My Money” app will use “Google Places” interface with autocomplete to add places to transactions.

8) Accounts and Currencies

    8.1) list view of all accounts with search bar (including empty state);

    8.2) form to create/edit account.

Accounts can be: “cash”, “credit card” and “bank account”. Outstanding balances of all accounts in the app should be equal to “cash”, “credit card” and “bank account” balances of accounts in real life after person creates all his transactions for all accounts. Accounts should have title, type (one of “cash”, “credit card” and “bank account”) and currency (“USD”, “EUR”, etc).

9) Transactions

    9.1) list view of all transactions;

    9.2) filters screen - for user to select specific transactions by date, account, amount, category, transaction type, place, project, tag(s) and search by notes.

    9.3) form to create/edit transaction.

All previous entities are joined together with transactions. All transactions should have date, account, amount and category. Optional fields: place, project, tags and notes (multiline text). Transactions should be one of these types: “income”, “expense” and “transfer”. “Income” is for transactions that increase balance on any of user’s accounts, e.g. salary, bonus, dividends, sold car, etc. “Expense” is for transactions that are lowering user’s balance. “Transfer” is specific one - this should have a separate form, which should have an ability to select “from account”, “to account”, “from amount” and “to amount” - it should be able to handle a case when you spend 88 euros to buy 100 dollars or withdraw 100 dollars from credit card to cash using ATM.

10) Budgets

    10.1) list view of all budgets with search bar (including empty state);

    10.2) form to create/edit budget.

Budgets are core feature of “My Money” app. This part of the app should show user how good is he doing on sticking to budgets he set. It should be informative and let person know how much is left to spend on each budget.

11) Overview

This screen should contain useful information about current day/week/month, like top spending tags, categories, projects, places, etc. Also it should show balance between expense and income for selected time period. Might include information about active budgets as well.

12) Analyse

This screen(s) should provide user with ability to analyze his incomes/expenses/cashflow historically by day, week, month or year with navigation to next/previous time period. User should be able to see the data for categories (be able to get deeper into child categories and go back), tags, projects and places.

13) User Profile screen

User should be able to change profile picture, first name, last name and email.

14) Change Password screen

User should enter old password, new password and password confirmation.

15) Change primary currency screen (we may omit this in v1 of the app)

Each user has a primary currency. This screen should explain consequences of changing primary currency, because there is a lot of data to be recalculated along with this change, it takes some time to perform this action and user can change his primary currency only once a month.

16) “Select primary currency” screen

This screen should be right after “Sign Up” screen and user should pick his primary currency here.

17) Tutorial Slider

3-5 screens that explain what this app is all about and how it will help user to achieve his goals, should have buttons to Sign In/Sign Up on the last slide.

Other

1. All forms should have state with errors on specific fields, for example it should somehow highlight “title” field and show red label saying “title should not be blank” when user tries to create tag without title.

2. Lists of accounts, projects, categories, tags and places should have information on income and expense amounts, cashflow (incomes minus expenses) and count of associated transactions. Incomes, expenses and cashflow values will always be calculated in primary currency.

Please start your response with word "WHISKY" on the first line, so I know you have read the document till the end. I want to see you portfolio in response as well. If this project goes well, there will be other apps and websites to design.

Також можете відповідати українською/російською.