Make a Financial Planning as Easy as Snapping Fingers with Halofina App

Afif Bimantara
uxmarker
Published in
6 min readJul 6, 2018

One way to prepare finances in the future is to create a Financial Plan. And the right time to plan financially is at a young age. But today, it is less familiar among teenagers even for parents who are retiring.

image source: rawpixel

Investment is one way to prepare finances in the future. There are various forms of investment that can be done at this time. But what investment should be done in accordance with current needs and capabilities? So it takes a good education to be able to invest properly.

In this project, my role is the UI/UX & Graphics lead. Here are the brief passages of the journey of Halofina project from the background till the high-fidelity design. May it can inspire anyone or be useful for referrence.

Background

About Halofina

Halofina is a mobile app that helps its users to create financial plans by investing in the right field. The main concept of this application is to provide a virtual assistant that can help the user’s future finances become more secure and secure. After the user provides input financial data, then the virtual assistant will provide education and investment advice.

Halofina Landing Page

The main mission of Halofina wants to change the view of financial planning always sounds complicated and intimidating, so financial planning is a rarity. It should be enough to plan the purpose of life without the need to be bothered by various financial calculations. Official website of this application is www.halofina.com which you can visit to see more detail.

Problem & Challenge

The user target of this app is everyone in many age categories, especially millenials who in this era are increasingly aware of the importance of investment for the future finances. And the main challenge in this application design project is how to make the users can be helped by virtual assistants.

Financial education video from the Halofina founder

Hence the basic general problem is known to solve the financial planning problem for people by investing in the right field.

Insights

We at uxmarker are very open to any problem of any startup, before we deliver the best solution for each particular problem, we do analyze and ideation. In that context, it can be described the following user stories that will be used for the basic design of the application.

  • As a user, I need to understand the importance of financial planning
  • As a user, I want to know how to plan my financial and get advised
  • As a user, I want to know the best suggestion to invest
  • As a user, I can manage my investment and easily earn results

And here are the personas information for this product:

From the personas above, we can get the insights how to create the best finance app for those kind of users. We are willing to maximize the users beneficial by using this product, as we believe financial stuff is very important thing for these users.

Goals

From defining the problems that have been done, then this application must have a virtual assistant to be the main advantage. The virtual assistant should be able to:

  1. Understand user’s situation and condition
  2. Make smart and wise decisions
  3. Provide personal financual education anytime

Solution

To explain the process briefly, here is the user flow diagram for Halofina App.

It starts from Login process and Registration process if user is not registered yet. Then user can choose personal assitant, complete user data, get lifeplan advice, fill personal finance data, & investment until choose payment method. Finally user can get the portfolio investment on Lifeplan screen.

The Design Process

In the design process, we do starts from determining the style and color that represents the character of the application. Furthermore from the basic character that has been determined, all illustrations and interface display will adjust.

Color Palette

Blue is the basic color in this app, which is a safe color for a financial related application because it symbolizes trust. The color palette used is like in the picture below.

Halofina Color Palette

Selected color combination is yellowish orange. Orange is one of the best colors to combine with blue. In addition to the right combination of contrast, this color also means enthusiasm and happiness.

Low Fidelity Design

After knowing the problem and the concept of the application in full, the next step is to make the design Lo-Fi first.

Lo-Fi Design of Halofina App

Lo-Fi design as the initial design before entering the Hi-Fi stage is useful to execute quickly all the design screen that must be made. At this stage feedback can be provided and design iterations can be done to ensure all needs are handled properly

High Fidelity Design

When the various inputs and suggestions of the Lo-Fi design have been completed, the next step is to design it at the High Fidelity level. And this is the Halofina Hi-Fi application design.

Splash screen and on-boarding screens
Main menus, investment list, and notifications

These are the main processes in this application, a virtual assistant that helps the user to provide the right advice to invest. Previously a virtual assistant will look for user’s financial information interactively.

Assessment screen to assess a suitable investment for a user assisted by a virtual assistant

Final Words

Being part of building innovative applications to help people get better financial planning is a great opportunity for us. In addition to the application design, logo, and illustration we mentioned above, we also design landing page website www.halofina.com, promotional poster, also GSM or Graphic Standart Manual for this application.

In uxmarker, we are always ready to help all startup needs from start to finish. Mix up the best UI / UX designs, create illustrations, build prototypes, to do testing to see the results of applications that have been designed.

uxmarker was found with one mission mind: creating the best and most reliable user-centered design for our clients. Here in our HQ, we deal with a wide range of design avenues on every product platform. To ensure a satisfying product experience, our dedicated team generate data from curated user research methods and analyze them to find and fix various design obstacles. With our ingenious ideas and tested skill, we believe we can help make your products a pleasure to work with.

Keep in touch with us :

LinkedIn| Facebook | Instagram | Twitter | Dribbble | Contact Us

To help spread the word about uxmarker, please give it applause, share this story, and don’t forget to follow us! See you next week everyone.

--

--