Proyek Mini
UX Design
Saatnya menerapkan semua yang telah dipelajari. Selesaikan masalah nyata di sekolah dengan solusi desain yang baik.
Fokus Proyek: UX > UI
Dalam proyek ini, kita fokus pada solusi dan kemudahan, bukan sekadar tampilan cantik.
UX Design
-
Logis & Efisien User flow masuk akal, tidak berbelit.
-
Usability First Mudah digunakan tanpa manual.
-
Kejelasan Feedback sistem jelas (error/success).
UI Decoration
-
Warna-warni Fancy Gradasi, shadow berlebih tidak dinilai.
-
Animasi & Transisi Tidak perlu loading yang keren.
-
Ikon & Ilustrasi Estetik Cukup pakai kotak/placeholder.
Pilih 1 Topik Sistem Sekolah
Jadwal Sekolah
Siswa sering lupa jadwal, piket, atau ada perubahan mendadak.
- Jadwal Hari Ini
- Info Piket
- Notifikasi Update
Info & Pengumuman
Pengumuman penting sering tenggelam di chat grup WhatsApp.
- List Pengumuman
- Filter (Akademik/Ekskul)
- Search
Sistem Izin
Proses izin sakit/absen ribet, surat fisik sering hilang.
- Form Izin Online
- Upload Bukti
- Status Approval
Peminjaman Buku
Cek stok buku harus datang fisik, sering didenda karena lupa.
- Cari Buku
- Status Ketersediaan
- Reminder Balikin
6 Langkah Wajib (Workflow)
Ikuti proses ini step-by-step.
Langkah 1: Problem Statement
Tentukan masalah berdasarkan fakta/observasi, bukan asumsi.
Format Standar:
"[Pengguna] membutuhkan [kebutuhan] karena [masalah]."
Langkah 2: User Flow
Peta jalan pengguna dari start sampai goal tercapai.
- Mulai dari skenario utama (Happy Path).
- Pikirkan Error State (kalau salah input).
- Buat minimal 2 skenario flow.
Langkah 3: Wireframe Low-Fidelity
Sketsa kasar fokus layout. Hitam putih saja.
- Pakai kotak & garis simpel
- Label tombol jelas
- Lorem ipsum / teks placeholder
- Warna warni
- Foto/Gambar asli
- Bayangan/Shadow detail
Langkah 4: Prototyping
Hubungkan wireframe agar bisa diklik (Clickable).
Buat semua screen di Figma.
Masuk mode Prototype.
Tarik garis biru dari tombol ke halaman tujuan (Interaction: Navigate To).
Langkah 5 & 6: Testing & Revisi
Tes ke 3-5 teman. Cari di mana mereka bingung.
Jangan tanya "Bagus gak?". Tapi kasih tugas:
"Coba
kamu ajukan izin sakit pakai app ini". Lalu diam & amati.
Format Revisi:
BEFORE: Tombol kecil abu-abu.
AFTER: Tombol besar dengan icon + border putus-putus.
Contoh: Sistem Izin Siswa
Studi Kasus"Tombolnya mana? Nggak nemu upload."
"Nggak bisa edit kalau salah."
Tombol diperbesar & pakai icon.
Ditambah menu "Edit/Hapus".
Insight Penting: 4 dari 5 tester awalnya tidak melihat tombol upload. Revisi ini meningkatkan kecepatan tugas sebesar 48%.
Tugas & Pengumpulan
1. Dokumen PDF
- Problem Statement (Data wawancara)
- User Flow Diagram
- Screenshot Wireframe
- Laporan User Testing (3-5 orang)
- Dokumentasi Revisi (Before-After)
2. Link & Video
- Link Figma (Prototype bisa diklik)
- Video Demo Prototype (30-60 detik)
- Video User Testing (Min. 1 tester)
NamaAnda_KD2.8_Proyek_Judul.pdf
Timeline Rekomendasi (2 Minggu)
"Good design is obvious."
Jangan buat user berpikir keras. Selamat berkarya dan selesaikan masalah nyata!