QueueHere Apps — UX Case Study

Rizal Azhare
7 min readOct 12, 2020

Tentang Studi Kasus

Studi kasus ini dilakukan saat mengikuti Bootcamp UIUX Design bersama Binar Academy. Studi kasus ini diajukan sebagai Tugas Akhir.
Di dalam kelas siswa dibagi menjadi beberapa kelompok, dan masing-masing kelompok mencari permasalahan yang ada di lingkungannya. Kemudian setiap orang mengembangkan topik yang telah dipilih menjadi produk digital.
Saya berkesempatan untuk menyelesaikan permasalahan yang ada di Bank yang sering menjadi keluhan dari masyarakat yaitu antrian.

Peran

UIUX Designer
Riset, Wireframing, Desain, Validasi ke User.

Media Yang Digunakan

Miro, Figma, MazeDesign

Durasi

4 Oktober — 12 Oktober 2020

Topik

Permasalahan Antrean di Bank

Problem Statement

Berita mengenai antrean panjang di bank dari beberapa sumber portal berita nasional

Melihat antrian panjang merupakan masalah serius bagi pegawai bank maupun masyarakat.
Orang membutuhkan lebih banyak waktu ketika harus berurusan dengan antrean panjang saat mengurus kebutuhannya di bank. Padahal, orang bisa memanfaatkan waktu yang terbuang itu dengan aktivitas lain jika masalahnya bisa diatasi.

User Research

Interview

Untuk memahami masalah ini, pertama saya melihat kebiasaan masyarakat saat mengantri di bank. dan masalah apa yang terjadi ketika masalah berada dalam antrian panjang. Penelitian ini terdiri dari kualitatif berupa wawancara langsung dengan orang-orang yang harus ke bank dan mengeluh ketika antrean panjang. Tujuan dari wawancara ini adalah untuk

  1. Mengetahui kebiasaan mereka selama di bank.
  2. Identifikasi keluhan dan kebutuhan mereka sambil menunggu.
  3. Mendefinisikan persona.
  4. Menentukan serangkaian solusi yang dapat ditindaklanjuti untuk meningkatkan pengalaman mereka.

Berdasarkan satu kelompok sampel yang terdiri dari 5 orang, saya rangkum gambaran umum di bawah ini

Proses menganalisa hasil riset dengan metode Affintiy Diagram untuk mengenali kebiasaan masyarakat di bank

“Ngantri di Bank bisa lama kan apalagi kalau penuh, harusnya bisa pesan antrean dari rumah terus ada estimasi waktu nya, jd bisa nyesuaikan kapan gue otw dari rumah.” Beti, 32 Tahun

Define

Langkah selanjutnya adalah membuat ringkasan riset pengguna untuk dijadikan dasar bagi langkah selanjutnya. Pada tahap ini, dengan mengacu pada hasil diagram afinitas . Pain Point telah ditentukan dan kebutuhan pengguna dapat diidentifikasi.

Pain Points

  1. Kebanyakan User selalu mengantri panjang saat masuk ke bank
  2. Antrian panjang memakan waktu lama.
  3. Terkadang mereka melewatkan nomor antrian karena menunggu di luar

Needs

  1. User membutuhkan cara agar bisa ambil antrian sebelum datang ke bank
  2. User perlu informasi estimasi waktu yang ditempuh menuju nomor gilirannya
  3. User ingin mengetahui live tracking antrian
  4. User bisa menemukan pelayanan bank di sekitar dalam sekali buka aplikasi

Design Brief

“Merancang sebuah produk digital untuk layanan antrean yang nyaman dan aman bagi nasabah bank”

Personas

Tenggelam lebih dalam lagi terhadap penelitian, tiga persona dikembangkan berdasarkan sampel dari 5 orang masyarakat yang memilki pengalaman mengantre panjang di bank. Setiap persona memiliki karakter, kebutuhan, dan keluhan yang berbeda. Persona ini akan berguna untuk meningkatkan pengalaman pengguna masing-masing.

User Persona dari Kasus Antrean Di Bank

Main Focus

Sebelum saya pergi ke tahap pengembangan ide, saya memutuskan untuk fokus pada tiga poin utama. Ini akan memastikan batasan dan kasus penggunaan untuk mencapai desain yang layak dan konsisten.

  1. Ambil Antrean dari berbagai pilihan
  2. Estimasi Waktu, Jarak dan kondisi saat mengantre
  3. Riwayat Antrean

Ideation

User Flow

Dari konsep dasar ide yang saya buat melalui story board saya mengembangkannya dengan membuat suatu konsep alur pengguna yang berdasarkan dari hasil riset-riset yang telah saya lakukan. Alur yang sederhana ini akan menjadi awal pengembangan produk digital ini yang biasa kita sebut Minimum Viable Product (MVP)

Architecture Information

Kebutuhan informasi apa saja yang akan ditampilkan dalam produk digital ini menjadi salah satu prioritas saya untuk melanjutkan ke tahap mendesain suatu tampilan. Tahap Informasi arsitektur ini bertujuan memastikan batasan dan kasus penggunaan untuk mencapai desain yang layak dan konsisten.

