Bank Jago Last Wish Feature — UI/UX Case Study

Muhammad Fadli Azis
6 min readOct 24, 2021

--

This project is part of the UI/UX Training Program held by the Ministry of Communication and Information with Skilvul and Bank Jago as Challenge Partner. I am not employed or bound by a professional contract by Bank Jago.

Overview

Nowadays, Bank Jago (Gojek Subsidiary) has become one of the largest banks in Indonesia which focuses on digital banking. Through the support of Gojek ecosystem, this bank disrupts traditional banking and grows rapidly with a large number of users in a short time. Currently, Bank Jago is developing a life insurance feature with a new style called Last Wish. Based on the survey, many people have a negative impression of life insurance and fear death. Therefore, through the Last Wish feature, Bank Jago wants to make life insurance fun to use and give a positive impression.

On the other hand, Jago Last Wish is one of UI/UX challenges in Skilvul platform. As a tech-savvy that uses Gojek and Jago App daily, I take this challenge for my first UI/UX project.

Objective

  1. Create new app features for users to make plans that anticipate unexpected events in the future.
  2. Create a mobile application design for Jago Last Wish feature related to life insurance products.
  3. Create a user-friendly feature with a positive impression to make various inheritance, payment, and management.

Task Responsibility

In this case study, I worked with Rodrigo Osvaldus and Fauziah as a UI/UX Designer and was mentored by Muhammad Ridzky and Hafidz Noor Fauzi. I had responsibilities for research, problem-solving, user flow, wireframe, style guide, prototype, and user testing.

Design Process

In this case study, we used design thinking as our design process approach. We chose it because we wanted to integrate the needs of people, the possibilities of technology, and the requirements for business success. This process consists of 5 steps as shown in Figure 1.

Figure 1. Design Thinking Process

1 — Empathize

In this step, we research to find out views and the needs of target users related to life insurance and inheritance. We analyzed some websites and mobile app life insurance. Also, we learned the notary administration process for inheritance. In addition, the challenge also gave us a user profile (based on survey) that can be our persona to help us empathize more as shown in Figure 2.

Figure 2. User Profile

2 — Define

In this step, we defined user problems based on empathizing results and made user pain points as shown in Figure 3 using FigJam.

Figure 3. Pain Points

Subsequently, we voted to decide How-Might We as an opportunity as shown in Figure 4.

Figure 4. How-Might We

3 — Ideate

In this step, we brainstormed solution ideas based on define results as shown in Figure 5. We formulated a solution to make it easier for users to make a will with a positive impression.

Figure 5. Solution Idea

After that, we made an Affinity Diagram to group ideas into the same category as shown in Figure 6.

Figure 6. Affinity Diagram

Next, we made a Prioritization Idea as shown in Figure 7 to determine what features should be done first based on User Value and Effort.

Figure 7. Prioritization Idea

In addition, we also made Crazy 8’s as shown in Figure 8 to make a preliminary exploration of the design.

Figure 8. Crazy 8's

4 — Prototype

In this step, we made User Flow based on ideate results. User Flow is a diagram of the steps the user must take to complete a task. There are five main user flows in this prototype as shown in Figure 9.

Figure 9. User Flow

After that, we made wireframes (low-fidelity) based on the user flow. This wireframe was used to present interface information, to provide an outline of the structure and layout of the interface, and to speed up the ideation process. Figure 10 below shows an example of our wireframe for User Flow 1.

Figure 10. Wireframe

Subsequently, we made a design system to make a consistent design and to speed up the work process of the UI designer and developer. Figure 11 below shows an example of our design system.

Figure 11. Design System

Next, we made the UI design (high-fidelity) based on the wireframes and applied the design system. Figure 12, 13, 14, 15 and 16 below shows the example of our design system.

Figure 12. UI for User Flow 1 (Created by Rodrigo, Fadli, and Fauziah)
Figure 13. UI for User Flow 2 (Created by Fadli)
Figure 14. UI for User Flow 3 (Created by Fauziah)
Figure 15. UI for User Flow 14 (Created by Rodrigo)
Figure 16. UI for User Flow 15 (Created by Rodrigo)

Lastly, we made the prototype fidelity (interaction) to try and simulate the design solution. The following is our prototype using Figma.

5 — Testing

In this step, we made user research document. We prepared some resources as follows:
1. Stimulus User Research Document (.docx)
2. Record Data User Research (.xlxs)
3. Figma Prototype
4. Zoom & Screen Recorder

Next, we conducted in-depth interview and usability testing on Thursday, 21st October 2021 as shown in Figure 17.

Figure 17. In-Depth Interview and Usability Testing

In usability testing, we tested 3 tasks to obtain user feedback.

Task 1. User makes a will (life insurance, assets, and others)
Based on the test, the user was a little confused about the meaning of this task. It should be directly making a letter or video that consists of the wish and inheritance share. In addition, the user recommended adding the discount to the payment page and comparison detail to the insurance company page. Overall, the user can understand the process in this task.

Task 2. User shares a will
Based on the test, the user was confused for the first time. However, after completing all the processes, the user can understand the purpose of this task. The user recommended adding stepper or landing page for guidelines.

Task 3. User, as an heir, claimes a will
Based on the test, the user really liked the feature. It is simple and easy to understand. Through this feature, people can have the privilege to claim without being sued by others.

Single Ease Question
From points 1–7, the user gave 6 points and it was considered to have met the user’s expectations.

Conclusion

After conducting the design process, based on usability testing, the proposed solution has fulfilled the user needs. The solution makes it easier for users to make a will with a positive impression. However, this solution still needs some improvements such as redefining the make a will feature, adding guidelines, discount on the payment page, and insurance company comparison.

Recommendation

  1. Improvement in the dashboard to distinguish between heirs, inheritance, and wills.
  2. Adding the discount to the payment page.
  3. Adding comparison detail to the insurance company page.
  4. Adding stepper for guidelines.

Thank you for reading. Let’s get connected.

LinkedIn | Instagram

--

--