UI/UX Case Study : Pengaduan Permasalahan Di Sekitar
Halo Semuanya,
Pada kesempatan kali ini, saya akan menunjukan hasil case study yang mengambil tema tentang Pengaduan Permasalahan di Sekitar.
Overview
Berbagai permasalahan terjadi di sekitar kita, salah satunya permasalahan yang berkaitan dengan pelayanan publik, permasalahan sosial contohnya seperti jalan rusak, angin yang merusakkan beberapa bangunan, jembatan rusak atau permasalahan yang membutuhkan waktu secepatnya untuk penanganannya.
Kita sebagai masyarakat tentunya sering berinisiatif melakukan pelaporan, namun kendalanya terdiri dari beberapa alasan, salah satunya yaitu tidak tahu alur yang tepat ketika kita ingin pengajuan pelaporan.
Design Process
Sedikit gambaran yang dijelaskan diatas, kemudian saya menggunakan proses desain untuk menemukan solusi dari permasalahan yang sudah sedikit dijelaskan diawal tadi. Berikut merupakan desain proses yang saya terapkan.
Emphatize (Empati)
Saat itu saya sedang mengobrol santai bersama tetangga rumah, Heri Sutriono atau biasa saya panggil mas Heri, seorang pekerja di perusahaan swasta yang setiap hari bekerja melewati jalan penghubung dari desa ke kotanya, tempat dia bekerja. Setiap hari dia melewati jalan tersebut, meskipun jalan tersebut rusak dan terdapat lumpur becek. Sebenernya dia merasakan tidak nyaman dengan kondisi jalannya, serta hal tersebut sering membuat motornya mengalami rusak. Sering juga terjadi kecelakaan di jalan yang dilewatinya.
Hal ini membuat orang-orang menjadi sangat resah karena permasalahan tersebut. Mas Heri ingin sekali membuat pengaduan/pelaporan keluhan agar permasalahan itu dapat dilihat serta segera dapat diatasi, oleh pemerintah setempat. Namun dia tidak tahu prosedur yang harus dilakukan ketika membuat pengaduan/pelaporan keluhan.
Define (Mendefinisi)
- Problem Statement
Mas Heri, seorang pekerja di perusahaan swasta berumur 25 tahun ingin sekali membuat pengaduan/pelaporan keluhan tentang permasalahan jalanan rusak yang terjadi di daerahnya ini. Namun dia tidak tahu prosedur yang harus dilakukan ketika membuat pengaduan keluhan. - Membuat Pertanyaan “How Might We”
Berdasarkan problem statement yang sudah dijelaskan diatas, berikut merupakan pertanyaan yang dapat diambil,
- Bagaimana caranya supaya mas Heri, atau masyarakat yang sama seperti mas Heri, dapat mengajukan pengaduan/pelaporan keluhan, dengan mudah, dan tanpa harus ribet, agar permasalahan jalan rusak dapat menemui kejelasan.
Ideate (Ideasi)
- Solusi 1 : Membuat pengaduan/pelaporan langsung ke pemerintah daerah.
Apakah bisa memenuhi kebutuhan pengguna : Bisa, namun yang jadi permasalahan adalah masih banyak warga yang belum tahu prosedur pembuatan pelaporannya, jika sudah tahu prosedurnya harus melakukan pengajuan dulu dari awal sampai ke tingkatan pemerintah daerah. - Solusi 2 : Membuat desain aplikasi pengaduan dengan fitur lokasi otomatis serta dapat menambahkan foto bukti langsung kejadian, serta ada fitur trending yang didapatkan ketika postingan keluhan ramai sekali tanggapan dari orang lain disekitar kita.
Apakah bisa memenuhi kebutuhan pengguna : Bisa, karena pelaporan menjadi mudah dan tanpa harus melewati prosedur yang rumit, serta dapat mendapati tanggapan dari orang orang yang disekitar kita.
Prototyping (Merancang Prototype)
Ada beberapa langkah dalam merancang sebuah prototype, yaitu :
- Membuat User Flow
- Desain Low Fidelity
- Desain High Fidelity
1. Membuat User Flow
User Flow adalah langkah-langkah dari pengguna dalam penggunaan suatu produk yang dibuat, yang nantinya akan menemukan tujuan dari permasalahan yang sudah dianalisa.
2. Membuat Low Fidelity
Setelah membuat user flow, selanjutnya saya membuat wireframe low fidelity. Dengan tujuan yaitu supaya kita mengetahui perkiraan saat membuat desain high fidelity nantinya.
Berikut merupakan wireframe low fidelity :
- Wireframe Splash Screen & Onboarding
- Wireframe Login & Register
- Wireframe Verify Code
- Wireframe Input NIK & Matching NIK Data
- Wireframe Insert Password
- Wireframe Select A Profile Photo
- Wireframe Allow Access Location & Access Denied
- Wireframe Home & Created Post (Insert Caption, Add Image, & Post Preview)
- Wireframe Notification & Comment
- Wireframe Inbox Message
3. Membuat High Fidelity
Setelah membuat wireframe low fidelity, selanjutnya kita membuat desain high fidelity. Pada tahapan ini kita memberi warna, gambar, serta komponen lainnya pada desain low fidelity tadi.
berikut adalah hasil dari tahapan ini :
- Splash Screen & Onboarding
Pada tampilan ini, pengguna disajikan tampilan awalan saat membuka aplikasi “SIAGA”, serta selanjutnya pengguna disajikan tampilan mengenai keunggulan jika pengguna menggunakan layanan “SIAGA”.
- Login & Register
Selanjutnya pengguna disajikan tampilan Login, dan Register. Untuk login pengguna memasukan nomor handphone serta kata sandi. Karena ini adalah pengguna baru maka pengguna diharuskan mendaftar dulu dengan memasukkan nomor handphone.
- Verify Code
Setelah memasukkan nomor handphone, maka pengguna akan mendapatkan kode verifikasi yang didapatkan dari sms, pengguna memasukkan kode verifikasi dan langsung ke langkah selanjutnya.
- Input NIK & Matching NIK Data
Setelah memasukkan kode verifikasi dan cocok, maka pengguna diharuskan mengisi NIK, karena agar terjamin keaslian pengguna, serta apabila pengguna membuat laporan yang dinilai palsu atau hoax, maka akan segera diatasi, dan pengguna mendapatkan detail data dari NIK yang ada.
- Insert Password
Setelah data sudah sesuai, maka pengguna mengisi kata sandi. Disini pengguna mengisi minimal 8 karakter serta kombinasi huruf dan angka, serta ada skala kekuatan password, dari lemah, sedang dan kuat yang dilambangkan dengan warna.
- Select A Profile Photo
Setelah itu pengguna memilih foto profil yang didapatkan dari galeri, hal ini diharapkan dapat menambah kevalidan pengguna.
- Allow Access Location & Access Denied
Kemudian pengguna harus mengizinkan akses lokasi agar lokasi yang diaktifkan dapat menambah kevalidan saat membuat pelaporan nantinya.
- Home & Created Post (Insert Caption, Add Image, & Post Preview)
Pengguna selanjutnya dapat melihat postingan pelaporan mengenai kejadian yang berdasarkan dari kecamatan yang didapatkan dari lokasi pengguna saat ini. Kemudian pengguna dapat membuat pelaporan dengan menuliskan pelaporan secara baik dan jelas, kemudian pengguna dapat menambah bukti pelaporan, baik dari foto maupun video yang diambil secara langsung, tujuannya agar bukti memang benar-benar langsung diambil pada saat itu / kejadian juga. Kemudian saat bukti sudah dipilih kemudian pengguna dapat melihat peninjauan dari pelaporan yang sudah dibuat, sebelum dipost.
- Notification & Comment
Selanjutnya pengguna juga bisa mendapatkan tanggapan seperti dukungan serta komentar dari pengguna lain, dan pengguna dapat juga memberi tanggapan balik dengan membalas komentar.
- Inbox Message
Kemudian pengguna dapat mendapatkan tanggapan dari pihak yang berwenang serta pengguna juga dapat membalas pesan yang didapatkan dari pihak yang berwenang.
Font & Warna
untuk mencoba prototypenya silahkan klik link dibawah ini :
Testing (Pengujian)
Saya menemui mas Heri dan ngobrol sambil mencoba mengetes secara langsung desain yang sudah dibuat, dan kesimpulan yang saya dapatkan dari obrolan saya dengan mas Heri adalah
Untuk prototype desainnya, dari warna tidak terlalu cerah, enak dilihat, untuk penggunaannya juga dapat dipahami dari alur sampe tujuan akhirnya.
Namun setelah itu saya mencoba membagikan kuesioner tanggapan mengenai desain prototype yang saya buat, dan hasilnya sebagai berikut :
Mungkin sekian untuk case study kali ini, tentunya masih banyak sekali kekurangan dalam proses penulisan, maupun dalam pembuatannya. Tentu saya senang jika diberi masukkan untuk perkembangan saya kedepannya. Terimakasih sudah membaca… 😃
