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:
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.
Since a major part of this product is focused around investments, it was important for us to educate users about:
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:
FUNDtastic aims to be the one-stop for all such wealth management needs of the user.
Based on the above problems, FUNDtastic realized that their users need a digital platform that can help them:
Once we have communicated with the client and have had a good understanding of the business and product goals, our work process begins with:
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.
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:
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.
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:
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.
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.
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.
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.
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:
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:
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.
If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.