PERANCANGAN ULANG APLIKASI SUKABUMI PARTICIPATORY ...
Transcript of PERANCANGAN ULANG APLIKASI SUKABUMI PARTICIPATORY ...
PERANCANGAN ULANG APLIKASI SUKABUMI
PARTICIPATORY RESPONDER (SUPER)
DI KOTA SUKABUMI
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Shania Jiehan Geraldine
NIM : 00000025554
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2020
i
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Shania Jiehan G
NIM : 00000025554
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir :
PERANCANGAN ULANG APLIKASI SUKABUMI PARTICIPATORY
RESPONDER (SUPER) DI KOTA SUKABUMI
dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan
belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas
Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan
pelaksanaan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain,
kecuali arahan pembimbing akademik dan narasumber.
Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya,
apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam
pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan
gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang
berlaku di Universitas Multimedia Nusantara.
Tangerang, 5 Januari 2021
Shania Jiehan Geraldine
ii
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN ULANG APLIKASI SUKABUMI
PARTICIPATORY RESPONDER (SUPER)
DI KOTA SUKABUMI
Oleh
Nama : Shania Jiehan Geraldine
NIM : 00000025554
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
Tangerang, 20 Januari 2021
Penguji Ketua Sidang
Clemens Felix Setiyawan, S.Sn.,M.Hum. Darfi Rizkavirwan, S.Sn., M.Ds.
Ketua Program Studi
Mohammad Rizaldi, S.T., M.Ds.
Rani Aryani Widjono, S.Sn., M.Ds.
iii
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa sehingga
dapat menyelesaikan proposal Tugas Akhir yang berjudul “Perancangan Ulang
Aplikasi Sukabumi Participatory Responder (SUPER) di Kota Sukabumi”.
Laporan ini disusun berdasarkan ketertarikan penulis dalam merancang ulang
sebuah aplikasi pengaduan guna membantu masyarakat dalam menyampaikan
keluhan mengenai masalah infrastruktur yang ada di Kota Sukabumi. Topik ini
dipilih dikarenakan masih banyak masyarakat Kota Sukabumi yang kurang minat
dan merasa efektif dengan keberadaan aplikasi tersebut sekarang ini.
Topik ini dianggap penting karena permasalahan yang sering terjadi di
kalangan masyarakat, khususnya warga Kota Sukabumi, mengenai wadah/ tempat
yang efektif dalam menyampaikan keluhan kepada pemerintah setempat/ instansi
yang terkait. Target pembaca dari proposal ini adalah orang-orang yang memiliki
ketertarikan yang serupa dalam merancang aplikasi layanan masyarakat di
Indonesia.Dalam penyusunan proposal ini, penulis mendapatkan beberapa hal
yang dapat dipelajari seperti time management agar proposal ini dapat selesai
tepat waktu dan keteraturan dalam menulis. Penulis berharap semoga proposal ini
kedepannya dapat berguna dan bermanfaat bagi pembaca.
Saya ingin mengucapkan terima kasih juga berikan orang-orang yang telah
membantu dalam keberlangsungan Tugas Akhir ini, di antara lain :
iv
1. Mohammad Rizaldi, S.T., M.Ds. sebagai ketua program studi Desain
Komunikasi Visual.
2. Rani Aryani Widjono, S.Sn., M.Ds. sebagai dosen pembimbing dalam
perancangan.
3. Ukasyah Ananda Putra, Frendy Yuwono, dan Tantan Sontani sebagai
narasumber dalam memberikan informasi untuk pemenuhan
pengambilan data.
4. Vee Mahendra, Ivan Ginanjar, Veronica Liliani, Ellyn Natalia, Refiand
Imanuel, Mariska Gracia, dan Ivan Johan yang telah meluangkan
waktu dalam berdiskusi seputar infrastruktur di Kota Sukabumi.
5. Teman-teman satu kelompok bimbingan yang selalu memberi
semangat.
6. Keluarga yang selalu ada dalam memberikan semangat, pendapat, dan
solusi dalam menyelesaikan perancangan aplikasi ini.
Tangerang, 5 Januari 2021
Shania Jiehan Geraldine
v
ABSTRAKSI
Infrastruktur sangatlah penting bagi pembangunan sebuah kota. Hal ini
dikarenakan infrastruktur merupakan roda pembangun dari ekonomi dan
kesejahteraan di kota tersebut. Namun, hal ini masih luput dari perhatian
pemerintah, terutama dengan fasilitas yang sudah tersedia/ada sebelumnya.
Partisipasi masyarakat setempat sangat diperlukan, khususnya dalam melaporkan
keadaan infrastruktur yang bermasalah. Tetapi, masih saja banyak masyarakat
yang tidak mengetahui kemana harus melapor dan tidak tahu kabar selanjutnya
dari laporannya tersebut. Adanya perancangan ulang aplikasi layanan pengaduan
masalah ini agar dapat lebih efektif digunakan masyarakat, khususnya warga Kota
Sukabumi, dalam memberikan keluhan dan tanggapan kepada pemerintah
mengenai keadaan infrastruktur yang ada di lingkungan sekitar. Dalam
perancangan, metode yang menggunakan adalah metode Human Centered Design
yang dikembangkan oleh IDEO. Diharapkan melalui aplikasi ini, masyarakat di
Kota Sukabumi dapat lebih peduli dengan keadaan sekitar, khususnya keadaan
infrastrukturnya, dengan cara melapor kepada pemerintah setempat secara real-
time dan dapat mengetahui progres dari laporan tersebut dengan mudah.
Kata kunci : aplikasi, service design, pemerintah, pengaduan masyarakat,
infrastruktur
vi
ABSTRACT
Infrastructure is very important for the development of a city. This is because
infrastructure is the building wheel of the city's economy and welfare. However,
this has still escaped the attention of the government, especially for the existing
facilities. The participation of the local community is needed, especially in
reporting the condition of problematic infrastructure. However, there are still
many people who do not know where to report and do not know the next
information from the report. The redesign of this complaint service application is
in order to help the society, especially the residents of Sukabumi City, in
providing complaints and responses to the government regarding the condition of
the existing infrastructure in the surrounding environment. In designing, the
method used is the Human Centered Design method that has been developed by
IDEO. It is hoped that through this public service application, people in Sukabumi
City can care more about their surroundings, especially the condition of their
infrastructure, by reporting to the local government in real-time and being able to
know the progress of the report easily.
Keywords: application, service design, government, public complaint,
infrastructure
vii
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ................................... i
KATA PENGANTAR ....................................................................................................iii
ABSTRAKSI ................................................................................................................... v
ABSTRACT ..................................................................................................................... vi
DAFTAR ISI ................................................................................................................. vii
DAFTAR GAMBAR ....................................................................................................... x
DAFTAR TABEL ......................................................................................................... xv
DAFTAR LAMPIRAN ................................................................................................ xvi
BAB I PENDAHULUAN ............................................................................................... 1
1.1. Latar Belakang ...................................................................................................... 1
1.2. Rumusan Masalah ................................................................................................ 3
1.3. Batasan Masalah ................................................................................................... 3
1.4. Tujuan Tugas Akhir ............................................................................................. 5
1.5. Manfaat Tugas Akhir ........................................................................................... 5
BAB II TINJAUAN PUSTAKA ..................................................................................... 7
2.1. Teori Perancangan ................................................................................................ 7
2.1.1. Prinsip Desain...........................................................................................................................8
2.1.2. Elemen Desain ....................................................................................................................... 13
2.2. Mobile Application ............................................................................................... 24
2.2.1. Application Categories ....................................................................................................... 24
viii
2.2.2. User Interface & User Experience .................................................................................. 27
2.2.3. User Experience ..................................................................................................................... 32
2.2.4. Usability .................................................................................................................................... 39
2.3. Service Design ...................................................................................................... 43
2.3.1. Service Design Principles ................................................................................................... 44
2.3.2. Komponen dalam Service Design .................................................................................. 45
2.4. Pelayanan Publik ................................................................................................ 46
2.4.1. Pengelompokkan Pelayanan Publik............................................................................ 47
2.4.2. Pengaduan Masyarakat ..................................................................................................... 48
2.4.3. Smart City ................................................................................................................................ 49
2.4.4. Infrastruktur .......................................................................................................................... 50
BAB III METODOLOGI .............................................................................................52
3.1. Metodologi Pengumpulan Data ......................................................................... 52
3.1.1. Survei ......................................................................................................................................... 52
3.1.2. Focus Group Discussion .................................................................................................... 55
3.1.3. Wawancara ............................................................................................................................. 60
3.1.4. Observasi ................................................................................................................................. 70
3.1.5. Studi Eksisting ....................................................................................................................... 71
3.2. Metodologi Perancangan .................................................................................... 80
3.2.1. Observation ............................................................................................................................. 83
3.2.2. Ideation ..................................................................................................................................... 85
3.2.2.1. Mind Map .............................................................................................................................. 85
3.2.3. Rapid Prototyping ................................................................................................................ 98
3.2.3.2. High fidelity ...................................................................................................................... 101
ix
BAB IV ANALISIS ................................................................................................... 118
4.1. Analisis Alpha ................................................................................................... 118
4.1.1. Analisis Hasil Alpha test ................................................................................................. 118
4.1.2. Solusi Desain ....................................................................................................................... 124
4.2. Analisis Beta ...................................................................................................... 127
4.2.1. Analisis Desain ................................................................................................................... 128
4.2.2. Analisis Beta Test .............................................................................................................. 158
BAB V KESIMPULAN DAN SARAN ..................................................................... 166
5.1. Kesimpulan ........................................................................................................ 166
5.2. Saran .................................................................................................................. 167
DAFTAR PUSTAKA ................................................................................................ xviii
LAMPIRAN A: FORM BIMBINGAN ................................................................ xxiii
LAMPIRAN B: SURVEI ....................................................................................... xvii
LAMPIRAN C: SURVEI ALPHA TEST .......................................................... xxxiii
LAMPIRAN D : SURVEI BETA TEST ............................................................. xxxvi
LAMPIRAN E : TRANSKRIP WAWANCARA ..............................................xxxvii
LAMPIRAN F : TRANSKRIP WAWANCARA BAPPEDA ............................... lvii
LAMPIRAN G : TRANSKRIP WAWANCARA DISKOMINFO ...................... lxix
x
DAFTAR GAMBAR
Gambar 2.1. Desain Poster It’s Time To Get Organized……………………….....8
Gambar 2.2. Jenis Gestalt………………………………………………………....9
Gambar 2.3. Salah satu penggunaan emphasis………………………….……….10
Gambar 2.4. Fibonacci Square…………………………………………………...12
Gambar 2.5. Fibonacci Spiral ……………………………………………………13
Gambar 2.6. Macam - macam jenis bentuk………………………………………14
Gambar 2.7. Contoh gambar dengan menggunakan figure/ground……………...15
Gambar 2.8. Perbedaan warna RGB dan CMYK………………………………..16
Gambar 2.9. Perbedaan jenis tipografi sans serif dan serif………………………17
Gambar 2.10. Contoh penggunaan tracking dan leading………………………...17
Gambar 2.11. Grid anatomy……………………………………………………...18
Gambar 2.12. Grid guidelines..…………………………………………………..19
Gambar 2.13. Bentuk icon……………………………………………...………..20
Gambar 2.14. Perbedaan icon dan bentuk asli…………………………………...21
Gambar 2.15. Iklan Burger King………………………………………………....22
Gambar 2.16. Contoh dokumentasi jurnalis dalam koran………………………..23
Gambar 2.17 Contoh fotografi sebagai karya seni……………………………….23
Gambar 2.18. Aplikasi Angry Birds……………………………………………..25
Gambar 2.19. Aplikasi Facebook………………………………………………...25
Gambar 2.20. Aplikasi Gojek……………………….............................................26
Gambar 2.21. Aplikasi Ruang Guru………………………...................................26
Gambar 2.22. Aplikasi Paper pada iPad………………………............................27
xi
Gambar 2.23. Checkboxes……………………………………………………….30
Gambar 2.24. Radio buttons……………………………………………………...31
Gambar 2.25. Text fields…………………………………………………………31
Gambar 2.26. Dropdown…………………………………………………………31
Gambar 2.27. List boxes…………………………………………………………31
Gambar 2.28. Action button……………………………………………………...32
Gambar 2.29. The five planes……………………………………………………33
Gambar 2.30. Salah satu contoh tampilan feedback……………………………..34
Gambar 2.31. Contoh pemberian batasan aksi dalam 1 halaman………………..35
Gambar 2.32. Contoh konsistensi dalam penggunaan warna keterangan……….36
Gambar 2.33. Contoh penggunaan petunjuk dalam bentuk tulisan dan tombol…37
Gambar 2.34. Perbandingan tampilan tiap prototype…………………………….38
Gambar 2.35. Proses Penelitian service design…………………………………..44
Gambar 2.36. Komponen dalam proses implementasi service design…………...45
Gambar 2.37. 6 Dimensi Smart City……………………………………………..49
Gambar 3.1. Grafik responden pernah dan tidak melapor ke pemerintah……….53
Gambar 3.2. Grafik kendala ketika melapor ke pemerintah dan cara pelaporan...53
Gambar 3.3. Grafik alasan tidak pernah melapor………………………………..54
Gambar 3.4. Dokumentasi FGD dengan 7 warga Kota Sukabumi………………55
Gambar 3.5. Dokumentasi wawancara dengan Kak Uka………………………...61
Gambar 3.6. Wawancara dengan Pak Frendy melalui Whatsapp call……...…....64
Gambar 3.7. Wawancara dengan Pak Tantan Sontani……………………...……67
Gambar 3.8. Kompilasi masalah infrastruktur di Kota Sukabumi……………….70
xii
Gambar 3.9. Kompilasi billboard di Kota Sukabumi…………………………….70
Gambar 3.10. Screenshot tampilan aplikasi SUPER…………………………….71
Gambar 3.11. Screenshot tampilan aplikasi JAKI……………………………….74
Gambar 3.12. Screenshot pada tampilan aplikasi Qlue…………………………..76
Gambar 3.13. Mind map Kota Sukabumi………………………………………..85
Gambar 3.14 Moodboard………………………………………………………...87
Gambar 3.15. Persona Ojek Online………………………………………………89
Gambar 3.16. Persona Wiraswasta……………………………………………….89
Gambar 3.17. Empathy Map Ojek Online……………………………………….90
Gambar 3.18. Empathy Map Wiraswasta………………………………...……...91
Gambar 3.19. Journey Map Ojek Online………………………………………...92
Gambar 3.20. Journey Map Wiraswasta…………………………………………92
Gambar 3.21. Information Architecture………………………………………….93
Gambar 3.22. Flowchart………………………………………………………….94
Gambar 3.23. Ecosystem Map…………………………………………………...95
Gambar 3.24. Sketsa Digital……………………………………………………..96
Gambar 3.25. Wireframe………………………………………………………....98
Gambar 3.26. Grid dalam tampilan aplikasi……………………………………..99
Gambar 3.27. Proses penyederhanaan pada icon……………………………….100
Gambar 3.28. Tampilan beberapa icon dan button………………………...…...103
Gambar 3.29. Tampilan icon pada pertolongan darurat………………………...103
Gambar 3.30. Tampilan icon pada penilaian kinerja……………………...……105
Gambar 3.31. Proses penyederhanaan icon pada Warta Kota dan Survei……...106
xiii
Gambar 3.32. Proses penyederhanaan dan penggabungan icon fungsi baru…...107
Gambar 3.33. Tampilan icon pada konten…………………...…………………108
Gambar 3.34. Contoh penyederhanaan bangunan Masjid Agung.……………..108
Gambar 3.35. Tampilan ilustrasi halaman awal………………………………...109
Gambar 3.36. Contoh penyederhanaan karakter warga dan pemerintah…….....110
Gambar 3.37. Tampilan ilustrasi halaman pengenalan…………………………111
Gambar 3.38. Contoh penyederhanaan bentuk bus wisata……………………..111
Gambar 3.39. Tampilan ilustrasi pada bagian kategori fasilitas………………..112
Gambar 3.40. Contoh penyederhanaan memegang KTP……………………….113
Gambar 3.41. Contoh penyederhanaan bentuk PJU….…………………………113
Gambar 3.42. Tampilan ilustrasi pada bagian kategori jenis laporan…………..114
Gambar 3.43. Tampilan high fidelity dari aplikasi…………...………………...115
Gambar 4.1. Hasil survei User Experience……………………………………..118
Gambar 4.2. Hasil survei Satisfaction…………………………………………..118
Gambar 4.3. Hasil survei User Interface………………………………………..120
Gambar 4.4. Hasil survei secara keseluruhan…………………………………..122
Gambar 4.5. Perubahan ukuran tulisan…………………………………………124
Gambar 4.6. Perubahan tampilan notifikasi…………………………………….124
Gambar 4.7. Perubahan tampilan icon notifikasi……………………………….125
Gambar 4.8. Perubahan tulisan pada tampilan permintaan bantuan……………125
Gambar 4.9. Penambahan informasi pada bagian peringkat warga aktif……….125
Gambar 4.10. Dokumentasi beta test….………….…………………………….126
Gambar 4.11. Tampilan homepage...…………….……………………………..127
xiv
Gambar 4.12. Tampilan halaman masuk dan registrasi akun…………...……...130
Gambar 4.13. Tampilan halaman pengenalan…....……………………………..132
Gambar 4.14. Tampilan fungsi pertolongan darurat……………………………134
Gambar 4.15. Tampilan dari setiap bantuan darurat…………………………....135
Gambar 4.16. Tampilan dari fungsi Warta Kota………………………………..136
Gambar 4.17. Tampilan dari fungsi Info Kota.......……………………………..137
Gambar 4.18. Tampilan dari fungsi Lapor dan LaporanKu…………………….139
Gambar 4.19. Tampilan pop-up pada fungsi lapor…………………...………...140
Gambar 4.20. Tampilan LaporanKu……………………………………………141
Gambar 4.21. Tampilan notifikasi…......................…………...………………..142
Gambar 4.22. Tampilan fungsi Respon Penduduk….…………………………..143
Gambar 4.23. Tampilan verifikasi Data Penduduk……………………………..144
Gambar 4.24. Tampilan fungsi Data Penduduk dan layanan e-KTP…………...145
Gambar 4.25. Tampilan fungsi Sapa Penduduk………………………………...146
Gambar 4.26. Tampilan fungsi Chat Admin…....………………………………147
Gambar 4.27. Tampilan fungsi Survei…....…………………………………….148
Gambar 4.28. Tampilan profil…....……………………………………………..150
Gambar 4.29. Tampilan sub-menu…....………………………………………...151
Gambar 4.30. Tampilan pengaturan…....……………………………………….152
Gambar 4.31. Tampilan dari keterangan pada App store……………………….154
Gambar 4.32. Tampilan poster mengenai aplikasi……………………………...155
Gambar 4.33. Tampilan billboard mengenai aplikasi…………………………..156
Gambar 4.34. Hasil survei User Interface…....………………………………...158
xv
Gambar 4.35. Hasil survei mengenai fungsi aplikasi…………………………...160
Gambar 4.36. Hasil survei User Experience…....……………………………....162
Gambar 4.37. Hasil penilaian satisfaction…....………………………………...164
xx
DAFTAR TABEL
Tabel 3.1. Daftar nama peserta FGD………………………………...…………..49
Tabel 3.2. Tabel perbandingan aplikasi dari hasil FGD……………………...…..52
Tabel 3.3. Tabel kesimpulan studi eksisting………………………………...…...70
Tabel 4.1. Tabel peserta beta test………………………………………...……..148
xxi
DAFTAR LAMPIRAN
LAMPIRAN A: FORM BIMBINGAN…………………………….…………..xii
LAMPIRAN B: SURVEI…………………………………………………….. xiii
LAMPIRAN C: SURVEI ALPHA TEST…………………………………....xxiv
LAMPIRAN D: SURVEI BETA TEST………….………….…….…………xxxi
LAMPIRAN E: TRANSKRIP WAWANCARA………….…….………….xxxii
LAMPIRAN F: TRANSKRIP WAWANCARA BAPPEDA………..………..lxii
LAMPIRAN G: TRANSKRIP WAWANCARA DISKOMINF..……..….…..lxiv