Re-Design UI/UX Aplikasi Pemesanan Tiket Bus Sudiro Tungga Jaya — Bagian 3
Di bagian 3 ini saya akan meng-implementasikan langsung desain yang saya buat.
1. Halaman Pencarian Keberangkatan & Tujuan.
Pada halaman awal ini tersedia 4 menu (Bottom Navigation) serta kotak pencarian tempat/kota keberangkatan / tujuan dan pilihan tanggal keberangkatan.
Di halaman pencarian terdapat Riwayat Pencarian yang dimana ketika user ingin pergi ke tempat yang sama, user gak perlu lagi mengetik di kotak pencarian-nya.
2. Waktu Tanggal Keberangkatan
Di bagian ini adalah dimana user dapat memilih tanggal keberangkatan dan di bawahnya terdapat informasi yang dimana tiket bus dapat di pesan dalam H-10 sebelum tanggal keberangkatan.
Jadi ketika user ingin pergi pada tanggal 14 September 2019, user baru bisa pesan tiket-nya 10 Hari sebelum keberangkatan yaitu tanggal 4 September 2019.
3. Halaman Informasi Ketersediaan Bus & Titik Keberangkatan.
Pada halaman sebelah kiri menampilkan jumlah bus yang tersedia dan pada titik keberangkatan terdapat informasi jumlah kursi yang tersisa.
Jadi ketika bus yang akan di naikki sudah full, user akan terlebih dahulu kembali melakukan pengecekan kursi yang kosong pada bus yang tersedia tanpa harus balik lagi ke halaman awal untuk merubah tanggal keberangkatan.
4. Halaman Informasi Bus dan Rute Perjalanan.
Di halaman ini terdapat beberapa informasi seputar foto jenis bus (Interior dan Eksterior), fasilitas /pelayanan, serta rute perjalanan.
5. Halaman Pilih Kursi.
Pada bagian halaman pilih kursi ini terdapat beberapa keterangan pada warna kursi yang tertera agar memudahkan user untuk mencerna informasi.
6. Halaman Isi Data Penumpang.
Pada halaman ini terdapat 2 macam pengisian data, yaitu data untuk pemesan tiket dan data untuk penumpang.
Jika tombol CTA disable di tap namun masih ada bagian yang tidak terisi oleh user, sistem tidak akan melanjutkan ke halaman selanjut-nya dan sistem langsung mengarahkan ke bagian yang belum terisi datanya.
Jadi user gak perlu lagi tuh capek-capek cek dari atas “mana yah data yang belum terisi perasaan tadi udah ke isi semua”.
7. Halaman Cek Data.
Ketika semua data sudah terisi alangkah baik-nya user untuk cek kembali semua data-nya, mulai dari :
- Tempat Tujuan dan Keberangkatan.
- Titik Keberangkatan.
- Fasilitas dan Pelayan Bus, dan
- Data Pemesan dan Data Penumpang.
8. Halaman Metode Pembayaran.
Naaaah.., di bagian metode pembayaran sebelumnya hanya dapat menggunakkan metode pembayaran tunai ke toko retail (Alfamart dan Indomart).
Disini saya menambahkan beberapa metode pembayaran dengan uang elektronik. Mengapa demikian? inti-nya sih biar simple dan mempersingkat waktu aja dalam melakukan pembayaran, karena gak semua tempat tinggal user dekat dengan Alfamart / Indomart.
Dan bagaimana jika user harus menempuh jarak yang jauh ke Alfamart/Indomart tersebut dan belum lagi di kasir antri sedangkan waktu pembayaran yang tersisa tinggal dikit, kebayang kan panik-nya kayak apa? Belum lagi kalau kondisi diluar sedang hujan. emmmmm lengkap sudah.
9. Halaman Informasi Sisa Waktu dan Jumlah Pembayaran.
Padaha halaman ini saya lebih memperjelas Hirarky-nya agar user dapat mudah dalam menangkap informasi sisa waktu pembayaran, total pembayaran, rekening tujuan, dan informasi seputar pembayaran.
10. Halaman Notifikasi Pembayaran.
11. Halaman E-Ticket.
Di halaman ini e-ticket dapat di download agar user mudah untuk melihat dan menyimpan kode booking secara offline dan dapat di kirimkan ke agen untuk konfirmasi sebagai bukti user telah melunasi pembelian tiket secara online.
12. Halaman Konfirmasi Ke Agen.
Pada halaman konfirmasi terdapat 2 kontak operator agen bus yang dimana user bisa memilih dan ketika icon chat di klik langsung menuju ke WhatsApp.
Dan berikut prototype-nya.
Ok sekian, mohon kritik dan sarannya. Terima kasih :)
