Pembuatan Design UI/UX dengan Metode Prototyping pada Aplikasi Layanan Pengadilan Negeri Bale Bandung Menggunakan Figma

Pembuatan Desain UI/UX dengan Metode Prototyping pada Aplikasi Layanan Pengadilan Negeri Bale Bandung menggunakan Figma

1.  Pendahuluan

Dalam era digital saat ini, kebutuhan akan sistem informasi yang efisien dan user-friendly semakin meningkat di berbagai sektor, termasuk dalam sistem peradilan. Pengadilan Negeri Bale Bandung, sebagai salah satu lembaga peradilan di Indonesia, memerlukan sebuah aplikasi layanan yang dapat memudahkan akses masyarakat terhadap informasi dan layanan pengadilan. Untuk mencapai tujuan tersebut, diperlukan pendekatan desain yang berfokus pada pengalaman pengguna (User Experience/UX) dan antarmuka pengguna (User Interface/UI) yang optimal.

Metode prototyping dipilih dalam pengembangan desain UI/UX aplikasi ini karena memungkinkan pengembang untuk secara cepat membuat model fungsional dari sistem yang diusulkan. Metode ini memfasilitasi umpan balik yang cepat dari pengguna dan stakeholder, memungkinkan penyempurnaan desain secara iteratif. Figma, sebagai alat desain berbasis web yang populer, dipilih karena kemampuannya dalam kolaborasi real-time dan fitur prototyping yang kuat.

2. Tujuan

Tujuan dari penelitian ini adalah:
1. Merancang dan mengembangkan desain UI/UX yang intuitif dan efisien untuk Aplikasi Layanan Pengadilan Negeri Bale Bandung.
2. Mengimplementasikan metode prototyping dalam proses desain untuk memastikan feedback pengguna dapat diintegrasikan secara efektif.
3. Memanfaatkan fitur-fitur Figma untuk menghasilkan prototipe interaktif yang dapat diuji oleh pengguna.
4. Meningkatkan aksesibilitas layanan pengadilan bagi masyarakat melalui desain yang user-centered.

3. Permasalahan

Beberapa permasalahan yang diidentifikasi dalam konteks ini meliputi:
1. Kurangnya aksesibilitas informasi dan layanan pengadilan bagi masyarakat umum.
2. Kompleksitas prosedur hukum yang perlu disederhanakan dalam bentuk antarmuka digital.
3. Kebutuhan akan sistem yang dapat mengakomodasi berbagai jenis pengguna dengan tingkat literasi digital yang beragam.
4. Pentingnya keamanan dan privasi data dalam konteks sistem peradilan.
5. Tantangan dalam merancang alur kerja yang efisien namun tetap mematuhi prosedur hukum yang berlaku.

3. Alat Bantu yang Digunakan

Dalam pengembangan desain UI/UX Aplikasi Layanan Pengadilan Negeri Bale Bandung, beberapa alat bantu digunakan untuk memvisualisasikan dan merencanakan sistem. Berikut adalah deskripsi dan contoh diagram yang digunakan:

1. Use Case Diagram

Use Case Diagram menggambarkan interaksi antara pengguna (aktor) dengan sistem. Diagram ini membantu dalam memahami fungsionalitas utama aplikasi dari perspektif pengguna.

Aktor:

• Pengguna
• Admin

Use Cases:

• Melihat Informasi Kasus
• Mengajukan Permohonan
• Melacak Status Kasus
• Mengunduh Dokumen
• Mengelola Pengguna (Admin)
• Memproses Permohonan (Admin)
• Memperbarui Status Kasus (Admin)

Hubungan:

• Pengguna dapat melakukan semua use case kecuali yang khusus untuk Admin
• Admin dapat melakukan semua use case

  2. Class Diagram

Class Diagram menunjukkan struktur statis sistem, menggambarkan kelas-kelas, atribut-atributnya, metode-metodenya, serta hubungan antar kelas.

Kelas:

1. User
   • Atribut: id, name, email, password
   • Metode: register(), login()
2. Case
   • Atribut: caseId, caseNumber, filingDate, status
   • Metode: submitCase(), updateStatus()
