Bank Jago Last Wish — A UI/UX Case Study

This case study is the final project from Skilvul BootCamp for UI/UX Design in collaboration with DTS Academy for Pro A Program. This product comes from challenge given by Skilvul to be solved by participants.

Disclaimer: This is not an in-contract assignment with Bank Jago to redesign the Bank Jago App for developing their new feature. This case study was only the final project of the course that comes from the collaboration of Skilvul and DTS Kominfo with Bank Jago as a partner.

About Bank Jago

Bank Jago is a financial application that works with a life-centric principle. With Jago Application, managing your financial plan would be way easier, collaborative, and innovative, thus users can be focused on living their life, with their family and their friends. (https://www.jago.com/id/whoweare)

About This Project

I was involved in a 4-member team with various backgrounds. We conduct the design process from doing the desk research, brainstorming, defining problems, ideating, and prototyping, until the usability testing. We have done the design process for about 3 months from March until May 2022.

Challenge Brief

Jago currently is planning to make a new product that allows people to plan their life insurance. As we know, life insurance is very useful for planning ahead in case there is an unexpected event that happens and causes us to leave the family that still needs us to finance their life. But since Jago App users are mostly youth with the age of25–35 years old, they might have not thought about the unexpected event I meant before, because people think life seems too pessimistic to prepare for such things like that in early adult age.

Hence we need a solution that might help customers or users to make financial planning to anticipate any unexpected event that might affect the well-being of our closest persons (e.g. family).

We are challenged to make a solution in a form of a digital product or feature of Jago App that meets the requirements below:

• An easy process of making a will or last wish, and possible to present any kind of request.
• An easy calculation to pay monthly for the last wish or their life insurance financial plan.
• Managing the documents, including it is able to edit the will or last wish letter.
• Creative way about the lifestyle in order to minimize the monthly commitment fee for their life insurance plan.

Design Process

We used the 5-stage design thinking framework to conduct the design process. As mentioned previously, we conducted the processes of desk research (empathize), defined the problems, ideated the possible solutions, designed and prototyped them, and tested the prototype to the target users.

Figure 1–5 stage design thinking frameworks (source: interaction-design.org)

1 — Empathize

In empathize phase, we conduct the desk research to search for any problems that may occur with life insurance services and applications that have existed. We collected information and documented them using Google Spreadsheets. We gained the information from applications review, news about life insurance, and other reviews that we found about this service. The data collected would be used to conduct the brainstorming for defining the main problem among insurance customers.

Table 1 — Data collection of findings and insights about insurance services and applications

2 — Define

After collecting the information, data, findings, and insights about how life insurance services operational have been going so far, we conduct the discussion about the problem statement, most problems may occur on life insurance services or applications. We did the workshop session for discussing the problem statement utilizing FigJam application. So we got this!

Figure 2— Pain Points

We collected these insights and discovered/identified the common thread of the problems are:

• Lack of customer trust in life insurance service
• Long and complicated procedure in registering and claiming the insurance
• People still have limited knowledge about processing the insurance

3 — Ideation

After we define the problem statements above, then we try to answer these How-Might We questions:

Figure 3— How-Might We Questions

1. How might we increase customer trust in insurance service?
2. How might we simplify all processes in the insurance app and service?
3. How might we educate people about the process of registering and claiming insurance, and writing a will easily and fast?
4. How might we help customers reach their goals such as deposit savings, disbursement, and increase customer loyalty?

These questions guided us to think about the possible solutions that might answer the question. After the discussion and brainstorming, we find these feature ideas in Affinity Diagram below and we grouped them together if the idea was still related.

Figure 4— Affinity Diagram

After we grouped the possible solution that we proposed, then we prioritize which solutions were the best to be implemented right away. We use the prioritization diagram to decide which feature we would design.

Figure 5— Prioritization Diagram

Based on the diagram above we decided to design four main features for Last Wish in Bank Jago, they are:

1. Make an easy process of registering the saving plan for Last Wish.
2. Make the information of life insurance can be delivered easily.
3. The process of claiming and editing the saving plan and will that has been written.
4. Make an easy saving payment process.

4 — Design & Prototyping

Then we tried to visualize those possible solutions, like, “how will this solution look like in a form of an app?” So that we do the Crazy 8’s, a fast-sketching method that challenges people to sketch eight distinct ideas in eight minutes. We did the Crazy 8’s and then voted which screens would be designed in the next step.

Figure 6— Crazy 8’s and voting process

Task Flow

After deciding which screens would be possible to be designed, we enhance the idea of each solution in a form of task flow.

Figure 7 — Task Flow

Wireframe

Alright! We now can imagine how would this product help us. Then we make the task listed on the task flow become more visualized by low fidelity wireframe. We made it in Figma and still in a form of black and white design.

Figure 8 — Wireframe

Style Guide

We didn’t know what font is exactly used in Bank Jago Application, so we explored many alternative fonts and typefaces that look like what Bank Jago App has. After a long observation, we came up with DM Sans but used another style of “g” letter form, the one with tail instead of the one with loop. Gratefully, Figma provides the facility to choose another option for a certain typeface, haha.

For the color palette, we simply extract them from Bank Jago Application that has already existed. Orange-yellowish as a primary color and with its complementary purple as an accent color, followed by neutral colors and their semantic colors.

Figure 9— Color Palette

Design Systems

Design systems were really beneficial for collaborative design purposes. From the style guide we have made, then we make the necessary components based on low fidelity design in the wireframe phase. We made buttons, input fields, cards, and many more assets.

Figure 10— Design Systems

High Fidelity Design & Prototype

We have got wireframes, a style guide, and design systems. Now it’s the time to build the blocks! Anyway, we used a 4px grid system to make the space and all components' sizes consistent and implementable for developers.

Figure 11 — High-fidelity design

After making the high-fidelity design, then we connected each page and make a prototype. Want to try our design? Just have a see below!

Figure 12 — Prototype

5 — Test & Results

Test planning includes arranging the stimulus research, arranging the task scenarios, and setting the metrics. Then after collecting the data, we synthesize them to get new insight to be used for the next iteration.

Stimulus Research and Task Scenario

Stimulus research that we arranged includes some intro questions related to the user target’s knowledge and opinion about life insurance or any insurance they have, and also about writing a will or a last wish digitally.

The questions ask users:

1. if they have life insurance,
2. their opinions about how important they think life insurance is,
3. if they have ever claimed insurance,
4. their opinions about having a last wish,
5. their opinions about writing a will or a last wish digitally.

We targetted user target as the respondent with the main criteria like below.

1. 25–35 years old
2. Work as an employee
3. Have a monthly income above IDR 3.000.000
4. Live in a town

We also arrange the task scenario based on the available prototype we have made. The task scenario includes 4 main tasks, which are

1. registering for a new savings plan for life insurance,
2. making or writing a will or a last wish digitally,
3. paying or topping up the savings,
4. claiming the life insurance or the last wish.

Results

We have gotten 4 respondents with corresponding criteria as I have mentioned before, and we collected insights from them. According to most respondents' feedback, we got 6 out of 7 for the score Single Ease Question, it means that most of the respondents was agree that the product we designed is easy to use.

However it still doesn’t perfect yet, we find some tasks are reached the goal screen in an unexpected path, or some users thought that they opened the wrong button because of a confusing UX writings. With these findings and new insights, we believe that the design can be improved better on the next iteration.