SISTEM INFORMASI PENGADUAN PELANGGAN

PADA PT. PLN ULP KUDUS KOTA BERBASIS

WEBSITE DAN MOBILE
4.1.8 Desain I/O Aplikasi
A. Desain Input Mobile

Gambar 4.26 Login Pelanggan Mobile

Gambar diatas merupakan tampilan dari halaman login pelanggan.

Pada halaman tersebut berfungsi untuk agar pelanggan melakukan
login terlebih dahulu sebelum melakukan pengaduan.

23
 Gambar 4.27 Pendaftaran Akun Mobile

Gambar diatas merupakan tampilan dari halaman pendaftaran

pelanggan. Pada halaman tersebut berfungsi untuk membuat akun
baru bagi pelanggan nantinya ingin melakukan pengaduan.

Gambar 4.28 Lupa Password Pelanggan Mobile

Gambar diatas merupakan tampilan dari halaman Menu Lupa

Password Pelanggan. Pada halaman tersebut merupakan halaman
ketika pelanggan lupa kata sandi dari akun yang sudah dimiliki.

24
 Gambar 4.29 Lakukan Pengaduan Mobile

Gambar diatas merupakan tampilan dari halaman Lakukan

pengaduan. Pada halaman tersebut bertujuan untuk melakukan
pengaduan dari masalah yang dialami oleh masyarakat.

Gambar 4.30 Profile Mobile

Gambar diatas merupakan tampilan dari Profile. Dalam menu

tersebut ditujukan untuk mengisi identitas dari pelanggan sebelum
melakukan aduan.

25
 Gambar 4.31 Login Admin dan Petugas Mobile

Gambar diatas merupakan tampilan dari halaman login versi

mobile untuk petugas PT PLN Kudus.

Gambar 4.32 Ubah Password Admin Mobile

Gambar diatas merupakan tampilan dari halaman ubah password

admin yang ditujukan untuk mengubah password akun.

26
 Gambar 4.33 Tambah Kategori Mobile

Gambar diatas merupakan tampilan dari halaman tambah kategori.

Halman tersebut ditujukan untuk menambah kategori aduan baru.

Gambar 4.34 Tambah Informasi Mobile

Gambar diatas merupakan tampilan dari halaman tambah

informasi. Pada halaman tersebut ditujukan untuk menambah
informasi/berita dari PT PLN Kudus.

27
 Gambar 4.35 Tambah Petugas Mobile

Gambar diatas merupakan tampilan dari halaman tambah petugas

pada halaman tersebut ditujukan untuk menambah petugas baru
yang nantinya bertujuan untuk kegiatan memverifikasi dari
pengaduan masyarakat.

B. Desain Output Mobile

Gambar 4.36 Menu Landing Page Mobile

Gambar diatas merupakan tampilan dari menu utama ketika user

atau pengguna membuka aplikasi.

28
 Gambar 4.37 Menu Pilih Status Pelanggan Mobile

Gambar diatas merupakan tampilan dari menu pilih status pelanggan

ketika pengguna memilih menu pengaduan masyarakat maka pengguna
nantinya diarahkan ke halaman tersebut untuk memilih status
pelanggan.

Gambar 4.38 Menu Informasi Mobile

Gambar diatas merupakan tampilan dari menu Informasi. Pada

halaman tersebut terdapat kalender daftar informasi dan form
pencarian.

29
 Gambar 4.39 Menu Tentang Kami Mobile

Gambar diatas merupakan tampilan dari menu tentang kami ketika

user menekan menu tersebut. Pada halaman tersebut informasi
seperti visi & misi berserta kontak instansi.

Gambar 4.40 Menu Dashboard Pelanggan Mobile

Gambar diatas merupakan tampilan dari halaman awal setelah

pelanggan berhasil melakukan login dengan akun yang sudah
didaftarkan. Pada halaman tersebut terdapat menu-menu seperti
menu Lakukan pengaduan, Status aduan dan Atur akun.

30
 Gambar 4.41 Menu Status Pengaduan Mobile

Gambar diatas merupakan tampilan dari halaman status Status

Aduan. Pada halaman tersebut pelanggan dapat melihat status dari
aduan yang telah dibuat apakah sudah terproses maupun belum.

Gambar 4.42 Menu Dashboard Admin Mobile

Gambar diatas merupakan tampilan dari halaman awal menu

ketika admin berhasil melakukan login. Dihalaman dashboard
terdapat menu-menu antara lain seperti Verifikasi laporan,
kategori,informasi, dan atur akun.

31
 Gambar 4.43 Menu Daftar Aduan Mobile

