Malang, Indonesia

Hayyu Doc

Visit Live
Industry
Healthcare, Skin Clinic
Year
2025
Client
Hayyu.id (HayyuDoc)
Services
Product Design, UX Research, UI Design
Description
Designing HayyuDoc’s First Online Consultation Flow
Animated preview of HayyuDoc app screens

TL;DR

HayyuDoc launched its first online consultation feature, allowing patients to consult with Hayyu doctors directly through the app.

As the sole Product Designer, I worked with the Product Manager to design the end-to-end consultation flow:

Choose doctor → Pre-consultation assessment → Upload skin photos → Payment → Consultation begins

The key product decision was to collect patient context before the live session, so doctors could understand the patient’s concern earlier and use the limited consultation time for diagnosis, explanation, and treatment planning.

The feature shipped as part of HayyuDoc, an app ecosystem serving 19,000+ patients across Hayyu’s clinic network in Indonesia.

The Challenge

Hayyu is a growing skin clinic chain in Indonesia, serving women across several cities including Surabaya, Sidoarjo, Malang, Tangerang, Bekasi, Depok, and Jakarta.

Its app, HayyuDoc, already supported treatment reservation, digital treatment records, before-and-after photo history, dermacare product shopping, and skin education through Hayyupedia.

For this project, Hayyu wanted to launch its first online consultation feature inside the app.

Based on the product requirements and discussion with the Product Manager, one key challenge became clear: each consultation session would be time-boxed. If doctors had to spend the beginning of every session collecting basic patient information, such as skin concern, duration, routine, previous treatments, and visible symptoms, the useful part of the consultation could be delayed.

Comparison of consultations with and without pre-consultation preparation

So the product question was:

How might we help doctors understand the patient’s skin condition before the live consultation starts, while keeping the preparation flow clear and approachable for patients?

My Role

I was the sole Product Designer for this first launch, working directly with the Product Manager.

I owned the consultation journey, pre-consultation assessment flow, skin photo submission, payment-to-consultation flow, UI design, and design handoff.

Scope and ownership overview of the project

I also refined related areas across HayyuDoc, including reservation, treatment records, e-store touchpoints, and app navigation, so the new consultation feature felt consistent with the rest of the product.

The Solution

I designed the consultation journey around one main product decision:

Move basic information-gathering out of the live session and into a guided pre-consultation flow.

The guided pre-consultation flow design

The final flow was structured as:

Choose doctor → Complete pre-consultation assessment → Upload skin photos → Payment → Consultation begins

Patients first choose the doctor they want to consult with. This makes the experience feel more personal and trust-based, especially because patients are about to share personal skin concerns and photos.

Doctor selection screens

After choosing a doctor, patients complete a guided pre-consultation assessment covering their main skin concern, how long they have experienced it, possible triggers, skincare routine, previous treatments, and relevant medical history.

Patients then upload skin photos to give doctors visual context before the session. This helps doctors better understand the visible condition, affected area, and severity before the consultation begins.

Skin photo upload screens

Payment comes after the required preparation steps. The decision was made to ensure that every paid consultation starts with enough patient context, reducing the risk of doctors entering a live session without basic information.

The tradeoff was that patients had to complete preparation before payment, so the flow needed to feel lightweight, guided, and clearly connected to a better consultation experience.

Key Design Challenges

Making preparation feel useful, not bureaucratic

The self-diagnosis and photo steps could easily feel like extra effort before reaching the doctor. To avoid that, I kept the flow focused on information doctors actually needed and made each step feel connected to a better consultation.

Balancing medical clarity with approachable language

HayyuDoc’s users are everyday women seeking skincare support, not medical specialists. The questions, photo instructions, notes, and records had to be easy to understand while still giving doctors enough useful context.

Approachable copywriting in the assessment flow

Designing around limited consultation time

Because the session is time-boxed, the pre-consultation steps became one of the most important parts of the experience. They helped move orientation out of the live session, so the consultation could start from a more informed point.

Keeping the app consistent

The project also touched reservation, records, e-store, and navigation. I improved consistency across these areas without turning the work into a full app rebuild, because apparently scope creep remains humanity’s most persistent disease.

Consistency improvements across the app

The Impact

The online consultation feature was shipped as part of HayyuDoc, an app ecosystem serving 19,000+ patients across Hayyu’s clinic network in Indonesia.

For the first launch, the flow introduced a new in-app consultation channel where patients could choose a doctor, provide their skin concern details, upload skin photos, complete payment, and start the consultation from one connected journey.

Shipped consultation feature screens

The main product value was not only enabling online consultation, but also improving the quality of the consultation setup. Doctors could receive structured patient context before the live session started, helping them begin with a clearer understanding of the patient’s concern, visible skin condition, treatment history, and routine.

For patients, the flow made the process clearer by showing who they would consult with, what information they needed to prepare, why skin photos were needed, when payment happened, and how the consultation would begin.

What I Learned

The most valuable design work often happens before the main interaction starts.

In this project, the biggest design leverage was not only the consultation screen itself, but the preparation flow before it. By giving doctors written and visual context upfront, the live consultation could become more focused and useful.

That lesson applies beyond healthcare: when two parties have limited time and unequal context, good product design can make the interaction better before it even begins.

Closing visual of the HayyuDoc project
Next Project
Eragim and Rekber RIV app screens
Eragim & Rekber RIVFintech, Marketplace