Desain UI/UX v1

Mobile-first untuk pasien, desktop untuk klinik. Setiap layar disertai catatan prinsip psikologi UX (65 prinsip ux-psychology-skill). Kaka si kakatua jambul kuning adalah pemandunya.

Pasien · mobile 390

9:41
Masuk
Kaka menyapa
Halo! Aku Kaka. Aku antar kamu sampai ke dokter.

Kak, ke dokter yuk.
Mulai dari yang paling ringan.

9:41
Cek jantung3 dari 8
Kaka mendengar
Kaka
Berapa usiamu sekarang?
52 tahun
Kaka
Tekanan darah terakhirmu, kalau ingat?
Sekitar 140/90
Kaka
Kamu merokok?
Termasuk rokok elektrik.
Tidak pernah
Dulu, sudah berhenti
Ya, masih
Jawabanmu belum disimpan sampai kamu memilih.
9:41
Hasil cek jantung
Kaka perhatian

Risiko 10 tahun

Sedang

Belum mengkhawatirkan, tapi perlu dicek dokter.

RendahSedangTinggi

Dari 100 orang dengan hasil seperti kamu, sekitar 12 orang mengalami masalah jantung dalam 10 tahun.

Yang paling berpengaruh

Tekanan darah 140/90Usia 52 Sudah berhenti merokok

Langkah berikutnya

Buat janji dokter umum Simpan hasil ini

Ini skrining, bukan diagnosis. Dihitung dengan skor Framingham berbasis IMT, tanpa tes lab.

9:41
Langkah 1 dari 3
Kaka papan

Simpan hasilmu

Cukup akun Google. Data diri dilengkapi nanti saat buat janji.

G Lanjut dengan Google

Kamu yang memutuskan

Bagikan hasil ini ke doktermu

Dokter bisa membacanya saat janji temu

Pengingat lewat WhatsApp

Jadwal kontrol dan obat

Bisa diubah kapan saja di Profil.

Tanpa iklan, data tidak dijual

Kamu bisa lihat siapa yang membuka datamu

Unduh atau hapus datamu kapan saja

Nanti saja, lihat hasil tanpa menyimpan
9:41
RW

Selamat pagi

Rina

Obat hari ini

Jadwal

Amlodipin 5 mg

Pagi 07.00 · diminum 07.12

Sudah

Metformin 500 mg

Malam 19.00 · sesudah makan

Nanti

Catatan kesehatan

142/88 mmHg

Tekanan darah · 3 Nov

Tinggi

118 mg/dL

Gula darah puasa · 3 Nov

Agak tinggi
Kaka

Tips hari ini: kurangi garam pelan-pelan. Coba ganti kecap asin dengan perasan jeruk nipis.

9:41
Buat janji1 dari 2
Cari dokter atau keluhan
UmumGigiAnakPenyakit Dalam
Sab14Besok
Min15Tutup
Sen16Nov
Sel17Nov
Rab18Nov
Kaka
Aku pilihkan jadwal paling awal. Bisa kamu ganti.
AP

dr. Andi Pratama

Dokter umum · SIP terverifikasi

Pernah menanganimu
09.3010.0010.3011.00
SM

dr. Sari Mahendra

Dokter umum · SIP terverifikasi

13.0013.3014.00

Rp0 dengan BPJS

Tanpa BPJS Rp150.000

Lanjut
9:41
Periksa lagi2 dari 2

dr. Andi Pratama

Dokter umum

Sabtu, 14 November 2026

09.30 · datang 15 menit lebih awal

Klinik Sehat Bersama

Ruang 2 · lantai 1

Kontrol tekanan darah

Keluhan · bisa diubah

Rincian biaya

Konsultasi dokter umumRp150.000
Ditanggung BPJS−Rp150.000
Kamu bayarRp0

Obat atau pemeriksaan tambahan dijelaskan dokter beserta biayanya sebelum dilakukan.

Ubah jadwal atau batal gratis sampai Sab 14 Nov, 07.30.

Kaka

Kaka memanggilmu saat giliran dekat

Notifikasi dan suara kicau

9:41
Antrean hari ini● Live
Kaka tiket

Nomor kamu

A-017

Sekarang dilayani A-014

Baru saja maju 1 nomor
014
015
016
017

