[Case Study] Redesain iPusnas: Transformasi Pengalaman Literasi Digital dari Rating 1.9 ke Solusi Modern

👋Perkenalan

Halo! Saya Fawwaz Gibran, mahasiswa Teknik Informatika yang fokus pada bidang UI/UX Design. Tulisan ini mendokumentasikan proses saya meredesain iPusnas, aplikasi perpustakaan digital nasional, untuk menciptakan pengalaman yang lebih intuitif bagi pengguna baru.

• Role: UX Researcher, UI & UX Designer.
• Methodology: Design Thinking (Empathize, Define, Ideate, Prototype, Test).

1. Empathize: Mengapa Ratingnya 1.9/5? 🤔

iPusnas diharapkan menjadi pilar literasi digital Indonesia, namun aplikasi ini menerima banyak kritik terkait user experience yang tidak efisien. Faktanya, rating 1.9/5 di Google Play Store menjadi indikator kuat adanya masalah serius pada kenyamanan pengguna.

Tujuan Riset:

• Memahami perilaku dan motivasi pengguna.
• Mengidentifikasi hambatan (pain points) nyata saat mengakses buku digital.

Metode Pengumpulan Data: Saya melakukan In-depth Interview kepada 3 responden dengan kriteria pembaca aktif dan pengguna aplikasi serupa untuk menggali pengalaman mereka secara mendalam.

2. Define: Memetakan Friction & Pain Points 🧐

Pada fase ini saya menganalisis data yang telah kita dapatkan dari sesi wawancara untuk menentukan masalah pengguna mana yang paling penting untuk diselesaikan.

pertama kita buat user persona terlebih dahulu untuk memahami karakteristik, kebutuhan, dan permasalahan pengguna

Selanjutnya adalah user journey untuk menggambarkan bagaimana pengalaman pengguna saat akan menggunakan dan saat menggunakan aplikasi iPusnas

Berikut adalah data yang saya dapatkan terkait masalah-masalah yang dihadapi oleh pengguna:

Dari data yang masih berantakan seperti diatas, saya mulai mengelompokkan data-data yang memiliki kategori sama, dan seperti ini hasilnya:

Setelah menganalisis data wawancara melalui User Persona dan User Journey, saya menemukan 6 masalah utama yang dialami pengguna:

1. Search Friction: Kesulitan mencari buku karena minimnya fitur filter.
2. Irrelevant Recommendations: Rekomendasi buku tidak sesuai dengan selera pengguna.
3. Queue Uncertainty: Tombol [Antri] tidak memberikan umpan balik status, membuat pengguna bingung apakah aksi mereka berhasil.
4. Accessibility Issue: Tidak adanya kustomisasi ukuran teks pada saat membaca.
5. Icon Ambiguity: Penggunaan ikon yang tidak intuitif (seperti ikon jam dan kacamata).
6. Visual Engagement: Tampilan beranda terasa kaku dan kurang menarik bagi pengguna baru.

selanjutnya adalah tahap HMW (How might we), pada hmw ini kita membuat pertanyaan “Bagaimana”, sehingga kita dapat menjawab dan menentukan solusi dari permasalahan-permasalahan yang dialami pengguna.

berikut adalah HMW yang sudah saya buat:

Akhirnya fase Define selesai…

Mari kita lanjutkan ke tahap Ideate untuk menentukan jawaban atau solusi dari pertanyaan HMW diatas…

3. Ideate✨

setelah melakukan brainstorming, sekarang kita tentukan solusi-solusi potensial dan solusi terbaik untuk diterapkan.

berikut adalah solusi-solusi yang saya pilih untuk menjawab pertanyaan HMW pada fase Define tadi:

Berdasarkan pertanyaan How Might We (HMW), saya merancang solusi fungsional untuk meningkatkan efisiensi penggunaan aplikasi.

Solusi Utama yang Diusulkan:

• Search Suggestion: Memberikan sugesti otomatis saat pengguna mengetik untuk mempercepat penemuan buku.
• System Feedback: Memberikan status jelas (seperti popup nomor antrean) setelah menekan tombol antri.
• Personalized Onboarding: Survei preferensi genre di awal untuk kurasi konten beranda yang lebih personal.
• Inclusive Design: Fitur pengaturan ukuran font dan mode baca untuk kenyamanan penglihatan yang beragam.

Arsitektur Informasi

tujuan dibuatnya arsitektur informasi ini adalah untuk mengorganisir atau mengelompokkan informasi pada sistem digital agar pengguna mudah menemukan dan memahami struktur informasi pada aplikasi.

berikut adalah Arsitektur Informasi yang saya buat:

User Flow

Wireframe

untuk memberi gambaran terkait visualisasi ide ide yang telah didapat, maka kita buatkan wireframe untuk selanjutnya kita tambahkan konten visual, seperti warna dan lain lain.

4. Prototype: Membangun Solusi Visual 📲

Tujuan fase prototype adalah untuk menghasilkan model awal aplikasi yang dapat menunjukkan fungsionalitasnya yang hasilnya nanti digunakan untuk tahap pengujian.

Berikut adalah Style Guide yang saya gunakan:

Kalian dapat melihatnya di sini: https://www.figma.com/design/5c3ulyBaKdVNS14x5u6ZQf/Redesain---iPusnas?node-id=148-13746

High Fidelity (Mokcup)

Berikut adalah lebih detailnya:

Onboarding

gambar diatas merupakan halaman onboarding bagi pengguna baru sebelum mendaftar akun, tujuannya adalah untuk memberikan informasi awal terkait apa saja yang ada di aplikasi iPusnas.

Masuk & Daftar Akun

Tahapan setelah onboarding adalah masuk dan daftar akun, disini pengguna baru memilih daftar akun dan mengisi form pendaftaran secara manual maupun dapat menggunakan akun Googlenya.

