Studi Kasus UI/UX Aplikasi Mobile Pinjam Buku
Ringkasan Studi Kasus
Ide ini berasal dari dulu saya sering meminjam buku di perpustakaan. Saya amati:
- Sistem pengunjung perpustakaan dan peminjaman buku masih secara menulis di buku adminsitrasi atau meng-input manual menggunakan komputer.
- Saat meminjam buku harus menitipkan kartu identitas seperti KTP, SIM, KTM, Anggota Perpustakaan.
Menurut saya itu tidak efektif dari segi waktu dan kemudahan. Dari sini saya berinisiatif memberikan solusi untuk memudahkan melakukan presensi dan peminjaman buku.
Untuk menyelesaikan masalah ini, Saya menggunakan metode Design Thinking yang terdiri dari Empathize, Define, Ideate, Prototype, Test.
Apa latar belakang saya membuat aplikasi ini?
- Sistem pengunjung perpustakaan dan peminjaman buku masih secara menulis di buku adminsitrasi atau meng-input manual menggunakan komputer.
- Saat meminjam buku harus menitipkan kartu identitas seperti KTP, SIM, KTM, Anggota Perpustakaan.
Apa tujuan saya membuat aplikasi ini?
- Mempermudah orang melakukan presensi pengunjung perpustakaan.
- Mempermudah orang melakukan peminjaman buku.
Siapa target orang menggunakan aplikasi ini?
- Tinggal di Indonesia, Berumur 15–25 tahun, Pelajar / tidak bekerja, Laki-laki / Perempuan, Orang yang sering mengunjungi perpustakaan dan meminjam buku.
Apa tantangan saya selama memecahkan masalah ini?
- Disituasi pandemi CoV-19 ini, bagaimana saya harus memecahkan masalah antara petugas perpustakaan dan pengunjung tidak saling bersentuhan?
- Bagaimana pengunjung bisa melakukan presensi pengunjung cukup menggunakan smartphone?
Apa peran saya di studi kasus ini?
Dalam projek ini, saya berperan menjadi UI/UX Designer.
Bagaimana saya memecahkan masalah ini?
Dalam pembuatan aplikasi ini, proses desain yang saya gunakan ialah Design Thinking yang terdiri dari Empathize, Define, Ideate, Prototype, Test.
Fase Empathize
Di fase awal, saya membuat kelompok user persona yang memiliki informasi:
- Orang-orang yang suka meminjam buku perpustakaan
- Demografi: Tinggal di Indonesia, Berumur 15–25 tahun, Pelajar / tidak bekerja, Laki-laki / Perempuan.
- Tujuan utama: Presensi pengunjung dan peminjam buku dengan mudah dan cepat di perpustakaan.
Setelah itu saya membuat hipotesis/latar belakang masalah yaitu:
- User persona merasa sistem presensi pengunjung dan peminjaman buku di perpustakaan masih secara manual yaitu menulis dibuku administrasi dan penyita kartu identitas seperti KTP, SIM, KTM, Anggota Perpustakaan
Dari hipotesis yang saya buat, saya membuat tujuan yaitu:
- Mempermudah orang melakukan presensi pengunjung dan meminjam buku perpustakaan
Jika disatukan hasilnya seperti ini.
Saya mencoba validasi hipotesis yang saya buat dengan cara mengumpulkan informasi dari user persona yang telah saya ditetapkan. Saya mewawancarai 4 orang yaitu Rianti, Cindy, Ayu, Yandi. Mereka lumayan sering mengunjungi perpustakaan seperti perpustakaan daerah, swasta, institusi pendidikan.
Saya fokus mewawancarai apa saja step-by-step atau tahapan mereka supaya mereka bisa meminjam buku dan apa saja masalah yang mereka hadapi disetiap tahap tersebut. Berikut hasil wawancaranya.
Warna biru adalah Action atau tahapan pengguna, warna merah adalah Problem atau masalah pengguna yang alami, lingkaran merah adalah masalah yang telah disebutkan pada Latar Belakang Masalah yang ingin dipecahkan.
Dari hasil wawancara diatas terdapat 3 dari 4 user persona memiliki masalah dalam melakukan presensi pengunjung dan peminjaman buku yang telah disebutkan pada Latar Belakang Masalah. Saya akan fokus pada masalah telah disebutkan.
Hasil semua wawancara tadi saya sederhanakan dan kelompokan menjadi Action dan Problem yang dialami oleh pengguna. Setelah itu dipetakan dalam User Journey Map yang hasilnya seperti ini:
Fase Definition
Saya mencoba mendefinisikan masalah-masalah yang telah diwawancara sebelumnya. Saya menggunakan metode How Might We (HMW) untuk menyelesaikan masalah seperti ini:
- Masalah 1 “Jika presensi masih manual dengan menulis di buku”. HMW “Bagaimana presensi secara digital menggunakan ponsel pintar /smartphone?”
- Masalah 2 “Jika sistem pendataan peminjaman buku masih manual”. HMW “Bagaimana sistem pendataan peminjaman buku secara digital dengan sistem pindai kode?”
- Masalah 3 “Jika menahan kartu perpustakaan”. HMW “Bagaimana kartu anggota perpustakaan diganti dengan akun pada aplikasi?”
Setelah itu semua solusi tadi dikelompokan ke HMW dan dipetakan di User Journey Map seperti dibawah ini.
Fase Ideation
Dalam melakukan brainstorming ide-ide untuk memecahkan masalah menggunakan Pirate Funnel yang berfokuskan pada Activation. Ada beberapa ide yang saya dapatkan sebagai berikut:
- Bila saya pertama kali mengunjungi perpustakaan saya harus mendaftar anggota bearti saya harus melakukan pendaftaran. Mengapa pengguna tidak Melakukan Sign Up dan Login di ponsel.
- Kebanyakan perpustakaan harus memliki kartu anggota, untuk mendaftar kartu itu dibutuhkan kartu identitas seperti KTP. Mengapa pengguna langsung Sign Up menggunakan no KTP di Aplikasi.
- Kenapa presensinya dengan cara memindai kode QR seperti saya membayar seperti G**ay, O**, D**a, dll?. Pengguna cukup pindai kode QR yang ada diperpustakaan untuk melakukan presensi.
- Setiap buku memiliki kode unik berupa kode batang yang berada di belakang buku, Pengguna cukup pindai kode batang pada buku.
- Setelah kode dipindai data-data buku tersebut terisi automatis,
- Kenapa kartu anggota perpustakaan cukup satu aja, Sehingga tidak perlu membawa setiap kartu anggota perpustakaan berbeda. Pengguna cukup menggunakan satu profil anggota peminjam untuk meminjam buku disemua perpustakaan.
Hasil ide-ide tadi saya petakan dalam kelompok Idea di Funnel Pirate yang hasilnya seperti ini:
Saya mencoba untuk menambah ide-ide baru lagi menggunakan cara Scenario Mapping, saya mengasumsikan beberapa skenario yang akan dihadapi oleh pengguna.
- Bagaimana jika perpustakaan tutup? Pengguna bisa melihat jadwal buka perpustakaan di aplikasi.
- Bagaimana jika pengguna lupa membawa KTP? Pengguna bisa mendaftar melalui email, tetapi jika ingin meminjam pengguna wajib mengisi no KTP.
- Bagaimana jika kode batang buku tidak terbaca? Pengguna bisa memasukan kode belakang secara manual.
- Bagaimana jika pengguna ragu untuk meminjam buku? Pengguna bisa melakukan konfirmasi sekali lagi agar terhindar keraguan.
Hasil skenario tadi dikelompokan ke Scenario dan solusi berupa ide baru untuk mengatasi Scenario dimasukan ke kelompok Idea dengan latar warna merah. Semua Scenario dan Idea baru tadi dipetakan lagi di Funnel Pirate.
Setelah itu dibuat Action baru yaitu sebuah step-by-step atau tahapan pengguna saat menggunakan aplikasi. Warna biru adalah Action lama dan warna kuning adalah Action baru. Semua Action dipetakan kembali di User Journey Map seperti ini.
Setelah mengetahui Action dari pengguna, saya akan fokus merancang aliran aplikasi lebih tepatnya Task Flow sederhana. Dari ide-ide yang telah dicetuskan saya membuat beberapa alur yang terdiri dari:
Sebelum melakukan sketsa wireframe harus tahu dulu apa saja yang ingin dibuat menggunakan Site Map yang hasilnya seperti ini.
Saatnya membuat sketsa, saya menggunakan kertas untuk mendapatkan gambaran kasar dari aplikasi yang akan saya buat dan hasilnya seperti ini.
Dari sketsa diatas didapatkan 8 gambaran kasar aplikasi yang mau di rancang, saya membuat desain wireframe di aplikasi Figma. Hasilnya ada 12 desain wireframe seperti dibawah ini.
Dalam saya membuat wireframe, ada beberapa hal yang saya harus perhatikan yaitu:
- Mayoritas pengguna smartphone menggunakan jempol mengoperasikan aplikasi, saya mencoba untuk memikirkan sebuah tombol penting atau Call To Action dekat dengan jempol.
- Memikirkan flow pengguna melihat aplikasi yang dibuat, saya mencoba menggunakan pola Z.
Dalam membuat wireflow, saya membuat 2 macam aliran yaitu Main Flow yang berwarna biru dan Alternative Flow yang berwarna merah. Main flow untuk mengarahkan pengguna menyelesaikan tugas utama yaitu dapat melakukan presensi dan meminjam buku. Alternative Flow untuk mengarahkan pengguna selain tugas utama seperti membuka profil atau daftar perpustakaan.
Fase Prototype
Dalam membuat prototype aplikasi ini saya:
- Menggunakan warna kombinasi complementary yaitu warna biru dan orange, dan merah untuk keluar.
- Font yang digunakan yaitu Roboto Bold dan Roboto Regular.
- Illustrasi yang digunakan saya dapatkan dari Freepik.
- Foto kode QR dan kode batang hanya contoh.
- Icon yang digunakan dari plugin Figma yaitu Feather Icon.
Attribut lengkapnya bisa dilihat pada dibawah ini.
Saatnya memberi hiasan pada desain aplikasi dengan atribut yang telah disebutkan diatas. Berikut semua hasil prototype yang telah saya buat.
Fase Testing
Dalam proses testing, terdapat dua tahap. Satu tahap pengguna diberi satu tugas buat menguji coba prototype dan kedua tahap wawancara yang akan menanyakan bagaimana kesan, kendala, saran untuk mendapatkan feedback. Adapun tugas yang saya berikan yaitu:
Kamu akan mengunjungi Perpustakaan Daerah Sumatera Selatan dan akan meminjam satu buku yang berjudul “Filosofi Teras” yang sebelumnya telah kamu cari
Saya meminta ke 4 orang sebelumnya saya wawancara pada fase Empathize untuk menguji prototype ini, tetapi yang bisa diajak ketemuan hanya 3. Dalam melakukan pengujian saya meminta izin untuk merekam saat mereka menggunakan prototype. Durasi menyelesaikan tugasnya beragam, lebih lengkapnya disini.
Setelah menguji prototype, saya mewawancarai mereka mendapatkan feedback sebagai berikut:
- Rianti: Bagian jadwal perpustakaan, jika hanya jadwal kurang efektif. Bingung pada ikon scan.
- Cindy: Perbaikan flow saat mendaftar yaitu orientasi -> daftar -> isi data -> popup berhasil mendaftar silakan login-> login -> halaman home. Bagian pindai kode QR bagian highlight kurang menonjol. Bagian formulir peminjaman buku lebih fokus pada form dibandingkan tombol pindai.
- Yandi: Highlight harus lebih kontras. Lebih terbiasa input manual daripada scan. Tidak ada peringatan maksimal buku dipinjam. Detail lebih dibawah seperti batas tanggal peminjaman dan jumlah buku yang dipinjam.
Iterasi Desain
Setelah itu saya melakukan iterasi desain sesuai feedback mereka kasih. Terdapat beberapa perubahan pada desain sebagai berikut:
- Pemberian gambar pada orientasi/onboarding. Ini bertujuan supaya user tahu aplikasi ini tentang perpustakaan.
- Perubahan bagian flow menjadi orientasi -> masuk -> daftar -> melengkapi data diri -> pemberitahuan berhasil -> masuk -> beranda/home. Supaya pengguna jelas alur pendaftaran anggota perpustakaan.
- Perubahan bagian pindai kode QR yaitu menghapus informasi perpustakaan, pemberian kontras bagian highlight, pemberitahuan sudah melakukan presensi.
- Perubahan bagian penambahan buku yaitu mengubah tombol pinjam buku menjadi tambah buku yang akan mengarahkan user penambahan buku dan pemberian informasi tentang jumlah buku dan batas peminjaman.
- Perubahan bagian pindai kode batang buku yaitu penambahan informasi tentang buku dipilih sebelum ditambah.
- Pada tombol diubah dari warna orange menjadi warna biru.
- Bagian header aplikasi diganti warna latar belakang menjadi warna putih.
Berikut perbandingan prototype versi 1(atas) dan versi 2 (bawah):
Sekian studi kasus yang saya buat, Saya membuat studi kasus ini melatih problem solving. Jika ingin memberi kritik atau saran atau pertanyaan dalam penulisan studi kasus atau cara saya melakukan problem solving. Bisa tulis dikomentar dibawah.
Terima kasih telah membaca!
