UI/UX Design Case Study : “Wasiat” Feature in Bank Jago Apps

Rostadhi
13 min readOct 24, 2021

--

Change the old way of having life insurance ?

Introduction

Before we start, for disclaimer. This project is part of UI/UX Training Program that been held by Ministry of Communication and Technology on Collaboration with Skilvul (www.skilvul.com) and Bank Artos ( PT Bank Jago Tbk) as a challange partner. I don’t work or under proffesional contract by Bank Artos (PT Bank Jago Tbk).

Bank Jago

Copyright. PT Bank Jago Tbk

PT Bank Jago Tbk. ( Bank Jago ) was previously known as PT Bank Artos Tbk. ( Bank Artos ). In 2019, a change in shareholders made Artos Bank Changed it’s name to Bank Jago that is known today.

Bank Jago was developed to become a digital financial pioneer in Indonesia by presenting a life centric financial solution.

Bank Jago has aspirations to become a technology-based Bank that is integrated in various digital ecosystems in Indonesia, which where Bank Jago is intented to meet the need of the retail market share, MSME players and Mass-Market Players.

Wasiat

Copyright nationalnotary.org

What is wasiat ?
The Big Indonesia Dictionary (KBBI) has given the understanding that what is meant by a will ( “wasiat” ) is “ the last message conveyed by a person who is about to die ( usually with regard to assets and so on ). ”

Wasiat in Indonesian Law ?
“What is meant by “will” is the act of a person giving an object or benefit to another person or institution/legal entity, which takes effect after the person who gave it dies.” — Religious Court Law.

With the understanding of the “wasiat” from two terminology i conclude that the object of the will “wasiat” can be form of the object itself, ex: house, land certificate, solid golf, etc or it’s benefit, and what relates to the beneficiary of the will, that can be a person or an institution or legal entity.

Wasiat Feature

Bank Jago Apps

Copyright jago.com

Before we dive into “wasiat” feature, first i will represent the main Apps called JAGO from Bank Jago. This apps consist three main purpose which i took from the Bank Jago website. Those three things are :

1. Easy — Jago is a life-centric application that aims to help you become better at living your life.Look forward to Jago’s breakthrough collaboration with players in the digital ecosystem to provide financial services that make your daily life easier. So, you can enjoy life the way you want, whenever you want.

2. Collaborative — Jago provides a financial application where you can plan your finances with your loved ones.Imagine how much fun it will be when you can work with family or friends to realize your financial goals. Come on, be good together! It’s time to plan, organize, and make dreams come true with family and friends.

3. Innovative — Innovation is a basic value that is always put forward by Jago. We started innovation from the most basic thing in a bank: accounts. At Jago, you will recognize an account as a pocket, a place where you can manage your money. Pockets Jago is very easy to use, flexible, fast, and of course safe. The security of your data and money is guaranteed with Kantong Jago which has the most advanced and fastest security system in the Industry.

Wasiat Feature

Copyright jago.com

I Start with UX Challenge that has been given by the Digital Talent Scholarship and also skillvul as the final challenge in joining the UI/UX Design learning class. The Bank Jago: UX Challenge would like to create and introduce a feature related to life insurance. If we look at life insurance products that are currently on the market, usually these products are sold as a form of prevention from disasters or bad things that will happen in the future. In addition, life insurance is also usually used to protect the livelihood of the family you support through your livelihood before it is time to die. This is quite serious considering that not everyone has planned for the future. One possibility why people don’t do it, is because they want to be more optimistic and less negative (because the future is uncertain). The Bank Jago: UX Challenge want’s to create feature that where life insurance is used to guarantee an exciting and enjoyable life rather than worrying about death. Imagine this feature that make a “will” digitally, the contents of which could be whatever you wanted to do and the funding for its implementation could be guaranteed by the insurance product behind it. User can also make a will as usual, leave money for the family, and also request some special customize wishes. And last, the User can make a wish as far as their imagination can take.

“Wasiat” as a feature

This wasiat solution with purpose assisting User to make that anticipate unforseen events in the future that could effect the livelihood or weel-being of their families. It’s also possible for our User to use this feature for social purposes, contributing to their environment and community even after “life”.

