UI, UX & Icon Design • Concept • 2017
Good Plan is a cross-platform concept app made to manage your finances and to create budget plans for specific goals.
• Manage Finances
• Create Budget (To reach saving goals)
• Adjust Budget (To reach saving goals)
• Integrate with Banks & Finance Tools
• Spending Overview
– Hobbies & Fun
– International Purchases
• Customize Savings
• Account Reports
How it works
Create an account using your email or connect using Facebook or Gmail.
Connect Bank Account
After your account is created you will have to connect your bank account so the app can read the information of it.
Create Budget Plan
To create a budget plan you simply tap on the button on the main screen.
Budget Plan Created
When your budget plan is created the app will read the information of your bank account.
On this app you are not going to put your money anywhere, the app will calculate monthly your income and what’s left when the next month turns.
On the tab Account, there’s an Account Report showing all the expenses for the last days or months with detailed information such as category, place, date and amount.
Logo & Color Palette
For this project I designed a custom font for the logo and used a simple color palette.
The screens below are the on-boarding process explaining the app when you start. For this project I designed 4 main illustrations for each step of the explanation and another for the budget created successfully screen.
To start the app is really simple, you can choose to sign in with your email, Facebook and Gmail or sign up using the same method. After you successfully signed in if this is your first time using the app you will have to integrate your bank account. The bank integration is necessary for the app to read-only the expenses and money income information.
Let’s create a budget plan! Just put a title, amount, start and end date.
On the main screen we have a graphic showing how far you are from your goal and you can check your account report with your expenses separated by category on the account tab.
I also designed an icon for the app.
For this project I also designed a desktop version.
The wireframes took me quite a while to get done properly. Here’s how the process was:
Documentation — Paper Sketches — Wireframe — Test Wireframe — Fix Wireframe — Final Design — Live Prototype using Marvel