PRODUCT DESIGN
USER JOURNEY
User Journey adalah langkah-langkah yang menggambarkan bagaimana user berinteraksi dengan sistem secara umum. Tujuan dari User Journey adalah untuk memahami apa yang dirasakan oleh user pada tiap langkah penggunaannya, serta memberikan saran tentang apa yang harus ditambahkan pada sistem. Berikut adalah User Journey untuk pemeriksaan QR code sebagai pengganti STNK dari sisi Mahasiswa dan User Journey untuk memeriksa barcode tersebut dari sisi Penjaga Parkir.
User Journey Mahasiswa
Goal: Pemeriksaan QR code
User Journey Penjaga Parkir
Goal: Memeriksa QR code
USER FLOW
User flow merupakan langkah-langkah yang dilakukan oleh pengguna aplikasi untuk mencapai tujuan dalam menggunakan suatu produk. Penggunaan metode User Flow dalam UX design bertujuan untuk mengkomunikasikan desain berdasarkan sudut pandang pengguna. Pada aplikasi yang kami buat ditujukan untuk mahasiswa FILKOM dan penjaga parkir FILKOM agar dapat memudahkan dalam mencari lahan parkir yang kosong dan efisiensi dalam pemeriksaan STNK. Pada aplikasi ini, pengguna aplikasi tidak perlu tidak perlu melakukan login berulang kali setiap membuka aplikasi jika tidak melakukan log out sebelumnya sehingga penggunaan menjadi lebih praktis.
Pada User Flow pertama ditujukan untuk mahasiswa FILKOM.
Berikut langkah-langkah melihat kuota parkiran FILKOM :
1. Mahasiswa membuka aplikasi.
2. Mahasiswa diharapkan telah melakukan pendaftaran pada perlengkapan FILKOM dengan melampirkan STNK dan KTM, jika sudah maka mahasiswa dapat melakukan proses login dengan memasukkan NIM dan password mahasiswa.
3. Jika mahasiswa gagal login maka harus mendaftar terlebih dahulu atau melapor ke perlengkapan FILKOM.
4. Setelah login berhasil, mahasiswa memilih layanan lihat kuota parkiran.
5. Setelah memilih layanan melihat kuota parkiran FILKOM maka akan muncul kuota parkiran FILKOM seperti informasi jumlah kendaraan dan jumlah parkiran yang kosong pada parkiran FILKOM depan dan belakang.
Berikut langkah-langkah cek STNK saat ingin keluar dari parkiran FILKOM:
1. Mahasiswa membuka aplikasi.
2. Mahasiswa diharapkan telah melakukan pendaftaran pada perlengkapan FILKOM dengan melampirkan STNK dan KTM, jika sudah maka mahasiswa dapat melakukan proses login dengan memasukkan NIM dan password mahasiswa.
3. Jika mahasiswa gagal login maka harus mendaftar terlebih dahulu atau melapor ke perlengkapan FILKOM.
4. Setelah login berhasil, mahasiswa memilih layanan cek STNK parkiran.
5. Setelah itu akan muncul barcode dan data kendaraan, dan siap di scan oleh penjaga parkiran.
Pada User Flow kedua ditujukan untuk Penjaga Parkir FILKOM.
Berikut langkah–langkah menambah jumlah kendaraan saat ada kendaraan yang masuk parkiran FILKOM:
1. Penjaga parkir membuka aplikasi.
2. Penjaga parkir diharapkan telah melakukan pendaftaran pada perlengkapan FILKOM dengan melampirkan KTP, jika sudah maka penjaga parkir dapat melakukan proses login dengan memasukkan NIP dan password.
3. Jika penjaga parkir gagal log in maka harus mendaftar terlebih dahulu atau
melapor ke perlengkapan FILKOM.
4. Setelah berhasil login pilih layanan tambah kendaraan.
5. Pilih lahan parkir.
6. Tambah jumlah kendaraan setiap ada kendaraan yang masuk.
Berikut langkah-langkah untuk scan barcode pada kendaraan yang keluar dari parkiran FILKOM:
1. Penjaga parkir membuka aplikasi.
2. Penjaga parkir diharapkan telah melakukan pendaftaran pada perlengkapan FILKOM dengan melampirkan KTP, jika sudah maka penjaga parkir dapat melakukan proses login dengan memasukkan NIP dan password.
3. Jika penjaga parkir gagal login maka harus mendaftar terlebih dahulu atau melapor
ke perlengkapan FILKOM.
4. Setelah berhasil log in pilih layanan scan QR code.
5. Penjaga parkir dapat melakukan scan QR code.
INFORMATION ARCHITECTURE
Information Architecture adalah sebuah praktek memutuskan bagaimana menyusun bagian- bagian dari sesuatu untuk membuatnya lebih mudah dimengerti. IA adalah penciptaan (pembuatan-penyusunan) struktur untuk website, aplikasi, atau proyek lainnya, yang memungkinkan kita untuk memahami di mana kita sebagai pengguna, dan mana informasi yang kita inginkan dalam kaitannya dengan posisi kita. Kami menggunakan Online Card Sorting melalui tools gratis pada web www.usabilitest.com serta tipe card sorting yang kami gunakan adalah Closed Card Sorting. Berikut adalah gambaran dari kartu yang digunakan:
Untuk menghasilkan output yang akurat kami membutuhkan partisipan untuk mengelompokkan sendiri kartu tersebut, dan hasil respon dari keseluruhan partisipan dapat digambarkan pada diagram berikut, dimana kotak berwarna hijau menunjukan jenis akun beserta kotak berwarna merah menunjukan masing masing halaman.
MENTAL MODEL
Sebuah mental model didasarkan pada keyakinan, bukan sepenuhnya didasarkan pada fakta, merepresentasikan apa yang diketahui oleh user. Tujuan utama pembuatan mental model adalah untuk membuat antar muka pengguna mengkomunikasikan sifat dasar sistem. Pada sistem parkir FILKOM UB yang akan dibuat mental model bertujuan untuk mengetahui apa saja yang dirasakan user ketika memarkir kendaraannya di area parkir filkom UB dan bagaimana user mengatasi permasalahannya. berikut adalah gambar dari mental model sistem parkir filkom ub.
SKETCH
Sketch merupakan tahapan dasar pada tahap desain agar dapat membuat wireframe, screenflow, dan desain antarmuka dengan cepat berdasarkan sketch yang telah dibuat. Hasil sketch merupakan kumpulan ide hasil diskusi dari semua anggota kelompok yang diimplementasikan pada gambar sketch. Berikut merupakan sketch dari aplikasi Parkir FILKOM:
Gambar di atas merupakan sektch pada sisi mahasiswa FILKOM sebagai pengguna aplikasi, sebelum menggunakan aplikasi diharapkan mahasiswa FILKOM telah melakukan pendaftraran di perlengkapan FILKOM dengan melampirkan KTM dan STNK kendaraan yang digunakan. Setelah mendaftar, pada setch nomor 1 aplikasi mahasiswa dapat memasukkan NIM dan password, kemudian tekan login dan akan masuk ke sketch nomor 2. Setelah itu pada halaman selanjutnya mahasiswa dapat memilih fitur aplikasi dan dapat melakukan logout, jika memilih fitur kuota parkir makan akan masuk ke halaman kuota parkir pada sketch nomor 3 dan menampilkan jumlah parkiran yang kosong dan sudah terisi pada parkiran depan dan belakang FILKOM. Jika user memilih cek STNK maka akan masuk ke halaman cek STNK pada sketch nomor 4 dan menampilkan QR-Code untuk di scan penjaga saat keluar dari parkiran dan menampilkan data kendaraan.
Gambar di atas merupakan sketch dari sisi penjaga parkir FILKOM sebagai pengguna aplikasi, sebelum menggunakan aplikasi diharapkan penjaga parkir telah melakukan pendaftaran di perlengkapan FILKOM dengan melampirkan KTP.
Setelah melakukan pendaftaran, penjaga parkir memasukkan NIP dan password pada halaman pertama dan akan masuk ke sketch nomor 2. Pada sketch nomor 2 penjaga parkir memilih fitur pada aplikasi dan dapat melakukan logout, jika ada kendaraan yang masuk maka penjaga parkir dapat memilih fitur kuota parkir dan masuk ke sketch nomor 3. Pada sketch nomor 3 penjaga memilih parkiran depan atau belakang, setelah memilih maka akan masuk ke sketch nomor 4. Pada sketch nomor 4 akan menampilkan jumlah kuota parkiran depanyang terisi dan yang kosong, pada sketch nomor 4 juga penjaga parkir akan menekan tombol tambah motor jika ada kendaraan yang masuk dan jika kuota kosong berjumlah 0 maka tidak dapat menambah kuota parkiran. Pada sketch nomor 5 sama seperti sketch nomor 4 tetapi pada sketch 5 menampilkan kuota parkiran belakang dan tambah motor parkiran belakang.
Kembali pada sketch nomor 2, jika ada kendaraan yang keluar maka penjaga parkir dapat memilih fitur cek STNK dan akan masuk ke sketch nomor 6 dimana penjaga dapar melakukan scan pada QR-code mahasiswa yang akan keluar sebagai pengganti STNK jika berhasil melakukan scan maka akan masuk ke sketch nomor 7 dan menampilkan data kendaraan jika benar maka tekan tombol data benar. Jika HP hilang atau ketinggalan maka mahasiswa akan mengurus surat di mako dan pada sketch nomor 6 penjaga parkir dapat menekan tombol foto surat mako dan masuk ke sketch nomor 8 kemudian melakukan foto dan akan masuk ke sketch nomor 9 dan tekan tombol kirim untuk mengirim foto.
WIREFRAME
Wireframe adalah kerangka atau coretan kasar untuk item-item pada halaman aplikasi sebelum proses design sesungguhnya dimulai. Wireframe dapat dibuat dengan aplikasi seperti Photoshop, Adobe Ilustrator, Adobe XD, dan lain-lain. Wireframe untuk aplikasi ini dibuat dengan menggunakan aplikasi Adobe XD. Berikut tampilan Wireframe yang telah dibuat:
Wireframe Mahasiswa:
Halaman 1: Halaman Login
Halaman 2: Halaman fitur-fitur
Halaman 3: Halaman Kuota Parkir
Halaman 4: Halaman Cek STNK
Wireframe Penjaga Parkir:
Halaman 1: Halaman Login
Halaman 2: Halaman fitur-fitur
Halaman 3: Halaman Kuota Parkir
Halaman 4: Halaman Kuota Parkiran DepanHalaman 5: Halaman Kuota Parkiran Belakang
Halaman 6: Halaman Cek STNK
Halaman 7: Halaman Data Kendaraan yang discan
Halaman 8: Halaman Camera untuk Foto Surat Mako Halaman 9: Halaman Foto Surat Mako
SCREEN FLOW
Screenflow berisi tentang gambaran kegunaan masing-masing tombol dimana jika tomboltersebut di tekan atau ke trigger maka akan mengarahkan ke halaman yang lain. Selain itu Screenflow juga menggambarkan hubungan antara halaman satu dengan halaman yang lain, untuk penggambaran lebih detail dapat dilihat dari gambar di bawah ini.
Screen Flow Mahasiswa:
Screen Flow Penjaga Parkir:
DESAIN ANTARMUKA
Desain antar muka berisi mengenai komponen komponen utama yang yang akan digunakan untuk mendesign UI nantinya seperti warna-warna utama yang akan digunakan, typography aplikasi yang menggambarkan jenis dan ukuran font yang akan digunakan sebagai acuan, icon yang akan digunakan, tampilan dan jenis button dan komponen komponen utama lainnya, Dalam design antar muka aplikasi Parkir Filkom berbasis mobile in, kami melampirkan design antar muka sebagai berikut:
