How to Integrated E-money Paying Trough Fippay — Case Study KRL and MRT
Case Study Challenge from Binar Academy X Kampus Merdeka-Group 6
Introduction
Problems
Fippay
Fippay-Fast & Instant Payment
“To provide instant & secured digital transactions for everyone”
Being an instant method of payment using NFC features to make efficiency, convenience and secured transactions of over millions of public transportation user.
Fippay is integrated apps using NFC as a way of payment in all JABODETABEK’s area.
Design Sprint
A. Stage 1: Empathy
During this stage, we try to deeply empathize with the people we design for this, so that we can understand their needs, thoughts, emotions, and motivations. In this case, we chose an in-depth interview (IDI). 3 things that we prepare in advance before the research itself, starting from the selection of Research Objectives, Research Objectives and Research Questions.
Research Goals
Provides convenience for e-money transactions that are integrated with mobile phones (study case: KRL and MRT)
Research Objectives
Understand the understanding of Indonesians in using e-money and what problems are found in the KRL and MRT case studies
There are several competitors that solve similar problems in Indonesia, one of which is:
Electronic money card balance
Electronic Money Card Balance is used to check the balance and transaction history of various types of e-money cards used, such as Flazz, e-money, Brizzi, TapCash, and Multi Trip Cards. This application can be the right solution if you have more than one e-card. -money.
eSaldo Info
eSaldo Info provides a platform to make it easier to check the balance of the e-money card used. Not only one, this application is able to check various types of different e-money cards or can be said to be universal checks. The types of e-money cards that can be checked using this application are e-money cards, e-toll cards, Indomaret cards, Tapcash cards. , Flazz card, Brizzi card, Jak Lingko card, Megacash card, kMT (Commuter line) Felica.
BNI TapCash Go
BNI Tapcash Go is another option for NFC applications for e-money that can be used. As the name suggests, this application was created by Bank BNI and is shown to those who use e-money card products from BNI. BNI TapCash Go provides quite a number of very interesting features for users. Of course, the various features available will allow users to experience real benefits. There are features to check e-money balances, update balances, top up balances with debit cards, and track transaction history.
All of these competitors have one common solution, which is to help users check e-money balances and more.
B. Stage 2: Define
i. User Persona
User Persona is a representation of all the behavior of the target consumer obtained from thorough research. In other words, a user persona is a user profile that seems real and representative. The essence of the user persona is goals and frustrations.
ii. Point of View
The point of view further clarifies the point of view of the intended user in this application.
iii. Defining the Problem
After determining what kind of user we want to be the object of this research, we define what problems the user actually feels and write down the points below.
- Based on the results of the Interview and Questionnaire, KRL payments using cards are less efficient and inconvenient.
- A payment system that is easier and integrated with handphones is needed
- A platform is needed to integrate different types of e-money
- Solution through the payment feature via HP NFC connected to digital payment applications
- Based on revenue research, the application is very possible to use
iv. How Might We
- How to provide transactions that are easy for users to understand?
- How to present digital transactions according to user needs?
- How to build trust in users for digital transactions?
- How can we help users in the digital transaction process?
v. Designing the Solution
After defining the problem felt by the user, we compiled a possible solution to answer the user’s problem and summarized it in the points below.
- Providing a platform that accommodates various types of e-money for transactions
- Build NFC transaction facilities that are connected to various types of e-money users.
- Providing effective and efficient means of transactions with NFC technology for KRL/MRT users.
- Quick access from the widget for NFC scan in crowded places.
C. Stage 3: Ideate
i. UI Design
Next, we start with the ideation stage. First, we create a logo that represents our application. We are also the creator of the meaning of each component that is used both in the logo and in the application later.
Logo explanation & Philosophy
Color Orange
Symbolizes warmth, energy, friendly, optimism, confidence. wherein the operation of this application is based on friendliness, and is full of optimism to be able to assist users in transacting effectively and efficiently.
Letter F
Is the initial letter of the name of the application, namely Fippay.
The flexibility of Pay Activity, where in today’s digital era it is very important to be adaptive and flexible in responding to changing times. The Fippay application is expected to be able to answer the challenges of the digital era, namely by transacting via smartphones.
Network Alert/Signal
As a symbolic transfer of information, especially digital transaction information from users to transportation vendors, in this case, is KRL/MRT. With fippay as a platform, it is hoped that it can bridge the process of digitizing transactions in public places through NFC technology.
ii. Sitemap
After collecting and prioritizing features from Fippay, we compiled a sitemap containing feature maps and in-app navigation to simplify the wireframing process.
iii. Wireframe
After creating the sitemap, we made a rough sketch of the wireframe of the application to make it easier to determine the layout and workflow to be further developed into a high fidelity design.
Overall, Fippay’s interface that is displayed uses elements that are easy to understand with commonly used flows to provide a good experience when used even when in a hurry.
D. Stage 4: Prototype
i. Design System
First of all, in designing, we have to define what color some components will be used in the application such as colors, fonts, icons, and buttons. This Design System will be a guide in making high-fidelity designs from our prototypes.
ii. Prototype
Each workflow is organized into a single unit called a prototype. Users can try the prototype below to feel the experience of using Fippay.
E. Stage 5: Test
In the final stage, we conduct a validation test that will answer whether our application is following the problems and solutions that have been defined at the beginning. At this stage, we are also expected to get feedback regarding the user experience in using the application in terms of non-goal components such as colors, fonts, and layouts.
We do usability testing online with Zoom and Maze to measure how successful users are in using the applications we create. From the feedback received, we will improve both the design and content of our application in the next development.
We did usability testing on 3 users who approached the user persona. The assessment is carried out using the System Usability Scale.
SUS Score: 75.83
Grade: B (Good)
Conclusion
So, that’s all the processes we did while developing the Fippay application until we validated it with Usability Testing. Fippay is an application that will have great potential in the future because it can strengthen the function of mobile phones and e-money users which will make it easier for them to increase in the future. Of course, there are still many shortcomings from Fippay that still need to be developed further.
Thank you to the Circle team, Kak Vinda, and Wave 1 Binar Kampus Merdeka for this opportunity! We learn a lot from every process we run during the development of Fippay to date.
Btw, thanks for reading this article! Hope this design case study has been useful, hope you can get some insight from what I did in this project. Below, I’d also like to share with you some of my learning.
What We Learned
- The process of putting the framework together is very difficult. We worked with different frameworks, and first, we learned how to get different frameworks from different fields to do a job together.
- Define the scope of work well. When working together, of course, some things are done together and some things are done simultaneously.
- Use methods and techniques that can help make the floating process easier. Every process is learning, so don’t settle for using one particular technique.
- The process of finding a good problem and solution is to understand the user well. Empathy is the most important thing in this case. Don’t try to show the best but it doesn’t suit the user’s needs,
- Any input or suggestions are highly appreciated for the improvement of this product. You can leave a comment below or contact us personally via email :)
Meet Our Team
