Redesign Traveloka Apps — UX Case Study

Здравствуйте!
Disini saya akan mencoba redesign aplikasi penyedia layanan pemesanan tiket dan hotel terbaik di indonesia, yaitu Traveloka. Pada dasarnya aplikasi traveloka sekarang ini sudah mempunyai ux dan ui yang sangat baik namun disini saya akan mencoba menambah fitur atau memperbaiki ux dan ui nya sesuai dengan identifikasi masalah disini.

Introduction
Saya melakukan case study ini adalah sebagai pembelajaran dan untuk melatih kemampuan design thinking yang meliputi advertise, define problems, ideate, prototyping dan usability testing. Saya akan mencoba mengerjakan case study versi saya berdasarkan dengan keresahan yang saya alami sendiri, tidak berdasarkan data asli yang dikumpulkan dari pengguna lain. Berikut adalah proses desain yang saya buat untuk me-redesign aplikasi traveloka.

The Challenge
Ada banyak ruang untuk meningkatkan UI (user Interface) dan UX (User Experience) di beberapa fitur aplikasi Traveloka. Bagaimana mengubah atau menambahkan fitur baru di aplikasi ini, sehingga pengguna dapat merasakan pengalaman yang lebih mudah dan menyenangkan. Saya akan meningkatkan UX dan UI dari layanan ini untuk memberikan pengalaman yang lebih baik kepada pengguna.

Design Process
Dengan waktu yang singkat dan dengan riset berdasarkan dari data pribadi, saya memilih untuk menggunakan metode sederhana dan efektif. Saya memutuskan untuk mengikuti proses desain ini agar saya dapat membuat keputusan berdasarkan wawasan (insights), motivasi (motivations), dan frustasi (frustrations) pengguna. Dibawah ini adalah visualisasinya.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

EMPATHIZE
Proses empathize dilakukan berdasarkan dari perspektif dan asumsi yang dialami oleh saya sendiri sebagai pengguna aplikasi, ada beberapa poin keluhan atau kesulitan yang didapatkan. Berikut adalah detail cerita dari user.

1. Suatu hari saya mempunyai rencana untuk berlibur dan menginap 1 malam di sebuah hotel, diluar perkiraan saya sesampainya disana ternyata terjadi hujan lebat, karena hujan itu rencana untuk menikmati liburan singkat pun menjadi sia-sia.
2. Ketika saya dan beberapa anggota keluarga ingin berlibur di suatu tempat, saya mencari sebuah penginapan atau rumah untuk disewa tanpa minimal tamu dengan harga yang murah dikarenakan anggota keluarga banyak dan dengan biaya yang sangat terbatas.
3. User mendapatkan pengalaman yang biasa saja ketika membuka halaman detail dan melakukan melakukan proses pemesanan kamar hotel.

User Persona

Rizal merupakan seorang pria berumur 22 tahun. Dia adalah seorang mahasiswa tingkat akhir yang baru saja dinyatakan lulus di sebuah universitas dan akan melakukan wisuda bersama anggota keluarganya.
Goals
Mendapatkan informasi lengkap dan detail mengenai tempat yang akan dituju dengan meminimalisir kemungkinan buruk yang ada, selain itu bisa mendapatkan tempat untuk menginap bersama keluarga dengan harga yang sesuai.
Frustration
Kesulitan menemukan tempat menginap yang murah tanpa batas tamu, dan juga mendapatkan pengalaman yang biasa ketika melakukan proses pembayaran.

DEFINE

defind process

Setelah saya mendapatkan hasil dari riset yang dilakukan, saya menganalisanya dan mendapatkan pain point dari permasalahan tersebut.
Merasa kecewa ketika terjadi hal diluar keinginan (terjadi hujan) karena kurang atau tidak ada info pada aplikasi.

• Mendapat kesulitan menemukan penginapan tanpa batas tamu dengan biaya yang terbatas.
• Kurangnya fitur seperti filter, sort dan compare ketika memilih hotel atau ruangan.
• Halaman utama terlalu panjang sehingga promo tidak terlihat
• Flow untuk mencapai tujuan terasa biasa saja tidak ada pengalaman yang menyenangkan disana.

Dari beberapa pain point tersebut saya mengelompokan masalah tersebut menjadi:

1. User Interface
   Tampilan interface Traveloka saat ini sudah sangat bagus namun ada beberapa penambahan dan pengurangan beberapa fitur sehingga akan memaksimalkan pengalaman menyenangkan untuk user.
