Kantong Kehidupan — The Jago Last Wish UX Case Study
Hello. In this post, I will try to show you my first UX Case Study project. This project is part of UI/UX Training Program from Kementerian Komunikasi dan Informatika in partnership with Skilvul (skilvul.com) and Bank Jago as the Challenge Partner. I am not working or bound by a professional contract with Bank Jago.
Background
Jago is a digital financial service that focuses on the daily life of users, with the largest ecosystem network in Indonesia. At Jago, although their main business is offering financial products, they understand that from the user’s perspective what they think is not the financial product, but the end goal (example: hungry -> eat, become a YouTuber -> create a studio). Therefore currently, Jago plans to create a feature for Life Insurance services with the ultimate goal of giving users the freedom to realize their life goals through the products Jago offers.
From this background, we tried to create a design solution with the name “Kantong Kehidupan” which is a feature that offers convenience for users in realizing the life goals they want to achieve through making a Wills by utilizing the available Insurance Product options.
Objective
With this project, I hope to be able to provide a design solution according to the background of the given problem by prioritizing the aesthetic value and usability of the design solutions offered. In addition to these priorities, I also hope that the design solution offered can help users to make plans that anticipate unforeseen events in the future that can affect the livelihood and/or welfare of their families.
Role
In this project, I work as UI/UX Designer to create a design solution collaboratively with my team Bintang Lazuardi. We do all the processes in this project using Figma. As a UI/UX Designer, I’m responsible for creating a UI and UX design to solve the problems described in the background and also meet the objectives.
Design Process
In this project, I use the design thinking method to create a design solution that is offered. The design thinking method was chosen in this project because this method is very useful in solving very complex problems by rearranging the problem from the user’s point of view, creating lots of ideas in brainstorming sessions, and adopting a hands-on approach in making initial designs and conducting testing.
The design process using the design thinking method is carried out in 5 stages, namely empathize, define, ideate, prototyping, and testing.
1. Empathize
At this stage, the research process is carried out on the target user to define the problem and carry out ideation. However, in this project, we did not do research directly on the actual target users and only used assumptions that were obtained from group discussions.
This process generates a user profile with the following criteria:
1. Age 25–35 years old.
2. Living in an urban area.
3. Work as an employee.
4. Already have insurance from the office.
5. Regular use of applications for daily needs (buying food, transportation, shopping, and others).
6. Have subscriptions to apps like Spotify, Netflix, and Disney+.
7. Ordinary and want to get cashback also discount.
2. Define
After getting the data based on the assumptions made previously, the next step is to determine the paint point and determine How Might We (HMW). In this process, we have determined several HMW’s that will be used to carry out the ideation process.
In this project, we defined several paint points and HMW which can be seen in the following image:
One of the important HMWs that was successfully formulated from this process was to create a user-friendly insurance application feature to meet the daily needs of prospective users.
3. Ideate
Based on the results of HMW from the previous stage at this stage, we conducted brainstorming to determine the proposed solutions.
The brainstorming process is carried out by making an Affinity Diagram to group existing ideas by category, making Prioritization Idea to group existing ideas based on user value and difficulty level in realization, and making Crazy 8’s which is a rough description of the design solution that will be made. The result of the brainstorming process in this project can be seen in the following figure:
Actually, the final result of the ideation process is choosing the best solution idea. In this project, we chose to create a feature that allows users to create a specific Will and customize insurance products that can be selected according to their needs and financial capabilities.
4. Prototyping
After getting a rough idea of the design solution that will be made, the next step is to carry out a detailed user interface design process which is then used as prototyping material in this project.
The UI design process begins by first creating a low fidelity design in the form of a wireframe. After creating a wireframe, the next step is to create a mockup that is equipped with a user flow as a diagram that shows the steps that will be passed by a prospective user to perform a task. After all these processes are completed, then the prototyping process is carried out.
Wireframe
The first step in making a prototype is to create a low fidelity design and in this project we use wireframes. This process will help us present the information contained in the interface design, provide an outline or layout for the interface design to be made, and speed up the ideation process. An overview of the wireframe results of this project can be seen in the following figure:
Mockup and User Flow
After creating a low-fi design, then we have to create a high fidelity (hi-fi) design that is also equipped with a user flow. This process will provide an overview of the steps that the user must go through to complete a task in the application. In this project, we used a design system to help create hi-fi designs. A design system is a collection of created components where these components can be reused for product design or development. An example of the design system used in this project can be seen in the following figure:
By completing this process, we hope that it will simplify the process of prototyping which will be carried out in the next process. An overview of the results of the mockup design and user flow carried out in this project can be seen in the following figure:
Prototype
After getting a complete mockup with user flow in the previous stage, now we can create a prototype that illustrates the solution idea that we created before. With this prototype, we can test the idea solution that was created before the solution idea was developed. In this project, we use digital prototyping because it’s easier and the results already show products that are similar to the original. The result of the prototyping process can be seen in the image below. In addition, you can also try directly the results of the prototypes that have been created.
5. Testing
The final step in the design thinking method after the empathize, define, ideate, and prototyping process is to do testing. Testing aims to evaluate each solution idea that has been created.
In this project, we used the interview method for testing. The testing process is carried out by involving a user who meets the criteria from the user persona described before.
During the interview, we provide several tasks that must be completed by the user based on the design solution to measure the usability of the design solution that has been made. From this process, we get some data from the usability test process. You can see the data in the following table:
Based on these data, we conclude that the design solutions made in this project can be implemented and can meet user needs. However, based on the results of the interview, we also received several suggestions from the user regarding several things that must be improved from the design solutions provided, including:
1. Create an insurance payment menu directly on the home page to make it easier when making payments.
2. Write a more detailed and attractive copy so that users are more comfortable and understand the products offered.
Conclusion
Based on the process that has been carried out to create a user-friendly feature while at the same time answering the HMW to create a feature that allows users to make certain Will and customize insurance products that can be selected according to their needs and financial capabilities, it can be concluded that the design solution offered in this project can be implemented and meet user needs.
However, from the testing results, we also got some suggestions from the user that can be used to further refine the solution idea, such as making more interesting copywriting and creating more effective menus to make it easier for users.
In the future, I will try to iterate and develop the product that has been made so that it can meet the needs of a more diverse user
Thanks for reading, feel free to give me any feedback, suggestions, or criticism. I hope this article helped you to gain some information or knowledge in the field of UI/UX. I hope you stay happy and always healthy. See you in my next medium post.
