Improving Halodoc Mobile App: Refund Process
A UI/UX Case Study
Introduction
Yahallo 👋🏼! My name is Muhammad Taz. I have just graduated and earned a Bachelor’s degree in Computer Science. My passion lies in the field of UI/UX Design. I am participating in a UI/UX bootcamp organized by dibimbing.id.
In this case study, I am collaborating with two team members to focus on improving the refund process within the doctor consultation feature in the Halodoc application. This task is part of the progress for batch 18 of the UI/UX bootcamp at dibimbing.id.
Overview
Halodoc is a smartphone app that enables people to consult with doctors conveniently. Users can search for doctors based on specialization, view detailed profiles, and choose between video, voice, or chat consultations. The app also offers prescription deliveries and access to health articles. Halodoc revolutionizes healthcare through remote consultations on smartphones.📱
Observation
After conducting a search for critical user reviews of the Halodoc app on both Google Play (Android) and the App Store (iOS), I was surprised by what I found. 😯
The majority of these complaints revolved around the payment process for doctor consultations. Users expressed frustration when their transactions failed and encountered issues with refunding. They reported that the refund process was unclear, and they were left uncertain about the whereabouts of their money.
Based on the user complaints mentioned above, I aim to investigate the underlying issues experienced by users.
Role: UI/UX Designer
Scope: User Research, analyzing, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing.
Timeline: 3 weeks(UX) + 5 weeks (UI)
Tools: Figma, Figjam, Google Spreadsheets, Google Form, Google Meet, Maze
The Process
In improving products, we need a framework to produce appropriate products. In this study case, I will use a design thinking framework (empathy, define, ideation, prototype, and test).
Stage 1 — Empathize
Before commencing the research and the entire process, it is essential to establish the research objective.
The objective of this research is to investigate and comprehend the actual user behaviors, pain points, expectations, and needs when encountering issues with refunding during doctor consultations on the Halodoc app.
By accomplishing this objective, valuable insights can be obtained, enabling the identification of areas for improvement in the refunding process.
Research Methodology 🔎:
To achieve the stated objective, I use quantitative Screening Surveys and Qualitative In-Depth Interview methodology.
The reason because In-Depth Inteview method will allow for a detailed exploration of user experiences, perceptions, and emotions related to the refunding process during doctor consultations on the Halodoc app.
Sample Spesification 👨👩:
- Halodoc users who have actively conducted doctor consultation transactions in the last month.
- Have experienced a refund process that took more than 1 hour, at least once in the past month.
- 18–40 years old.
- Female/Male
- National Scale (Nationwide)
- Willing to be interviewed.
Quantitative Research: Screening Survey
The screening survey method is useful for selecting respondents who meet the sample specifications.
Respondents are recruited through an online survey (Google Form) distributed via social media channels. The survey is conducted for approximately one week, resulting in a total of 23 participants. Then, a screening process is carried out, identifying 5 individuals who meet the criteria.
We approach the respondents through WhatsApp to confirm the schedule for online interviews using Google Meet, while some respondents are also met in person for the interviews. Here is the 5 individuals:
Qualitative Research: In-Depth Interview
The In-Depth Interview process is conducted within a timeframe of 15–25 minutes, using both Google Meet and offline meet-ups. The interview period is scheduled from February 27, 2023, to March 2, 2023.
From this in-depth interview session, we have gained profound insights regarding the respondents’ feelings when experiencing transaction and refund issues, their expectations and needs, and their actual behavior when facing transaction and refund problems. These insights will be further processed and analyzed in the define stage.
Stage 2— Define
Affinity Diagram
We analyze qualitative data using an Affinity Diagram, where we group each data according to their similarities. By doing so, we can identify pain points, behaviors, needs, and expectations of the users. 📚
Take a closer look at the affinity map here
Paint Points
Based on the results of our qualitative data collection, we have identified the following pain points from users:
- Users have made payments but the transaction is canceled due to the doctor’s non-responsive or unavailable status.
- Lengthy refund process (more than 1 hour).
- Due to the long refund process, users have to top up or make a new payment to proceed with the transaction.
- Unsatisfactory response from customer services, only asking users to wait.
- Lack of clarity regarding the refund process, such as how far it has progressed or when the funds are estimated to be returned.
- The delayed refund process has an impact on users’ healthcare management.
Need and Expectation:
Based on the qualitative data collection, we have identified the following user expectations and needs:
- Users expect a prompt or immediate refund to be able to consult with a doctor again.
- Refunds should be processed according to the chosen payment method during the transaction.
- The refunded amount should match the amount paid without any deductions.
- There should be clarity on the expected timeframe for the refund to be received or detailed information about the refund process.
Persona
From the research and the pain points, I try to make a persona that can represent the real users.
Based on the similarities in characteristics such as behavior, needs, expectations, and goals among the 5 interview respondents, we have created one persona. Here is a description of the persona. 👨👩
Take a closer look at the user persona here
User Journey Map
I have also created a user journey map to visualize and understand the entire end-to-end experience of a customer or user when interacting with transaction cancellations and refunds.
Take a closer look at the User Journey Map here
Stage 3— Ideate
How Might We
Based on the define stage, I used “How Might We” framework to ideate the opportunity area based on the pain points.
Ideation
Then, We conducted an ideation phase using brainstorming techniques and obtained recommendation ideas to enhance the experience of refunding transactions for doctor consultations on the Halodoc application.
Prioritization Matrix
After generating ideas, we grouped them according to their priority level based on the factors of urgency and importance. This allows us to determine which opportunities are the most crucial and pressing.
In this case study, we divided the tasks to implement the list of ideas based on their importance and urgency. I was assigned to implement the idea of “adding a shortcut button to the FAQ page regarding refunds and the help center page on the transaction cancellation page for doctor consultations.”
User flow
Certainly, alongside the ideation process, we also developed a user flow to understand the steps taken by the users both in the existing application and with the implementation of our chosen idea improvisations. The user flow helps us visualize the sequence of actions and interactions that users go through while navigating the application. By mapping out the user flow, we can identify potential bottlenecks, pain points, and areas for improvement to enhance the user experience and streamline the process.
Take a closer look at the User flow here
Information Architecture
After understanding the user flow, we proceed to create an information architecture. The purpose of information architecture is to establish a structure and organization that optimizes the user experience and serves as a reference for organizing information in the design process. It ensures that the content and features are logically arranged and easily accessible to users, enhancing usability and facilitating smooth navigation.
Take a closer look at the Information Architecture here
Crazy 8
The next step was for me and my team to further elaborate on the ideas using the Crazy 8 technique. Each team member created eight sketches related to the ideas within an eight-minute timeframe.
The main function or purpose of the Crazy 8 exercise was to encourage rapid ideation and explore a wide range of design possibilities. By pushing ourselves to generate multiple sketches within a limited time frame, we aimed to break free from conventional thinking, stimulate creativity, and uncover innovative solutions. The Crazy 8 exercise served as a catalyst for generating fresh ideas and fostering collaboration among team members.
Take a closer look at the Crazy 8 here
High-Fidelity Wireframe & Wireflow
To visually represent the ideas generated from Crazy 8, I created high-fidelity wireframes. High-fidelity wireframes are detailed and closely resemble the final design, including visual elements such as colors, typography, icons, and images that accurately depict the interface design. High-fidelity wireframes help convey the desired aesthetics and design nuances, providing a better understanding of how the end product will look.
Once the wireframes were completed, I organized them into a wireflow. A wireflow is a visual representation of the user’s interaction flow through various screens and interface elements. The goal of creating a wireflow is to (state the purpose or goal of the wireflow, e.g., visualize the user journey, identify potential usability issues, or refine the user flow).
Take a closer look at the Wireframe & Wireflow here
Stage 4— Prototype
High-Fidelity Design
After the ideation phase, I began assembling the high-fidelity design based on the selected implementation. I utilized the Figma application to create all the components and pages for the high-fidelity design. Using Figma allowed me to efficiently design and organize the interface elements, ensuring consistency and coherence throughout the design.
1. Transaction Failed
2. Other Doctors
3. Doctor Detail
4 . FAQs
5 . Help Center
Design System
After creating the High Fidelity Design, I started developing the Design System, which serves as a foundation for consistent design elements, components, and patterns throughout the application. The Design System ensures coherence and efficiency in design implementation, promotes brand consistency, and streamlines the design process for future iterations and updates.
Of course, this Design System is implemented in the existing High Fidelity Design.
Take a closer look at the Design System here
Prototype
After the High Fidelity Design is completed and all Design System elements have been implemented into it, I proceed to prototype by linking each element and providing purpose and animation for each interaction. By doing so, I create a dynamic representation of the user experience, allowing stakeholders and users to interact with the design and gain a better understanding of the flow and functionality.
To see the prototype of the Improving Halodoc Refun Process, you can try it here: Link prototype
Stage 5— Testing
Usability Testing (UT)
After going through the previous four stages, I strive to validate the design and prototype by conducting Usability Testing (UT). This involves gathering feedback from real users based on their experience with the design. To facilitate this process, I opt for remote usability testing using the Maze platform.
Objective
- Understanding the actual user behavior in terms of how they handle situations where their consultation transactions are rejected and they experience fund deductions (refund).
- Identifying the offered solutions to determine if they effectively assist users in overcoming refund-related issues.
- Gathering user thoughts and feedback on design improvements.
Methodology
- Test Date 📅: 15–19 May 2023
- Test Method & Tools 🔎: Moderated Remote Usability Testing (Maze), Quick In-Depth Interview (Google Meet & Offline Meetup, Google Spreadsheets)
Participant
Task & Scenario 1
Usability Testing Score: 99 | Average time: 11.1s | Direct Success: 100.0% Missclick: 0.0%
During the usability testing for this scenario, we received valuable feedback from multiple users. Here are some specific feedback points from the participants:
Facilitating easy access to find out the estimated time for the funds to be refunded. -Michael Joe
There is an excessive amount of information in the popular questions section. It can be filtered to avoid confusion. -Andika
In this scenario, users find the fund refund FAQ button to be efficient, as it provides them with a sense of relief by allowing them to quickly access information regarding fund refunds, especially the estimated refund timeline.
And there is also an insight that some users found it challenging to locate relevant questions, resulting in spending more time searching for specific questions.
Task & Scenario 2
Usability Testing Score: 90 | Average time: 34.0s | Direct Success: 80.0% Missclick: 80.03%
During the usability testing for this scenario, we received valuable feedback from multiple users. Here are some specific feedback points from the participants:
The doctor’s interface is already well-designed and clear, with a considerable number of doctor options available. Also There are prices, ratings, and experiences provided, which serve as added value for users to choose their preferred doctor. -Ikhsan
made a wrong click because I was distracted by the eye-catching chat button. It grabbed my attention, so I clicked on it, but it turned out that it wasn’t the intended action or purpose. -Nindi
In this scenario, users find the design of the doctor’s profile is excellent, comprehensive, and supports users in making decisions about which doctor suits their preferences. The provided information is clear, allowing users to understand it at a glance.
And there is also an insight that some users get distracted by the eye-catching chat button, causing them to click on it mistakenly and needing to go back again to their original intention.
Task & Scenario 3
Usability Testing Score: 98 | Average time: 30.2s | Direct Success: 100.0% Missclick: 30.02%
During the usability testing for this scenario, we received valuable feedback from multiple users. Here are some specific feedback points from the participants:
TI can resolve the issue with just a few clicks. I really appreciate the option to contact support. The button is prominently displayed, allowing me to see it right away. -Nindi
The Quick Chat option can be confusing since there is no specific option for fund refunds. It took me some time to understand that when asked about the issue, I should choose the Chat with Doctor option to address the problem. It would be helpful to have a direct option for fund refunds to avoid confusion. -Andika
In this scenario, users find the help center button beneficial as it provides assistance and support. Additionally, having the option to easily contact Customer Service is considered a valuable feature, adding to the overall user experience.
And there is also an insight that some users require more time to find relevant topics in the Quick Chat options. As a result, they spend more time thinking and searching for the appropriate topic.
Summary
The conclusion of the Usability Testing activity is that 90% of the total 5 participants felt that the addition of the shortcut “Lihat FAQ” button and the inclusion of the “Hubungi Help Center” button were helpful in resolving the refund process, especially when experiencing canceled transactions in the Halodoc application’s doctor consultation feature.
Therefore, this new design can be recommended for implementation in the application in the future. However, there are some recommendations of improvement:
- To simplify the popular questions section, by reduce the number of questions
- provide a filter to search for specific questions.
- Adding the option for “Refund Request” or “Transaction Cancellation” to the Quick Chat menu.
Lesson Learned
During this research, I have learned a lot. I have gained a deeper understanding of the UI/UX design process, starting from creating a research plan and timeline, selecting and conducting research methods, analyzing the collected data, creating designs, conducting usability testing, and preparing reports.
Furthermore, I have learned that as a UI/UX designer, my role goes beyond simply designing interfaces. It is crucial to design solutions that address the problems faced by users and enhance their overall experience.
Appendix
Research Plan, Discussion Guide, Interview Verbatim: link
Affinity Diagram: figjam link
User flow, Information Architecture, Wireframe, Wireflow: figma link
Design System & High-fidelity Design: figma link
Prototype: prototype link
Usability Testing: maze report
