Halodoc Tele-consultation (Indonesia)

Designing for Tele-consultation App

pinastro
4 min readJun 4, 2017

The Healthcare problem Halodoc is trying to solve is two fold:

Home screen (left) Video Call (middle) Text Chat (right)

Halodoc’s existing solution Linkdokter basically allows the patients to quickly call the doctor from the list of available doctors and get their medical problems sorted before visiting them physically which had three modes of consultation:

  • Chat
  • Video Call
  • Audio Call

Insights from data about the behaviour of user on tele consultation said that

  • Chat is the most preferred mode of online consultation
  • Video or Voice consultation is usually preferred for a detailed consultation

Although the existing product did address the problem at the scale it operated it needed a boost both in-terms of the product and design to scale up the solution to address the problem.

A minimum viable product was conceptualized and designed within 20 days from scratch and without too many iterations of design by following a three step design process with the following steps:

  • Discovery & Research
  • Strategy
  • Design

Discovery & Research

Discovery & Research phase is basically trying to detail out the requirements surrounding the source of the requirement which in this case was the vision of the main stakeholder, the CEO of Halodoc

Listening to the source of the vision
Flow diagram for the Patient App
Balsamiq Mocks / White -boarding / Usability testing

The decision to follow Whats-app like communication model was arrived after doing a market research on various consultation applications in the same domain

Below is a snapshot of the part of the detailed flow diagram shown with semi-hi fidelity mocks. A detailed version of the flow diagram along with the story can be found here.

Basically the story boiled down to two different apps (one patient facing, shown in pink and second facing the doctor app, shown in green color) talking to each other, the story of which is shown in the below presentation.

Story of two apps communicating with each other

Strategy (for executing the design)

At the end of the discovery-phase, Once we had the clarity on the flow and information architecture and the low fidelity mocks I started working on the hi fidelity mocks for the same. Once the hi fidelity design were ready the work for polishing the screens was delegated among the two junior designers I worked with.

Icons and Illustrations

Icons and illustrations I went on with the placeholder icons in the beginnign but later replaced with polished icons made as per the brand guidelines and design language that has evolved till now for Halodoc.

Critical Wait Animation

There are two places in the whole experience that the patient has to wait for 2 or 3 minutes for the doctor to accept the consultation request. This period essentially is a critical piece because the patient has to wait and high chances of drop-offs. The strategy for Animation was handled separately and discussed in a separate blogpost.

Design

Patient App (Consumer App)

Doctor App (previously Linkdokter)

NOTE: The links are yet to be updated with the latest design

--

--

pinastro

Design, Games, Products, UX-UI, Storytelling, Data