UI/UX Case Study: Redesign MRT-Jakarta Apps (Bahasa Indonesia)

Arifkimok
3 min readOct 8, 2020

Oh Halo! Pada tulisan kali ini saya mencoba untuk me redesign Aplikasi MRTJ dimana ini adalah aplikasi resmi yang bisa digunakan oleh masyarakat Indonesia untuk bisa melakukan pemesanan tiket MRT untuk area Kota Jakarta.

Alasan kenapa MRTJ menjadi Aplikasi yang saya pilih untuk bahan belajar saya saat ini dimulai saat saya dan teman saya berdiskusi mengenai Aplikasi ini, Teman saya yg bernama Nando mengeluhkan beberapa hal saat ia mencoba Aplikasi MRTJ, ia yang hampir setiap hari bekerja menggunakan MRT bercerita mengenai pengalamannya menggunakan MRTJ.

Nando bercerita kepada saya mengenai beberapa point masalah yang ia alami ketika ingin ber transaksi menggunakan aplikasi MRTJ:

  • Tombol yang kadang tidak terlihat atau tidak seperti tombol pada umumnya.
  • Jadwal Keberangkatan minim Informasi.
  • Pemesanan Tiket harus diulang dalam menentukan lokasi setiap kali ingin membeli.

Masih banyak hal yang dikeluhkan Nando sebagai pengguna, tapi saya tidak akan mengutip semuanya, saya hanya akan mengutip masukan-masukan dalam sisi desainnya saja.

Persona Nando

Pria asal Kota Tangerang, yang bekerja di Jakarta sebagai IT Support, usia beliau 23 thn dan belum menikah, biasanya ia langsung membeli tiket melalui stasiun MRT, sampai akhirnya ia mencoba aplikasi MRTJ demi bisa mempersingkat waktu, ia juga merasa bahwa transaksi menggunakan Aplikasi bisa membuat transaksinya lebih praktis mengingat ia hanya perlu mengetahui informasi perjalanannya dalam 1 genggaman.

Problem Assumtion

Setelah berdiskusi dan membaca persona Nando akhirnya saya mendapatkan sebuah Goals yang akan saya capai:

  • Memperbaiki Design halaman utama MRTJ (Khusunya memperbaiki White space dan element lainnya agar bisa dilihat dan digunakan secara jelas)
  • Memperluas Informasi jadwal keberangkatan
  • Mendesain ulang tab untuk pembelian Tiket dan menentukan alamat stasiun yang ingin dituju

Proses Sketch

Cuplikan kecil dari proses Sketching (maaf kalo tulisannya typeface dokter wkwkwk)

Proses ini dilakukan untuk explorasi ide khususnya untuk menentukan layout-layout yang nantinya bakal diimplementasikan kedalam Wireframe.

Wireframe

Selain meredesign tampilan layout nya saya juga sedikit meng improve pada bagian pembelian Ticket, pada Aplikasi aslinya user harus mengklik tab beli tiket -> menentukan alamat dan kembali ke home lalu klik tombol pembelian.

pada tampilan yang saya Improve, pembelian tikect hanya dilkakuan setelah mengklik screen “ Pembelian Ticket “ lalu lanjut pada proses pembayaran dan pembelian Ticket tanpa pelrlu kembali ke home screen.

Improving Menu Navbar, Pada versi asli ada 5 icon dimana saya mengruangi salah satunya, tab “Pilihan Menu” saya hilangkan karna tidak memiliki menu berarti, isinya hanya informasi mengenai Apps lainnya yang dimiliki oleh Pemerintahan, Menurut saya hal ini baiknya diletakan pada bagian depan Aplikasi seperti di slide Infromasi agar user langsung tau tanpa mencari tahu.

Credit Icon by Iconly 2

High Fidelity

NOTE: Study case ini bersifat Fake Project dan dibuat hanya untuk kebutuhan bahan belajar saya, jika ada masukan terhadap study case ini, Kritik & Saran akan sangat amat saya terima, Terima kasih :)

--

--