01 / Intro
Pendahuluan
Latar Belakang
BPK PENABUR adalah yayasan pendidikan Kristen terbesar di Indonesia yang mengelola sekolah dari jenjang TK hingga SMA di berbagai kota besar. Website resminya di bpkpenabur.or.id menjadi pintu informasi utama bagi calon siswa, orang tua, guru, dan masyarakat umum yang ingin mengetahui program, sekolah, serta layanan yang tersedia.
Website ini memiliki banyak halaman dan struktur konten yang beragam. Berdasarkan hasil usability testing terhadap website aslinya, ditemukan bahwa beberapa menu sulit ditemukan oleh pengguna , terutama yang menggunakan nama singkatan atau istilah yang kurang familiar, serta menu yang penempatannya kurang strategis dalam navbar.
Proyek ini berfokus pada replikasi tampilan website BPK PENABUR semirip mungkin dengan aslinya, dengan perbaikan utama pada susunan dan penamaan navigasi berdasarkan temuan dari laporan usability testing yang sudah ada.
Objektif
- Mereplikasi tampilan visual website BPK PENABUR semirip mungkin dengan website aslinya menggunakan Figma.
- Menganalisis kemudahan pengguna dalam menemukan halaman-halaman tertentu melalui navigasi, berdasarkan data usability testing.
- Mengembangkan alternatif susunan dan penamaan navigasi yang lebih mudah dikenali dan ditemukan oleh pengguna.
- Mendokumentasikan proses desain secara terstruktur sebagai bagian dari portfolio UX.
Peran dalam Tim
Proyek ini dikerjakan secara mandiri (solo project). Seluruh tahapan , mulai dari analisis hasil usability testing, perumusan masalah, pengembangan solusi navigasi, pembuatan desain di Figma, penyusunan prototype interaktif, hingga dokumentasi ditangani sendiri.
Tools
Figma
Desain UI, mockup, dan prototype interaktif
Design Process
Metode Desain
Proyek ini menggunakan kerangka Design Thinking sebagai panduan proses, mulai dari memahami pengguna, merumuskan masalah, mengembangkan solusi, hingga membuat prototype. Tidak semua tahap dilakukan secara formal karena keterbatasan waktu dan sumber daya sebagai proyek solo.
1
Empathise
→
2
Define
→
3
Ideate
→
4
Prototype
→
5
Testing
02 / Design Process
Empathise
Tahap Empathise bertujuan memahami pengalaman dan kesulitan nyata pengguna. Pada proyek ini, data dikumpulkan melalui usability testing pada website referensi sebelum desain, lalu wawancara dan pengujian prototype setelah desain.
Usability Testing - Website Referensi
Pengujian dilakukan terhadap website bpkpenabur.or.id menggunakan metode Task Scenario dan skala penilaian Single Ease Question (SEQ). Pengujian ini dilakukan sebelum proses desain dimulai, dan hasilnya digunakan sebagai landasan perumusan masalah.
Bukti Usability Testing Pertama
Formulir, perhitungan, laporan, dan rekaman wawancara pertama tersedia melalui tautan berikut. Preview dokumen ditampilkan di atas setiap tombol.
Semua bukti dalam satu folder
Buka Folder Drive
Formulir, perhitungan, dan dokumen pendukung lainnya di Google Drive.
Hasil Usability Testing - Website Referensi (bpkpenabur.or.id)
Pengujian ini dilakukan terhadap website BPK PENABUR yang sudah ada, sebelum proses desain dimulai. Hasilnya digunakan sebagai dasar analisis masalah dan keputusan desain, bukan sebagai bukti efektivitas desain baru.
5
Responden
16
Task Case (TC-01 s.d. TC-16)
1–7
Skala SEQ
5,61 / 7
Rata-rata SEQ keseluruhan
≥5,5
Benchmark kelulusan
10 / 16
Task lolos benchmark
6 / 16
Task perlu perhatian
5,61
Rata-rata SEQ (benchmark: ≥5,5)
Skala SEQ menggunakan rentang 1 hingga 7, di mana 1 berarti sangat sulit dan 7 berarti sangat mudah. Benchmark kelulusan yang ditetapkan adalah rata-rata minimal 5,5. Rata-rata keseluruhan dari 16 task adalah 5,61
Kesimpulan dari Laporan:
- Secara keseluruhan website lolos benchmark dengan rata-rata SEQ 5,61 dari 7.
- Enam task mendapat skor di bawah 5,5 dan perlu diperhatikan dalam proses desain ulang.
- Masalah utama berpusat pada navigasi, khususnya penamaan menu, pengelompokan kategori, dan posisi menu tertentu.
- TC-10 (Komunitas Belajar Guru) mencatat skor terendah dengan rata-rata SEQ 4.
Data di atas bersumber dari Laporan Usability Testing (SEQ). Angka-angka ini merepresentasikan pengalaman pengguna pada website asli BPK PENABUR, bukan pada prototype hasil desain proyek ini.
Hasil per Task Case
| Task Case | Skenario Task | Rata-rata SEQ | Status |
|---|---|---|---|
| TC-01 | Mencari informasi kontak | 5 | Perlu Perhatian |
| TC-02 | Mencari halaman karya siswa | 5 | Perlu Perhatian |
| TC-03 | Mencari daftar sekolah berdasarkan kota | 6 | Lolos |
| TC-04 | Mencari halaman publikasi resmi | 6 | Lolos |
| TC-05 | Mencari informasi kegiatan sekolah | 7 | Lolos |
| TC-06 | Mencari informasi wisma / penginapan | 6 | Lolos |
| TC-07 | Mencari halaman prestasi siswa dan sekolah | 5 | Perlu Perhatian |
| TC-08 | Mencari informasi pendaftaran siswa baru | 6 | Lolos |
| TC-09 | Mencari galeri foto atau video | 6 | Lolos |
| TC-10 | Mencari halaman Komunitas Belajar Guru | 4 | Skor Terendah |
| TC-11 | Mencari halaman testimoni alumni | 6 | Lolos |
| TC-12 | Mencari berita terbaru | 6 | Lolos |
| TC-13 | Mencari informasi lowongan kerja | 5 | Perlu Perhatian |
| TC-14 | Mencari halaman Pembinaan Pendidikan Kristiani | 5 | Perlu Perhatian |
| TC-15 | Mencari halaman artikel | 6 | Lolos |
| TC-16 | Mencari profil yayasan | 6 | Lolos |
Data di atas bersumber dari Laporan Usability Testing (SEQ). Enam task dengan skor di bawah 5,5 , yaitu TC-01, TC-02, TC-07, TC-10, TC-13, dan TC-14, menjadi fokus analisis masalah pada tahap Define.
03 / Design Process
Define
Berdasarkan temuan dari usability testing, masalah dirumuskan secara spesifik untuk mengarahkan keputusan desain pada tahap berikutnya.
Inti Masalah
"Sebagian menu pada navigasi website BPK PENABUR sulit ditemukan oleh pengguna karena menggunakan nama singkatan atau istilah yang kurang familiar, pengelompokan kategori yang kurang jelas, dan posisi penempatan menu yang tidak strategis."
Temuan Spesifik dari Usability Testing
Berikut adalah temuan yang bersumber langsung dari laporan usability testing dan menjadi dasar fokus perbaikan desain:
TC-10 — Komunitas Belajar Guru (SEQ: 4)
Skor terendah dari seluruh task. Pengguna kesulitan menemukan halaman ini karena nama menu menggunakan singkatan atau istilah yang kurang familiar, dan belum dikategorikan dengan jelas di dalam navigasi.
TC-14 — Pembinaan Pendidikan Kristiani (SEQ: 5)
Halaman ini sulit ditemukan karena nama atau kategori menu kurang informatif bagi pengguna awam yang tidak familiar dengan istilah internal yayasan.
TC-01 — Informasi Kontak (SEQ: 5)
Menu kontak berada di posisi yang tidak langsung terlihat oleh pengguna yang baru pertama kali mengunjungi website, sehingga membutuhkan usaha lebih untuk ditemukan.
TC-02 & TC-07 — Karya Siswa & Prestasi (SEQ: 5)
Halaman-halaman ini belum memiliki posisi navigasi yang cukup menonjol, sehingga membutuhkan usaha lebih dari pengguna untuk menemukannya.
TC-13 — Lowongan Kerja (SEQ: 5)
Informasi lowongan kerja sulit ditemukan, kemungkinan karena tidak ditempatkan di lokasi yang biasanya diharapkan pengguna atau karena penamaan yang kurang eksplisit.
10 Task Lainnya — Lolos Benchmark
Sepuluh dari enam belas task memenuhi benchmark SEQ ≥5,5. Pola navigasi yang sudah berjalan baik dipertahankan dalam desain replikasi.
Fokus Perbaikan
Berdasarkan temuan di atas, enam task yang perlu diperhatikan sesuai kesimpulan laporan, dengan inti permasalahan pada tiga aspek:
| Aspek Masalah | Task yang Terdampak | Prioritas |
|---|---|---|
| Penamaan menu menggunakan singkatan / istilah tidak familiar | TC-10, TC-14 | Tinggi |
| Pengelompokan menu yang kurang jelas | TC-02, TC-07, TC-10 | Tinggi |
| Posisi menu yang kurang strategis | TC-01, TC-13 | Sedang |
Cakupan Desain (Scope)
Sebanyak 17 halaman masuk dalam cakupan desain proyek ini:
1 Beranda
2 Sekolah
3 SPMB
4 Renungan
5 Program
6 Fasilitas
7 Berita
8 Kegiatan
9 Artikel
10 Karya
11 Galeri
12 Prestasi
13 Testimoni
14 Publikasi
15 Karir
16 Tentang
17 Hubungi Kami
04 / Design Process
Ideate
Tahap Ideate berfokus pada pengembangan solusi berdasarkan masalah yang sudah dirumuskan. Karena perubahan utama ada pada navigasi, sebagian besar tampilan halaman direplikasi semirip mungkin dengan website aslinya, sementara fokus eksplorasi ada pada susunan dan penamaan menu.
Tidak ada sesi brainstorming atau workshop formal yang dilakukan. Keputusan desain dikembangkan secara iteratif langsung di Figma berdasarkan temuan usability testing.
Pertimbangan Desain Navigasi
Berikut adalah pertimbangan desain yang dikembangkan berdasarkan temuan usability testing. Implementasi spesifik masing-masing perubahan perlu diverifikasi langsung dari file Figma.
Penamaan Menu yang Lebih Jelas
Menu yang menggunakan singkatan atau istilah teknis internal dipertimbangkan untuk diganti dengan nama yang lebih mudah dikenali pengguna umum. Relevan dengan temuan TC-10 dan TC-14.
Pengelompokan Menu yang Lebih Logis
Halaman-halaman yang tematik sama dipertimbangkan untuk dikelompokkan ke dalam kategori navigasi yang lebih intuitif. Relevan dengan temuan TC-02, TC-07, dan TC-10.
Mempertahankan Pola yang Sudah Baik
Sepuluh task yang sudah lolos benchmark tidak dijadikan objek perubahan besar — pola navigasi yang sudah efektif dipertahankan dalam desain replikasi.
Hasil Pengelompokan Menu
Hasil card sorting menyusun navigasi ke dalam empat dropdown utama. Menu Beranda dan Hubungi Kami tetap berada langsung di navbar, di luar empat kategori tersebut.
- Profil: Sekolah, Tentang, Renungan, Program, Fasilitas
- Akademik: SPMB, Karir
- Media: Berita, Artikel, Publikasi
- Kegiatan: Kegiatan, Galeri, Karya, Prestasi, Testimoni
Pendekatan Replikasi
Alur kerja desain dalam proyek ini adalah sebagai berikut:
- Menganalisis struktur konten dan navigasi dari website BPK PENABUR asli.
- Mengidentifikasi halaman dan komponen yang perlu direplikasi berdasarkan 16 skenario task testing.
- Membuat desain seluruh 17 halaman di Figma, dengan tampilan semirip mungkin dengan website asli.
- Menerapkan alternatif susunan navigasi pada komponen header/navbar.
- Menghubungkan antar halaman untuk membentuk prototype interaktif.
05 / Design Process
Wireframe
Wireframe adalah kerangka kasar tampilan halaman yang berfungsi untuk merencanakan tata letak konten dan komponen sebelum masuk ke desain visual penuh.
06 / Design Process
User Flow
Bagian ini menampilkan dua bentuk alur: Task Flow untuk merangkum langkah dan tujuan pengguna, serta Wireflow yang menghubungkan sketsa halaman sesuai alur navigasinya.
Task Flow
Task flow merangkum pilihan tujuan pengunjung setelah membuka Beranda. Empat kategori navbar adalah Profil, Akademik, Media, dan Kegiatan; Beranda serta Hubungi Kami tetap menjadi menu langsung di luar kategori tersebut.
Wireflow
Wireflow menghubungkan sketsa halaman yang dirancang dengan panah navigasi. Diagram ini memperlihatkan perpindahan dari satu halaman ke halaman lain di dalam rancangan website.
07 / Design Process
Mockup UI
Mockup UI adalah tampilan visual penuh dari setiap halaman yang didesain di Figma. Mockup mereplikasi website BPK PENABUR dengan fokus perubahan pada komponen navigasi. Setiap halaman dibuat dengan konten dan tata letak yang semirip mungkin dengan website aslinya.
Berikut cuplikan dari 17 halaman yang dirancang. Buka file Figma untuk melihat detail desain pada ukuran penuh.
17 Halaman yang Didesain
1. Beranda
Halaman utama yang menjadi pintu masuk website, menampilkan hero section dan navigasi ke seluruh bagian website.
2. Sekolah
Daftar sekolah yang dinaungi BPK PENABUR di berbagai kota beserta informasi singkat masing-masing.
3. SPMB
Informasi Seleksi Penerimaan Murid Baru: jalur, prosedur, dan jadwal pendaftaran.
4. Renungan
Halaman renungan dan profil pembinaan pendidikan Kristiani BPK PENABUR.
5. Program
Katalog program pelatihan dan pengembangan di PENABUR Learning Center.
6. Fasilitas
Informasi gedung, ruang pelatihan, dan fasilitas PENABUR Learning Center.
7. Berita
Halaman daftar dan detail berita terbaru dari BPK PENABUR.
8. Kegiatan
Informasi dan dokumentasi kegiatan yang diselenggarakan oleh BPK PENABUR.
9. Artikel
Halaman kumpulan artikel informatif dan edukatif dari BPK PENABUR.
10. Karya
Galeri karya-karya siswa BPK PENABUR dari berbagai bidang.
11. Galeri
Dokumentasi foto dan galeri visual dari berbagai kegiatan BPK PENABUR.
12. Prestasi
Halaman yang menampilkan capaian dan penghargaan siswa maupun sekolah BPK PENABUR.
13. Testimoni
Halaman berisi testimoni dari siswa, alumni, dan orang tua tentang pengalaman di BPK PENABUR.
14. Publikasi
Halaman dokumen dan materi publikasi resmi BPK PENABUR.
15. Karir
Halaman informasi lowongan kerja dan karir di BPK PENABUR.
16. Tentang
Sejarah, visi, misi, dan profil yayasan BPK PENABUR.
17. Hubungi Kami
Halaman kontak dengan informasi alamat, telepon, email, dan formulir pesan. Halaman ini menjadi target TC-01 dalam usability testing dan merupakan salah satu fokus perbaikan posisi navigasi.
08 / Design Process
Prototype
Prototype interaktif dibuat di Figma dengan menghubungkan seluruh 17 halaman yang sudah didesain. Prototype ini memungkinkan simulasi navigasi antar halaman seperti pada website sesungguhnya, dan dapat digunakan sebagai media untuk usability testing prototype di tahap berikutnya.
09 / Design Process
Testing
Bagian ini menampilkan hasil usability testing terhadap prototype hasil desain.
Pengujian Prototype Hasil Desain
Setelah rancangan navigasi diterapkan pada prototype, pengujian kedua dilakukan untuk mengumpulkan penilaian SEQ dan tanggapan pengguna. Dokumentasi sesi ini mencakup formulir, rekap perhitungan, laporan hasil, dan rekaman wawancara.
Bukti Usability Testing ke-2 — Prototype
Semua bukti Testing ke-2
Buka Folder Drive
Formulir, perhitungan, laporan, dan video dalam satu folder.
Kesimpulan Hasil Usability Testing Prototype
Pengujian prototype melibatkan lima responden yang menyelesaikan 16 task case menggunakan skala SEQ 1–7. Rata-rata keseluruhan mencapai 6,78 dari 7, melampaui benchmark 5,5. Seluruh task memenuhi benchmark dan seluruh 80 penilaian berada pada rentang 6–7.
6,78 / 7
Rata-rata SEQ
5,5
Benchmark minimum
16 / 16
Task lolos benchmark
80 / 80
Penilaian bernilai 6 atau 7
Ringkasan Temuan:
- Seluruh 16 task memperoleh skor di atas benchmark 5,5; tidak ada task yang masuk kategori perlu perbaikan.
- TC-04 (Publikasi Resmi Yayasan) menjadi task dengan rata-rata terendah, yaitu 6,4, tetapi masih jauh di atas benchmark.
- Enam task memperoleh nilai sempurna 7,0, sementara rata-rata per responden konsisten pada rentang 6,7–6,9.
- Hasil ini menunjukkan bahwa rancangan prototype dapat digunakan responden untuk menemukan halaman-halaman yang diminta dengan mudah. Pola navigasi yang sudah berjalan baik sebaiknya dipertahankan.
10 / Outro
Penutup
Kesimpulan
Proyek ini menghasilkan 17 halaman desain dan satu prototype interaktif di Figma yang mereplikasi tampilan website BPK PENABUR semirip mungkin dengan aslinya, dengan fokus perbaikan pada susunan dan penamaan navigasi berdasarkan temuan usability testing terhadap website referensi.
Proses desain mengikuti kerangka Design Thinking secara terbatas. User flow, wireframe, mockup, prototype, dan dokumentasi wawancara serta pengujian prototype telah disertakan dalam studi kasus ini.
Hasil pengujian prototype kedua tersedia pada laporan dan rekap SEQ di bagian Empathise. Penilaian efektivitas perubahan navigasi perlu merujuk pada data hasil pengujian tersebut.
Pembelajaran Utama
- Data dari pengujian website referensi dan prototype membantu mengarahkan keputusan desain serta evaluasi navigasi.
- Fokus perbaikan pada navigasi lebih terukur dan terarah karena didasarkan pada task scenario yang spesifik.
- User flow dan wireframe membantu menjelaskan jalur tugas serta struktur desain sebelum pembuatan prototype.
- Pengujian prototype memberi kesempatan untuk mengevaluasi rancangan berdasarkan pengalaman pengguna.