UI/UX Case Study — Jago Last Wish Feature on the Jago App
FOREWORD
Considerable time and energy were invested in the completion of this project, and upon its finalization, a deep sense of relief and pride was experienced in acknowledgment of the dedicated efforts. While the design solution featured in this aspect may still possess certain shortcomings, the gratitude is heightened by the contribution of the conducted research and the maximization of creativity that has been poured into it. This realization underscores that we did not take this opportunity for granted, recognizing it as a platform for making mistakes, learning, and growing for continuous improvement.
INTRODUCTION
Skilvul is a subsidiary of PT. Impactbyte Teknologi Edukasi collaborates with Bank Jago in the ‘Challenge’ program. As a Kampus Merdeka Certified Internship (MBKM) participant, I had the opportunity to do an internship at Skilvul, named Skilvul Virtual Internship, I chose the challenge from Bank Jago to take on. Bank Jago assigned participants to be able to solve UI/UX problems. In this case, Bank Jago needed the Jago Last Wish feature on the Jago application itself to improve their life-centric principles and also make their financial needs as easy as possible on a day-to-day basis.
In the making process, the mentor divided the team in which one team has at least three people. In our team, Rafi Kurnia Pangestu (myself), Afnita Fitri, and Muhammad Shofiyan Al Faza, worked with equal roles from start to finish.
Disclaimer: This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Bank Jago is the Challenge Partner. I am not working for and not contracted professionally by Bank Jago.
OBJECTIVES
Based on the problems presented by Bank Jago on its challenge, it can be concluded that we must be able to:
- make an easy process of making digital last wish,
- make a streamlined calculation of monthly premium payments,
- and provide easy premium payment and claim processes.
RESEARCH METHODS
- The design process was facilitated using the Design Thinking Method.
- Data collection involved the utilization of an Open Questionnaire and In-Depth Interview. To address pandemic constraints and time limitations, the open questionnaire was intentionally conducted online, focusing on gathering users’ opinions regarding the contents of an insurance app. The In-Depth Interview, serving the same purpose but with a more restricted coverage, was also conducted.
- For assessing user satisfaction with our proposed solution, the Single Ease Question Method was applied, employing a numerical range from 1 to 7 (indicating very difficult to very easy).
DESIGN PROCESS
Design thinking is a non-linear iterative process that teams use to understand users, question assumptions, redefine problems, and develop innovative solutions for prototyping and testing. Comprising five stages (empathize, define, ideate, prototype, test), it proves most beneficial when addressing problems that are vaguely defined or unknown.
- Empathize. This involves consulting with an expert to learn more about the area of the problem by observing, engaging, and empathizing with people and understanding their experiences and motivations, or by immersing yourself in the physical environment and achieving it. It involves a deeper and more personal understanding of the problem
- Define. This is the stage where the designers describe the problems that have been obtained through Empathize. Make a list of problems and look for solutions that roughly represent the solutions to existing problems
- Ideate. It is carried out when the results of the agreement on which solution will be used to solve the problem have been determined. From that agreement, then the team will pour out as many ideas as possible without limit.
- Prototype. It is done by starting to design everything that has been determined at the ideate stage, especially on the style guide that has been made. In the prototype, the design must have been given components, colors, writing arrangements, and interactive responses
- Test. It is carried out to measure the level of user satisfaction with the design idea solutions that have been made. Things that need to be considered, such as aspects of feasibility, usability and viability.
1. EMPATHIZE
The first time, we empathized through open questions on a Google form questionnaire with a list of questions as follows.
- Have you ever used a life insurance service to support unforeseen expenses in the future (e.g., hospitalization coverage, formal education, accident, death, etc.)? Why or why not?
- Do you believe having life insurance (life, health, education, etc.) is crucial to handle unforeseen events in the future? If yes, what makes it important? If not, what is your reasoning?
- When you hear about the term “guarantee” or more commonly, “insurance” with regular fees, often associated with potential distressing events like illness, accidents, dropping out of school, or death, what types of guarantees do you envision?
- Should premium payments be based on insurance filing salary? Why or why not?
- Do you support the idea of a mobile application that simplifies life insurance registration? If yes, what features do you consider essential in the application related to the guarantee itself (e.g., accurate user identity verification, various guarantee request options, easy-to-understand policies, easy request type configuration, and premium amount adjustment)? If not, please explain your reasons.
- Which payment method do you think facilitates regular/premium payments the most (Bank/credit card/mobile banking/digital wallet, etc.)? Why?
- Based on the above questions, do you have an overall opinion about life insurance or insurance in general? (Free opinion)
Following the questionnaire, the data collected from the 51 respondents were condensed into user personas. However, for clarity and brevity, two representative personas were selected while preserving the privacy of respondents’ names and photos. The data obtained from the research questions remains unchanged.
2. DEFINE
All the points obtained from the user were documented, and the most feasible solution on “How-Might-We” was created in FigJam. The following represents the outcome of team brainstorming.
2.1 — Pain Points
Twelve pain points were gathered by the team.
- More specific agreements (contracts) regarding guarantees
- Educational guidance related to insurance
- It’s rare to see a guarantee for traveling, especially for those who are married
- Lack of socialization about the importance of life insurance in society.
- Lack of clarity of information regarding insurance regulations and in the midst of this pandemic it is difficult to communicate directly
- Lack of information regarding the terms of the guarantee
- Do not have a mentor/trusted person to ask for information related to insurance
- Don’t understand what insurance is needed
- Difficult claim process
- Lack of public trust in the guarantees provided
- Many insurance companies are not transparent
- Lazy to go to the insurance office directly
2.2 — How-Might We
A list of “How-Might-We” was created by the team, followed by a voting process. It was revealed that two “How-Might-We” items received an equal number of votes. Ultimately, a second round of voting was conducted by the team to determine the final result.
The result obtained was that we were going to create a guarantee feature (will) that supports unexpected situations in everyday life with an easy-to-understand flow.
3. IDEATE
3.1 — Solution Idea
Twenty-four solution ideas were generated by the team. These solution ideas serve as sub-features intended for the design of the last wish feature.
- Choice of beneficiary category feature
- Make a last wish feature
- Last wish for a family feature
- Change the amount of premium payments at any time according to financial conditions feature.
- Terms and conditions feature
- My last wish, top up, balance, and transfer, features
- Add last wish feature
- Insurance history feature
- Rechecking all details of filling in insurance data before submitting feature
- Due reminder pop up feature
- Last wish history feature
- Live chat feature
- Tips and tricks (articles) to help a frugal lifestyle and education related to insurance feature
- Digital signature feature
- Family member’s content view of the last wish feature
- Insurance category list features
- Insurance beneficiary identity verification feature
- KTP (ID Card) data auto-fill feature
- Add beneficiary financial account feature
- The history of premium payments that have been issued feature
- Set insurance pick-up schedule feature
- Tour guide related to insurance feature
- Choose an insurance institution (conventional or sharia) feature
- Calculator to calculate premium feature
In the process of compiling a list of solution ideas, not all of them could be implemented due to the necessity of aligning with the actual on-ground realities. Here are some specifics:
- Number 4: It couldn’t be realized since, upon agreeing with an insurance partner, there are lengthy procedures that remain unalterable at the last wish. To work around this, we made adjustments limited to changing the title and description of the last wish.
- Number 6 (Top-Up, Balance, and Transfer): These were modified to Bayar Premi, Pindahkan Uang, and Kirim features as they better suited the context.
- Live chat feature: It was deemed irrelevant and, therefore, not feasibly presented.
- Number 19: It couldn’t be executed due to potential scenarios where beneficiaries might no longer use the associated bank account.
3.2 — Affinity Diagram
3.3 — Prioritization Idea
From the innovated features mentioned above, prioritization ideas were formulated, wherein the features were categorized based on their nature, from those considered easier to implement first to the more complex ones.
The distribution was executed by examining the categories of the Yes, Do It Now, Do Next, Do Last, and Later boxes. The work was symbolized by a horizontal arrow, where the further to the right, the more labor-intensive the task, and the value was indicated by a vertical arrow, with the higher position signifying a higher value being generated.
3.4 — Crazy 8’s
The Crazy 8’s exercise was conducted to familiarize the team with generating preliminary concepts for the UI that would be developed later.
3.5 — User Flow
A benchmark for user flow in accessing tasks on the future Jago Last Wish feature was established through the creation of a user flow. The UI creation, designed concerning the user flow, was a swift process, minimizing the required time. Task division was also implemented during the creation of wireframes. Below are the wireframes and the assigned tasks for each team member:
3.5.1 — Make a last wish and buy an insurance product (by Afnita and Rafi)
The completion of the “Make A Last Wish” task, specifically filling out the last wish message, was undertaken by Afnita. Simultaneously, Rafi (myself) was responsible for progressing with the “Buy An Insurance Product” task, focusing on the validation of its payments.
3.5.2 — Independent Premium Calculator (Rafi)
Indeed, there are two calculators — one independent and the other dependent. The dependent calculator is situated within the insurance product linked to the last wish, appearing just before the confirmation step. It is embedded within the series of forms for the “Make A Last Wish” feature.
On the other hand, the Independent Premium Calculator is positioned on the homepage of the Jago Last Wish feature. Unlike the dependent calculator, it doesn’t necessitate searching for the insurance company by navigating through multiple pages. Instead, users can simply click a dropdown and choose from the available companies.
3.5.3 — Riwayat Pengeluaran User Flow (Faza)
The user flow is designed solely for viewing the total expense history thus far.
3.5.4 — Last Wish Saya User Flow (Rafi)
This feature is exclusively for reviewing the last wishes that have been made. The last wishes are categorized into three groups: “Berlangsung” (ongoing), “Selesai” (completed), and “Batal” (cancelled). The “Berlangsung” category is designated for ongoing last wishes where the premium is being paid gradually.
3.5.5 — Aktivitas User Flow (Faza)
A user flow for “Aktivitas” (activity) was created to visualize all the activities conducted within the Jago Last Wish feature.
3.5.6 — Jago Baca User Flow (Afnita)
The user flow for “Jago Baca” was developed to provide options for reading articles on economical practices and tips for last wish planning.
3.5.7 — Asuransi Terhubung User Flow (Faza)
The “Asuransi Terhubung” (connected insurance) user flow was crafted to enable users to view all the insurance products selected as support for the last wishes they have made.
3.5.8 — Bayar Premi User Flow (Afnita)
The option for paying premiums was designed to be available both on the Jago Last Wish Homepage and within the details of the last wish. The flow proceeds after clicking the “Bayar Premi” button itself. The following outlines the premium payment process on the home’s last wish page.
3.5.9 — Klaim User Flow (Faza)
The claim feature was ideated to be placed either on the Jago Last Wish Homepage or within the details of the last wish, particularly where the premium payment has been completed.
3.6 — Style Guide
The style guide section encompasses key design elements, including a defined color palette, typography guidelines, and consistent iconography. It provides recommendations for layout, images, buttons, forms, and navigation to maintain a standardized and user-friendly interface. Responsive design considerations ensure a seamless experience across devices, while animation guidelines and micro-interactions enhance user engagement. Accessibility and error state recommendations contribute to a positive user experience. Overall, the style guide ensures a cohesive and visually appealing design throughout the application.
4. PROTOTYPING
Prototyping underwent a division into two phases: initially sketching the raw form of the UI, known as a wireframe, followed by crafting the UI Design itself, enriched with the correct color schemes and relevant data.
4.4 — Low-Fidelity Prototype (Wireframe)
4.5 — High-Fidelity Prototype (UI Design)
- Jago Last Wish Shortcut on Jago App Homepage UI
When the Jago Last Wish shortcut was displayed on the Jago App Homepage, the feature button was situated within the Shortcut group, in accordance with the instructions indicated by the red box object.
- Jago Last Wish Onboarding UI
The onboarding pages served as an introduction to the main features innovated by the team within the Jago Last Wish feature. These features encompassed Buat Last Wish (make a last wish), Kalkulator Premi (premium calculator), and Last Wish Saya (my last wish).
- Jago Last Wish Home UI
The UI of the Jago Last Wish Homepage, comprised of a group of columns, presented the following elements:
- The first column: Bayar Premi, Asuransi Terhubung, and Aktivitas.
- The second column: Featured Jago Baca, housing articles providing tips and tricks for managing finances in our digital last wish.
- The third column: Encompassed features (Fitur) representing the main innovations by the team: Buat Last Wish, Kalkulator Premi, and Last Wish Saya.
- The last column: Showcased Riwayat Pengeluaran, containing both overall and detailed expense information.
- Buat Last Wish UI
Two possibilities exist for beneficiaries: those who already own an ID card and those who do not. Since insurance can be created for children, ID card validation is required, typically performed by the last wish maker or the responsible party. The following outlines the process of making a last wish when the beneficiary already has an ID card.
The following pertains to beneficiaries who do not possess an identity card yet, typically individuals under 17 years of age.
Subsequently, the next step for both scenarios involves writing the title and content of the last wish. Additionally, the selection of an insurance product to support the last wish is part of this process.
In the displayed UI above, the option to purchase insurance was accessed by users through clicking the “Pilih asuransi untuk dibeli” button.
Subsequently, they were directed to the Beli Asuransi page. On the Beli Asuransi page, a display similar to the one below was presented, allowing users to search for insurance companies and products aligning with their last wish.
After confirming the choice of the insurance product, users could proceed by clicking the “Lanjut” (continue) button, directing them to the dependent premium calculator. In this section, users could input details such as the income target, set payment frequency, and other relevant information to determine the premium amount. The UI for calculating the premium until the successful payment is depicted below.
It’s worth noting that separate columns for conventional and Sharia insurance were created to simplify the selection process for users, addressing concerns raised in Halil’s persona regarding frustration.
Upon completing the purchase of insurance, the page would revert to the previous last wish filling form. A visual indicator would confirm the connection between the insurance card and the last wish filling form, as illustrated below.
Following the insurance purchase and the connection confirmation, the subsequent step involves digitally signing the agreement and verifying that the last wish has been accurately made.
- Bayar Premi from Jago Last Wish Homepage UI
Paying premiums through the Jago Last Wish Homepage operates on the same principle, with the only difference being the presence of a pop-up display to input the payment amount and confirm security by using Jago’s account PIN.
- Asuransi Terhubung UI
Upon clicking “Asuransi Terhubung” on the Jago Last Wish Homepage, users would be directed to this page, along with the information of the cards they contain.
- Aktivitas UI
The “Aktivitas” section encompasses any information related to actions taken within the Last Wish feature.
- Riwayat Pengeluaran UI
The “Riwayat Pengeluaran” section was designed to furnish information on expenditures made by the user, presenting both the total amount spent on all last wishes and detailed breakdowns for each individual expense.
- Last Wish Saya UI
The “Last Wish Saya” page was designed for users to view all the last wishes they have made.
- Klaim UI
The final step in the Last Wish process was undoubtedly the claim (Klaim). This involved various validations, including the completion of death certificates, beneficiary’s personal data, and a digital signature. Additionally, the beneficiary was contacted by the Jago team for video validation of personal data.
To access and try the prototype, it can be done by either:
- accessing it directly from the simulator below (click the full-screen button and set the options to Fit — Scale down to fit to adjust the size)
- or visiting this link and setting the option to Fit — Scale down to fit to adjust the size.
5. TESTING
To determine whether the design solution crafted by the team fulfilled user satisfaction, online usability testing was conducted via Zoom using the Single Ease Question method. During the meeting with respondents, additional user research was also undertaken to identify potential needs for an insurance application. The following questions were posed to respondents before proceeding to usability testing:
- What do you know about insurance in general?
- Have you ever purchased or become an heir to an insurance product purchased by someone close to you?
2 a. If you have never purchased, do you intend to buy insurance products for you or your family?
2 b. If you have already purchased, what type of insurance do you have?
2 b1. If you have already purchased, what problems have you experienced?
2 b2. What documents do you think should be validated in buying insurance or insurance claims? - In your opinion, how important is knowledge about insurance?
- If you look at existing products, do you have any other views that prevent you from buying the insurance product?
- In your opinion, how much influence does digital technology have in helping you gain knowledge about insurance?
However, the team did not gather additional insights from respondents regarding potential innovations that our team might not have introduced as new features. The Zoom meeting primarily concentrated on usability testing, during which respondents performed assigned tasks. The tasks directed to the respondent included:
1. Accessing the Jago Feature and Creating a Last Wish (Buat Last Wish)
2. Choosing Insurance to Purchase (Pilih asuransi untuk dibeli)
3. Calculating Premiums Using a Premium Calculator (Kalkulator Prem) After Choosing the Insurance Product
4. Uploading ID Card and Signing the Last Wish Agreement
5. Viewing Last Wish Saya & Paying the Premium (Bayar Premi)
6. Editing the Last Wish
7. Claiming the insurance
The documentation of the usability testing conducted is presented below. The team convened in a meeting, inviting one respondent. Faza assumed the role of the moderator, Afnita introduced the solutions of ideas that had been generated, and I, Rafi, guided the respondent through various tasks.
Upon completion of the tasks, the respondent assigned a score of 6 to the design solution created by the team.
This score indicates that the solution developed by us is one point below the perfect score, signifying that it is very easy to understand and access based on the Single Ease Question (SEQ) Method.
Also, the respondent gave his feedback on the:
TASK 3
- There should be a reminder setting on every predetermined date for premium payment
- On/off toggle to deduct money for premium automatically
TASK 4
- Choice of thickness for signature ink must exist because every user finger’s size is different
TASK 5
- On the top part of premium paid history snack bar must be added with an up arrow icon so as not to confuse whether it is a snack bar or not
- In the payment option, whether from Jago or outside Jago, there may be a dividing line to know that the article is clickable
TASK 6
- Edit last wish is allowed but with a limited period of time, for example a week after making the last wish. Do not edit at any time because it is bound by a complex insurance agreement. Components that can be edited such as the beneficiary’s name and NIK (family identification number)
TASK 7
- Video calls for validating beneficiary’s data seem too shocking, so for the validation, it’s better to be done via WhatsApp (Jago sent a WhatsApp confirmation message to validate)
User feedback really helped us to be more empathetic. The feedback that the user had given results in the design iteration can be seen below.
a. TASK 3 Revision
b. TASK 4 Revision
c. TASK 5 Revision
TASK 5 Point 1 could still be revised but for point 2, it is less necessary because the design has followed the same format as the Jago App itself.
Unnecessary revisions were identified in tasks 6 and 7 due to the following reasons:
d. TASK 6
It cannot be updated as data, including the name and NIK (family identification number) of the beneficiary, is governed by a strict agreement with the insurance company.
e. TASK 7
It cannot be revised because a video call to validate the personal data of the beneficiary needs to be conducted, following the procedure outlined in the Jago App itself.
CONCLUSION
Jago Last Wish is a novel feature introduced by Bank Jago. In our role as UI/UX Design Interns at Skilvul, we were tasked with crafting essential innovations for this feature. Employing the Design Thinking Method throughout the design process, we specifically utilized the Single Ease Question Method during the testing stage to gauge user satisfaction. The obtained score of 6 indicates that the feature is nearly categorized as “very easy” to use based on the SEQ Method.
Thank you for reading! Feel free to show your appreciation with claps, and don’t hesitate to share your thoughts in the comment section. Your feedback and discussions are highly valued. See you later!
Connect to my LinkedIn: Rafi Kurnia Pangestu | LinkedIn