Gambar diatas merupakan tampilan dari menu awal setelah admin

atau pengelola melakukan login.

Gambar 4.44 Menu Daftar Informasi Mobile

Gambar diatas merupakan tampilan dari halaman informasi. Pada

halaman tersebut admin dapat melihat daftar informasi yang telah
ditambahkan.

32
 Gambar 4.45 Menu Daftar Kategori Mobile

Gambar diatas merupakan tampilan dari halaman kategori. Pada

halaman tersebut admin dapat menambahkan kategori aduan baru
dan juga dapat mengubah status kategori tersebut menjadi aktif
maupun tidak aktif.

Gambar 4.46 Menu Daftar Petugas Mobile

Gambar diatas merupakan tampilan dari menu tambah petugas.

Pada halaman tersebut admin dapat melihat daftar petugas yang
telah ditambahkan.

33
 Gambar 4.47 Menu Petugas Verifikasi Mobile

Gambar diatas merupakan tampilan dari menu petugas verifikasi.

Pada halaman tersebut menampilkan daftar aduan dari masyarakat
yang nantinya akan diverifikasi oleh petugas.

C. Desain Input Website

Gambar 4.48 Menu Login Pelanggan Website

Gambar diatas merupakan tampilan dari menu login pelanggan versi

website.

34
 Gambar 4.49 Menu Daftar Akun Website

Gambar diatas merupakan tampilan dari menu daftar akun pelanggan

versi website.

Gambar 4.50 Menu Lupa Password Pelanggan Website

Gambar diatas merupakan tampilan dari menu lupa password

pelanggan versi website.

Gambar 4.51 Menu Lakukan Pengaduan Website

Gambar diatas merupakan tampilan dari menu lakukan pengaduan

pelanggan versi website.

35
 Gambar 4.52 Menu Profile Website

Gambar diatas merupakan tampilan dari menu profile pelanggan versi

website.

Gambar 4.53 Menu Login Admin / Petugas Website

Gambar diatas merupakan tampilan dari menu Login Admin / Petugas

versi website.

Gambar 4.54 Menu Tambah Kategori Website

Gambar diatas merupakan tampilan dari menu tambah kategori versi

website.

36
 Gambar 4.55 Menu Tambah Informasi Website

Gambar diatas merupakan tampilan dari menu tambah informasi versi

website.

Gambar 4.56 Menu Tambah Petugas Website

Gambar diatas merupakan tampilan dari menu tambah petugas versi

website.

D. Desain Output Website

Gambar 4.57 Menu Landing Page Website

Gambar diatas merupakan tampilan dari menu landing page versi

website.

37
 Gambar 4.58 Menu About Us Website

Gambar diatas merupakan tampilan dari menu about us versi website.

Gambar 4.59 Menu Daftar Informasi Website

Gambar diatas merupakan tampilan dari menu daftar informasi versi

website.

Gambar 4.60 Menu Penggunaan Website

Gambar diatas merupakan tampilan dari menu penggunaan versi

website.

38
 Gambar 4.61 Menu Download Sekarang Website

Gambar diatas merupakan tampilan dari menu download sekarang

versi website.

Gambar 4.62 Menu Pilih Status Pelanggan Website

Gambar diatas merupakan tampilan dari menu pilih status pelanggan

versi website.

Gambar 4.63 Menu Dashboard Pelanggan Website

Gambar diatas merupakan tampilan dari menu dashboard pelanggan

versi website.

39
 Gambar 4.64 Menu Status Aduan Website

Gambar diatas merupakan tampilan dari menu status aduan versi

website.

Gambar 4.65 Menu Dashboard Admin Website

Gambar diatas merupakan tampilan dari menu dashboard admin versi

website.

Gambar 4.66 Menu Daftar Aduan Website

Gambar diatas merupakan tampilan dari menu daftar aduan versi

website.

40
 Gambar 4.67 Menu Daftar Informasi Website

Gambar diatas merupakan tampilan dari menu informasi versi

website.

Gambar 4.68 Menu Daftar Kategori Website

Gambar diatas merupakan tampilan dari menu kategori versi website.

Gambar 4.69 Menu Daftar Petugas Website

Gambar diatas merupakan tampilan dari menu daftar petugas versi

website.

41
 Gambar 4.70 Menu Dashboard Petugas Website

Gambar diatas merupakan tampilan dari menu dashboard petugas

versi website.

Gambar 4.71 Menu Verifikasi Laporan Website

Gambar diatas merupakan tampilan dari menu verifikasi laporan versi

website.

4.2 Implementasi
A. Penerapan Program Input Mobile

