Phase 2 — Pengalaman Pelanggan

Portal Akun Pelanggan

Flow 5 dari 28 — Phase 2Pelanggan Melihat Dashboard Akun Pribadi

Aktor: Pelanggan (sudah login) Target: /customer Syarat: Sudah login dengan Magic Link
flowchart TD A["Pelanggan sudah login"] --> B["Masuk ke Dashboard Akun"] B --> C["Lihat ringkasan: Reservasi Mendatang"] C --> D{Apakah ada reservasi aktif?} D -->|Ada| E["Tampilkan 1 reservasi terdekat: tanggal, cabang, paket, status"] D -->|Belum ada| F["Tampilkan ajakan: 'Belum ada reservasi — Reservasi Sekarang'"] E --> G["Lihat Kendaraan Saya — maks 3"] F --> G G --> H["Tombol Aksi Cepat: Reservasi Baru, Kendaraan, Riwayat"] H --> I["Klik menu samping untuk akses fitur lain"] I --> J["Dashboard Akun"] style J fill:#16a34a,color:#fff style A fill:#7c3aed,color:#fff

Apa yang Ditampilkan di Dashboard

BagianIsiKegunaan
Sapaan"Halo, Budi Santoso!"Personalisasi — pelanggan merasa dikenali
Reservasi MendatangKartu berisi: tanggal, jam, cabang, paket, statusPelanggan langsung tahu kapan servis berikutnya
Kendaraan SayaDaftar singkat 3 kendaraan teratasAkses cepat — tidak perlu isi ulang data kendaraan
Aksi CepatTombol: Reservasi Baru, Kendaraan, RiwayatNavigasi cepat ke fitur utama
Menu SampingDashboard, Kendaraan Saya, Riwayat Reservasi, Profil, KeluarNavigasi lengkap ke semua fitur akun

📖 Cerita Contoh

Budi baru saja login. Dashboard langsung menyapanya "Halo, Budi!". Di bagian atas, muncul kartu reservasi mendatang: 20 Juni, sesi siang, Cabang Jakarta Pusat, Spooring & Balancing. Di bawahnya ada daftar kendaraannya: Toyota Avanza dan Honda HR-V. Budi bisa langsung klik "Reservasi Baru" untuk booking servis berikutnya.

⚠ Jika Belum Ada Data

KeadaanApa yang Terjadi
Belum ada reservasiMenampilkan ilustrasi + "Belum ada reservasi" + tombol Reservasi Sekarang
Belum ada kendaraanMenampilkan "Tambahkan kendaraan pertama Anda" + tombol Tambah

Flow 6 dari 28 — Phase 2Pelanggan Mengelola Data Kendaraan

Aktor: Pelanggan (sudah login) Maksimal: 10 kendaraan per akun CRUD: Tambah, Edit, Hapus
flowchart TD A["Buka menu Kendaraan Saya"] --> B["Lihat daftar kendaraan — kartu"] B --> C{Pilih tindakan} C -->|Tambah| D["Klik Tambah Kendaraan"] C -->|Edit| E["Klik ikon Edit di kartu"] C -->|Hapus| F["Klik ikon Hapus di kartu"] D --> G["Isi form: plat, merk, model, tahun, CC, VIN, warna"] G --> H["Klik Simpan"] H --> I["Kendaraan baru tersimpan"] E --> J["Ubah data yang perlu diperbarui"] J --> H F --> K{Terkait reservasi aktif?} K -->|Ya| L["Tidak bisa dihapus — kendaraan sedang digunakan"] K -->|Tidak| M["Konfirmasi: Yakin hapus kendaraan ini?"] M --> N["Kendaraan dihapus"] style I fill:#16a34a,color:#fff style N fill:#16a34a,color:#fff style L fill:#dc2626,color:#fff

Data yang Disimpan per Kendaraan

DataWajib?Keterangan
Plat Nomor✅ WajibOtomatis jadi huruf kapital. Format: B 1234 ABC
Merk✅ WajibContoh: Toyota, Honda, Daihatsu
Model / Tipe✅ WajibContoh: Avanza, HR-V, Xenia
Tahun✅ Wajib1970 sampai tahun sekarang
CC / Isi Silinder❌ OpsionalContoh: 1500
VIN / Nomor Rangka❌ Opsional17 digit, otomatis huruf kapital
Warna❌ OpsionalContoh: Putih, Hitam Metalik

📖 Cerita Contoh

Dewi memiliki 2 mobil: Honda HR-V dan Toyota Innova. Ia buka menu Kendaraan Saya, klik Tambah Kendaraan. Isi plat B 5678 DEF, merk Toyota, model Innova, tahun 2019. Klik Simpan. Sekarang dua mobilnya tersimpan. Saat reservasi nanti, Dewi tinggal pilih mobil mana yang mau diservis — tidak perlu isi ulang.

⚠ Jika Terjadi Masalah

