Optimasi Arsitektur UI & Alur Kerja Form Upload Logbook Pada Website KKN

“Ini kok ribet banget sih mau upload logbook sama lihat komentar validasi dari dosen”

Begitulah kalimat yang keluar dari mulut teman-teman saya saat kkn kemarin, banyak dari mereka yang mengalami kesulitan & frustasi saat mengupload maupun saat ingin melihat progress/update an dari logbook mereka.

Saat ingin mengupload logbook, mereka harus bolak balik dalam mengisi form inputannya, yang dimana form untuk upload bukti (pdf) terpisah dari form untuk input tanggal, uraian, dan CPMK (capaian mata kuliah).

Begitu juga saat mereka ingin mengecek progress validasi dari logbook mereka masing-masing. Oke, saat logbook divalidasi (Infonya muncul di tabel), tapi saat logbook itu tidak sesuai?, komentar dari dosen tidak tampil ditabelnya. Saya dan mereka (teman-teman saya) harus klik dulu untuk menuju ke komentar dosen, itupun kliknya di button dokumen.

Kasus diatas adalah salah dua dari banyaknya problem yang ada di website KKN yang dialami oleh saya dan teman-teman saya. Di tulisan ini nanti saya akan menjabarkan 1 per 1 masalah masalah yang ada dan bagaimana saya menyelesaikan masalah-masalah itu dengan memperbaiki User Experience & Interfacenya.

1. Labirin Form Upload

Form Upload Logbook (Sebelum Redesign)

Sebenarnya ada 4 Inputan yang harus diisi oleh mahasiswa jika ingin mengupload logbook kegiatan (program kerja KKN), yaitu

1. Tanggal Laporan (Tanggal Pelaksanaan Proker)
2. Bukti Kegiatan (PDF)
3. Uraian Kegiatan
4. CPMK (Capaian Mata Kuliah)

Loh, terus dimana letak inputan bukti kegiatan? kok ga ada di form logbook nya?

Gini gini, simpelnya gini gambaran untuk workflow upload logbook:

Ribet ya? Hehew

Dari yang harusnya bisa jadi 1, kenapa harus pisah?

Ya, benar sekali. Kenapa ga dijadikan 1 aja dalam satu form biar bisa mempercepat workflow mahasiswa untuk upload logbook?

Disini, saya menyatukan semua kepingan yang terpisah. Di desain baru ini, “Bukti Kegiatan (PDF)” bukan lagi langkah rahasia, melainkan bagian dari satu kesatuan proses.

Isi sekali, Simpan sekali. Selesai.

Begini hasil perubahannya:

Form Upload Logbook (Sesudah Redesign)

Apa benefit dari perubahan ini?

Benefitnya adalah dapat mengurangi beban kognitif user, karena mereka tidak perlu lagi mencari-cari tombol ‘Dokumen’ di tabel.

2. Sesuatu yang Tersembunyi

Berdasarkan apa yang saya dan teman-teman saya rasakan, sekarang kita tahu bahwa, di form inputan logbook kita bisa pilih lebih dari 1 CPMK (misal 1 proker dengan 2 CPMK). Tapi setelah kita tambahkan/simpan logbooknya, ditabel kita hanya dapat melihat 1 validasi.

Bayangkan kamu harus klik tombol ‘Dokumen’ lagi hanya untuk ngecek status matkul satunya lagi.

Tabel sebelum redesign

Belum lagi kolom CPMK nya hanya berisi teks panjang tanpa nama mata kuliah. Sebagai mahasiswa, kita jadi bingung: “Ini matkul mana yang udah divalidasi? Mana yang komentarnya harus saya perbaiki?”

maka munculah solusi ini:

Pemisahan Otomatis

Tentunya kita ingin melihat progress validasi logbook kita secara cepat dan mudah.

Saat mahasiswa menginput CPMK lebih dari satu dan menyimpan/menambahkan logbooknya, maka sistem akan memunculkan sebuah popup modal konfirmasi pemisahan logbook.