3 orang lagi

Perkiraan ± 15 menit. Bisa maju atau mundur.

Kaka

Kaka akan memanggil namamu

Dua nomor sebelum giliranmu

Selagi menunggu

Ruang 2, lantai 1

Klinik Sehat Bersama

Bawa kartu BPJS

Dan daftar obat yang diminum

Saya sudah di klinik
9:41
A-017 · Klinik Sehat Bersama
Kaka memanggil

Rina, giliranmu!

Silakan ke Ruang 2
dr. Andi Pratama sudah menunggu.

Aku menuju ruangan Minta tunda 5 menit

Kaka memanggil lagi dalam 2 menit kalau belum ada jawaban.

9:41
Kunjungan selesai

Terima kasih sudah datang, Rina.

Sab 14 Nov · dr. Andi Pratama

Kaka berhasil

Kata dokter

Hipertensi · I10

Tekanan darahmu masih tinggi (142/88). Lanjutkan Amlodipin tiap pagi dan kurangi garam. Kita cek lagi 4 minggu lagi.

Ditulis ulang dalam bahasa sehari-hari dari catatan dokter.

Obatmu

Amlodipin 5 mg

1 tablet tiap pagi · 30 hari

Siap diambil

Kontrol berikutnya

Sab 12 Des 2026 · 09.30 · sudah dijadwalkan

Ubah

Tagihan Rp0

Ditanggung BPJS · rincian tersedia

Bagaimana kunjungan hari ini?

KurangCukupBaikSangat baik
9:41
Obat & pengingat
Kaka obat
Pagi ini sudah beres. Nanti malam satu lagi, ya.

Hari ini · Jumat 13 Nov

07.00

Amlodipin 5 mg

Diminum 07.12

Sudah
19.00

Metformin 500 mg

Sesudah makan malam

Tandai

Terlewat minum obat? Tidak apa-apa. Ikuti petunjuk di label obat, atau tanya apoteker lewat Tanya Kaka.

Amlodipin tinggal 6 hari

Tebus ulang sebelum Kamis 19 Nov

Tebus ulang

Pengingat aktif

Notifikasi + kicau Kaka

9:41
Rekam medis
RiwayatSiapa yang membuka
Kaka papan

Data kesehatanmu milikmu. Ini semua orang yang membuka rekam medismu, lengkap dengan alasannya.

AP

dr. Andi Pratama

Dokter · saat kunjungan

09.42
SR

Sinta Rahayu

Apoteker · menyiapkan resep

10.05
DL

Dewi Lestari

Kasir · membuat tagihan

10.12

Akses darurat

Belum pernah dipakai

Aman
Unduh semua dataku Laporkan akses yang mencurigakan
9:41
Kaka

Tanya Kaka

Menjelaskan rekam medismu sendiri

Amlodipin itu buat apa?
Kaka
Amlodipin diresepkan dr. Andi untuk menurunkan tekanan darahmu. Diminum 1 tablet tiap pagi.
Dari resep 14 Nov
Boleh aku berhenti kalau tensinya sudah normal?
Kaka
Itu harus diputuskan dokter, karena tekanan darah bisa naik lagi. Mau aku kirim pertanyaan ini ke dr. Andi?
Kapan kontrol lagi?Hasil lab terakhir

Kaka bukan dokter. Untuk keadaan darurat, tekan SOS.

Tulis pertanyaan…
9:41
Darurat
Tahan 2 detikuntuk menelepon 119

Lokasimu ikut dibagikan ke petugas:
Jl. Melati No. 12, Coblong, Bandung

IGD terdekat

RSUD Kota · 1,2 km · ± 6 menit

Arahkan

Kabari keluarga

Kirim lokasi ke Budi (suami)

Kirim

Kenali stroke

Wajah · Lengan · Bicara · Waktu

Pijat jantung

Panduan RJP orang awam

9:41
Kaka

Tanya Kaka

● Sedang tidak tersedia

Kaka tidak-tersedia

Kaka sedang tidak bisa menjawab

Layanan AI sedang gangguan. Riwayat, resep, dan jadwalmu tetap bisa dibuka seperti biasa.

Kaka mencoba lagi otomatis dalam 1 menit

Dokter

RW

Rina Wulandari · P · 52 th