Personalisasi Onboarding

Tujuannya adalah untuk membantu sistem mengenali apa preferensi pengguna sejak awal, ini berguna untuk menentukan konten atau rekomendasi buku yang akan ditampilkan pada halaman beranda nanti.

Beranda

Pada menu beranda saya melakukan perbaikan pada seluruh elemen visual agar menjadi lebih fresh, modern, dan terlihat menyenangkan serta nyaman untuk dilihat. Sehingga pengguna bisa betah untuk menggunakan aplikasi.

terdapat sebuah ungkapan “Desain yang menarik bisa membuat pengalaman terasa lebih baik, bahkan ketika UX-nya kurang sempurna”. Tapi ingat, estetika bukan segalanya karena pengalaman pengguna tetap yang utama.

Fitur Pencarian

pada fitur pencarian, terdapat informasi apa saja pencarian & genre yang sedang populer. Fitur ini membantu pengguna mengetahui tren pencarian dan genre yang sedang populer, sehingga mereka dapat menemukan buku yang paling banyak diminati oleh pengguna lain.

Selain itu, terdapat search suggestion yang bisa membantu pengguna ketika lupa judul buku secara lengkap.

Pinjam & Antrian Buku

Pada halaman Pinjam Buku, jika buku sedang dalam antrian, maka tombol yang tersedia adalah [Gabung Antrian]. Setelah pengguna bergabung dalam antrian peminjaman, akan muncul popup yang menginformasikan nomor antrian yang didapatkan. Selanjutnya, ketika buku sudah tersedia, pengguna akan mendapatkan pemberitahuan melalui notifikasi.

Fitur ini bertujuan untuk mempermudah pengguna dalam mengakses buku yang mereka inginkan tanpa harus terus memeriksa ketersediaan secara manual. Dengan adanya pemberitahuan nomor antrian dan notifikasi, pengguna dapat tetap fokus pada aktivitas lain sambil menunggu giliran peminjaman, sehingga pengalaman membaca menjadi lebih efisien dan nyaman.

Notifikasi Buku Tersedia

Dengan adanya notifikasi, pengguna dapat mengetahui bahwa buku yang dipinjam sudah tersedia dan siap untuk dibaca. Hal ini bertujuan untuk membuat pengguna tidak perlu terus-menerus mengecek ketersediaan buku secara manual, karena sistem secara proaktif memberi tahu mereka. selain itu pengguna juga akan merasa lebih terinformasi dan memiliki kendali atas pengalaman mereka dalam menggunakan aplikasi.

Rak Buku

Sebelumnya rak buku berada di menu profil, namun setelah redesain saya jadikan menu tersendiri untuk memudahkan pengguna mencarinya, serta agar informasi tersusun secara terstruktur.

Highlight & Kustomisasi bacaan

Alasan diberikannya fitur pengaturan ukuran teks dan mode baca adalah karena setiap manusia memiliki kemampuan penglihatan yang berbeda-beda. Dengan adanya fitur ini, pengguna dapat menyesuaikan tampilan sesuai dengan kebutuhan mereka, sehingga membaca menjadi lebih nyaman, mengurangi kelelahan mata, serta meningkatkan aksesibilitas bagi semua orang, termasuk mereka dengan gangguan penglihatan.

Komunitas dan Profil

Desain pada menu komunitas dan profil dan tentunya keseluruhan aplikasi dibuat menjadi lebih clean dan modern agar pengguna merasa nyaman dalam menggunakan aplikasi iPusnas.

Berikut adalah Prototype yang telah kami rancang berdasarkan solusi solusi yang kami peroleh:

[embed]

atau coba pada link berikut:

https://www.figma.com/proto/5c3ulyBaKdVNS14x5u6ZQf/Redesain---iPusnas?page-id=0%3A1&node-id=63-3500&viewport=-591%2C175%2C0.09&t=FaDbzpU4D6A7b8zU-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=63%3A3497&show-proto-sidebar=1

5. Test & Iteration: Validasi Berbasis Data 🧪

Setelah melewati 4 fase diatas. Fase selanjutnya adalah pengujian, pengujian sangat penting untuk mengembangkan solusi yang tepat untuk mengatasi masalah pengguna.

Pada fase ini, saya melakukan pengujian prototype dengn metode usability testing kepada pengguna dengan kriteria yang sesuai dengan target pengguna.

Sekenario Tasknya adalah:

Kamu mendenger temanmu berbicara mengenai aplikasi Perpustakaan digital bernama iPusnas, dan kamu tertarik untuk mencoba untuk membaca buku digital melalui aplikasi iPusnas. kamu ingin menemukan buku yang menarik, membukanya, dan membacanya dengan nyaman.

Temuan & Iterasi: Dalam pengujian, pengguna merasa elemen Notifikasi memiliki warna yang menyatu dengan background. Berdasarkan masukan tersebut, saya melakukan iterasi dengan menyesuaikan kontras warna agar informasi penting lebih terbaca dan menonjol.

Setelah mendengar informasi tersebut, saya melakukan validasi serta iterasi untuk perbaikan.

berikut adalah hasil perbaikannya:

Pelajaran yang Saya Ambil 💡

Melalui proyek ini, saya menyadari bahwa:

1. Usability Testing sangat krusial untuk menemukan masalah yang tidak terduga oleh desainer.
2. Iterasi adalah kunci menciptakan pengalaman yang benar-benar solutif.
3. Empati terhadap kebutuhan pengguna (seperti aksesibilitas teks) adalah inti dari sebuah UX yang baik.

Saya akan terus belajar dan mengeksplorasi kemampuan saya untuk menciptakan solusi digital yang berdampak nyata.

Terima Kasih! ☺️