Dengan begitu, setiap mata kuliah punya jalurnya sendiri. Mahasiswa gak perlu lagi menebak-nebak nasib tugas mereka di balik tombol yang tersembunyi.

Popup Modal Konfirmasi

Sebagai pengguna aktif sosial media atau platform digital lainnya, kita tahu bahwa Informasi yang jelas dan navigasi yang pas dapat membantu kita.

selain memberikan solusi berupa memunculkan popup modal konfirmasi,

Saya juga merombak total susunan tabelnya. Sekarang, kolom CPMK mencantumkan nama Matkul + No. CPMK agar identitasnya jelas. Dokumen, status validasi, hingga komentar dosen saya bawa ke barisan depan.

Sebelum perubahan

Sesudah perubahan

Sekarang tidak ada lagi “petak umpet” dengan komentar dosen. Semua terpampang nyata, membuat proses revisi jadi jauh lebih cepat.

Logbook page

3. Micro Improvement

Kata-kata yang ada pada sebuah visual sangat berperan penting, sering dianggap remeh tapi perannya bisa menentukan apakah user bakal paham atau malah termenung sejenak sambil garuk kepala.

Saya melakukan perubahan kecil pada label form logbook dan menambahkan panduan agar setiap inputan terasa lebih “bercerita” dan minim drama.

Perubahan yang saya lakukan:

1. Tanggal Laporan → Tanggal Kegiatan Biar gak bingung lagi, ini tanggal kamu nulis laporannya atau tanggal pas kamu berjuang di lapangan?
2. Uraian Kegiatan → Deskripsi Singkat Kegiatan Tidak perlu instruksi panjang di dalam kurung yang bikin visual berisik. Cukup kasih contoh di placeholder, user langsung paham harus isi apa.
3. Pilih CPMK → Capaian Mata Kuliah (CPMK) Label yang lebih formal dengan tambahan helper text di bawahnya. Transparansi itu penting, biar user tahu kalau inputan mereka bakal diproses secara otomatis.

Perbandingan copywriting pada form upload logbook (sebelum vs sesudah redesign)

Namun, selain perubahan kecil pada copywriting diatas, saya juga melakukan sedikit improvement pada tabel logbooknya, tujuannya untuk mempermudah mahasiswa mencari logbook secara efisien.

Gak Perlu Scroll Sampai Bawah Cuma Buat Nyari Revisi.

Bayangkan saja sudah masuk minggu ke-8 KKN, logbook sudah ada puluhan baris. Mau nyari mana yang belum divalidasi atau mana yang dibilang ‘Tidak Sesuai’ sama dosen? Capek kalau harus scroll satu-satu.

Maka dari itu, saya menambahkan dua asisten kecil di atas tabel:

1. Filter Tanggal (Terawal & Terakhir) Fungsinya untuk mempermudah mahasiswa dalam mengurutkan logbook dari yang pertama kali di upload hingga yang paling baru.
2. Filter Status Validasi (Dropdown) Ini fitur favorit buat yang mau gercep. Langsung filter yang ‘Tidak Sesuai’ buat segera diperbaiki, atau cek mana yang masih ‘Belum Divalidasi’ buat diingetin ke dosennya.

4. Validasi Singkat ke Teman KKN

“Karena desain bukan hanya soal estetika, tapi juga empati.”

Berdasarkan validasi singkat yang saya lakukan kepada teman-teman sesama KKN saya,

Tanpa harus saya jelaskan, mereka semua langsung paham alurnya, tahu bagaimana maksud dari copywritingnya, dan sadar kalau proses upload mereka baru saja dipangkas jadi lebih singkat.”

5. UI Design

Mungkin hanya itu yang bisa saya bagikan pada tulisan kali ini,

dan saya sangat terbuka terhadap saran dan kritik teman-teman semua, terima kasih sudah membaca hingga selesai, sampai jumpa lagi di tulisan saya selanjutnya…

“Karena platform yang bagus, adalah platform yang peduli dengan usernya.”