Halodoc Check Out Improvements — UX Case Study

Debora Paskarina

Published in

UX Playground

7 min readDec 5, 2021

Goals in this UX Case

Halodoc is a health-tech platform connecting millions of patients with licensed doctors, insurance, labs, and pharmacies in one simple mobile application. Are you in need of some Paracetamol? Halodoc is here. However, …

⚠️ Disclaimer: Please remember that any fonts, colours, and contents are belonging to Halodoc (PT Media Dokter Investama). I used them only for learning materials.

UX Workflow

1 — Define

Before we’re getting through, we can select specific competitors to find the goods & bads from their apps, which we call competitive analysis. The goal of the competitive analysis is to gather the intelligence necessary to find a line of attack and develop the go-to-market strategy.

We can see below a diagram that can help us define the brands that compete with Halodoc. Each of the intersects on the figure means,

Direct Competitor
Different Problem
Different Customer
Different Product Category

After that, we define Halodoc’s preposition and then compare it to each health-tech player and sort which segment is the same and which is not.

Halodoc Preposition & Comparison on Its Competitor

As we determine above, we have the short-listed competitors, and we find that Alodokter, KlikDokter, and SehatQ as the closest competitors.

What do the competitors have?

Alodokter

Alodokter’s interface has a different approach from Halodoc’s. It ranges from the layout to the presented information structure.

Alodokter has an option to checkout selected items, while Halodoc doesn’t. Alodokter also provides the name of the pharmacy/store, albeit unclickable, while Halodoc doesn’t display anything of the sort.

Besides, Alodokter also displays the delivery courier and the estimated total price right after the view of to-buy items. Halodoc’s delivery feature is placed at the very bottom of the page, leaving a huge space that can be easily taken as ‘nothing’ by users.

This might be good for the future design of the checkout page.

2. KlikDokter

KlikDokter has a similar interface with Halodoc by showing the items in the shopping cart, the price, and the total price.

We think by giving information from the pharmacy/store, it could be easy for the users to find the information about the place quickly, even though like Alodokter, the store is not clickable.

From this interface, we didn’t have any points that could improve Halodoc’s checkout page.

3. SehatQ

Unlike Alodokter and KlikDokter, SehatQ displays the name of the pharmacy/store and it is clickable, making it easy for users to add more items from the same merchant.

On the other hand, SehatQ doesn’t show the delivery details like the address of the recipient and the delivery cost.

From this interface, we can add the clickable store feature that could improve Halodoc’s checkout page.

What do We Get from Them?

SehatQ’s page can make it easier for users to add other desirable items from the same store.
We want to add a new feature called ‘Wishlist’ for users to easily save the items they might want to buy.

Heuristic Evaluation

After inspecting the competitor’s products, we then can evaluate each app through Heuristic Evaluation. We can pick which one of the page elements violate the 10 heuristics. In this section, we only focus to evaluate on Halodoc’s interface.

Heuristic Evaluation — #1: Flexibility and Efficiency

Heuristic Evaluation — #2: User Control and Freedom

2 — Solution Design

From Stage 1 — Define, we summarize what we have to do:

User Flow

To analyze deeper, a new user flow had been created and there were some added changes such as the new browsing features and the new checkout page. The comparison between the current flow and the new flow can be seen below:

From the user flow, we jump to create the wireframe on Figma. Basically, we highlight 2 pages and 1 feature: the Checkout Page, the Adding Items from A Different Store Page, and the Wishlist feature.

Wireframe 1 — Checkout Page

Wireframe 2 — Adding Items from A Different Store Page

3 & 4 — Prototype & Evaluation

Following our plan, we do validation at the end of the process to escalate the flow and have a valid data comparison. To get users’ feedback, we use Google Forms to fill a questionnaire and to identify their behaviour during the testing sessions. To have a good data pattern and finding from user problems, we have to get at least 5 users involved in the testing.

High Fidelity Design

User Criteria

We define for the criteria of our user that has

Male/female
18 yo or above
Has good communication skill
Has a smartphone
Has or never used Halodoc before
Has or never ordered 2 items through Halodoc before

Research Scenario

Introduction
Q&A Session
1st Usability Testing Session (existing apps)
2nd Usability Testing Session (proposed solution)
Post-test Questions

Research Findings

As the result, I have got 3 (three) participants for the usability testings. I realize that there’s still a lack of credibility due to the number of very few participants. However, I tried to gain more insights and recommendations from the participants as specific as I could.

Here are the usability testing results based on the tasks they have finished.

From our evaluation, we then gather some valuable insights from participants.

“I usually already had a medicine in mind when I wanted to open Halodoc. So when I open it, I know what I want to look for and I don’t need to look at other items unless necessary.”
“It’s annoying if you have to checkout items first without being able to see other items in your cart.”
“I don’t really like it when I cannot compare the price of two items in between two stores.”
“Why do I have to discard items in my cart in order to add a new one?”

Usability Metrics

To measure if our proposed design is the ideal solution, we sent a questionnaire to our users for the before-after design and the users will decide which one is the better solution to their problems with one usability metric: System Usability Scale (SUS).