In realizing the solution based on the challenge given by the Bank Jago, now i will show you what i have learned in the UI/UX Design Class. I’ll show you the action I’ve taken to help the banks make this “wasiat” feature implementable to the main application.

Design Process

In this first process, I did a safe iteration which aims to improve usability and the interface to be more optimal. In this stage I learned to look for problems from a business perspective, brainstorm ideas, and create designs solution. In implementing this design process, I use design thinking as a main framework.

Design Thinking

Design thinking is a human centered approach to innovation that draws from designer’s toolkit to integrate the needs of people, the possibilities of the technology, and the requirements for business success.” — Tim Brown. In design thinking there are five processes that will help designers find solutions and innovations.

Copyright marketeers.com

Voting

The first process I went through in design thinking is emphetize and define. The form of define itself is voting on the research that had been done by each individual, including myself as a process from emphetize. In voting, the first thing i discuss is the iterations that I have found and find out which one is the most appropriate and in accordance with the problems that my team is trying to overcome. How i and my other teammates do the voting ?
First i do the research and write notes in figjam, after that we use the “How-Might We” method to organize and sort the notes. In the how might we stage we vote the most accurate and appropriate, and we stick to one result which is “Build New Feature That Can Help User Create Any Wishes According to Their Financial Situation”.

Affinity Diagram

Affinity Diagram

This is one of the method that my team use during the “ideate” stage. After the result that comes from voting now i must do some thinking and research about what features can be included in the application according to the results from How-Might-We. In this diagram our team devide the posible feature into some category that may benefit to determine what the most accurate idea and feature that will solve our problem.

Prioritization Idea

Prioritization Idea

This step is devide the idea that we collect and decide to use further in our design thinking process. Prioritization idea comes with four section which is 1. Yes, Do It Now — This section collect what idea of the feature that must we take action with or the easiest and most appropriate.
2. Do Next — This section is what will i do or my team mates do when we already take action in the Do-it Now section. This section is about what posible feature that will add value or benefit to the current status of the feature.
3. Do Last — This step will take last to take action with, because is the most hard yet still needed in current situation.
4. Later — This section will posibly taken action after all other section is finished. The resource for this idea to be happen in this section is most hard and tought rather than other section.

After we decide what to put in each of the section, we vote what the first thing to do with discussion among the team members.

Crazy 8's

Crazy 8

After we set our prioritize idea, now it’s time to make crazy 8’s based on what i and my team have so far. The method of the crazy 8 is you can be super creative but still in the case of the idea that has been prioritize before. How to do crazy 8 is simple. First, you take a piece of paper and fold it 8 times until your paper have 8 different section. What’s next is you start the time for every team members ( 8 minutes ). Each of the members need to draw what kind of feature that will appear in the interface. Image like art’s that will draw rough sketch before finishing the entire arts. In this crazy 8 what in my mind is i follow what’s already in the main apps, just need to implement what’s in the feature that right now i am working on with team. My drawing focus on what device that currently using by most of the target user’s which is android, so i look up at material design by google, to draw this crazy 8.
After all the members finished their drawing on the paper, remember the time that has been set before. The other team mates including myself will pick what the best drawing that most representable to the closest forms of the idea. In this picture above my drawings got choosen for the next step.

User Flow

User Flow

After i choose the drawings in the crazy 8, the next process is the “user flow”. User flow is a process in which a user is asked to complete a task or task in accordance with the business flow or idea that is being realized. In this user flow, i try to become member of the JAGO apps, to deepen my understanding about what jago apps can do. After i have several insight by trying the actual apps and do some transaction with it, i found what a good user flow that will come from this feature. My thought process start like in the main apps, when we start add new feature by tap the shortcut button. And after that we can continue to explore the feature even further.

I build the user flow according to my understanding about the actual apps. I try to mimick the actual apps without having much touch to change the theme or the flow that already used in jago apps. After this process will change to the process of the “prototype”.

Wireframe

Lo-fi