A.
Gambar 4.72 Implementasi UI Login Pelanggan Mobile

Gambar diatas adalah tampilan halaman login pelanggan.

Berfungsi untuk login sebelum melakukan pengaduan.

42
 Gambar 4.73 Implementasi UI Register Pelanggan Mobile

Gambar diatas merupakan implementasi tampilan dari halaman

pendaftaran pelanggan. Pada halaman tersebut berfungsi untuk
membuat akun baru untuk pengguna yang nantinya ingin
melakukan pengaduan.

Gambar 4.74 Implementasi UI Lupa Password Mobile

Gambar diatas merupakan implementasi tampilan dari halaman

lupa password pelanggan. Pada halaman tersebut berfungsi untuk
pelanggan yang lupa dengan passwordnya ketika ingin melakukan
login dan dapat mengubah melalui fitur lupa password.

43
 B.
Gambar 4.75 Implementasi UI Lakukan Pengaduan Mobile

Gambar diatas merupakan tampilan dari halaman Lakukan

pengaduan. Pada halaman tersebut bertujuan untuk melakukan
pengaduan dari masalah yang dialami oleh masyarakat.

Gambar 4.76 Implementasi UI Profile Mobile

Gambar diatas merupakan tampilan dari Profile. Dalam menu

tersebut ditujukan untuk mengisi identitas dari pelanggan sebelum
melakukan aduan.

44
Gambar 4.77 Implementasi UI Login Admin / Petugas Mobile

Gambar diatas merupakan tampilan dari halaman login untuk

petugas PT PLN Kudus.

Gambar 4.78 Implementasi UI Ubah Password Admin Mobile

Gambar diatas merupakan tampilan dari halaman ubah password

untuk admin yang bertujuan untuk mengubah password akun
admin.

45
 Gambar 4.79 Implementasi UI Tambah Kategori Mobile

Gambar diatas merupakan implementasi tampilan UI form

untuk menambahkan kategori aduan.

Gambar 4.80 Implementasi UI Tambah Informasi Mobile

Gambar diatas merupakan implementasi tampilan UI form

untuk menambahkan informasi / berita.

46
 Gambar 4.81 Implementasi UI Tambah Petugas Mobile

Gambar diatas merupakan implementasi tampilan UI form

untuk menambahkan petugas untuk melakukan verifikasi dan
mengecek aduan dari masyarakat.

B. Penerapan Program Output Mobile

Gambar 4.82 Implementasi UI Landing Page Mobile

Gambar diatas merupakan tampilan dari menu awal/landing page yaitu

ketika user atau pengguna membuka aplikasi.

47
Gambar 4.83 Implementasi UI Pilih Status Pelanggan Mobile

Gambar diatas merupakan tampilan dari menu pilih status

pelanggan yang bertujuan untuk mengidentifikasi apakah
pelanggan merupakan masyarakat atau dari pihak lembaga maupun
instansi.

Gambar 4.84 Implementasi UI Informasi Mobile

Gambar diatas merupakan tampilan dari menu informasi. Menu

tersebut bertujuan untuk digunakan sebagai layanan informasi dari
PT PLN ULP Kudus.

48
 Gambar 4.85 Implementasi UI Tentang Kami Mobile

Gambar diatas merupakan tampilan dari menu tentang kami. Pada

halaman tersebut berisi tentang informasi instansi seperti visi &
misi serta kontak instansi.

Gambar 4.86 Implementasi UI Dashboard Pelanggan Mobile

Gambar diatas merupakan tampilan dari halaman awal setelah

pelanggan berhasil melakukan login dengan akun yang sudah
didaftarkan.

49
 Gambar 4.87 Implementasi UI Status Pengduan Mobile

Gambar diatas merupakan tampilan dari halaman status aduan.

Pada halaman tersebut ditujukan untuk melihat daftar aduan yang
telah diadukan oleh pelanggan.

Gambar 4.88 Implementasi UI Dashboard Admin Mobile

Gambar diatas merupakan tampilan dari halaman Dashboard

admin ketika admin berhasil melakukan login.

50
 Gambar 4.89 Implementasi UI Daftar Aduan Mobile

Gambar diatas merupakan tampilan dari halaman daftar aduan.

Pada halaman tersebut menampilkan daftar aduan dari masyarakat
untuk admin yang nantinya daftar aduan tersebut akan ditugaskan
kepada petugas.

Gambar 4.90 Implementasi UI Daftar Informasi Mobile

Gambar diatas merupakan tampilan dari halaman daftar informasi.

