CaseStudy — Trip Planner App : Membantu orang merencanakan perjalanan dan menemukan tempat liburan.
Tentang Studi Kasus
Studi kasus ini dilakukan saat saya mengikuti Bootcamp Online di Sanbercode. Studi kasus ini dibuat sekaligus untuk Final project pada Bootcamp ini.
Di Bootcamp ini diikuti oleh banyak peserta dan proses pembelajarannya yaitu online karena sedang masa pandemi ini diwajibkan dirumah.
Selama 4 minggu ini kita diajari bagaimana menjadi seorang UI/UX Designer dari Fundamental sampai bagaimana cara nya menyelesaikan sebuah permasalahan dan mendapatkan solusinya yang dikemas di sebuah studi kasus ini.
Saya mendapatkan sebuah studi kasus untuk permasalahan umum yang ada pada “Perjalanan dan Liburan” , yang sering menjadi permasalahan seorang yang suka bepergian atau berlibur yaitu sebuah rencana perjalanan dan informasi-informasi yang mencakup dari liburan tersebut.
Peran Saya
UI UX Designer
Tugas saya dari perencanaan sampai tahap validasi ke user. Oleh karena itu output yang saya berikan tidak hanya berupa tampilan antarmuka saja tetapi juga proses dari desain aplikasi ini dan pengalaman pengguna.
Tools yang saya gunakan
Draw.io , Figma
Durasi pengerjaan
18–24 Oktober 2020
Background
Saat libur tiba pasti setiap orang akan menggunakan waktu libur panjangnya untuk jalan-jalan bersama keluarganya atau bersama teman-temannya. namun sering sekali kewalahan saat merencanakan trip ke tempat baru karena tidak memiliki waktu yang banyak dan sibuk mengurusi pekerjaannya tidak dapat merencanakan perjalanannya dengan baik dan memaksimalkan waktu liburannya saat dia berlibur dan juga memiliki budget yang pas-pasan.
Selain dia tidak dapat merencanakan perjalanannya dia pun biasanya membutuhkan jasa trip yang akan mengeluarkan budget lebih untuk membayar itu. Semuanya jadi tidak effective dan efficient.
Objective
Mempermudah orang-orang yang ingin bepergian atau berlibur ke tempat baru untuk mereka dapat menikmati perjalanan mereka dengan membuat perencanaan perjalanan, mengatur kegiatan dan mengatur budgeting yang dikeluarkan.
User Research
Interview
Untuk memahami masalah saya mencari kebiasaan dari seorang yang suka pergi ke luar kota atau tempat baru untuk berlibur.
Tujuan wawancara ini adalah :
- Mengetahui kebiasaan mereka ketika sedang melakukan perjalanan liburan ke luar kota atau tempat baru.
- Mengidentifikasi keluhan dan kebutuhan mereka saat melakukan perjalanan liburan.
- Menentukan solusi untuk membantu mereka menyelesaikan permasalahannya.
Berikut hasil yang didapat dari interview :
Define
Lanjut ke langkah selanjutnya define adalah menerjemahkan masalah dan kebutuhan untuk dijadikan fokus yang ingin diselesaikan.
Pain Points
- Kebanyakan orang yang berlibur tidak memiliki rencana perjalanan dan tidak mengatur keuangan.
- Karena tidak memiliki banyak waktu untuk memikirkan harus pergi ke mana saja disaat ditempat tujuan
- Terkadang liburan keluar kota hanya dihabiskan di tempat penginapan karena tidak tahu tempat-tempat yang ingin dituju dan tidak tahu mengenai budget yang akan dikeluarkan
User Needs
- Membutuhkan rekomendasi tempat wisata dan informasi detailnya
- Membutuhkan informasi lengkap mengenai tempat penginapan, transportasi yang dapat menghemat waktu dalam merencanakan trip perjalanannya
- Membutuhkan informasi trip yang dapat menyesuaikan dengan budget
Ideation
Bagaimana jika.. terdapat sebuah layanan dimana setiap orang yang akan berlibur bisa membuat rencana perjalanan nya, dan bisa mendapatkan informasi informasi yang dibutuhkan dalam tripnya
Dan sangat membantu jika ditambahkan bisa memesan sebuah tiket transportasi menuju tempat tujuan dan tiket penginapan yang sesuai budgetnya dan beserta rekomendasi tempat-tempat wisata, kuliner terdekat tempat penginapan. Dan jika sudah semua dibuat perencanaan barulah mereka berangkat berlibur dengan perencanaan yang sudah mereka siapkan dan pada saat di tempat tujuan mereka tidak bingung lagi harus pergi kemana dan menikmati liburannya dengan baik.
Perancangan User Flow
Dari ide yang ada di atas saatnya membuat alur untuk user dalam berinteraksi nantinya dengan desain yang dibuat.
Information Architecture
Setelah membuat user flow selanjutnya menentukan informasi apa saja yang akan ditampilkan pada sebuah aplikasi atau produk digital.
Information Architecture pada halaman home
Information Architecture pada halaman Trip
Information Architecture pada halaman Profile
Wireframe
Setelah memiliki user flow selanjutnya adalah membuat wireframe dengan sesuai kebutuhan informasi apa saja yang dibutuhkan oleh user.
Seperti ini lah wireframe dari alur membuat perencanaan perjalanan:
Pembuatan High Fidelity
Mengubah wireframe yang telah dibuat sebelumnya menjadi bentuk yang presisi dan telah diberikan warna , tipografi dan konten sebenarnya.
Berikut Adalah High Fidelity Dari onboarding screen
Saat pengguna baru menggunakan aplikasi untuk pertama kalinya. Aplikasi akan menampilkan informasi yang memperkenalkan aplikasi mitrip ini.
Berikut Adalah High Fidelity Dari Login dan Sign-Up
Pengguna akan diminta untuk mendaftarkan akun untuk kepentingan data untuk aplikasi.
Berikut Adalah High Fidelity Dari Forgot Password
Pengguna akan diminta email untuk mereset password nya karena lupa password untuk login dan password baru akan dikirimkan melalui email.
Berikut Adalah High Fidelity Dari Interests si pengguna
Pengguna Awal akan diminta memilih ketertarikan mereka terhadap tema trip seperti apa yang mereka minati setidaknya 3 atau lebih dan pada halaman home nantinya akan me-nampilkan rekomendasi sesuai dari ketertarikan dari pengguna yang sudah dipilih.
Pada Halaman Utama ini pengguna akan diberikan beberapa informasi rekomendasi : For you, Explore Categories dan Trips Package yang sesuai dengan ketertarikan si pengguna. Ditampilkan secara sederhana.
Berikut Adalah High Fidelity Dari Halaman Home
Berikut Adalah High Fidelity Dari Halaman pencarian
Pada Halaman pencarian ini pengguna akan diberikan beberapa informasi kategori yang akan menjadi kebutuhan mereka untuk trip.
Berikut Ini Adalah High Fidelity Dari Halaman Trips
Pada Halaman Trip ini pengguna akan diberikan beberapa fitur sebagai inti solusi untuk permasalahan Rencana Perjalanan.
Tampilan ketika user memilih navigasi Trip. Berikut penjelasan dari elemen-elemen di halaman ini :
Nomor 1 — Planned Trip , menampilkan sebuah card bahwa user mempunyai trip yang sudah direncanakan dan terdapat card yang dan nama,lokasi,dan tanggal perjalanan contoh diatas adalah : Tanah Lot Bali 20 , Indonesia pada tanggal 01– 03 Nov 2020.
Nomor 2 — Tombol Create new plan trip, Untuk membuka atau membuat rencana perjalanan baru dan menampilkan halaman Trip Planner.
Nomor 3 — Saved Trips, Menampilkan sebuah card bahwa user mempunyai beberapa Trip yang disimpan dari rekomendasi yang diberikan aplikasi.
Nomor 4 — Saved Attractions, Menampilkan sebuah card bahwa user mempunyai beberapa Attractions yang disimpan dari rekomendasi yang diberikan aplikasi.
Nomor 5 — Tombol Edit Foto Background, Tombol icon untuk memberi atau mengganti gambar background pada trip yang sudah direncanakan agar mudah diingat.
Nomor 6 — Completed Trips, Menampilkan sebuah card bahwa user mempunyai beberapa Trip atau perjalanan yang sudah diselesaikan dan menjadi rekam untuk user mengetahui pernah melakukan perjalanan kemana saja.
Berikut Ini Adalah High Fidelity Dari Trip Planner
Pada Halaman Trip Planner ini pengguna akan memasukan informasi atau membuat sebuah rencana perjalanan ke suatu tempat.
Tampilan ketika user membuat rencana perjalanan baru. Berikut penjelasan dari elemen-elemen di halaman ini :
Nomor 1 — Back , Untuk kembali ke halaman sebelumnya, yaitu halaman Trips.
Nomor 2 — Trip Name, Text Input untuk user memberikan nama pada trip yang akan dibuat. Seperti contoh diatas : Tanah Lot Bali 20
Nomor 3 — Destination, Untuk memasukan tujuan trip user ingin pergi kemana.
Nomor 4 — Choose Date, Untuk memilih tanggal kapan pengguna akan melakukan Trip. Seperti contoh diatas dari tanggal 1 Nov- 3 Nov 2020
Nomor 5 — Duration, Dari memilih tanggal lalu duration otomatis menampilkan berapa lama pengguna melakukan Trip dihitung permalam.
Nomor 6 — Traveling With, Pilihan, user ingin melakukan trip dengan siapa? Seperti contoh diatas user melakukan solo trip.
Nomor 7 — Budget, Untuk mengatur perkiraan budget Trip seperti apa yang dilakukan oleh pengguna menggunakan 3 rate yaitu low, middle dan rich.
Nomor 8 — Tombol Plan a Trip, Untuk membuat rencana perjalanan baru dan menyimpan ke dalam Halaman trip pada Planned Trip atau perjalanan yang direncanakan.
Berikut Ini Adalah High Fidelity Dari Trip Details
Pada Halaman Trip Details ini adalah setelah user membuat sebuah Perjalanan baru yang sudah direncanakan user dapat membuat rencananya menjadi detail lebih rinci yaitu seperti gambar dibawah ini terdapat 3 Tab yaitu Day, Reservations dan Budget.
Nomor 1 — Halaman Trip Details Tab Day, Ketika user berhasil membuat rencana perjalanan baru sistem akan otomatis ke halaman Trip details bagian ini dan user bisa mengatur perjalanan nya secara detail yaitu seperti contoh Hari pertama pengguna sampai di Bandara Internasional Ngurah Rai pada jam 9 pagi dan setelah itu user sampai di Hotel pada jam 10 pagi dan pengguna bisa mengaturnya sampai Hari terakhir mereka Berlibur dan juga untuk memberi informasi kepada user memiliki kegiatan apa saja selama liburan dengan menekan tombol “Add Activity” untuk menambahkan kegiatan,maka dari itu liburan menjadi terperinci dan terencana.
Ketika sistem mendeteksi bahwa user berhasil membuat rencana perjalanan baru di Halaman Trip Planner. Lalu pengguna diarahkan ke halaman ini untuk mengisi data detail Aktivitas Harian.
Nomor 2 — Halaman Trip Details Tab Reservations, Ini adalah halaman setelah user menekan tombol Tab“Reservations” pada halaman ini menampilkan Reservasi dari pengguna telah melakukan reservasi apa saja seperti contoh gambar diatas pengguna telah melakukan reservasi penerbangan , hotel dan wisata. Pengguna dapat menambahkan list reservasi dengan menekan tombol “Add Item to list” dengan itu sistem akan menampilkan halaman search untuk pengguna mencari Item untuk ditambahkan ke dalam reservasi.
Nomor 3 — Halaman Trip Details Tab Budget, Ini adalah halaman setelah user menekan tombol Tab“Budget” pada halaman ini menampilkan Budgeting dari pengguna yang telah disesuaikan dengan budget yang dimiliki pengguna, dengan menekan tombol link “Set Budget” pengguna dapat mengatur perkiraan total budget yang dimiliki dan mengatur penganggaran budget untuk apa saja pengeluaran yang digunakan dan pengguna bisa menambahkan biaya jika ingin ada yang ditambahkan dari pengeluarannya dengan menekan tombol “Add Expense”. Seperti contoh diatas yaitu pengguna memiliki 10 jt rupiah untuk budget perjalanannya dan dibagi menjadi 4 pengeluaran yaitu Transport, Accomodation, Attractions dan Food.
Berikut Ini Adalah High Fidelity Dari Info Details
Terdapat Info details yaitu halaman info details Dari Tempat nya contoh Tanah Lot Bali info detailsnya dan ada Tab Penawaran dan juga Tab Reviews dari pengunjung lain yang telah mengunjungi Tanah Lot Bali untuk bahan pertimbangan pengguna dan ada halaman detail dari Attractions lihat gambar dibawah ini.
Nomor 1 — Halaman Info Details Tab Info, menampilkan info tentang tempat tujuan berupa Deskripsi, Map lokasi tujuan, Gallery berupa foto foto dari tempat tujuan dan paling bawah ada Destinasi terdekat dari tempat tujuan. Informasi ini memberikan details kepada pengguna tentang tempat agar mengetahui seperti apa tempat yang dituju dan destinasi terdekat apa saja dari tempat tujuan. Pengguna dapat langsung menambahkan tujuan ini kedalam Trip nya dengan menekan tombol “Add to new trip”.
Ketika pengguna mengklik rekomendasi tempat yang berada pada halaman home contoh disini adalah Tanah Lot sistem akan mengarahkan pengguna ke halaman ini untuk melihat info detail nya.
Nomor 2 — Halaman Info Details Tab Offers, Ini adalah halaman setelah user menekan tombol Tab “Offers” pada halaman ini menampilkan sebuah penawaran seperti Hotel terdekat, wisata terdekat dan penawaran lain yang terdekat dari lokasi tujuan.
Nomor 3 — Halaman Info Details Tab Reviews, Ini adalah halaman setelah user menekan tombol Tab “Reviews” pada halaman ini menampilkan sebuah review dari pengunjung lain yang telah mengunjungi tempat tujuan agar memberikan referensi bagi user saat ingin mengunjungi tempat yang sama. Review dari pengunjung lain sangat berarti untuk pengunjung baru yang belum pernah sama sekali berkunjung ketempat tersebut.
Nomor 4 — Halaman Info Details Attractions, Ini adalah halaman setelah user mengklik salah satu Attractions dari Tab “Offers” bisa dilihat pada halaman ini menampilkan sebuah detail informasi salah satu wisata Contoh gambar diatas yaitu “Bali Zoo Park” informasi singkat mengenai wisata yaitu berupa Deskripsi singkat tentang wisata, Jam operasional , Detail lokasi dan ada tombol “Directions” untuk membuka map dan menunjukan arah dan juga ada tombol “Call” untuk pengguna menghubungi tempat wisata tersebut jika ingin menanyakan informasi lebih lanjutnya. Setelah itu ada review dari pengunjung lain yang sudah mengunjungi tempat wisata ini, ada juga Gallery foto-foto tempat wisatanya untuk melihat keseruan ditempat tersebut. Jika user tertarik dengan wisata ini user bisa langsung mendapatkan tiketnya dengan menekan tombol “Get Ticket” atau bisa menyimpannya ke dalam tripnya dengan menekan tombol “Add To Trip”.
Berikut Ini Adalah High Fidelity Profile/Account
Pada Halaman Profile ini menampilkan profile pengguna yang tersimpan dalam aplikasi.
Nomor 1 — Halaman Profile/Account, menampilkan info tentang profile pengguna yang tersimpan dalam aplikasi dan pengguna pun dapat mengunggah foto-foto keseruan mereka selama trip pada halaman profile mereka dengan menekan tombol “Add Photo” pengguna juga dapat mengedit profilenya seperti Nama,Bio,Role dengan menekan tombol “Edit Profile”.
Nomor 2 — Halaman Settings, Ketika pengguna mengklik humberger yang berada pada halaman profile contoh seperti gambar diatas sistem akan menampilkan halaman settings berupa Settings untuk aplikasi tersebut dan jika pengguna ingin keluar dari aplikasi user bisa menekan tombol “Sign Out”.
Sekian case study dari saya…
Terima Kasih
Terima kasih semuanya sudah menyempatkan membaca artikel case study yang saya buat yang sangat singkat ini. Case study ini saya buat dalam rangka melatih saya untuk menjelaskan proses dari sebuah desain yang telah saya buat.
Silahkan tuliskan pertanyaan atau saran di kolom komentar agar artikel yang saya buat selanjutnya dapat menjadi lebih baik.
mudah-mudahan ada manfaatnya.
“Good design is about process, not product” — Jared Sinclair.
Referensi Penulisan:
