Redesain UI/UX Aplikasi PeduliLindungi
Problem: Masyarakat Indonesia membutuhkan satu aplikasi all-in-one terkait pandemi COVID-19
Solution: Mengembangkan aplikasi PeduliLindungi menjadi lebih baik terutama dari segi UI & UX serta mengintegrasikannya dengan aplikasi terkait lainnya
My Role: research, user flow, wireframing, ui & ux design, prototyping, usability testing
Intro
Saat ini situasi pandemi di Indonesia masih belum terkendali. Dari hasil riset mini yang saya lakukan melalui interviu maupun mengamati cuitan di media sosial diperoleh insight bahwa masyarakat memerlukan aplikasi all-in-one terkait pandemi COVID-19 resmi dari pemerintah. Tak hanya untuk tracing, pendaftaran vaksinasi maupun sertifikat vaksinasi tetapi juga untuk situasi gawat darurat seperti kontak ambulans & info ketersediaan rumah sakit.
Mengapa harus aplikasi all-in-one? Agar pengguna tidak perlu menginstall aplikasi lain atau membuka website lain
Mengapa harus aplikasi resmi dari pemerintah? Agar infonya lebih akurat & juga beberapa info aksesnya hanya dimiliki oleh pemerintah, semisal: info ketersediaan tempat tidur rumah sakit & jadwal vaksinasi di Puskesmas/Rumah Sakit dll.
Dalam 1,5 tahun terakhir ada beberapa aplikasi terkait pandemi yang diluncurkan oleh pemerintah melalui berbagai instansi, antara lain:
- PeduliLindungi (Kominfo) → aplikasi untuk tracing, daftar vaksinasi, sertifikat vaksinasi, hasil tes COVID-19, rumah sakit, puskesmas, apotek, e-HAC, teledokter, statistik kasus dll)
- eHAC (Indonesia Health Alert Card) (Kemenkes) → aplikasi untuk syarat penerbangan domestik & international di Indonesia
- Siranap (Sistem Informasi Rawat Inap) (Kemenkes) → website/aplikasi untuk cek info ketersedian tempat tidur di rumah sakit
Dari ketiga aplikasi di atas yang paling populer digunakan adalah PeduliLindungi. Beberapa waktu yang lalu e-HAC sudah diintegrasikan ke PeduliLindungi, sedangkan Siranap belum.
Saat ini Aplikasi PeduliLindungi sudah memiliki banyak fitur jika dibandingkan dengan saat awal diluncurkan yang hanya digunakan untuk tracing. Walaupun begitu masih banyak ruang di aplikasi PeduliLindungi yang masih bisa diperbaiki khususnya dari segi UI/UX agar pengguna lebih nyaman & mudah memakainya.
Oleh karena itu fokus studi kasus ini adalah:
- Mengintregrasikan Siranap ke PeduliLindungi
- Meredesain UI/UX aplikasi PeduliLindungi
Information Architecture
Secara fitur aplikasi PeduliLindungi yang baru (versi redesain) sebagian besar fiturnya sama tapi ada sedikit penambahan fitur & perubahan peletakan fitur. Berikut arsitektur informasi aplikasi PeduliLindungi yang baru:
User Flow
Karena keterbatasan waktu (2 minggu) untuk mengerjakan studi kasus ini maka saya tidak membuat user flow semau fitur di PeduliLindungi. Yang dibuat hanya user flow fitur yang diredesain & fitur baru. Berikut user flow-nya:
Wire Frame & Wire Flow
Untuk tahap awal saya lebih suka mengeksplorasi wire frame dengan sketsa di kertas karena lebih cepat & efisien. Setelah mendapatkan sketsa wire frame yang sesuai selanjutnya dibuat wire frame versi digital yang lebih rapi.
Sama seperti user flow, wire frame yang dibuat hanya untuk fitur yang diredesain & fitur baru. Berikut wire frame sekaligus wire flow-nya:
UI Design
Saya melakukan perubahan yang cukup masif di sisi desain UI. Namun nuansa warna dominan biru & putih tetap dipertahankan agar tetap sejalan dengan branding PeduliLindungi.
Berikut preview beberapa halaman yang diredesain:
- “Beranda”/“Home”
Halaman yang cukup masif diredesain adalah halaman “Beranda”.
Redesain meliputi:
- “Peta” dihilangkan sebab fitur tersebut membuat loading halaman “Beranda” cukup berat baik secara penggunaan RAM maupun data internet. Padahal tidak semua pengguna membutuhkan peta tersebut setiap kali membuka aplikasi PeduliLindungi.
- “Nama Lokasi” & “Status Resiko Wilayah” pindahkan ke paling atas. Jika “Status Resiko Wilayah” di klik maka akan masuk ke halaman statistik kasus di wilayah tersebut.
- Tombol “Scan QR Code” diubah dari 2 buah (di atas & bawah halaman) menjadi 1 saja di bagian tab bar agar tidak redundant. Selain itu ukuran ikonnya dibuat paling besar dengan warna yang mencolok diantara menu tab bar lainnya agar lebih ditemukan & diakses pengguna. Sebab “Scan QR Code” merupakan fitur yang paling sering digunakan pengguna sehari-hari untuk check-in memasuki gedung, mall, kantor dll.
- Menu “Rumah Sakit & Puskesmas” dipindahkan ke atas digabungkan bersama fitur-fitur utama lainnya. Sebab di desain aplikasi PeduliLindungi yang lama jika dibuka di smartphone model ‘lama’ (rasio layar 9:16) menu “Rumah Sakit & Puskesmas” tidak tampak di halaman pertama (penggunna harus scroll ke bawah terlebih dahulu). Bahkan saya sempat tidak mengetahui adanya fitur tersebut jika tidak diberi tahu oleh teman saya. Mungkin pengguna-pengguna lain yang memakai smartphone dengan rasio 9:16 mengalami hal serupa. Untuk itu di eksplorasi desain ini saya sengaja menggunakan ukuran rasio 16:9 untuk mengakomodir aksesibilitas aplikasi PeduliLindungi di smartphone model ‘lama’.
- Menu e-HAC juga dipindahkan & digabungkan dengan deretan fitur utama lainnya agar semua fitur berada dalam satu tempat & lebih mudah dicari pengguna.
- Perubahan desain ikon fitur-fitur utama.
- Menghilangkan bagian “Pembicaraan COVID-19” (Instagram) & menggantinya fitur “Berita terkait COVID-19”.
- Memindahkan halaman “Tips” ke tab bar & mengganti namanya menjadi “Info”. Di aplikasi PeduliLindungi saat ini sebenarnya sudah terdapat halaman “‘Tips”/“Info’” namun diletakkan di halaman yang Akun. Menurut saya peletakan ini cukup aneh sebab bagian tersebut jarang diakses oleh pengguna. Padahal halaman “Info” tersebut dapat dimaksimalkan untuk edukasi kepada pengguna mengenai tips-tips kesehatan terkait pandemi COVID-19 dari topik pencegahan, isolasi mandiri, tindakan saat kondisi gawat darurat, penyembuhan hingga vaksinasi.
- Menu tab bar dipindahkan dari atas ke bawah agar lebih mudah diakses pengguna menggunakan satu tangan (dekat dengan jempol). Selain ada perubahan susunan menunya dari “Statistik”, “Home” & “Akun” menjadi “Beranda”, “Riwayat”, “Scan”, “Info” & “Akun”.
2. “Status Risiko Wilayah”
Halaman “Detail Status Risiko Wilayah” merupakan penganti halaman “Statistik”.
Untuk update kasus harian statistik ditampilkan dalam bentuk angka. Sedangkan untuk tren kasus dibuat dalam bentuk diagram batang untuk mempermudah pengguna membaca tren apakah kasus sedang naik atau sedang turun dalam jangka waktu tertentu (seminggu terakhir, mingguan & bulanan).
3. Rumah Sakit & Ambulans
Halaman ini merupakan integrasi aplikasi Siranap dengan PeduliLindungi. Isi halaman “Rumah Sakit & Ambulans” sama dengan aplikasi Siranap meliputi daftar:
- Nama Rumah Sakit
- Alamat Rumah Sakit
- No Telpon Rumah Sakit
- Jumlah ketersediaan tempat tidur pasien COVID-19 & Non COVID-19
- Jumlah antrian UGD
- Keterangan waktu data terakhir kali diperbarui
Selain itu di tambahkan Nomor Telpon Ambulans/Kontak Darurat masing-masing wilayah.
Untuk preview halaman lainnya bisa dilihat di gambar berikut:
Prototype
Prototype aplikasi PeduliLindungi dibuat di Figma. Karena keterbatasan waktu maka prototype-nya masih basic dan minim micro interaction/animation-nya.
Cek prototype di link berikut → Figma prototype
Usability Testing
Untuk usability testing-nya menggunakan dua mode yaitu moderated usability testing & unmoderated usability testing.
- Untuk moderated testing menggunakan aplikasi Maze & Zoom dengan total 2 tester.
- Sedangkan untuk unmoderated usability testing menggunakan Maze saja dengan totol 4 tester
Sebagai catatan, semua tester pernah menggunakan aplikasi PeduliLindungi sebelumnya.
Berikut daftar pertanyaan dan hasil usability testing:
Task 1: “Cek Detail Status Zona Wilayah Anda”
Task 2: “Ubah Lokasi yang Ingin Dicek Status Zonanya”
Task 3: “Scan QR Code”
Task 4: “Cek Riwayat Check-in”
Task 5: “Baca Info Terkait COVID-19”
Task 6: “Cari Daftar Laboratorium Jejaring NAR Kemenkes”
Task 7: “Cari Rumah Sakit & Ambulans”
Untuk full report bisa diakses di link berikut → Maze report
Learnings from User Feedback
- Di Task 1 “Cek Detail Status Risiko Wilayah”, 5 dari 6 tester gagal menyelesaikan task tersebut. Kemungkinan hal tersebut diakibatkan karean task tersebut diberikan diurutan pertama di mana tester masih di fase mempelajari UI aplikasi PeduliLindungi yang baru pertama kali mereka lihat. Selain itu desain UI-nya cukup berbeda jika dibandingkan desain aplikasi PeduliLindungi versi lama. Selain itu ketika pertama kali mengakses aplikasi bisa ditambahkan tooltips untuk mengenalkan fitur-fitur di aplikasi PeduliLindungi.
- Di Task 2 “Ganti Lokasi”, 2 dari 6 tester gagal menyelesaikan tasknya. Kemungkinan penyebabnya tester masih belum familiar dengan desain UI-nya atau mungkin tombol Lokasi perlu diperbesar lagi. Sama seperti Task 1, solusi lain untuk masalah di Task 2 adalah ditambahkan tooltips untuk mengenalkan fitur-fitur di aplikasi PeduliLindungi..
- Setelah Task 1 & 2 semua pengguna tidak mengalami kesulitan berarti mengerjakan task-task lain yang diberikan. Bahkan bisa dibilang sangat lancar.
- 5 tester lebih menyukai desain apliaksi PeduliLIndungi yang baru. Sedangkan 1 tester masih kebingungan memakai desain yang baru karena tampilan ikonnya berbeda dari desain yang lama.
- 2 tester memberikan nilai 9.0 untuk desain aplikasi PeduliLindungi yang baru dan 4 tester memberikan nilai 8.0. Jadi rata-rata tester memberi nilai 8.3.
- Secara umum tester menyukai desain aplikasi PeduliLindungi yang baru dibandingkan yang lama.
Key Learnings
Jika diteliti lebih lanjut hasil unmoderated usability testing nilainya tidak sebaik moderated usability testing. Salah satu penyebabnya ialah saya tidak memberikan prototype untuk dicoba tester terlebih dahulu sebelum melakukan usability testing. Sehingga di Task 1 tester memerlukan waktu yang cukup lama untuk mempelajari UI-nya terlebih dahulu baru kemudian menyelesaikan task yang diberikan.
Tapi di sisi lain ada hal positifnya yaitu jika hasil unmoderated usability testing bagus berarti desain UI/UX sudah memuaskan sebab pengguna bisa mempelajari aplikasinya dengan mudah tanpa bimbingan siapa pun.
Tools
- Whimsical: → information architecture chart, user flow, wire frame & wire flow
- Figma → UI design & prototyping
- Maze → moderated & unmoderated usability testing
- Zoom → moderated usability testing
Icons & Illustration
- Heroicons
- Iconscout
- Manypixels
- Custom icons (Zusuf)
Disclaimer
Studi kasus ini dibuat oleh Zusuf Subari untuk salah satu challenge Binar Academy — UI/UX Design Bootcamp.
Thanks ✌️
