Mobile JKN Revamp
Mobile JKN Revamp
Mobile JKN Revamp
Company
Company
Binar Academy
(Apprenticship)
Year
Year
2023
2023
Role
Role
UI Designer
Platform
Platform
Figma
Work Type
Work Type
UI/UX Designer
REVAMP SCOPE
To clarify the stages or parts that will be revamped, I’ll break them down as follows:
Redesigning the UI of the application
Revamping existing features within the application
INTRODUCTION
I frequently go back and forth to clinics and hospitals for treatment, usually for sore throats—one of my recurring issues—or just a common fever. When treatment is necessary, health insurance becomes essential, especially if it covers costs without worry. One way to ease health-related concerns is through BPJS.
Mobile JKN is BPJS’s effort to provide accessible healthcare services through an app. Despite its long presence, the app still has many issues. These problems are what we aim to address and resolve in this Mobile JKN UI/UX Revamp case study. This project is not mine alone, I'm working with two other UI Designers: Ratih Alifya and Ibnu Sutan, and also with three product managers: Arjun Supangkat, Anelie Febriyanti, and Junie Kassandra.
Research
To validate the issues in the Mobile JKN app, we conducted research using two methods: desk research and distributing a questionnaire via Google Forms.
Based on the research results, we identified several issues encountered by users:
A confusing UI for users over 40 years old
A treatment flow that still requires inefficient physical paperwork
Frequent errors in the OTP process
User Persona
After conducting research, we created a user persona based on the collected data. This user persona helps us visualize the target user of the Mobile JKN app and assists in developing solutions for the identified issues.
REVAMP SCOPE
To clarify the stages or parts that will be revamped, I’ll break them down as follows:
Redesigning the UI of the application
Revamping existing features within the application
INTRODUCTION
I often visit clinics and hospitals for recurring issues like sore throats or fevers. Health insurance, like BPJS, is crucial for stress-free treatment.
Mobile JKN, BPJS’s healthcare app, still faces many usability issues. This case study explores how my team—two UI designers (Ratih Alifya, Ibnu Sutan) and three product managers (Arjun Supangkat, Anelie Febriyanti, Junie Kassandra)—revamped its UI/UX to improve user experience.
Research
To validate the issues in the Mobile JKN app, we conducted research using two methods: desk research and distributing a questionnaire via Google Forms.
See Other Works
How Might We
From the Pain Points and Goals in the user persona, we formulated three solution points for revamping Mobile JKN:
How can we simplify the user flow within the app?
How can we help users easily access health-related features?
How can we ensure users can smoothly use the call center feature?
Proposed Solutions
From the "How Might We" questions, we developed several solutions to address the issues encountered by users. Our proposed solutions are as follows:
From the solutions we developed, we set a priority scale based on user needs and the project’s two-week timeline. This prioritization helps us focus on the solutions most needed by users and those most feasible to implement. We used a priority matrix to determine the order.
As shown in the priority matrix above, the solution we chose to implement is the improvement of the existing Service Registration (Pendaftaran Pelayanan) feature in Mobile JKN. This solution was selected as it is the most feasible within the given timeline and is also the most needed by users.
IDEATION
After conducting research and analyzing the data, we implemented the proposed solutions into the product. In this project, we focused on revamping the existing Service Registration feature in the Mobile JKN app. We chose to improve only this feature as it is the most frequently used by users when seeking medical treatment through the app.
User Flow
In the initial stage of creating a new feature, we first developed a user flow. This flow maps out the steps users go through when accessing the revamped feature. This feature is quite similar to the existing Service Registration (Pendaftaran Pelayanan) feature, with the main difference being the addition of a track record for the patient’s examination process.
Wireflow
After defining the user flow, we created a wire flow, which we then finalized into a mockup prototype. In this wire flow, we redesigned the existing layout, making the revamped feature the main feature on the homepage so that users can easily find it. We also added a track record system, allowing users to view each step of their treatment process—from queue number registration to examinations at both primary and secondary hospitals. We named this revamped feature the Online Registration Process (Proses Pendaftaran Online).
PROTOTYPE
The final step after creating the wire flow was to develop a mockup prototype. In this prototype, we refined the features and flow from the previous wire flow. We also made changes to the layout and UI: the existing layout had too much information on the homepage, making it look cluttered. In the updated layout, we removed some information and only kept essential features on the homepage.
In the Online Registration Process (Proses Pendaftaran Online) flow, the existing feature only included schedule selection and queue number registration. In the new revamped feature, besides the track record process, users can also cancel their appointment during queue registration if urgent needs arise that prevent them from attending on the scheduled day.
As previously explained, this revamp project not only focused on adding new features to the existing ones but also on simplifying the icons on the homepage. This was done to reduce information overload and prevent user confusion. It also served as a UI/UX simplification solution, showing only the most frequently used features on the homepage.
USABILITY TESTING
To ensure the revamped Online Registration Process (Proses Pendaftaran Online) feature meets the needs of BPJS users on Mobile JKN, we conducted usability testing. We invited three users who had previously used Mobile JKN to test the revamped feature. After the trial, we collected feedback from each user about any difficulties or issues they experienced. Their main feedback included:
After scheduling an appointment, users are directed to the queue number page, which automatically transitions during the examination. This sudden change confused users.
Users mistook the doctor's practice schedule information, represented by a calendar icon, as a button to select the examination date.
The screen transition from queue number to examination progress was too fast, leading users to think the app had encountered an error.
Final Prototype
Based on the research results, we identified several issues encountered by users:
A confusing UI for users over 40
A treatment flow that still requires inefficient physical paperwork
Frequent errors in the OTP process
User Persona
Based on the findings, we created a user persona to visualize the target users and guide our solutions to address the app's challenges.
How Might We
From the Pain Points and Goals in the user persona, we formulated three solution points for revamping Mobile JKN:
How can we simplify the user flow within the app?
How can we help users easily access health-related features?
How can we ensure users can smoothly use the call center feature?
Proposed Solutions
Using the 'How Might We' framework, we developed solutions to address user issues. Here are our proposed improvements:
We prioritized solutions based on user needs and a two-week timeline, focusing on the most essential and feasible ones using a priority matrix.
After mapping the user flow, we designed a wire flow and finalized it as a mockup. We updated the layout, naming the revamped Service Registration to Online Registration Process (Proses Pendaftaran Online), and put it as the main feature on the homepage for easy access. A track record system was added, letting users track their treatment steps from queue registration to hospital examinations.
PROTOTYPE
We started by mapping the user flow, outlining steps for the revamped Service Registration (Pendaftaran Pelayanan) feature. The key upgrade is adding a track record for the patient’s examination process.
Wireflow
From the priority matrix, we chose to improve the existing Service Registration (Pendaftaran Pelayanan) feature in Mobile JKN. This solution was selected for being both feasible within the timeline and highly needed by users.
IDEATION
Based on our research and analysis, we revamped the Service Registration feature in the Mobile JKN app. This was prioritized as it’s the most frequently used feature for accessing medical treatment.
User Flow
The revamped Online Registration Process (Proses Pendaftaran Online) now lets users cancel appointments during queue registration, adding flexibility alongside the new track record feature.
The final step was creating a mockup prototype, refining the features and flow. We simplified the cluttered homepage by keeping only essential features.
To ensure the revamped Online Registration Process (Proses Pendaftaran Online) meets user needs, we conducted usability testing with three Mobile JKN users. Their main feedback included:
Sudden page transitions during examinations confused users after scheduling an appointment.
The calendar icon for the doctor's schedule was mistaken as a date selection button.
The screen transition from queue number to examination progress was too fast, causing users to think the app had an error.
Final Prototype
This revamp also focused on adding features and simplifying homepage icons to reduce clutter and highlight the most-used features.
USABILITY TESTING
In the final prototype, we improved the flow and UI by adding a color indicator to clarify when users should enter the examination room.
Challenges in The Working Process
Collaboration isn’t always smooth, especially in this project with both UI/UX designers and the PM team. My challenges included:
Communication: Struggling to convey my understanding clearly, leading to miscommunication.
Aligning Perspectives: Difficulty aligning ideas and opinions with the PM team, which slowed down decision-making.
These challenges gave me valuable insights into effective collaboration, expanding my experience beyond UI/UX to include business, backend, and frontend perspectives.
CONCLUSION
In any collaborative project, we must filter and select ideas that are both effective and feasible. Beyond ideas, maintaining alignment from start to finish is key. I hope this process offers valuable insights and new experiences for both readers and us. Moving forward, may BPJS and Mobile JKN continue improving UI/UX to reduce avoidable issues and better serve users.
In the final prototype, we revised the flow and UI based on the feedback received. For example, we adjusted the screen transition from the queue number to the examination stage by adding a color indicator, signaling when users should enter the examination room.
Challenges in The Working Process
In collaborative work, not everything goes smoothly, especially in this project where we collaborated not only with fellow UI/UX designers but also with the PM team. Some of the challenges I personally encountered were:
Communication
I sometimes struggled to clearly convey my understanding to both my team and the PM team, which led to occasional miscommunication.Aligning Perspectives
Another challenge was aligning perspectives with the PM team. With many ideas and individual opinions, it was difficult to reach a consensus on the vision and solutions for the revamped feature.
These challenges gave me valuable insights into effective collaboration. Prior to this project, I had only collaborated within the UI/UX team, limiting my experience to that perspective. Through this project, I was pushed to consider business aspects, as well as backend and frontend perspectives.
CONCLUSION
Just like in any collaborative project, many ideas emerge, but it’s our responsibility to filter and select those that are both effective and feasible. Besides choosing ideas, we also need to maintain alignment in understanding and vision from the start to the end of the project. I hope this collaborative revamp process provides valuable insights and new experiences for both the readers and us. Moving forward, may BPJS through Mobile JKN continue to improve in terms of UI and UX, reducing avoidable issues in a healthcare app designed to serve its users better.
See Other Works
