Belajar UI/UX: Mendesain ulang website PT KAI agar lebih menarik

Introduction

PT KAI memiliki website yang berguna untuk melakukan pembelian tiket secara online serta memberikan informasi seputar perkereta apian yang ada di Indonesia.

Akan tetapi…

Website PT KAI memiliki tampilan yang (menurut saya) kurang menarik. Desain website tersebut cenderung terlihat kaku dan kurang fleksibel. karena hal itulah saya ingin membuat sebuah tampilan baru untuk website PT KAI.

Memahami Tantangan

Tantangan yang saya hadapi untuk merubah tampilan tersebut adalah informasi yang ada pada website tersebut tidak boleh hilang ataupun berkurang sedikitpun. Hal itu dikarenakan informasi yang ada adalah berasal dari PT KAI itu sendiri.

Kedua, membuat desain UI/UX yang lebih fresh dan mempermudah pengguna dalam mencari informasi ataupun melakukan pembelian tiket.

Pra-Produksi

Melakukan Survei

Survei yang saya lakukan adalah dengan membuat sebuah kuesioner yang berisi pertanyaan pertanyaan seputar pembelian tiket dan fitur apa saja yang dibutuhkan oleh pengguna yang nantinya akan di sematkan pada desain websitenya.

Beberapa masalah yang diungkapkan pembeli saat melakukan pembelian tiket secara offline

“Antri saat melakukan pembelian tiket secara offline”

“Tiket yang tersedia terkadang sudah habis”

“Keterbatasaan saat memilih kursi saat membeli tiket secara offline”

“Membutuhkan waktu yang cukup lama untuk membeli tiket dikarenakan harus mengantri”

Beberapa hal yang diharapkan pengguna

“Membutuhkan aplikasi yang mudah penggunaannya dan memiliki informasi kuota penumpang yang tersisa”

“Membutuhkan aplikasi yang memuat informasi jenis tata letak kursi”

“Membutuhkan aplikasi yang dapat diakses dimana saja”

Persona

Hasil dari survei yang saya lakukan menunjukkan beberapa jenis pengguna. Ada tiga jenis pengguna dalam menggunakan website PT KAI ini. Ketiga pengguna itu adalah pelajar atau mahasiswa, pekerja, dan seorang traveller.

Dari masing-masing pengguna memiliki beragam kebutuhan dan permasalahan yang berbeda beda. Salah satu permasalahan yang dialami oleh seorang pekerja adalah tidak memiliki waktu yang banyak, sehingga membutuhkan aplikasi yang cepat dan efektif.

Persona

User Flow

User flow adalah gambaran umum saat user menggunakan aplikasi. Membuat user flow untuk mendesain ulang website PT KAI pada sistem booking tiketnya memiliki kesulitan tersendiri. Awalnya saya mencoba mencari dan menggambarkan user flow yang dimiliki oleh website PT KAI.

Flow website PT KAI

Kemudian dari flow yang telah dimiliki PT KAI, saya mencoba mencari bagian yang dapat disederhanakan tapi tidak menghilangkan infromasi yang ada.

Flow hasil modifikasi yang diberikan beberapa fitur baru

Sketsa

Pada tahap ini, hasil user flow tadi dibuatkan sebuah sketsa sederhana yang menggambarkan website nantinya.

Sketsa salah satu bagian dari web

Wireframe

Wireframe atau yang biasa kita kenal dengan low fidelity (Lo-fi) lebih fokus kepada elemen-elemen dasar antarmuka dari sebuah website. Pada tahap ini, saya mengubah sketsa yang masih dalam bentuk gambaran tangan kedalam bentuk digital. Namun pada tahap wireframing ini tidak membuat gambar secara detail. Wireframing berguna untuk menyusun elemen elemen yang ada pada website nantinya sesuai dengan sketsa yang telah dibuat.

Wireframe salah satu bagian dari website

Wireframe pada gambar ini menunjukan desain halaman saat akan memilih kereta api yang akan dinaiki nanti. Desain pada wireframe ini sangat sederhana. Hal ini dikarenakan untuk memudahkan seorang desainer atau orang yang melihatnya dapat mengerti walau melihat desainnya secara sekilas.

Produksi

Moodboard