MRN KM-2026-000123 · BPJS · A-017 · mulai 09.31

Alergi: Penisilin Hipertensi Skrining jantung: Sedang · dibagikan
S

Subjektif

Pusing di tengkuk 3 hari, terutama pagi.

Lupa minum amlodipin 2 hari minggu ini.

Tidak ada nyeri dada atau sesak.

Disorot = diambil dari transkrip, sudah dicek dokter

O

Objektif

142/88

TD mmHg

84

Nadi /mnt

36,7

Suhu °C

98%

SpO₂

68

BB kg

27,2

IMT

A

Asesmen

I10 · Hipertensi esensialditerima dari saran Kaka · 09.38+ Diagnosis
P

Rencana & resep

Amlodipin 5 mg · 1×1 pagi · 30 tablet

✓ Alergi aman · ✓ Interaksi aman · ✓ Dosis sesuai

Ibuprofen 400 mg ditahan

Ibuprofen bisa menaikkan tekanan darah dan melemahkan efek amlodipin. Untuk pusing, pertimbangkan parasetamol.

Edukasi: kurangi garam, minum obat tiap pagi. Kontrol 4 minggu · Sab 12 Des.

Keselamatan 3/4

✓ Alergi dicek✓ Interaksi dicekEdukasi belum Tanda tangan
9:41

Sab 14 Nov · Poli Umum · Ruang 2

Antrean

Menunggu 4Diperiksa 1Selesai 12
BS

A-018 · Budi Santoso

L · 61 th · Batuk 1 minggu

09.45
NA

A-019 · Nur Aini

P · 8 th · Demam · bersama ibu

10.00
HK

A-020 · Hendra Kusuma

L · 45 th · Kontrol gula darah

10.15
SW

A-021 · Siti Wahyuni

P · 70 th · Nyeri lutut

10.30

Staf klinik

Pendaftaran hari ini

Cari NIK, nama, atau nomor BPJS
Pasien baru

48

Terjadwal

31

Sudah check-in

12

Menunggu dipanggil

14 mnt

Rata-rata tunggu

No.PasienDokterJamStatus
A-017Rina Wulandari
BPJS · check-in dari rumah 08.12
dr. Andi Pratama09.30Dipanggil
A-018Budi Santoso
BPJS
dr. Andi Pratama09.45Check-in
A-019Nur Aini Anak
Umum · bersama ibu
dr. Andi Pratama10.00TerjadwalCheck-in
B-006Agus Wibowo
BPJS · kartu belum diverifikasi
drg. Maya Lestari10.00Perlu verifikasiVerifikasi
A-020Hendra Kusuma
BPJS
dr. Sari Mahendra10.15TerjadwalCheck-in
Kaka memanggil

Layar ruang tunggu

A-017

Rina W. · Ruang 2

Tunggu paling lama

SW

Siti Wahyuni · 70 th

Menunggu 32 menit

Lansia

Antrean resep

Cari resep atau pasien
Baru 3

Rina Wulandari

RX-1411-0042 · 1 obat · 10.02

✓ Lolos cek keselamatan

Budi Santoso

RX-1411-0043 · 3 obat

✓ Lolos cek keselamatan

Nur Aini

Anak · dosis berdasar BB 24 kg

Cek dosis anak
Disiapkan 2

Ahmad Fauzi

2 obat · disiapkan 09.55

Lina Marlina

4 obat · racikan

Siap diambil 4

Dedi Kurnia

Dipanggil 2×

Notifikasi terkirim

RX-1411-0042

Baru

Rina Wulandari · P · 52 th · dr. Andi Pratama

Amlodipin 5 mg

1×1 pagi · 30 tablet

✓ Alergi dicek (penisilin, tidak relevan)

✓ Interaksi dicek · 1 obat diganti dokter

Ibuprofen ditahan oleh penjaga resep, diganti parasetamol, lalu dibatalkan dokter.

Tagihan hari ini

PasienPenjaminTotalStatus
Rina Wulandari
INV-1411-0031
BPJSRp0Belum ditutup
Lina Marlina
INV-1411-0030
UmumRp285.000Lunas · QRIS
Ahmad Fauzi
INV-1411-0029
Asuransi swastaRp120.000Menunggu klaim

INV-1411-0031

BPJS