Design

WireFlow

Memulai Aplikasi dengan OnBoarding lalu Masuk menggunakan akun bagi pengguna yang sudah mendaftarkan dirinya di Aplikasi ini

Pengguna akan tiba di Halaman Utama setelah memasukan Akun Pribadinya. lalu kita Asumsikan bahwa pengguna ini adalah pengguna aktif. sehingga telah memiliki riwayat aktivitas di aplikasi ini. Di halaman utama pengguna akan ditawarkan dua pilihan aktifitas. yaitu memilih Tanggal dan waktu terlebih dahulu atau memilih layanan yang akan dibutuhkan pengguna di Bank nantinya.

Pada kasus ini, George. adalah Nasabah Salah satu bank. lalu dia akan pergi ke bank pada pagi hari dan memlihi layanan deposit/tabungan

Ada dua kemungkinan ketika pengguna menggunakan fitur ambil antrean di aplikasi ini. Gagal atau Berhasil.
Mengapa gagal? ada beberapa faktor yang membuat antrean pengguna menjadi gagal. Pengguna tidak datang tepat waktu saat staff beberapa kali memanggilnya dan Nomor antreanpun hanya memiliki masa berlaku 5 menit setelah dipanggil. Tentu saja jika gagal, sistem akan memberikan tawaran untuk mengantre ulang jika pengguna tidak berada di Bank yang dituju.

Adapun navigasi lainnya untuk mendukung proses antrean di aplikasi ini, seperti navigasi untuk melihat riwayat Antrean dan Bank yang telah pengguna Kunjungi. dan Profil Pengguna untuk kebutuhan data bagi sistem dan penggunanya itu sendiri.

Halaman Daftar Antrean dan Profil Pengguna

HighFidelity

Saat pengguna menggunakan aplikasi untuk pertama kalinya. Sistem akan menampilkan informasi memperkenalkan Aplikasi QueueHere merupakan solusi dari satu masalah.

On Boarding QueueHere Apps

Pengguna akan diminta untuk mendaftarkan akun untuk kepentingan data untuk aplikasi ini.

Halaman Masuk Akun
Navigasi Halaman Utama

Pada Halaman Utama ini pengguna akan diberikan beberapa informasi sebagai inti solusi untuk permasalahan Antrean di bank. Ditampilkan secara sederhana dengan Alur yang singkat.

Link Prototype: https://www.figma.com/proto/GiPisMa4kh5kw7GQNOgWnw/Queuebank?node-id=90%3A1116&scaling=scale-down

Validate

Usability Testing

Setelah membuat desain dan alurnya, saya melakukan pengujian kepada 40 orang yang pernah ke bank dan praktisi di dunia UIUX Design. Untuk melihat apakah desain yang saya buat cocok untuk digunakan.
Ada tiga tugas yang diberikan kepada User saat Usability Testing. Yaitu,
1. Memilih Waktu dan Layanan antrean
2. Memilih Bank terdekat dengan lokasinya saat itu
3. Mengambil Antrean melalui Aplikasi Ini

Link Usability Testing: https://t.maze.design/19456104

Report Usability Testing Task 1
Report Usability Testing Task 2
Report Usability Testing Task 3
Feedback dari user saat Usability Testing

Iterate

Melihat dari hasil Usability Testing, Pada Tugas Pertama saya bisa mengambil kesimpulan 50% dari user merasa kebingungan untuk melanjutkan ke tahap selanjutnya. Kombinasi warna yang serupa menjadi salah satu faktor menurut user. Maka dari itu saya mencoba untuk mengkombinasikan warna lain agar memberikan aksen tersediri pada proses User Flow berlangsung.

Iterasi design, Merubah Aksen warna agar perintah dari User Flow tersampaikan

Evaluasi

QueueHere merupakan produk digital yang memiliki misi memberikan solusi kepada Bank dan Nasabah saat proses antrean yang cukup menjadi keluhan. Melihat kembali keseluruhan proses, saya merasa sangat belajar banyak hal selama pengerjaan proyek ini berlangsung. Proyek ini memberikan saya satu pemahaman bahwa masalah sekecil apapun di lingkungan kita dapat dicarikan solusinya. Dan waktu sangat berharga jika ketika kita dapat mengaturnya.

Namun Solusi ini masih kurang dalam banyak hal. Perlunya riset yang lebih mendalam mengenai permasalahan antrean pada umumnya dan khususnya di bank. hal itu akan berguna untuk menyempurnakan dan memvalidasi solusi desain yang dibutuhkan oleh Pengguna.

Walaupun demikian, saya harus tetap menyempurnakan diri saya dalam mempelajari secara luas mengenai UIUX desain dari tahap penelitian awal hingga pengujian pengguna dan iterasi desain.

--

--

Rizal Azhare

I'm a product designer with a passion for creating user-centered experiences that solve real-world problems.