3. Document
   • Atribut: docId, title, uploadDate
   • Metode: upload(), download()
4. Admin
   • Atribut: adminId, username, password
   • Metode: manageUsers(), manageCases()

Hubungan:

• User "1" -- "*" Case (satu User dapat memiliki banyak Case)
• Case "1" -- "*" Document (satu Case dapat memiliki banyak Document)
• Admin "1" -- "*" Case (satu Admin dapat mengelola banyak Case)
• Admin "1" -- "*" User (satu Admin dapat mengelola banyak User)

  3. Activity Diagram

Activity Diagram menggambarkan alur kerja atau aktivitas dari sebuah sistem atau proses bisnis. Diagram ini sangat berguna untuk mengilustrasikan alur penggunaan aplikasi.

Langkah-langkah:

1. Mulai
2. Login
3. Jika autentikasi berhasil, lanjut ke langkah 4. Jika gagal, kembali ke langkah 2.
4. Isi Formulir Kasus
5. Unggah Dokumen
6. Kirim Permohonan
7. Admin Meninjau
8. Jika disetujui, lanjut ke langkah 9. Jika tidak, kembali ke langkah 4.
9. Kasus Terdaftar
10. Selesai

  4. Entity Relationship Diagram (ERD)

ERD menggambarkan struktur dan hubungan antar data dalam basis data yang akan digunakan oleh aplikasi.

Entitas:

1. USER
   • Atribut: id (PK), name, email, password
2. CASE
   • Atribut: caseId (PK), caseNumber, filingDate, status
   • Relasi: USER (FK)
3. DOCUMENT
   • Atribut: docId (PK), title, uploadDate
   • Relasi: CASE (FK)
4. ADMIN
   • Atribut: adminId (PK), username, password

Relasi:

• USER "1" -- "*" CASE (satu User dapat memiliki banyak Case)
• CASE "1" -- "*" DOCUMENT (satu Case dapat memiliki banyak Document)
• ADMIN "1" -- "*" CASE (satu Admin dapat mengelola banyak Case)

  5. Figma

Figma digunakan sebagai alat utama untuk membuat desain UI/UX dan prototipe interaktif. Beberapa fitur Figma yang dimanfaatkan meliputi:
- Design Tools: Untuk membuat wireframe dan mockup.
- Prototyping: Untuk membuat prototipe interaktif.
- Collaboration: Memungkinkan tim untuk bekerja sama secara real-time.
- Component Library: Untuk konsistensi desain.

4. Kesimpulan

Pengembangan desain UI/UX Aplikasi Layanan Pengadilan Negeri Bale Bandung menggunakan metode prototyping dan alat Figma telah berhasil menghasilkan sebuah prototipe interaktif yang user-friendly dan efisien. Beberapa kesimpulan yang dapat ditarik dari penelitian ini adalah:

1. Metode prototyping terbukti efektif dalam mengakomodasi feedback pengguna secara cepat, memungkinkan iterasi desain yang lebih responsif terhadap kebutuhan pengguna.

2. Penggunaan Figma sebagai alat desain utama memfasilitasi kolaborasi yang lebih baik antar anggota tim dan menghasilkan prototipe yang dapat diuji dengan mudah oleh pengguna.

3. Desain UI/UX yang dihasilkan berhasil menyederhanakan akses terhadap layanan pengadilan, meningkatkan aksesibilitas informasi bagi masyarakat umum.

4. Implementasi fitur-fitur keamanan dalam desain UI/UX membantu menjaga integritas dan privasi data pengguna, sesuai dengan standar keamanan sistem peradilan.

5. Proses desain yang berfokus pada pengguna (user-centered design) menghasilkan antarmuka yang intuitif dan dapat mengakomodasi pengguna dengan berbagai tingkat literasi digital.

Penelitian ini mendemonstrasikan bahwa pendekatan prototyping dalam desain UI/UX, dikombinasikan dengan penggunaan alat modern seperti Figma, dapat secara signifikan meningkatkan kualitas dan efektivitas aplikasi layanan publik, khususnya dalam konteks sistem peradilan.