Rina Wulandari · A-017 · dr. Andi Pratama

Konsultasi dokter umumRp150.000
Amlodipin 5 mg × 30Rp45.000
Ditanggung BPJS−Rp195.000
Dibayar pasienRp0

Rincian yang sama terlihat oleh pasien di aplikasinya.

Input hasil · Hendra Kusuma

LAB-1411-0012 · Kontrol gula darah
PemeriksaanHasilNilai rujukanTanda
Gula darah puasa156 mg/dL70–99Tinggi
HbA1c7,4 %< 5,7Tinggi
Kolesterol total198 mg/dL< 200Normal
Kreatinin0,9 mg/dL0,7–1,3Normal

Sebelum dikirim

Tanda tinggi/rendah dihitung otomatis dari nilai rujukan. Hasil kritis memicu notifikasi langsung ke dokter.

HbA1c naik dari 6,9% (Agustus). Tren ikut tampil untuk dokter.

Verifikasi & kirim ke dokter

Foto toraks PA · Budi Santoso

RAD-1411-0004 · L · 61 th · batuk 1 minggu
Ilustrasi penampil gambar · bukan citra pasien
Kaka

Draf bacaan AI

Wajib diverifikasi radiolog

Temuan (draf)

Corakan bronkovaskular sedikit meningkat di basal kanan. Tidak tampak efusi pleura.

Kesan radiolog

Tulis kesan akhir…
Tandatangani & kirim

Akses & peran

Undang staf

Menunggu verifikasi dokter

MR

dr. Maria Rosa

SIP 503/1234/DPMPTSP/2026 · STR terlampir

Periksa dokumenVerifikasi
TS

dr. Teguh Santoso

SIP belum diunggah

Belum lengkap

Undangan aktif

rizky.n@kliniksehat.id

Peran: Lab · berlaku sampai 20 Nov

Cabut

Akses darurat perlu ditinjau

dr. Sari Mahendra membuka rekam medis tanpa janji temu

Alasan: "Pasien pingsan di lobi" · Jum 13 Nov 15.20

Peran hanya bisa diberikan lewat undangan. Tidak ada yang bisa memilih perannya sendiri.

Web · beranda pasien desktop

Selamat pagi, Rina

Obat hari ini

Jadwal

Amlodipin 5 mg

Pagi 07.00 · diminum 07.12

Sudah

Metformin 500 mg

Malam 19.00

Tandai

Catatan kesehatan

142/88 mmHg

Tekanan darah · 3 Nov

Tinggi

118 mg/dL

Gula darah puasa · 3 Nov

Agak tinggi
Kaka mendengar

Tanya Kaka

Tentang obat, jadwal, atau hasil lab-mu.

Kaka
Kontrol berikutnya besok jam 09.30. Mau aku ingatkan jam 08.00?
Ya, ingatkanHasil lab terakhir
Tulis pertanyaan…

Kaka · lembar karakter

Kaka

Kakatua jambul kuning, asli Indonesia. Gaya clay 3D. Kaka memandu pasien ke dokter, memanggil nama di antrean, dan menjelaskan rekam medis. Kaka bukan dokter.

Kaka
Kaka
Kaka
Kaka
Kaka menyapa
MenyapaSambutan, landing, onboarding
Kaka mendengar
MendengarSkrining, Copilot merekam
Kaka berpikir
BerpikirAI memproses lebih dari 1 detik
Kaka berhasil
BerhasilKunjungan selesai, tugas tuntas
Kaka perhatian
Perlu perhatianHasil skrining sedang/tinggi
Kaka tidak-tersedia
Tidak tersediaAI gangguan, disampaikan jujur
Kaka mundur
MundurSaat situasi serius, Kaka menepi
Kaka tiket
TiketAntrean, janji temu
Kaka memanggil
MemanggilGiliranmu, layar ruang tunggu
Kaka obat
ObatPengingat dan resep
Kaka papan
PapanFormulir, rekam medis, privasi
Kaka surat
SuratRujukan, pesan ke dokter

Aturan Kaka

Pasien: hadir penuh di onboarding, skrining, antrean, dan perayaan.

Dokter dan staf: hanya sebagai status Copilot dan di layar ruang tunggu.

Darurat: Kaka tidak tampil. Instruksi lebih dulu.

