UI/UX Case Study — Redesign Bank Jago : Jago Feature Last Wish for Purchase Assurance.
Introduction
Halo my name is Mochamad Taufan Eka Saputra. In this case I will re-design for feature last wish for buying assurance due to increase usability and experience when making assurance, recommendation product, compare product, paying, and making last wish.
this project is a part of scholarship form Kementrian Komunikasi dan Informatika using platform Skilvul (https://skilvul.com/home) and Bank Jago (https://skilvul.com/challenges/bank-jago-ui-ux-challenge) as challenge partner. On this project I didn't collaborate or work in challenge partner so what do i know about the application is only few.
Role
My role in this project as UI/UX Designer and I met with Faishal, Rafi, and Budhy as team and we are share all responsibility during a process for two months.
Overview
Jago is a financial application that works on a life-centric principle. With the Jago Application, managing finances becomes easier, collaborative and innovative. Jago was created to make it easier for users to control finances and investments for their users.
Challenge
Jago will create and introduce new feature related to life insurance with the aim of making it easier for users to make last wish latter and have an attractive design. To to fulfill a last wish Jago give us some challenge that is :
- The steps for making a will are easy, considering that users can enter various types of requests.
- An easy way to calculate the required monthly payment for the desired form of last wish.
- Management of commitments made and can edit Last Wish.
- Gamification or creative ways related to a healthy lifestyle and fitness level that can lower the cost of that monthly commitment.
Goals
As mention on challenge so the goals is :
- Make an easy way to help users for anticipating unexpected happen that will affect their family so the user don’t worry for their family economy.
- To make user easier to choose the type of insurance.
- Providing gamification as a feature to make users have achievable targets.
AIM
To make feature Last Wish Jago give us limitation as parameter user who will use this feature on Jago application. Age 25–35, Employee, Monthly Income more than IDR 5.000.000 , Location in Big City.
Design Process
What Need
For now we still haven’t found the last wish feature in this application so we have to design from scratch with Design Thinking as a method to create the new feature.
Why Design Thinking?
Because Design Thinking itself has three main aspects, namely Human, Technology and Business where these three things are suitable for us who are designing features from scratch. The Design Thinking method itself has 5 stages, namely Empathize Define Ideate, Prototype and Test.
1. Empathize
At this stage we conduct research to find out what is happening to current condition about application users. then we collect data from our initial research and we group it by type and type of data. The data we have collected can be seen at the following link.
2. Define
After getting the data needed at the Empathize stage, then we define the problems by user feel using Pain Points and find out what we will give to user so that the problem does not happen again with How Might We.
Pain Points or the problem are feel by user.
How Might We is how we can solve the problem and we get :
3. Ideate
From the identified pain points and how might we on top we identified solutions to solve the problems. Then we made an idea based on the pain points above and we made a priority scale to make it the main focus for the initial stage.
We will use the Idea Solution in the “YES, DO IT NOW” column as a reference to create User Flow.
User Flow
User Flow or task flow is the stage where we make the flow of the process to complete a task and find out what the user experiences when he has completed the task. Here we create some flow for purchasing life insurance, FAQ, Editing Last Wish and Gamification.
- Flow for purchasing life insurance.
- Flow for FAQ
- Flow for Editing Last Wish
- Flow for Gamification
Wireframe
After creating the user flow then we create a Wireframe or raw illustration or low fidelity of the UI for make it focus when creating UI. This wireframe is made based on the steps in the User Flow above, here are the wireframes that you create based on the task.
Onboarding Screen
Create and Edit Testaments Message
Gamification and FAQ Page
Design System
Then after the wireframe is made, we create a Design System that functions for make uniform designs with each other which makes the designs more consistent and more attractive to users. Below is Design System are we made
Color System
Input Field
Search Bar
Check Boxes
UI Design
At this stage, we create a UI (User Interface) or it can be called high fidelity based on Wireframe or low fidelity above, we create UI design using Design System have made before. We start trying to create a colorful UI and try to feel what the user will feel, we have to change some user flow to match with UI Design.
Below are the design solutions based on paint point above:
1. Difficult registration and administration process
Solution: Fully digital administration and testaments message templates
2. Too many choices make it impossible to decide which one to buy
Solution: Displaying the benefit summary for every insurance product and providing a feature to compare insurance products to minimize users’ paradox of choice
3. Cumbersome transaction process
Solution: Integration of the Last Wish feature to the ‘Kantong (Pocket)’ feature which already exists within Jago with monthly Auto-debit.
4. Perception of expensive insurance due to high premium costs and non-transparent premium calculations
Solution: Online and transparent premium fee calculations, and provide product recommendations based on premium calculation.
5. New Feature Gamification
Solution: Yearly premium installment progress bar, custom Kantong ‘Pocket’ name, and quiz to acquire premium fee discount.
Overall UI step by step of user flow can see on below.
4. Prototyping
After we finished making UI Design, We present it in the Prototype based on User Flow, Wireframe and Design System which makes it consistent. Prototyping is very important before we do Testing to user. Below is Prototype have been made by my team.
5 . Testing
We have done research, found problems and looked for solution ideas, created user flow, created wireframes, created UI and implemented it into a prototype. After everything is finished, then do testing to get feedback on the shortcomings of our prototype to the user.
Here we do an online survey to do useability testing, we use maze for usability testing prototype because by using maze we can find out mis clicks, how much duration is taken, and also heatmaps for each user interaction with the prototype.
We also use Google Forms to find out the level of data suitability, conclusions and suggestions users give to make our features better in the future.
Kami akan mengevaluasi setiap ide solusi yang telah dibuat, apakah ide tersebut dapat menjawab tujuan kami atau tidak, jawaban user yang telah kami dapatkan pada tahap ini akan kami jadikan bahan evaluasi untuk meningkatkan kualitas dari feature tersebut.
Research Objectives:
Knowing the level of convenience of the features available at Jago Last Wish (calculate premiums, compare products, create and edit testamentary messages, payments)
Participant Criteria:
Result
We using Single Ease Question with a scale from 1–7 to gather usability scores and metrics for success set to an average of 5,5 in every flow tested, here are users’ assessments of every flow tested:
- Using the Last Wish feature to buy an Insurance Premium: 4.75 (NOT PASSED)
- Creating a new Last Wish message (testamentary message): 6.25 (PASSED)
- Editing Last Wish Message that has already been created: 6.375 (PASSED)
- Gamification (Quiz) Feature: 5 (NOT PASSED)
After we get the results we collect and draw conclusions from the survey results, namely:
- The use of words is less efficient so that it makes the application of the impression less attractive and difficult to understand.
- Unattractive design for some people.
- Unclear plot.
- The features we created may be suitable for people who are used to using smartphones.
- There is no Security Code at the time of making payment.
Things to do in the future:
Aplication
- For the use of words will be made as short and concise as possible
- Re-research to get a design that is friendly to all circles.
- The details of the flow will be made more detailed and easy to understand.
- Features will be made as simple as possible and easier to understand.
- Added security features to make users feel safer to use these features.
Project
Sayangnya, waktu program scholarship tidak memungkinkan kami untuk melakukan perbaikan pada desain yang dikumpulkan dari fase Pengujian. Namun kami bisa terus mencoba melakukan perbaikan untuk mengasah kemampuan kami untuk menjadi UI/UX Designer profesional.
Conclusion
This design is made based on data and challenges from Bank Jago, the results of research that we hope to be able to meet user needs. I want to provide a new solution in the loan application process by providing a Security feature that aims to make the application process faster, easier and more flexible.
In the process, we found that there are still many things that we need to improve to create UI/UX Design, starting from the Empathize, Define, Ideate, Prototype and Testing so that the next UI/UX Design will be more meet to all aspects.
There’s case studies from me, I hope I can give my experience clearly in making UI/UX with this case study, I hope my thread can be useful for readers who need information for UI/UX Design
Thank you and Best Regards, Taufan