Pada halaman tersebut menampilkan daftar informasi yang telah di
ditambahkan.

51
 Gambar 4.91 Implementasi UI Daftar Kategori Mobile

Gambar diatas merupakan tampilan dari halaman daftar kategori.

Pada halaman tersebut menampilkan daftar kategori yang pernah
ditambahkan.

Gambar 4.92 Implementasi UI Daftar Petugas Mobile

Gambar diatas merupakan tampilan dari halaman daftar petugas.

Pada halaman tersebut ditujukan untuk menampilkan daftar
petugas.

52
 Gambar 4.93 Implementasi UI Menu Petugas Verifikasi Mobile

Gambar diatas merupakan tampilan dari halaman Dashboard

Petugas. Pada halaman tersebut menampilkan daftar aduan
masyarakat yang nantinya akan diverifikasi oleh petugas.

C. Penerapan Program Input Website

Gambar 4.94 Implementasi UI Menu Login pelanggan Website

Gambar diatas merupakan tampilan dari menu login pelanggan versi

website.

53
 Gambar 4.95 Implementasi UI Menu Daftar Akun Website

Gambar diatas merupakan tampilan dari menu daftar akun pelanggan

versi website.

Gambar 4.96 Implementasi UI Menu Lupa Password Website

Gambar diatas merupakan tampilan dari menu lupa password

pelanggan versi website.

Gambar 4.97 Implementasi UI Menu Lakukan Pengaduan Website

Gambar diatas merupakan tampilan dari menu lakukan pengaduan

pelanggan versi website.

54
 Gambar 4.98 Implementasi UI Menu Profile Website

Gambar diatas merupakan tampilan dari menu profile pelanggan versi

website.

Gambar 4.99 Implementasi UI Menu Login Admin/Petugas Website

Gambar diatas merupakan tampilan dari menu login admin/petugas

versi website.

Gambar 4.100 Implementasi UI Menu Tambah Kategori Website

Gambar diatas merupakan tampilan dari menu tambah kategori versi

website.

55
 Gambar 4.101 Implementasi UI Menu Tambah Informasi
Website

Gambar diatas merupakan tampilan dari menu tambah informasi versi

website.

Gambar 4.102 Implementasi UI Menu Tambah Petugas Website

Gambar diatas merupakan tampilan dari menu tambah petugas versi

website.

D. Penerapan Program Output Website

Gambar 4.103 Implementasi UI Menu Landing Page Website

Gambar diatas merupakan tampilan dari menu landing page versi

website.

56
 Gambar 4.104 Implementasi UI Menu About Us Website

Gambar diatas merupakan tampilan dari menu about us versi website.

Gambar 4.105 Implementasi UI Menu Informasi Website

Gambar diatas merupakan tampilan dari menu informasi versi

website.

Gambar 4.106 Implementasi UI Menu Penggunaan Website

Gambar diatas merupakan tampilan dari menu penggunaan versi

website.

57
 Gambar 4.107 Implementasi UI Menu Download Sekarang Website

Gambar diatas merupakan tampilan dari menu download sekarang

versi website.

Gambar 4.108 Implementasi UI Menu Pilih Status Pelanggan Website

Gambar diatas merupakan tampilan dari menu pilih status pelanggan

versi website.

Gambar 4.109 Implementasi UI Dashboard Pelanggan Website

Gambar diatas merupakan tampilan dari menu dashboard pelanggan

versi website.

58
 Gambar 4.110 Implementasi UI Status Aduan Website

Gambar diatas merupakan tampilan dari menu status aduan versi

website.

Gambar 4.111 Implementasi UI Menu Dashboard Admin Website

Gambar diatas merupakan tampilan dari menu dashboard admin versi

website.

Gambar 4.112 Implementasi UI Menu Daftar Aduan Website

Gambar diatas merupakan tampilan dari menu daftar aduan versi

website.

59
 Gambar 4.113 Implementasi UI Daftar Informasi Website

Gambar diatas merupakan tampilan dari menu informasi versi

website.

Gambar 4.114 Implementasi UI Daftar Kategori Website

Gambar diatas merupakan tampilan dari menu kategori versi website.

Gambar 4.115 Implementasi UI Daftar Petugas Website

Gambar diatas merupakan tampilan dari menu daftar petugas versi

website.

60
 Gambar 4.116 Implementasi UI Dashboard Petugas Website

Gambar diatas merupakan tampilan dari menu dashboard petugas

versi website.

Gambar 4.117 Implementasi UI Menu Verifikasi Laporan Website

Gambar diatas merupakan tampilan dari menu verifikasi laporan versi

website.

61