- Disusun oleh
- Alzena Danas Azalia
- Kelas
- UI/UX 4
- Dosen Pengampu
- Bapak Hamzah Ramadhan
- Program Studi
- Bisnis Digital
- Universitas
- Cakrawala University
Case Study · UAS UI/UX 4 · 2026
Access by KAI
Saya melakukan redesign pada flow booking dan refund aplikasi Access by KAI untuk tugas UAS UI/UX 4.
Before = tampilan kerja di Figma (ada layer panel, properties, komentar). After = preview mode yang lebih bersih. Frame desainnya sama.
PT Kereta Api Indonesia 
Cakrawala University 01
Latar Belakang & Masalah
Access by KAI ratingnya tinggi di Play Store (4.5/5), tapi review tertulisnya bilang lain. Saya menemukan empat area pain point yang sering muncul.
Pemilihan kursi membingungkan
Peta kursi kecil, tidak ada indikator arah hadap (depan/mundur), sulit pilih kursi sebelahan untuk multi-penumpang.
Refund tidak transparan
Biaya potongan baru muncul di langkah akhir. Status refund tidak real-time, user harus chat CS berulang.
Multi-penumpang melelahkan
Input NIK 5-6 orang berulang. "Saved passengers" tidak efektif. Validasi NIK lambat per penumpang.
Hierarki informasi terbalik
Banner promo mendominasi home screen. Fungsi utama (cari jadwal) ter-push ke bawah fold.
Pertanyaan riset: Pada langkah mana di flow pemesanan user paling sering bingung, dan bagaimana ekspektasi mereka terhadap fitur seat selection ideal?
02
Rencana Riset
Saya pakai dua metode sekaligus: kuesioner untuk melihat pola, wawancara untuk dapat konteks di balik angka. Saat ini saya sedang dalam tahap pengumpulan data.
Hipotesis Awal
Daftar berikut diturunkan dari analisis review Play Store dan penggunaan aplikasi sendiri. Setiap poin akan diverifikasi melalui kuesioner dan wawancara.
- H-1 Sebagian besar pengguna kesulitan membedakan kursi menghadap depan vs menghadap mundur.
- H-2 Pengguna yang booking lebih dari satu penumpang sering tidak mendapatkan kursi sebelahan.
- H-3 Estimasi potongan refund yang baru muncul di akhir alur menurunkan kepercayaan pengguna.
- H-4 Banner promo di home screen mengganggu fungsi utama (cari jadwal).
Catatan untuk dosen: Hasil kuesioner, kutipan wawancara, dan validasi persona akan ditambahkan di bagian ini setelah pengumpulan data selesai. Materi konsultasi terkait pemilihan topik dan metode telah didiskusikan dengan dosen pengampu.
03
Persona
Tiga persona awal yang mewakili pain point berbeda. Persona ini disusun berdasarkan analisis review aplikasi dan akan divalidasi setelah wawancara selesai.
Rina, 24
Weekend Commuter
"Beli tiket cepat, jangan diiklanin paket Bromo."
Pak Bambang, 47
Family Trip Planner
"Aplikasi harus ngerti keluarga itu satu unit."
Dimas, 31
Last-Minute Business
"Kalau jadwal saya berubah, dia jadi musuh saya."
04
Prinsip Desain
Empat prinsip yang saya pakai untuk mengambil keputusan desain.
Transparency First
Tampilkan biaya dan potongan dari awal, bukan di akhir. Supaya user tidak kaget waktu mau bayar atau refund.
Show, Don't Tell
Ganti label teks dengan visual: arah hadap kursi, posisi gerbong, indikator real-time. Lebih cepat ditangkap daripada dibaca.
Smart Defaults
Aplikasi sudah tahu konteks user. Kursi sebelahan otomatis. Penumpang tersimpan pre-fill. Jadwal yang sering dipakai di-suggest.
Reduce Repetition
Input sekali, pakai berulang. NIK keluarga disimpan terenkripsi. Multi-passenger jadi 1 tap, bukan 6 form.
05
High-Fidelity Prototype
Sembilan screen mencakup tiga flow utama: booking, refund, dan reschedule. Toggle Before untuk lihat working file, After untuk preview mode.
Selamat pagi,
Zena ✨
Saldo KAI Pay
Rp 152.000
Dari
Gambir · GMR
Tujuan
Bandung · BD
Tanggal
Sab, 15 Mei
Penumpang
2 Dewasa
Tiket Mendatang
Lihat semua06:30
GMR
3j 5m
09:35
BD
Antar Kota
Commuter
Bandara
Logistik
Hierarki dibalik. Search di atas, promo di bawah.
Gambir → Bandung
Sab, 15 Mei · 2 Dewasa
Kam
13
Jum
14
Sab
15
Min
16
Sen
17
Sel
18
4 kereta tersedia
Argo Parahyangan
KA 49 · Eksekutif
Rp 150.000
/ orang
06:30
3j 5m
09:35
Serayu
KA 207 · Ekonomi Premium
Rp 85.000
/ orang
07:15
4j 25m
11:40
Argo Parahyangan
KA 51 · Eksekutif
Rp 150.000
/ orang
08:45
3j 5m
11:50
Cikuray
KA 285 · Ekonomi
Rp 65.000
/ orang
10:00
4j 30m
14:30
Date picker horizontal, sisa kursi real-time, recommended card.
Pilih Kursi
Argo Parahyangan · Eksekutif
2 kursi sebelahan ditemukan
3B & 3C · menghadap depan · dekat jendela
Terpilih (2/2)
3B, 3C · Rp 300.000
Indikator 'DEPAN' eksplisit. Auto-suggest 2 kursi sebelahan.
Data Penumpang
Pilih dari daftar tersimpan
Tap untuk menambahkan ke pesanan ini
Alzena Danas A.
NIK 3174••••••8901
Sutrisno Wibowo
NIK 3174••••••2210
Maya Sutrisno
NIK 3174••••••4502
Penumpang 2 - Kursi 3C
Nama Lengkap
NIK / No. Identitas
2 penumpang · 2 kursi
Total: Rp 300.000
Saved passengers tap-to-add. Form hanya untuk yang baru.
Konfirmasi & Bayar
06:30 GMR
3j 5m
09:35 BD
EKS-2 · Kursi 3B, 3C · 2 penumpang
Rincian Pembayaran
Metode Bayar
KAI Pay
Saldo Rp 152.000 · butuh top-up Rp 138.000
GoPay
BCA Virtual Account
QRIS
Dengan klik bayar kamu setuju syarat & ketentuan
Stepper progres, countdown timer, breakdown harga transparan.
Tiket Saya
Argo Parahyangan
Sab, 15 Mei
06:30
GMR
09:35
BD
Taksaka
Min, 01 Juni
20:00
GMR
06:25
YK
Argo Parahyangan
Sen, 28 Apr
06:30
GMR
09:35
BD
List tiket dengan status, action contextual per kondisi tiket.
E-Ticket
⤴06:30
15 Mei 2026
GMR
Gambir
3j 5m
Direct
09:35
15 Mei 2026
BD
Bandung
Penumpang
Alzena Danas A. · Kursi 3B (jendela)
NIK: 3174••••••8901
Tunjukkan QR ke petugas
7K2-A91-X3M
Booking ID
Pengingat keberangkatan
Datang 30 menit sebelum jadwal
QR code besar, kursi dengan info jendela, perforated edge ticket aesthetic.
Refund Tiket
Rp 225.000
dari Rp 300.000 (75%)
06:30
GMR · 15 Mei
09:35
BD
Rincian Pengembalian
Refund H-1 sebelum keberangkatan
Potongan 25% berlaku karena kamu refund H-1. Refund H-3 atau lebih awal hanya 10% potongan.
Estimasi Waktu Proses
Pengajuan diterima
Hari ini
Diverifikasi tim KAI
1-2 hari
Dana dikembalikan ke metode awal
3-7 hari
Mau reschedule aja?
Hemat Rp 67.500 - gratis ganti jadwal sampai H-1.
Pengajuan tidak bisa dibatalkan setelah dikonfirmasi
Estimasi pengembalian di card paling atas. Suggestion reschedule untuk retensi.
Ganti Jadwal
06:30
Sab, 15 Mei · GMR
09:35
BD
Gratis ganti jadwal
Berlaku sampai H-1 keberangkatan
Jadwal Tersedia · 5 hari ke depan
Sab, 15 Mei · 08:45
28 kursi tersedia
Gratis
Min, 16 Mei · 06:30
14 kursi tersedia
Gratis
Min, 16 Mei · 08:45
22 kursi tersedia
Gratis
Sen, 17 Mei · 06:30
18 kursi tersedia
+25.000
selisih harga
Sab, 15 Mei · 08:45
Gratis
Banner gratis ganti jadwal. Opsi 'mirip jadwal awal' untuk decision support.
06
Keputusan Desain Penting
Indikator Arah Kursi
Masalah: Pada aplikasi saat ini tidak ada informasi arah hadap kursi (depan/mundur). Pengguna baru tahu setelah duduk.
Solusi: Label "DEPAN ▲" eksplisit di atas peta gerbong, plus arrow arah perjalanan di header peta.
Hasilnya: User langsung paham tanpa harus baca FAQ atau bertanya ke petugas.
Auto-Suggest Kursi Sebelahan
Masalah: Multi-penumpang harus memilih kursi satu per satu, sering kali kursi sebelahan keburu di-book orang lain.
Solusi: Banner "✨ 2 kursi sebelahan ditemukan: 3B & 3C" dengan tombol "Pakai" satu tap.
Hasilnya: Pekerjaan yang seharusnya dilakukan aplikasi tidak lagi dibebankan ke user.
Estimasi Refund di Awal
Masalah: Biaya potongan refund (25%) baru muncul di langkah akhir, user merasa tertipu.
Solusi: Card gelap besar di paling atas: "Estimasi Pengembalian Rp 225.000 dari Rp 300.000 (75%)" sebelum tombol konfirmasi.
Hasilnya: User tahu lebih dulu nominal yang akan diterima, jadi tidak ada surprise di akhir.
Saved Passengers Tap-to-Add
Masalah: Input NIK 5-6 orang per booking lumayan melelahkan untuk family trip.
Solusi: Daftar penumpang tersimpan dengan avatar di atas form. Tap = tambah ke pesanan.
Hasilnya: Booking keluarga yang biasanya 6 form jadi 6 tap.
07
Pelajaran & Tantangan
Yang Berjalan Lancar
- Menggabungkan data kuesioner dengan wawancara bikin temuan lebih kuat. Angka saja kurang, cerita saja juga kurang.
- Fokus pada 2 flow saja (booking + refund) ternyata pas. Kalau redesign semua, hasilnya pasti dangkal.
- Menentukan prinsip desain dulu sebelum membuat screen, jadi pas eksekusi tidak random.
Yang Sulit
- Mencari minimal 10 responden butuh effort. Saya tidak bisa hanya mengandalkan teman dekat, jadi saya juga sebar ke grup-grup lain.
- Menahan diri untuk tidak redesign semua. Banyak ide muncul, tapi harus dipotong supaya scope tetap terkendali.
- Konsistensi warna dan spacing lumayan menguras waktu karena tidak ada design system yang sudah jadi.
Kalau Ada Waktu Lagi
- Saya ingin tes prototype ke 5 user beneran, bukan hanya berdasarkan asumsi.
- Eksplor error state (booking gagal, payment timeout, kuota habis).
- Bandingkan dengan kompetitor lokal (Tiket.com, Traveloka) supaya tahu pola yang sudah familiar di mata user Indonesia.
Awalnya saya kira tugas ini hanya soal bikin tampilan yang lebih bagus. Ternyata yang bikin user kesal di Access by KAI bukan kurangnya estetika, tapi banyak langkah kecil yang sebenarnya tidak perlu dan bikin lelah.