Moodboard atau inspiration board (kumpulan referensi) sangat diperlukan untuk membuat desain dari sebuah aplikasi. Moodboard sangat membantu seorang desainer untuk membuat konsep desain yang akan diterapkan pada website. Untuk mengumpulkan moodboard biasanya seorang desainer membutuhkan waktu yang lama. Hal ini dilakukan untuk menentukan arahan estetika dari desain website yang akan dibuat nanti. Moodboard bisa dikategorikan bermacam-macam. Ada moodboard yang khusus untuk warna, moodboard khusus untuk layout dll.

Pada tahap ini, saya mencari moodboard yang berhubungan dengan transportasi. Dalam proses mencari, saya membagi moodboard saya menjadi beberapa kategori. Moodboard untuk layout, moodboard untuk warna hingga moodboard untuk desain form booking. Hal ini dilakukan agar mendapatkan konsep estetika desain untuk website transportasi yang tepat dan pas.

Moodboard

Guideline

Guideline adalah pedoman untuk membangun sebuah desain. Guideline berguna untuk membuat desain yang elemen-elemennya tertata dan konsisten. Elemen-elemen yang termasuk dalam guideline adalah warna, typografi, ukuran button, form, label dll.

Mengapa harus ada guideline?

Guideline sangat membantu seorang desainer untuk membuat desain yang elemennya tertata rapi dan konsisten. Selain itu, guideline berguna untuk membantu seorang desainer yang akan meneruskan perkerjaan desain orang lain. Dengan adanya guideline, desainer tersebut dapat dengan mudah melanjutkan perkejaan desainer lain tanpa khawatir style desain yang berbeda.

Desain Guideline

High Fidelity

High fidelity (Hi-fi) merupakan versi detail dari Lo-fi. Desain yang ada pada Hi-fi menampilkan warna, icon, gambar, teks dll.

Pada aplikasi yang saya buat saat ini, saya membuat Hi-fi berdasarkan wireframe yang telah dibuat sebelumnya. Pada hi-fi ini saya membuat desain layout dari website dan memanfaatkan gambar dan icon-icon untuk menambahkan kesan menarik pada website.

Akan tetapi…

Dalam membuat desain ini saya tidak menghilangkan informasi yang sebelumnya telah ada di website PT KAI. Namun saya hanya menempatkan informasi tersebut pada tempat yang berbeda dan masih dalam satu halaman tersebut.

Hi-fi website PT KAI yang saya buat

Prototype

Setelah Hi-fi selesai dibuat, sekarang beralih ke pembuatan prototype. Prototype dibuat untuk mengubah desain yang statis menjadi desain yang interaktif.

Pembuatan prototype disini saya menggunakan website marvelapp.com. Pembuatan prototype dengan menggunakan marvel sangat dipermudah. Kita bisa memasukkan objek gambar jadi (Hi-fi) atau file asli desain (PSD/Sketch).

Pasca Produksi

Kuesioner

Setelah prototype jadi, langkah selanjutnya adalah membuat kuesioner aplikasi/website. Kuesioner ini bertujuan untuk mencari tahu tanggapan user mengenai desain website dengan desain yang baru. Selain itu, dengan adanya kuesioner akan membantu seorang desainer untuk mendapatkan saran/kritik yang digunakan untuk memperbaiki desain.

Usability testing

Kuesioner telah dibuat. Selanjutnya adalah melakukan usability testing. Fungsi utama dari usability testing ini adalah untuk mengetahui respon user mengenai desain baru pada website. Apakah desain ini menjawab permasalahan mereka? mempermudah mereka dalam menggunakan website tersebut? atau malah mempersulit mereka?. Hal itu bisa kita lihat dengan memberikan kuesioner setelah melakukan usability testing.

Revisi Hi-fi

Setelah dilakukan usability testing dan memberikan kuesioner ke user, maka kita dapat melihat reaksi user saat menggunakan website dengan desain yang telah kita buat. Dalam hal ini, kuesioner sangat membantu. Karena data yang ada pada kuesioner menjadi patokan apakah ada yang perlu direvisi atau diubah. Ketika ada beberapa bagian yang user merasa hal itu perlu untuk direvisi atau diubah, maka tugas kita sebagai desainer untuk merubahnya.

Apa yang harus kita lakukan setelah kita merubahnya?

Setelah kita melakukan revisi dengan merubah atau menambahkan pada suatu bagian, maka selanjutnya kita melakukan user testing kembali. Hal ini kita lakukan hingga user merasa nyaman dan user dapat menggunakan website ini tanpa ada kendala.

Hasil desain ulang UI/UX website PT KAI

Untuk mencoba prototype nya, silahkan klik di sini