MasalahApa yang Terjadi
Plat nomor sudah terdaftar"Plat nomor ini sudah terdaftar di akun Anda"
Sudah mencapai 10 kendaraan"Maksimal 10 kendaraan per akun. Hapus kendaraan lama untuk menambah baru."
Kendaraan sedang direservasiTidak bisa dihapus — kendaraan sedang dalam reservasi aktif

Flow 7 dari 28 — Phase 2Pelanggan Melihat Riwayat Reservasi

Aktor: Pelanggan (sudah login) Target: /customer/riwayat Fitur: Filter status, tanggal, urutkan
flowchart TD A["Buka menu Riwayat Reservasi"] --> B["Lihat daftar semua reservasi"] B --> C{Gunakan filter?} C -->|Filter Status| D["Pilih: Semua / Dikonfirmasi / Dikerjakan / Selesai / Dibatalkan"] C -->|Filter Tanggal| E["Pilih rentang tanggal"] C -->|Tidak| F["Lihat semua, urutan terbaru"] D --> G["Tabel terfilter"] E --> G F --> G G --> H["Klik salah satu reservasi"] H --> I["Lihat Detail Lengkap: status, cabang, paket, kendaraan, mekanik, catatan"] I --> J{Tindakan dari detail} J -->|Batalkan| K["Buka halaman pembatalan"] J -->|Ubah Jadwal| L["Buka halaman ubah jadwal"] J -->|Kembali| G style I fill:#1d4ed8,color:#fff

Informasi yang Ditampilkan

Di Halaman DaftarDi Halaman Detail
Tanggal reservasiSemua info daftar + status lengkap dengan progress
Status (badge warna)Nama cabang, alamat, telepon
Nama cabangDetail paket: nama, item, estimasi, harga
Plat nomor kendaraanData kendaraan lengkap
Nama paket layananNama mekanik yang mengerjakan (jika sudah assigned)
Jam sesiLinimasa pengerjaan (catatan mekanik)
Tombol Batalkan / Ubah Jadwal (jika masih bisa)

📖 Cerita Contoh

Dewi ingin tahu kapan terakhir kali ia servis shock absorber. Ia buka Riwayat Reservasi. Daftar menampilkan 12 reservasi sebelumnya. Ia filter status Selesai. Klik reservasi 3 bulan lalu — detailnya muncul: servis dilakukan di Cabang Surabaya, mekanik Agus yang mengerjakan, ada catatan "Shock depan kanan diganti". Dewi jadi tahu persis riwayat mobilnya.

⚠ Jika Terjadi Masalah

KeadaanApa yang Terjadi
Belum ada riwayatIlustrasi + "Belum ada riwayat reservasi" + tombol Reservasi Sekarang
Reservasi sudah selesai / dibatalkanTombol Batalkan dan Ubah Jadwal tidak muncul (hanya untuk status Dikonfirmasi)

Flow 8 dari 28 — Phase 2Pelanggan Membatalkan atau Mengubah Jadwal dari Portal

Aktor: Pelanggan (sudah login) Syarat: Status masih "Dikonfirmasi" & H-6 jam Perbedaan: Tidak perlu buka email — semua dari dashboard
flowchart TD A["Buka Riwayat > Klik reservasi"] --> B["Halaman Detail Reservasi"] B --> C{Pilih tindakan} C -->|Batalkan| D["Tulis alasan — opsional"] C -->|Ubah Jadwal| E["Pilih sesi baru dari kalender"] C -->|Kembali| A D --> F["Klik Konfirmasi Pembatalan"] F --> G["Reservasi dibatalkan — slot dikembalikan"] E --> H["Bandingkan jadwal Lama vs Baru"] H --> I["Klik Konfirmasi Perubahan"] I --> J["Jadwal diperbarui — slot lama dikembalikan"] G --> K["Email notifikasi otomatis"] J --> K style G fill:#dc2626,color:#fff style J fill:#16a34a,color:#fff

Perbedaan dengan Phase 1 (via Email)

AspekPhase 1 (via Email)Phase 2 (via Portal)
Cara aksesHarus buka email, cari tautanLangsung dari Dashboard Akun
LoginTidak perlu loginHarus sudah login
RiwayatTidak adaBisa lihat semua riwayat reservasi
KemudahanHarus menyimpan emailSemua di satu tempat — Dashboard Akun

📖 Cerita Contoh

Dewi login ke akunnya. Di dashboard, ia melihat reservasi besok untuk Honda HR-V. Ada keperluan mendadak. Ia klik reservasi itu, lalu klik Ubah Jadwal. Pilih tanggal 3 hari kemudian, sesi yang masih tersedia. Bandingkan jadwal lama vs baru. Klik Konfirmasi. Beres. Semua dilakukan dari dashboard tanpa perlu mencari-cari email lama.

⚠ Batasan

BatasanKeterangan
Hanya untuk status DikonfirmasiJika sudah Dikerjakan atau Selesai, tombol tidak muncul
Maksimal H-6 jamSama seperti via email — tidak bisa mendadak
Maksimal 1 kali ubah jadwalMencegah penyalahgunaan

Flow 9 dari 28 — Phase 2Sistem Otomatis Mengenali Pelanggan Lama (Auto-Fill)

