Good Plan

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.

Main Functions

• Cross-Platform
• Manage Finances
• Create Budget (To reach saving goals)
• Adjust Budget (To reach saving goals)
• Integrate with Banks & Finance Tools

• Spending Overview
– Food
– Clothing
– Health
– Hobbies & Fun
– International Purchases
– Other

• Customize Savings
• Account Reports

How it works

Create Account

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.

Monthly Saving

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.

Manage Expenses

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.


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.

App Icon

I also designed an icon for the app.

Desktop Version

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

This is the wireframe for the desktop version of the project.