What is FUNDtastic and how are we helping them design a personal Financial Management app?

Over the last year, the Fin-tech industry has grown exponentially in Indonesia. Since early 2018, we’ve been working with one such fin-tech product called FUNDtastic. FUNDtastic makes it easy for users to get into the habit of saving and investing their finances into mutual funds, gold and other such financial products in order to reach their financial goals.

We started working with FUNDtastic when their MVP was already released and available on the Play Store. This first version of the product allowed users to:

1. Track their monthly income & expenses
2. Book consultation sessions with a financial planner

We came on board to help the team restructure the app to make it more user friendly, as well as understand user behavior towards personal financial management and make changes in the app accordingly — whether that required new features or decluttering the app from unused features. We started by restructuring the information architecture of the app — the onboarding, navigation, removing unused parts, and adding new business verticals. Once we had the app skeleton and userflow in place, our next big task was the UI redesign — creating a new styleguide, colors, icons, and easy to use UI elements.

Problems we’re trying to address through the FUNDtastic app

Since a major part of this product is focused around investments, it was important for us to educate users about:

1. Why investing is important for them
2. What are the various investment products they could put their money in
3. Which investment product is the most suitable for their financial goals

Since awareness about the importance of investing in Indonesia is quite low, it became important for us to educate the user through the product before they decide on making any purchases on the platform. Here’s some data from the IDN Research Institute, Indonesia Millenial Report 2019 about where Indonesians tend to spend most of their money:

Monthly Expense Percentage

1. In Indonesia, currently, there are plenty of apps that sell investment products, however, there’s no product out there that’s wholesome and helps users to not only purchase these investment products but also helps them manage their finances and continue to build upon their wealth. We also wanted to bring focus on the latter through this app.
2. Due to the lack of knowledge about the importance of investing, most people aren’t even aware of their financial goals and find it difficult to save money for buying their own home, plan their wedding, prepare for children’s education, save for a retirement fund, etc.

FUNDtastic aims to be the one-stop for all such wealth management needs of the user.

The Goals

Based on the above problems, FUNDtastic realized that their users need a digital platform that can help them:

1. Track their income and expenses every month.
2. Understand how to buy an investment product with ease.
3. Reach their financial goals.
4. Continue to build upon their wealth.
5. Have easy access to a financial planner for support on all of the above.

Process

Once we have communicated with the client and have had a good understanding of the business and product goals, our work process begins with:

1. Conducting some preliminary user research along with our clients so that we can validate the problem we’re trying to solve.
2. Next, we start designing the mobile app based on the requirements, business goals, and insights from the research.
3. As the last step, we always make sure we’re working alongside the development team so that the designs can be accurately implemented into the live app.
4. Lastly, designing an app isn’t a one-time exercise. Till today, we continue to iterate on the product’s features based on user feedback.

Understanding the User

Before jumping into the design of the app, we conducted some preliminary research interviews with the end-users as well as with financial planners, in order to better address the problems mentioned above.

Role of a Financial Planner

Why did we decide to interview financial planners? Since the app is a financial management app, it is partly replacing a traditional human financial planner. Therefore, we need to understand:

1. What a financial planner does
2. How they help their clients and provide them with different ways to manage their finances
3. What are the questions they ask their clients during their sessions
4. What solutions they provide their clients with

The interviews with the financial planners helped us understand the steps a planner takes in understanding their client’s goals and needs. This way, we could implement their entire onboarding and consultation process in the app and help users buy investment products that meet their needs.

Needs and Goals of the End-User

In order to validate the information that we received from talking with financial planners, we decided to also do a short survey with the end-users as well, to understand their habits around personal financial management. Here’s what we learned from talking to the end-users:

‍

Re-designing the App

As we now had a fair understanding of the business goals and user’s needs, we started mapping out the information architecture of the product. Using existing features and brainstorming on the new product verticals that needed to be added, we jumped into designing a brand new FUNDtastic app.

Wireflow (Wireframes & User flows)

Userflows have always helped us plan and create easy-to-use products from the very beginning. These are important because we would like users to pursue certain goals easily and intuitively while engaging with our product. In order to help users through this process, we as designers need to have an in-depth understanding of the user’s experience. While userflows are great with showing movement, oftentimes they’re not complex enough to understand each step in detail.

Wireframes help us visualize each screen in more depth, the content, the primary CTAs, and the interactive elements. So by using a Wireflow, it helps us understand both the appearance and functionality of the final product.

‍

‍Mood board

Before we jump into converting our wireframes into UI mockups, we first create a mood board where we collect references of various types of UI styles. The purpose of creating this mood board is to find a unique style that would fit our product. This method is also an effective way for our clients and for us to be on the same page in terms of setting the expectations of the app’s visual design.

Style Guideline (or a Design System)

A UI styleguide is the holy grail for a design and development team. If a design team doesn’t have this shared document which highlights the intended look and feel a product, visual and experiential inconsistencies will arise, users will grow frustrated, and the brand’s reputation will take a hit.

We use the styleguide to define all the design elements that will be used in the app in order to help us maintain design consistency throughout the product. We have been following the atomic design methodology which clusters UI components into atoms (labels, inputs, buttons), molecules (search bar, form), organisms (nav bar, header), templates (home, product detail, payment) and pages (more articulate and visual versions of the templates) in order to define an easy to follow hierarchy in the design system.

Browse Mutual Funds

User Feedbacks & Design Iterations

After the launch of the first version of the redesigned product, as the number of users on the app kept growing, we received a lot of user feedback. This called for iterating on the first versions of the design. Here’s what changed based on user feedback:

Streamlining the Home screen into one that works well for new as well as repeat users

Reducing the cognitive overload on product cards by making them more concise

Over the last year, we have made multiple such iterations on the product, watching and listening closely to our users and making changes accordingly on the product. Here’s what they have been saying about the app:

Where are we with FUNDtastic?

As of today, we continue to work on the app, iterating on designs based on user feedback and new business needs. We are collaborating closely with their product and engineering team to provide a simple and easy to use financial management platform.

We’re excited to continue shipping great experiences for FUNDtastic users. Try the app by yourself — you can download it from Google Play or App Store. You can also visit the website here.

Thank you for reading!