Rasa bersalah: Kaka tidak pernah sedih karena pasien lupa obat.

Diagnosis: Kaka tidak pernah mendiagnosis. Ia mengarahkan ke dokter.

Lansia: nada sopan, tidak kekanak-kanakan. Teks minimal 16 px.

Peta prinsip

Peta prinsip

Ke-65 prinsip dari ux-psychology-skill dan tempat masing-masing dipakai. Kode layar: P = pasien, D = dokter, S = staf, W = web. Yang oranye sengaja tidak dipakai atau dibatasi demi etika kesehatan.

Attention (4)

Selective AttentionP01 P05 D01 Satu aksi utama per layar. Penjaga resep muncul di baris obat.
Change BlindnessP08 Chip "baru saja maju 1 nomor".
Banner BlindnessP05 P08 Info penting berbentuk kartu tugas, tidak menyerupai iklan.
Inattentional BlindnessP05 P14 W02 SOS merah di posisi tetap pada semua layar.

Gestalt (8)

ProximityP07 Biaya menempel ke tombol konfirmasi.
SimilarityP05 S01 S04 Warna status sama di semua peran.
Common RegionP12 S02 Kartu dan kolom kanban per kelompok.
ClosureP02 P08 Bilah progres dan titik antrean.
ContinuityP11 P12 Linimasa obat dan riwayat akses.
Figure/GroundP09 S05 Layar dipanggil dan penampil radiologi.
ConnectednessP08 S02 Garis langkah antrean, jejak penjaga resep.
Common FateP08 Titik antrean bergerak bersama saat maju.

Sensemaking (3)

Mental ModelsP02 P08 Chat ala WhatsApp, kartu seperti kertas antrean.
Information ScentP01 W01 Label menyebut isinya: "8 pertanyaan, tanpa akun".
Information ForagingP06 P15 Janji temu dalam 2 layar. Jalan keluar berguna saat AI mati.

Motor (3)

Fitts's LawP09 P14 Tombol 56 px, SOS 208 px di area jempol.
Response TimeP08 P15 D01 Estimasi jujur, status Kaka berpikir, coba ulang otomatis.
Interaction CostP05 P11 Check-in dan tebus ulang satu ketukan.

Memory (10)

Miller's LawP05 4 item nav, 4 aksi cepat.
ChunkingP05 P10 D02 Obat, catatan, kontrol, tagihan dipisah.
Recognition over RecallP02 P06 P13 D01 Pilihan jawaban, "pernah menanganimu", saran pertanyaan.
Cognitive LoadP02 P10 D01 Satu pertanyaan per giliran. Tiga DDx teratas saja.
PrimingP01 "Mulai dari yang paling ringan" menyiapkan rasa aman.
Peak-End RuleP09 P10 W01 Momen dipanggil dan ringkasan kunjungan.
Spatial MemoryP05 W02 S01–S06 Kerangka tetap di mobile dan desktop.
Picture Superiority02 P03 Pose Kaka per fitur. Icon array 100 orang.
Zeigarnik EffectP02 P04 D01 "3 dari 8", "Langkah 1 dari 3", checklist 3/4.
Power Law of LearningS01–S06 Satu kerangka untuk semua portal staf.

Decision Making (5)

Hick's LawP01 P06 Tiga jalur. Poli dipilih dulu.
SatisficingP03 P05 D02 Satu "langkah berikutnya".
Loss AversionP07 Etis: batal gratis, tanpa biaya kejutan. Tidak dipakai untuk menakut-nakuti hasil skrining.
AnchoringP07 S03 Harga penuh → tanggungan → dibayar, urutan jujur.
Default EffectP04 P06 P07 D01 Jadwal awal terpilih, berbagi data mati, saran AI berstatus draf.

Motivation (4)

Self-DeterminationP04 P11 Pasien memilih berbagi data dan menandai obat sendiri.
Fresh Start EffectP11 Ajakan cek tensi tiap awal bulan, bisa dimatikan.
Intrinsic vs ExtrinsicP11 Tanpa poin atau hadiah untuk minum obat.
Variable RewardsP05 Dibatasi: hanya tips harian yang berganti.

Ethics (3)