After the user flow is formed, the next thing to do is create a wireframe. Wireframe is a process by which designers create low fidelity (lo-fi) views that will assist in representing information, providing outlines and layouts, and speeding up the ideation process.
What i do during this process is i create the personal data form and all that consider adding external information to the apps. This information needed as a assurance and legal necessity for the apps. The information i create is about the data from the “heir” and also the “testator”. I also create assets information to gather data about what assets that included in the “wasiat”. Last i create how the user will do the payment for their “wasiat”.

Design System

Design System

Before i enter the high fidelity ( hi-fi ) prototype, we are recomend to make a design system. Design system is a component that can be reused for product design and development purposes, both in terms of design and code programming. When i learn to make design system there is 3 structure that will compose the design system.

  1. Atom Component — in this component i create style guide first before jumping into more spesific detail. My action after style guide is finish i create text style where’s the typography is taken directly from the Bank Jago website. The text field and the button that i made, i get inspire from material design by android.
  2. Molecule Component — in this category i mostly follow the material design from android and also the original Bank Jago application so that it will produce consistency when this feature will be included in the actual application. What i create within this category is the text field style and some of the header style in design system.
  3. Organism Component — in this final component i added a less complete feature that I’m making to make it more intuitive and easy to understand.

High Fidelity ( Hi-Fi ) Prototype

Hi-Fi

At this stage is the stage that is usually the most widely used as a benchmark of a solution that will be made an application, it can also be in the form of features that will be implemented into existing or finished applications.

Because previously I had made a design system, it made it easier for me to compose and create hi-fi. In the process of making this hi-fi, I did a lot of work on filling out information and data related to users, heirs, inheritance, and assets. Besides that, I also designed how a will/wasiat can be created in this feature. I made the buttons and forms for filling in the information using an existing design system, in the process i used assets that could be in the form of images and also icons that could add aesthetic value, intuitive value, simplicity and originality.

My principles in making hi-fi are precise, detailed, simple, beautiful, accessible, and also intuitive so that it can be used by all users.

After all team members have finished their respective work. Then we had a discussion whether this hi-fi already had values and also answered the challenges given by the bank champion. After all the parts are finished, we make a prototype which we will give to our users to try. Even though the prototype is still hi-fi and has not been coded, the user will still have an idea of what application or feature I and other team members are working on.

Testing

Copyright medium.com

In this last stage I did user testing to find out if this feature would really be useful if it was made and implemented in a real application. In accordance with the criteria for user testing requirements provided by the bank, where it should be:
1. Gender : Not Spesific
2. Age : 25–35 years old
3. Geograpic : Big Urban Area
4. Profession : Employee
For this requirements, i asked for the help of my friend who met the criteria above to try the feature that became a challenge from this Bank Jago. After my friend tested the features and gave the results of the tasks given, I then processed the data from the feedback that had been received from the testing.

Disclaimer: I conduct interview with my user offline but you can watch it for the what’s behind in this recording.

https://drive.google.com/drive/folders/11ioAqIffjUWdlH5hJJtV4Vk8uf3irYgf?usp=sharing

Result & Conclusion

Wasiat Feature on Actual JAGO apps

Wasiat as a feature that will help users having free life insurance and based only on their respective choices. The wasiat feature is also an answer to the challenges given by Bank Jago in order to revolutionizing life insurance so that life insurance can be more easily recognized and also used by workers as a financial safety net.

I as a part of team 7, very satisfied with the result and solution that we provide in the form of a UX case study. We deliver this feature because we believe this feature will someday make it to the main Apps. The problems we solve by making a clear flow of the features that will be implemented into the original application, then the interface is made using guidelines and basics directly from the OS that will be used by the target market, and also how this feature can change a person’s life so that he will be more aware of the importance of life insurance and prepare for the future.

Next, this project that my team and i have worked on can be seen at :

https://www.figma.com/file/d6tFfbWrSG4GPct3BDOYiK/User-Flow

https://www.figma.com/file/XQn7YNKA6r9aI76WrziTKi/Design-Thinking

https://www.figma.com/file/YYUPIPvC7tB9aGszqLMaoA/Kel-7-Wireframe-Design-System

Final Word

That’s it from me as a beginner in UI/UX World, i hope this project can give anyone who read it some insight. For further question you can reach me from my social media, or you can email me at rostadhi@gmail.com.

--

--