Studi Kasus UI Design: Aplikasi Pengingat Bencana
Halo semua! Saya Syarifah Aliyah. Pada 28 November — 14 Desember 2022, saya mengikuti bootcamp UI/UX design yang diadakan oleh Markoding x Shiseido. Dari bootcamp tersebut, saya menerima challenge untuk membuat solusi dari masalah yang ada disekitar kita lalu, dari masalah itu kita membuat solusi dalam bentuk digital. Dengan harapan, jika solusi itu dieksekusi akan menyelesaikan permasalahan yang sedang terjadi di sekitar kita. Maka dari itu lah saya berpikir untuk menciptakan aplikasi Gawat Bencana.
Apa itu aplikasi Gawat Bencana?
Aplikasi Gawat Bencana adalah aplikasi yang bisa mendeteksi bencana apabila ada sebuah bencana terjadi di sekitar kamu. Di bootcamp itu ada beberapa topik yang bisa dipilih peserta, yaitu:
- Kesehatan
- Lingkungan
- Pendidikan
- Kesetaraan Gender
Berdasarkan challenge pilihan challenge di atas, saya memilih topik lingkungan. Awalnya saya berniat untuk membuat aplikasi yang dapat menjual sampah. Pada akhirnya saya membuat aplikasi ini, mengingat Indonesia merupakan negara yang dilewati oleh 3 lempeng tektonik besar, menyebabkan sering terjadinya bencana alam di negeri kita tercinta ini.
Referensi saya untuk membuat aplikasi ini karena melihat negara-negara yang sering terjadi bencana, seperti Jepang dan Korea Selatan. Mereka memiliki aplikasi yang wajib diinstall dismartphone mereka dan akan memberikan notifikasi ketika terjadi bencana di sekitar mereka. Selain itu ada fungsi lain dari aplikasi ini yang harus diketahui dan dilaksanakan oleh masyarakat yaitu, bagaimana cara mereka bertindak jika terjadi sebuah bencana di daerah sekitar mereka juga mencari tempat pengungsian terdekat.
Aplikasi ini menyediakan pelajaran tentang bagaimana cara mengevakuasi diri yang sesuai jika terjadi bencana, hingga menunjukan jalan menuju tempat pengungsian terdekat. Sehingga besar harapannya jika bencana terjadi, masyarakat tahu apa yang harus mereka lakukan dan dapat mengurangi korban jiwa, kerugian, dan juga dapat mengedukasi masyarakat secara menyeluruh dan mudah.
Design proses
Design thinking adalah pendekatan kreatif dan pemecahan masalah yang digunakan dalam bootcamp ini untuk inovasi dan pengembangan pengalaman pengguna. Di bootcamp ini, kami menggunakan metode design thinking yang akan saya jelaskan langkah-langkahnya dibawah ini:
- Empati
Langkah pertama adalah memahami kebutuhan dan sifat dari pengguna. Menggali sebanyak-banyaknya informasi hingga memposisikan diri menjadi pengguna yang ditempatkan di tengah permasalahan yang sedang terjadi. Di langkah ini, saya membagi menjadi beberapa langkah, seperti yang akan dijelaskan di bawah ini:
i. Ketahui siapa penggunanya
Mengenali siapa saja yang akan menggunakan aplikasi ini, apa permasalahan yang mereka hadapi, dan kebiasaan mereka adalah fokus utama. Dikarenakan waktu yang diberikan tidak banyak untuk research. Pada kesempatan kali ini saya lebih memilih untuk mencari data berdasarkan berita online dan televisi, juga melihat kebiasaan orang-orang awam yang tidak terbiasa dengan teknologi di lingkup terdekat saya.
Selama pembuatan aplikasi ini, saya juga memposisikan diri menjadi pengguna. Sepanjang proses ini, ada satu pertanyaan yang terus berputar di pikiran saya, yaitu:
“Apa yang akan terjadi ketika bencana alam terjadi di sekitar saya?”
Dari pertanyaan itu, saya mendapat beberapa jawaban yang menjadi rancangan awal aplikasi Gawat Bencana.
ii. Mengamati aplikasi kompetitor
Dalam pengerjaannya saya mencari contoh referensi dari aplikasi serupa yang tersedia di play store. Dari pencarian tersebut, saya menemukan 2 aplikasi yang dapat dijadikan contoh, yaitu:
- Info BMKG
- inaRISK Personal
Pada saat itu, saya menemukan banyak kelebihan dan kekurangan.
2. Define
i. User persona
ii. Bagaimana mungkin kita (how might we)
How might we sangat membantu saya dalam menemukan solusi dari masalah yang timbul selama tahap empathize. Adapun pertanyaan-pertanyaan yang dapat menghasilkan solusi untuk permasalahan tersebut adalah:
- Bagaimana mungkin kita: membuat masyarakat tahu jika akan terjadi bencana alam.
- Bagaimana mungkin kita: membuat masyarakat dapat mempelajari hal-hal yang harus dilakukan saat bencana alam.
- Bagaimana mungkin kita: membuat masyarakat dapat tau arah menuju pengungsian terdekat.
- Bagaimana mungkin kita: membuat masyarakat dapat mengumpulkan bantuan di tempat yang legal dan terjamin aman.
- Bagaimana mungkin kita: membuat masyarakat mendapatkan bantuan dengan cara yang mudah.
3. Ide
Kali ini saya mulai merancang solusi sampai kepada tampilan kasar dari aplikasi Gawat Bencana. Mulai dari membuat solution idea, menentukan hal-hal yang harus diprioritaskan, membuat information architecture, user flow, sampai menggambar wireframe.
i. Solution Idea
Sebuah solusi memerlukan pemahaman dari sisi sudut pengguna yang digabungkan dengan tujuan dari aplikasi ini, karena bagaimanapun juga solusi ini berasal dari keresahan pengguna. Berikut ini ada solusi yang saya buat untuk pengguna.
ii. Ide prioritas
Pada langkah kali ini, saya membagi solusi-solusi berdasarkan pengaruh dan kemudahan dalam mewujudkan solusi. Tujuan langkah kali ini untuk membantu pembuatan tampilan supaya mudah digunakan, intuitif, dan efektif.
iii. Informasi asitektur (IA)
IA diperlukan untuk mengelompokkan konten sesuai urutan, mendefinisikan kategori, merancang sistem, dan sebagainya.Tujuannya adalah agar pengguna dapat dengan mudah menemukan informasi yang diperlukan saat menggunakan aplikasi.
iv. Alur pengguna (user flow)
Tujuan penggunaan user flow adalah untuk memberikan gambaran lengkap tentang bagaimana pengguna berinteraksi dengan produk atau layanan. Penggunaan user flow, dapat memahami pengalaman pengguna secara menyeluruh, mengidentifikasi masalah, dan meningkatkan pengalaman pengguna.
User flow yang saya buat dari awal penggunaan aplikasi sampai jika terjadi bencana di sekitar pengguna. Pada proyek kali ini saya memubuat user flow bersamaan dengan infomasi arsitektur.
v. UI kit
Agar style design konsisten dari awal sampai akhir, UI Kit sangat dibutuhkan sebagai standar desain. Penggunaan warna, ukuran dan jenis tulisan, tombol, hingga icon dari awal sampai akhir penggunaan harus sama dan selaras sesuai penggunaan.
Penggunaan warna cerah dan menyenangkan saya gunakan untuk aplikasi ini. Tujuannya untuk mengurangi rasa panik dan menimbulkan sedikit rasa menyenangkan pada pengguna mengakses aplikasi di saat-saat genting. Penggunaan warna utama hijau & merah biasa untuk mengidentifikasi rasa aman dan waspada.
vi. Mid-fidelity wireframe
Wireframe merupakan kerangka yang menjadi susunan awal tampilan sebuah website atau aplikasi. Biasanya saya menggambar low-fidelity lewat crazy-8 terlebih dahulu, tapi untuk menyingkat waktu kali ini saya langsung membuat wireframe.
vii. high-fidelity wireframe
High fidelity design adalah tahap perancangan yang menghasilkan tampilan produk yang sangat mirip dengan versi akhirnya. Desain ini memperhatikan detail-detail seperti warna, tipografi, ikon, dan animasi. Tujuannya adalah memberikan gambaran yang jelas kepada pengguna atau tim pengembangan tentang tampilan dan cara pengguna berinteraksi dengan produk. Desain ini juga membantu dalam pengujian dan pengambilan keputusan sebelum produk benar-benar dibuat.
Saya memilih banyak penggunaan ilustrasi untuk menjelaskan tahap-tahap yang akan dilalui oleh pengguna. Saya sadar bahwa aplikasi ini cenderung akan digunakan pada saat-saat genting dan keadaan pengguna sedang panik. Pada keadaan itu, pengguna cenderung tidak akan membaca dengan seksama.
4. Prototype
Prototype adalah model awal antarmuka pengguna yang digunakan untuk menguji fitur dan interaksi sebelum pengembangan selanjutnya. Prototype memberikan representasi visual produk yang mirip dengan versi akhir, memungkinkan pengguna atau tim pengembangan melihat dan memahami tampilan serta perilaku produk.
5. Testing
Tahap terakhir merupakan testing. Sebelum mengirim hasil akhir dari challenge kali ini, saya memeriksa proyek ini secara menyeluruh untuk meminimalisir terjadinya kesalahan.
6. Tanggapan juri
Setelah menyerahkan hasil akhir proyek, saya menunggu penilaian dari mentor. Dan pada akhirnya, design saya terpilih menjadi top-5 design dan berkesempatan mempresentasikan proyek saya dihadapan panitia, petinggi perusahaan, dan para peserta secara langsung lewat aplikasi zoom dan youtube live. Pada saat itu saya mendapat banyak masukan dan pujian. Saya senang bisa menyelesaikan bootcamp ini dengan baik dan dapat memberi tahu banyak orang tentang ide solusi ini.
7. What’s next?
Meskipun saya merasa dapat menyelesaikan challenge kali ini dengan baik, tetap saja ada beberapa hal yang ingin saya perbaiki dan tambahkan kedepannya.
Hal yang paling menarik perhatian saya untuk diperbaiki adalah warna utamanya. Saya memperbaiki warna utamanya agar pengguna dapat menggunakan aplikasi ini tanpa merasa terganggu dengan warnanya. Warna yang saya gunakan memang memberikan kesan yang ceria dan menyenangkan namun, jika aplikasi ini digunakan dalam waktu yang panjang akan menimbulkan kesan yang terlalu kekanakan.
Pada saat ini, aplikasi Gawat Bencana baru berfokus pada bencana gempa bumi saja. Untuk kedepannya, saya juga berencana untuk menambah fitur-fitur yang sudah saya pikirkan yaitu:
- Volkano: untuk bencana gunung berapi
- Banjir: untuk bencana banjir
- Tsunami: untuk bencana tsunami
- Dan sebagainya
Terima kasih semua, sudah membaca study case pertama saya! Saya sangat terbuka untuk pesan dan masukan dari study case dan proyek kali ini!