Aktor: Sistem (otomatis) dibantu Pelanggan Pemicu: Pelanggan login, atau mengisi nomor HP di form reservasi
flowchart TD A["Pelanggan mulai isi form reservasi"] --> B{Apelanggan sudah login?} B -->|Sudah login| C["Otomatis tampilkan pilihan kendaraan dari akun"] B -->|Belum login| D["Pelanggan mengisi nomor HP"] C --> E["Pelanggan pilih kendaraan dari daftar"] D --> F["Sistem mencari di database: nomor HP dikenal?"] F -->|Dikenal| G["Otomatis isi nama, email, alamat"] F -->|Belum dikenal| H["Pelanggan isi data diri seperti biasa"] E --> I["Data kendaraan otomatis terisi lengkap"] G --> J["Notifikasi: Data diisi dari riwayat Anda"] I --> K["Form siap — 70% lebih cepat"] J --> K H --> K style K fill:#16a34a,color:#fff style J fill:#7c3aed,color:#fff

Apa yang Otomatis Terisi

KondisiData yang Otomatis TerisiEfek ke Pelanggan
Pelanggan login + pilih kendaraanSemua data kendaraan: plat, merk, model, tahun, CC, VIN, warnaTidak perlu isi form kendaraan sama sekali
Pelanggan login (tanpa pilih kendaraan)Data diri: nama, email, alamat, nomor HPHanya perlu isi data kendaraan
Pelanggan belum login, HP dikenalNama, email (tersamar), alamat, kendaraan terakhirForm terisi 50% otomatis
Pelanggan baru (HP tidak dikenal)Tidak ada — isi manualProses normal seperti Phase 1

📖 Cerita Contoh

Dewi sudah login. Ia klik Reservasi Baru. Di langkah form, sistem otomatis menampilkan daftar kendaraannya: Honda HR-V dan Toyota Innova. Dewi pilih Honda HR-V. Semua data kendaraan otomatis terisi. Nama, nomor HP, dan alamatnya juga sudah terisi. Dewi hanya perlu pilih tipe pekerjaan dan tulis keluhan (jika ada). Proses yang tadinya 5 menit sekarang hanya 1 menit.

Layanan CSO

Flow 13 dari 28 — Phase 2CSO Membuat Reservasi Manual untuk Pelanggan

Aktor: CSO / Admin Cabang Langkah: 5 langkah Waktu: ± 2 menit (pelanggan lama), ± 3 menit (pelanggan baru) Kegunaan: Pelanggan walk-in atau telepon
flowchart TD A["CSO buka menu Reservasi Baru"] --> B["Langkah 1: Cari atau Buat Pelanggan"] B --> C{Pelanggan dikenal?} C -->|Ya| D["Klik dari hasil pencarian — data otomatis terisi"] C -->|Tidak| E["Isi form data pelanggan baru: nama, HP"] D --> F["Langkah 2: Pilih Kendaraan"] E --> F F --> G{Kendaraan dikenal?} G -->|Ya| H["Pilih kendaraan dari daftar yang sudah ada"] G -->|Tidak| I["Isi form kendaraan baru: plat, merk, model, tahun"] H --> J["Langkah 3: Pilih Cabang, Paket, Jadwal"] I --> J J --> K["Langkah 4: Detail Pekerjaan"] K --> L["Langkah 5: Ringkasan dan Konfirmasi"] L --> M["Klik Simpan Reservasi"] M --> N["Reservasi tersimpan — pilihan langsung assign mekanik"] style N fill:#16a34a,color:#fff style M fill:#7c3aed,color:#fff

Rincian Setiap Langkah

LangkahYang Dilakukan CSOData yang Diisi
1. Cari PelangganKetik nama, nomor HP, atau plat — pilih dari hasilKata kunci pencarian
2. Pilih KendaraanPilih dari daftar kendaraan pelanggan, atau tambah baruPlat, merk, model, tahun (jika baru)
3. Pilih JadwalPilih cabang, paket, tanggal, sesi (dari dropdown)Klik pilihan dari dropdown
4. DetailTentukan tipe pekerjaan (Baru/Garansi), tulis keluhanTipe pekerjaan, keluhan
5. KonfirmasiPeriksa ringkasan, klik Simpan

📖 Cerita Contoh

Seorang pelanggan menelepon ke cabang. Siska (CSO) buka menu Reservasi Baru. Ia ketik nomor HP pelanggan — sistem langsung menampilkan data pelanggan tersebut. Siska pilih kendaraan si pelanggan (Toyota Avanza). Pilih paket Spooring, pilih sesi yang tersedia. Tulis keluhan "Setir terasa berat". Klik Simpan. Reservasi tersimpan — pelanggan tinggal datang sesuai jadwal. Semua selesai dalam 2 menit selama di telepon.

⚠ Jika Terjadi Masalah

MasalahApa yang Terjadi
Pelanggan belum ada di databaseCSO isi form singkat: nama + nomor HP (cukup 2 field)
Slot penuhSesi tidak muncul di dropdown pilihan