Persuasion vs ManipulationP11 Tanpa streak, rasa bersalah, atau Kaka sedih.
TransparencyP07 P12 P15 Biaya, log akses, status AI jujur.
ReversibilityP04 P07 P09 D01 Cabut izin, batal gratis, tunda giliran, tolak saran AI.

Cognitive Biases (10)

Confirmation BiasP03 Faktor yang menurunkan risiko ikut ditampilkan.
Anchoring BiasP07 Angka pertama yang dilihat adalah harga penuh, bukan diskon palsu.
Availability HeuristicP03 Risiko absolut, bukan cerita kasus dramatis.
Negativity BiasD01 P15 S04 Pencegahan error dan status AI yang jujur.
Halo EffectW01 02 Polesan Kaka clay. Tidak dipakai untuk menutupi informasi.
False ConsensusUji Rencana uji dengan lansia, kader posyandu, dan dokter puskesmas.
Framing EffectP03 "12 dari 100" plus icon array.
Functional FixednessP02 D02 Pola familiar lebih dulu: chat, bottom nav, tab.
Sunk CostP12 Sengaja tidak dieksploitasi: data bisa diekspor kapan saja.
Endowment Effect— Sengaja tidak dipakai: tidak ada fitur gratis yang dicabut.

Persuasion & Trust (9)

ReciprocityP01 P03 Skrining gratis tanpa akun.
Social ProofW01 Sengaja tidak dipakai sampai ada angka pengguna yang nyata.
ScarcityP06 Dibatasi: slot penuh ditampilkan apa adanya, tanpa hitung mundur.
AuthorityP03 P06 S05 S06 SIP terverifikasi dan sumber skor disebut.
LikingP01 P13 Kaka hangat dan sopan.
Commitment/ConsistencyP03 P04 P10 Skrining → simpan → janji → kontrol terjadwal.
Prominence-InterpretationP12 S02 Status akses dan cek keselamatan terlihat.
Hierarchy of TrustP04 P12 Akun diminta setelah pasien mendapat nilai.
Creepiness-ConvenienceP13 Kaka hanya memakai data pasien itu sendiri dan menyebut sumbernya.

Emotion & Delight (6)

Three Processing LevelsSemua Visceral: Kaka clay. Behavioral: alur singkat. Reflective: "sehat sampai tua".
Aesthetic-UsabilitySemua Satu sistem visual yang konsisten.
DelightP09 P10 Momen dipanggil dan kunjungan selesai.
First ImpressionsP01 W01 Hero satu kalimat dengan Kaka.
ELIZA EffectP02 P13 Percakapan dengan Kaka.
Completion JoyP10 Kaka merayakan kunjungan selesai.

Foundations

Foundations

Warna diambil dari Kaka: teal dari tali lanyard, kuning dari jambul, putih dari bulu. Font Plus Jakarta Sans, dirancang untuk Jakarta.

Warna

teal-700 · aksi utama#0F766E
teal-900 · rail#0A3A36
mint-100#D3EFE7
bg#F4FAF8
yellow-400 · jambul#FFD43B
yellow-100 · Kaka#FFF5CC
ink#0F2A26
ink-2#4B605B
red-600 · darurat#D92D20
amber-700 · waspada#B54708
green-700 · aman#157F3C
sky-700 · info#1F6FA8
red-50#FEF1EF
amber-50#FFF6E6
green-50#EAF8EF
line#DCE9E5

Tipe · Plus Jakarta Sans

display 30/36 · 800Kak, ke dokter yuk.
h1 24/30 · 800Simpan hasilmu
h2 20/26 · 700Kontrol tekanan darah
h3 17/24 · 700Obat hari ini
body 16/24 · 400Teks isi minimal 16 px supaya nyaman dibaca lansia.
sm 14/20 · 500Keterangan dan label sekunder
eyebrow 12/16 · 700Langkah berikutnya

Bentuk

Radius 12 (input) · 20 (kartu) · 24 (kartu utama) · 999 (tombol, chip). Spasi kelipatan 4. Target sentuh minimal 44 px, tombol utama 56 px.

Bayangan lembut
Bayangan tinggi

Komponen

TerpilihPilihanTealAmanWaspadaBahayaInfoKakaNetral
Kaka
Gelembung Kaka
Gelembung pasien
Kolom input
AktifTab lain

Item daftar

Keterangan

Status