2. Flow
   User merasa flow yang tersedia saat ini terlalu panjang dengan banyak informasi yang tidak begitu diperlukan untuk mencapai tujuan dan user tidak mendapatkan pengalaman yang menyenangkan karena flow terkesan biasa saja.

Berdasarkan wawasan (the insight) yang saya kumpulkan dalam fase berempati (empathize phase), saya mencoba membingkai ulang pernyataan wawasan sebagai pertanyaan Bagaimana Mungkin Kita (How Might We) untuk mengubah tantangan tersebut menjadi peluang untuk desain. saya akan mempersiapkan diri untuk solusi inovatif.

How Might We

• Bagaimana mungkin kita membuat tampilan Traveloka tidak membosankan?
• Bagaimana mungkin kita menyederhanakan flow pada setiap fitur?
• Bagaimana mungkin kita membuat halaman utama lebih efektif?
• Bagaimana mungkin kita membuat fitur aplikasi yang inovatif?

IDEATE
Pada hasil riset terdapat tiga fitur utama yang sering digunakan. Oleh karena itu disini saya hanya akan fokus terhadap fitur-fitur tersebut. Dari beberapa masalah yang telah dijelaskan, maka ini merupakan solusi saya untuk menyelesaikan masalah tersebut.
Saya tahu bahwa pengguna akrab dengan fitur serupa di aplikasi lain yang telah mereka gunakan sebelumnya. Mereka menggunakannya untuk dengan mudah membeli produk yang mereka minta, jadi sangat penting untuk menciptakan pengalaman yang lebih baik dalam menggunakan fitur ini. Jadi, saya mengerjakan perbaikan di area di mana pengguna mengalami kesulitan. Dari rumusan masalah tersebut, berikut adalah tujuan desain yang harus dicapai dalam studi kasus ini:

• Pengguna dapat menyelesaikan pembelian dengan lebih sederhana, lebih cepat, dan lebih efisien.
• Pengguna harus dapat menemukan semua produk yang mereka cari dan mereka memahami kemana harus pergi dengan mudah.
• Pengguna merasa puas menggunakan fitur yang memenuhi kebutuhan mendesak mereka.

User Flow

Flowchart

Wireframe and Mockup
Setelah mengumpulkan banyak wawasan, bertukar pikiran, dan memprioritaskan ide, inilah hasil akhir dari wireframe yang saya kerjakan.

wireframe-1

mockup-1

wireframe-2

mockup-2

wireframe-3

mockup-3

Sebelum mentranslate experience yang sudah kita buat di wireframe kedalam sebuah visual, saya terlebih dahulu menentukan konsep desain yang akan saya gunakan pada aplikasi nanti. Seperti menentukan warna, font, dan lain-lain.

Style Guide

style guide

PROTOTYPE

Setelah wireframe selesai dibuat, saya mengubahnya menjadi desain dengan beberapa perbaikan dan penambahan fitur dan memvisualkan interaksinya dalam sebuah prototype. Saya mengerjakan bagian ini di Adobe XD. Jadi, inilah hasilnya.

Prototype Demo

USABILITY TESTING
Setelah kita melakukan semuanya dari awal, sekarang saatnya melakukan uji kegunaan lagi. Mengapa pengujian kegunaan lagi? Itu karena, kita ingin memastikan lagi bahwa pengguna tidak akan menemukan kesulitan atau hambatan lagi untuk mencapai tujuan mereka dalam aplikasi ini. Dan jika menemukan kesulitan atau mungkin menemukan feedback dari pengguna, kita dapat melakukan semuanya lagi dari awal, dan itu disebut sebuah iterasi.

Conclusion
Saya menemukan bahwa desain baru lebih nyaman dan efisien untuk digunakan. Mereka tidak perlu mempelajari lebih lanjut untuk menggunakannya. Saya tahu ini benar ketika pengguna dapat menyelesaikan tugas yang diberikan lebih cepat, pengguna tidak bingung saat mencari produk yang ingin mereka beli, dan saya menerima umpan balik positif tentang fitur aplikasi yang ditingkatkan.
Case study ini dibuat based on data. Sesuai hasil research yang saya harapkan bisa memenuhi kebutuhan user. Sekian case study dari saya, Silahkan berikan pertanyaan, masukan dan tambahan pada bagian response di bawah.

Design is a never ending process, you just run out of time. Make sure you keep learning and improving your work.
Terima kasih telah meluangkan waktu untuk membaca! Спасибо!

До встречи!
Rizal Л Фикри