Background
Nowadays we live in the technology era, and it is growing so fast. Every day, everywhere, every time we use technology to work, to get connected with others, to socialize, do business, do transactions, play games, and etc. This convenience of technology makes us used to doing everything online. We do know that there’s also a lot of digital products. Among millions of digital products available, one of the products that exist to help people is Digital Bank. Digital Bank utilizes the easiness of the modern Bank and shifts the saving behavior in financial needs.
Jago Bank is one of the digital banks that provides easy, interactive, and innovative solutions for people. Besides the common Digital bank services such as top-up, pay bills, fund transactions, and organizing the wallet, Jago Bank also provides shared pockets, which allows the users to organize their financial needs for activities with their family and friends. Therefore, it helps users to become more organized and structured. For example, a user organizes a planned vacation and they are using saving features so that everyone who joins the vacation has their status to their saving amount with the exact transaction date and time. And everyone who joins can be notified through their phone.
Other than that, the users can personalize their own e-wallet for certain purposes. They can freely categorize their own wallet for its function with easy and simple steps. Also, they can customize their own Jago Bank screen button shortcut according to their needs.
Speaking of the other digital products, users also seek a digital product that provides their needs to invest. Thanks to technology and innovation, now people can use many digital products that fulfill their daily investments. According to DailySocial.id by July 2021, one of the most used Investments products is Bibit, which now has more than a million users registered.
Bibit itself is a mutual fund platform to help new investors start investing. Anyone can directly invest optimally according to the level of risk. PT Bibit Tumbuh Bersama (“Bibit”) acts as a Selling Agent for Mutual Funds (APERD) which is registered and supervised by the Financial Services Authority.
Besides, we are considering some reasons why we choose Bibit is because Bibit provides complete information that is easy to understand for various groups of people whether they are newcomers or advanced financial planners. No wonder if they had more than millions of users since it was founded in 2013. Users also can get the benefit of free charge from Investment and administrational fees. Other than that, Bibit is already registered and monitored by The Financial Services Authority so the safety is trustworthy.
With a good track record of Digital Bank and an increasing number of users every day, we can see that Jago Bank has a good potential to be upgraded into the next level of Digital Bank. Also with Bibit, we can see both opportunities to be engaged with users. That’s why we want to make a feature that combines the digital product needs and the financial instrument that users usually use.
The team
Our team consists of 3 UIUX Designers. Besides me, there is Jocelyn Fabiola and @Indra Maulana. We all share the same responsibility in handling this project as UI/UX designers through all of its processes.
Research Method
The Survey
To validate how users interact with digital financial products and to get more context of the usage and variation investment they are interested in, we prepared a survey using Google Forms and distributed it among people in the age 25–45 years old group.”
This data helps us to avoid assumptions. It provided a better chance to discover the root of the problem and struggle to determine the right solution to be solved.
There’s 19 respondents that participated in our survey. And 84,9% of respondents answered that they are digital bank users and stated that mutual funds are their first investment choices after gold, bond mutual funds, and stock. They find it more helpful if they have one compact digital financial account that provides their financial plan.
Besides, we also found the struggles and difficulties that the users faced when they have two or more digital financial applications. It is because they must repeat the registration process all over again. 65,4 % of users say that they are bothered if they must do top-up to many different accounts and they are unwilling to remember some of the account names and passwords.
We collected some concerns from our user’s feelings about having more than one financial application. We have made this User persona to depict their problem.
Personas
The accumulation of the different insights and common patterns that came from the user’s answers helped us to create this persona which is the manifestation of that data in a character. It contains several important points that keep us focused on a specific user problem and needs. And whenever an idea for a new feature or demand comes up we can benchmark to this persona and are not distracted.
User Journey
Next, we scripted the behavior of our persona’s during the entire process. This process helps us to decide how we can fitly design the apps with the experience that users need. In addition, we can solve the pain points while they are using the application.
Identifying Problems
There are several problems that can be concluded from the users Survey and Journey :
- Different platforms of financial application should be noticed as different account balances, it needs the users to save their money in more than one platform. They need to check from one application to others to make sure their balance is active.
- The users need to repeat the registration process and remember the username and password for each application over again.
- Two or more financial applications can be too much for users so it ends up with unused applications and also consumes phone memory.
- They found it less than effective, if top up, do transactions, see financial portfolio reports, and search for investment lists should change from one application to the others.
Solution
We found our ways to solve this problem through convergent thinking — we determined the solution based on the facts that we have got.
It is the type of thinking that focuses on coming up with the single, well-established answer to a problem. It is used as a tool in creative problem-solving. When an individual is using critical thinking to solve a problem they consciously use standards or probabilities to make judgments. — teachthought.com
Through the facts we gathered from the users, we focused our team to Developing an MVP of investment product where:
- We partner with Bibit to provide Progressive Web App on Jago App
- We provide time deposit & bonds mutual funds product via Bibit with the low to moderate risk of investment as the first entry to investment for new investors
User Flowchart
A flowchart gives us a clear illustration of any possible step that users choose when they are using the application. It will help us to look in more detail about what page is a necessary need and can be implied into our design.
We separated this user flowchart into 4 sections.
Part 1 : Log In to “Jago Investasi”
Part 2 : Buy Mutual Funds
Part 3 : See Investment Portfolio
Part 4 : Sell Mutual Fund
Wireframe
Wireframe process is a quick way to give an overview of the whole page and helps much to arrange the interface elements and focus on the functionality rather than what it looks like. The simplicity of wireframes allows us to quickly test ideas without diving much into the details.
We used whimsical.com as the web application to help us make this wireframe. It’s really easy to use, and the links also can be shared with the team, so we can work together!
Story Board
This storyboard is describing the differences in users’ experiences before and after using Jago Investment (one that already integrates with Bibit). With this integrated system, the user can manage their financial report through one platform. This storyboard also helps us to explore how the product will be used in the larger context as if it was a part of a bigger narrative.
Visual Research
This visual characteristic is associated with the Jago Bank Existing application. Since we created the integrating menu and page into Jago Bank called “Jago Investasi”, we must take a harmonization of the design from the beginning until the end of the process.
Colour Palette
We separate the color of our application with this specific category :
Premier Color: Orange, Yellow, and Peach
Secondary Color: Dark Purple and Violet
Neutral Color: Grey, White, and Black
Typography
TT Commons is a font designed by TypeType. It is a universal sans serif with a minimal contrast of strokes, a closed aperture, and geometric shapes of characters. Clarity and simplicity is the key to our finance application to be, so we decided to go with just one font family.
Design System
We made a design system so our design could be coherently organized. We use the same font type, size, color palette, icon, tabs and button for the entire design of this application. With this system we did not need to repeat the same button interfaces again.
High Fidelity Design
Log in (Integration from Jago into Jago Investasi)
In these steps users will be directed to the page Jago Investment after the system finishes checking the user’s data. There are two possibilities that will
The user that have been registered in Bibit account — the result is users will be directly into the homepage of Jago Investasi (powered by Bibit) with the data that Bibit has already saved before. It’s mean all of their portfolios also will be appears automatically on this page.
The users that never been registered in Bibit account before- They need to be registered in Jago Bank first and their account name is integrated automatically with Jago Investasi powered by Bibit.
Buying Mutual Funds directly from list
The mutual fund’s transaction can be accessed by users through variative ways, those following ways are:
1. Mutual Funds list
The users can directly click on the mutual funds’ list on the product page, they will be directed to the details of the products and can directly buy through the “buy” button on the screen
2. Filter Features
The user who uses these filter features can find the specific type of mutual fund through the aspect of information that is shown on the screen, while they can choose the period of time according to their needs, and buy the mutual fund(s).
3. Compare Features
Through this compare feature the users need to choose a minimum of 2 types of mutual funds to be compared and the differences also details of each mutual fund as each list will be shown.
4. Sell their mutual funds from portfolio
Portfolio is the source of the user to sell and buy their mutual funds. It’s also helped users to have an information and history of their transactions before.
Usability Testing
We did some usability testing to know more about how the user interacts with the application that our team already made. There are 5 users that participated in this process, we used Maze tools since it can help us to organize the report and detail of users’ interactions toward the application in the easiest and clear way.
Our team made 4 task for each flow to finished by the users, 3 task is finished by an average of 2s to completed. For filter features, our team got the same feedback from users, which were users is a bit difficult to drag the period time button, so its take more longer averages time than the others flow.
Our team made a revision for this features filters so its can be more easier to use without reduce function of this features itself.
Conclusion
What did I Learn?
Designing the application is something that is challenging for me. Lots of things that need to be considered, besides the aesthetic and interesting design appearance. The key point is how the application can give an effective solution to its users. That effective solution is obtained in many ways. But these following steps helped me much in this project: it begins with the awareness of the designer to see the problem around them, feel empathy towards users, gather data and do deep research, discuss with the team, do trial and error before we design for the final result. This whole thing is a unity of the design process.
I can feel how the communication between the team is also playing an important role to achieve a design solution that effective and useful for its user. We gift the ideas, receive feedback, do revisions, and repeat. Therefore, design is a never-ending process, it always continues to always innovate and develop to create better and better results for the future. For one-step into another step, from product to another product.
As Mark Parker (CEO and shoe designer of Nike) says :
Design is an iterative process. One idea often builds on another.
