Pada proses Iterasi 2 memiliki jangka waktu dari 1 Apil hingga 7 Mei 2016. Pada iterasi ini dilakukan proses penyempurnaan proto-tipe dengan masukan dari expert judge yakni mentor UI/UX. Selain melakukan penyempurnaan juga menambah beberapa fitur core se-perti : tanggapan dan state atau status keluhan.
4.5.1 Masalah dan Solusi
Tabel 4.7: Masalah pada iterasi 2
Aktor Proses Bisnis Kendala Kode
SKPD Memberikan fe-edback terhadap masyarakat Masyarakat tidak dapat memberikan feedback P8K3 Mediacenter Memperbaharui Status Laporan Masyarakat tidak dapat memberikan feedback terkait pe-nanganan laporan. P9K3 tidak adan-nya pernana control dari masyarakat (hanya satu arah dari pemerinta) P9K4
Masyarakat tidak meng-etahui jika laporan ter-sebut telah ditangani-atau status dari lapo-rannya telah berganti P9K1 4.5.2 Komponen 1. Komentar 2. Tanggapan 3. Dukungan 4. State 5. Notfiikasi 4.5.3 Atribut Komponen 1. Laporan Twitter (a) Connection
merupakan atribut dari twitter oauth yang digunakan se-bagai object koneksi.
(b) Content
merupakan atribut dari twitter oauth yang digunakan se-bagai object koneksi.
(c) Statuses
merupakan object dari twitter oauth yang digunakan un-tuk web services REST dari twitter.
(d) In status
isi dari status twitter yang akan diposting. 2. User
(a) Profile picture (b) No telp 3. Komentar (a) Id komentar (b) Komentar Isi (c) Jenis komentar (d) Id keluhan (e) Id user (f) Id gerakan 4. Tanggapan (a) Id tanggapan (b) Tanggapan isi (c) Tanggapan date (d) Id pengelola (e) Id keluhan (f) Tanggapan like 5. Dukungan (a) Id user (b) Id dukungan (c) Id keluhan (d) Date dukungan 6. State (a) Id state (b) Id keluhan (c) Deskripsi perubahan (d) Tanggal state (e) Id pengelola
(f) Jenis state (g) Modified date 7. Notfiikasi
(a) Id notification (b) Id person
User yang akan menerima notifikasi (c) Jenis notification
Jenis dari notifikasi, contoh ”1” adalah notifikasi ketika user memasukan laporan baru dan pengelola menerima notifikasi tersebut
(d) Id object
object dari notifikasi, misalnya ”laporan” atau ”komen-tar”
(e) Is Viewed
Status yang menunjukan apakah notifikasi tersebut te-lah dilihat atau belum oleh user yang bersangkutan (f) Tanggal notifikasi
4.5.4 Fitur
Setiap komponen yang teridentifikasi berdasarkan masalah tersebut memiliki fitur. Tujuan dari pembuatan dari fitur ini adalah untuk menyelesaikan masalah pada bisnis proses tersebut.
1. Keluhan
(a) DKL3. Mencari Keluhan (SKPD)
(b) DKL4. Melihat keluhan(android) (SKPD) 2. Laporan Twitter
(a) DT8. Memposting tweet ke twitter (SKPD) (b) DT9. Membalas tweet dari twitter (SKPD) (c) DT10. Mencari laporan twitter (SKPD) 3. Komentar
(a) DKM1. Melihat komentar (SKPD)
(b) DKM2. Melihat total halaman komentar (SKPD) (c) DKM3. Melihat detail komentar (SKPD)
(d) DKM4. Menghapus komentar (SKPD) (e) DKM5. Menambah komentar (SKPD)
(f) DKM6. Melihat komentar berdasarkan keluhan (SKPD) 4. Tanggapan
(a) DTT1. Melihat daftar danggapan (administrator) (b) DTT2. Melihat jumlah halaman tanggapan
(admi-nistrator)
(c) DTT3. Melihat detail tanggapan (administrator) (d) DTT4. Menghapus tanggapan (administrator dan
SKPD)
(e) DTT5. Menambah tanggapan (administrator dan SKPD)
(f) DTT6. Melihat tanggapan berdasarkan keluhan (SKPD) 5. Dukungan
(a) DKN1. Menambah dukungan (Masyarakat)
(c) DKN3. Melihat jumlah dukungan berdasarkan ke-luhan (Masyarakat)
6. State
(a) DS1. Menambahkan State (SKPD) (b) DS2. Mengubah State (SKPD) (c) DS3. Melihat state keluhan (SKPD) (d) DS4. Melihat last state keluhan (SKPD) 7. Notification
(a) DN1. Melihat notifikasi berdasarkan pengelola (SKPD) (b) DN2. Melihat jumlah notifikasi yang dimiliki
4.5.5 User Interface 1. Keluhan
(a) UI DKL3. Mencari Keluhan
GUI mencari keluhan dibuat berdasarkan hasil pencari-an pada kaskus dengpencari-an modifikasi
(b) UI DKL4. Melihat keluhan(android)
GUI menampilkan laporan dalam bentuk timeline dibu-at berdasarkan timeline dari twitter dengan modifikasi.
2. Laporan Twitter
(a) UI DT8. Memposting tweet ke twitter GUI dibuat berdasarkan desain form twitter
Gambar 4.65: Melihat keluhan(android)
(b) UI DT9. Membalas tweet dari twitter GUI dibuat berdasarkan desain form twitter
(c) UI DT10. Mencari laporan twitter
GUI mencari keluhan dibuat berdasarkan hasil pencari-an pada kaskus dengpencari-an modifikasi
3. Komentar
(a) UI DKM1. Melihat komentar
GUI dibuat berdasarkan template bootstrap admin LTE untuk menampilkan data dengan modifikasi
(b) UI DKM2. Melihat total halaman komentar
GUI dibuat berdasarkan template bootstrap admin LTE untuk menampilkan data dengan modifikasi
Gambar 4.69: Melihat total halaman komentar (c) UI DKM3. Melihat detail komentar
GUI dibuat berdasarkan template bootstrap admin LTE untuk menampilkan data dengan modifikasi
(d) UI DKM4. Menghapus komentar
GUI dibuat berdasarkan template bootstrap admin LTE untuk menghapus data dengan modifikasi
(e) UI DKM5. Menambah komentar UI Berada di Android
(f) UI DKM6. Melihat komentar berdasarkan keluhan Pada iterasi ini UI masih hanya tersedia di Android 4. Tanggapan
(a) UI DTT1. Melihat daftar danggapan.
GUI dibuat berdasarkan template bootstrap admin LTE untuk menampilkan data dengan modifikasi
(b) UI DTT2. Melihat jumlah halaman tanggapan. GUI dibuat berdasarkan template material design untuk menampilkan data dengan modifikasi
Gambar 4.73: Melihat jumlah halaman tanggapan (c) UI DTT3. Melihat detail tanggapan
GUI dibuat berdasarkan template material design untuk menampilkan data dengan modifikasi
(d) UI DTT4. Menghapus tanggapan
GUI dibuat berdasarkan template bootstrap admin LTE untuk menghapus data dengan modifikasi
(e) UI DTT5. Menambah tanggapan
dibuat berdasarkan GUI twitter reply dengan tambahan modifikasi tombol.
(f) UI DTT6. Melihat tanggapan berdasarkan keluhan GUI komentar dibuat berdasarkan daftar komentar pada video youtube dengan modifikasi.
5. Dukungan
(a) UI DKN1. Menambah dukungan UI berada diandroid
(b) UI DKN2. Melihat status dukungan dari user UI berada dianroid
(c) UI DKN3. Melihat jumlah dukungan berdasarkan keluhan
6. State
(a) UI DS1. Menambahkan State
desain form untuk menginputkan data dibuat berdasark-an dari template material design dengberdasark-an modifikasi pa-da tombol.
(b) UI DS2. Mengubah State belum meminiliki UI
(c) UI DS3. Melihat state keluhan GUI dibuat berdasarkan template css.
(d) UI DS4. Melihat last state keluhan
dibuat berdasarkan posting facebook pada saat menam-pilkan lokasi dari posting tersebut.
7. Notification
(a) UI DN1. Melihat notifikasi berdasarkan pengelola GUI dibuat berdasarkan notifikasi facebook.
(b) UI DN2. Melihat jumlah notifikasi yang dimiliki pe-ngelola
GUI dibuat berdasarkan notifikasi facebook.
4.5.6 Persona
persona telah didefinisikan di Iterasi 1 dan tidak ada perubahan di iterasi 2
4.5.7 User Stories
1. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat mencari laporan masyara-kat yang berasal dari twitter maupun android sehingga novi dapat menemukan laporan-laporan yang penting.
2. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat memposting tweet dari bac-kend sehingga tidak perlu repot membuka twitter sapawarga surabaya.
3. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat melihat komentar masyara-kat mengenai laporan yang ada sehingga novi dapat meng-etahui tanggapan masyarakat terhadap laporan maupun atas tindakan dari SKPD
4. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat memberikan tanggapan ke-pada masyarakat sehingga novi dapat merespon komentar da-ri masyarakat terhadap suatu laporan.
5. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat menambahkan state atau status dari laporan sehingga Novi dapat memberikan infor-masi mengenai kondisi penanganan dari laporan.
6. Sebagai staff yang bertanggungjawab menangani laporan yang masuk di SKPD novi ingin dapat mendapatkan notifikasi di-backend saat terdapat laporan yang masuk sehingga novi da-pat ceda-pat dalam memberikan feedback atau respon
7. Sebagai masyarakat ahsan ingin dapat memberikan dukungan-nya terhadap suatu laporan sehingga ahsan dapat berpartisi-pasi aktif dalam mendukung laporan tersebut untuk segera diselesaikan.
8. Sebagai masyarakat ahsan ingin dapat memberikan tanggap-an atau komentar terhadap laportanggap-an ataupun tindaktanggap-an ytanggap-ang di-lakukan oleh SKPD sehingga ahsan dapat berpartisipasi aktif dalam mengawal penanganan laporan tersebut.
4.5.8 Epic dan Skenario Epic 1
Mencari keluhan(dari laporan android maupun twitter) Skenario 1
1. Pada pagi hari pukul 09.00 novi diminta oleh kepala bagian untuk mencari laporan mengenai pungli
2. Novi login ke backend city113
3. Novi menuliskan kata kunci ”pungli” dikolom search pada bagian header website.
4. Novi menekan tombol yang berlabel search atau ikon kaca pembesar.
5. Sistem menampilkan dua hasil pencarian yakni dari android dan twitter.
6. Novi dapat melihat hasil pencarian tersebut.
7. Novi melaporan hasil pencarian kepada kepala bagian. Epic 2
Melakukan posting tweet ke twitter Skenario 2
1. Novi ingin mengumuman informasi tentang adannya galian dari dinas PU pada hari selasa 20 mei 2016
2. Novi login ke backend city113 3. Novi menekan tombol compose
4. Sistem menampilkan form layaknya twitter untuk menulisk-an isi tweet
5. Novi menuliskan pengumuman tentang adannya galian oleh dinas PU pada hari selasa 20 mei 2016
6. Pengumuman tersebut secara otomatis masuk ke twitter me-lalui akun @surabaya113.
Epic 3
Melihat komentar dari masyarakat berdasarkan laporan Skenario 3
1. Ahsan menuliskan komentarnya terhadap laporan masyara-kat lainnya mengenai jalan berlubang.
2. Novi login ke sistem backend city113 3. Novi menuju timeline
4. Novi mencari laporan mengenai jalan berlubang dan menek-an tombol lihat komentar
5. Sistem menampilkan daftar komentar masyarakat Epic 4
Memberikan tanggapan pada keluhan(android) Skenario 4
1. Pada hari minggu pukul 09.00 ahsan sedang bersantai bersa-ma keluarga ditabersa-man kenjeran.
2. Namun, ditaman tersebut banyak sekali gundukan sampah yang menggumpal dan sangat menggangu pemandangan ma-upun kenyamanan.
3. Ahsan membuka aplikasi City113 dan login dengan aku go-ogle
4. Kemudian ahsan membuka menu untuk melaporkan laporan. 5. Ahsan menyalakan GPS dari smartphone androidnya
6. Setelah itu ahsan menuliskan isi laporan tentang gundukan sampah tersebut dan memilih kategori laporan.
7. Menekan tombol kirim.
8. Novi yang mengetahui adannya laporan tersebut login ke bac-kend city113.
9. Novi menuju timeline dan mencari laporan mengenai gun-dukan sampah tersebut
10. Novi menuliskan tanggapan atas laporan tersebut. Epic 5
Menambahkan State laporan Skenario 5
1. Novi ingin memberitahukan masyarakat bahwa gundukan sam-pah pada taman kenjeran telah dibersihkan oleh satgas. 2. Novi login ke sistem backend city113
3. Novi mencari laporan mengenai gundukan sampah di timeli-ne
4. Novi mengklik tombol edit pada laporan tersebut.
5. Novi menambahkan state bahwa laporan tersebut telah ditin-dak dan menambahkan deskripsi tentang tinditin-dakan yang dila-kukan oleh satgas.
Epic 6
Melihat Notifikasi pengelola saat menerima laporan Skenario 6
1. Pada hari minggu pukul 09.00 ahsan sedang bersantai bersa-ma keluarga ditabersa-man kenjeran.
2. Namun, ditaman tersebut banyak sekali gundukan sampah yang menggumpal dan sangat menggangu pemandangan ma-upun kenyamanan.
3. Ahsan membuka aplikasi City113 dan login dengan aku go-ogle
4. Kemudian ahsan membuka menu untuk melaporkan laporan. 5. Ahsan menyalakan GPS dari smartphone androidnya 6. Setelah itu ahsan menuliskan isi laporan tentang gundukan
sampah tersebut dan memilih kategori laporan. 7. Menekan tombol kirim.
8. Novi yang pada saat itu telah login dibackend city113 me-nerima notifikasi (seperti facebook) dibagian header website backend city113.
Epic 7
Menambahkan Dukungan dan melihat status(android) Skenario 7
1. Pada hari sabtu ahsan sedang bersantai dirumah dan membu-ka timeline city113
2. ahsan melihat laporan mengenai jalan berlubang didaerah be-nowo
3. Ahsan sangat terganggu dengan keadaan jalan berlubang di-daerah benowo karena itu jalanan yang biasa dilewat saat ahs-an hendak bekerja
4. Ahsan mendukung laporan tersebut dengan menekan tombol dukung pada android
Epic 8
Mencari keluhan(dari laporan android maupun twitter) Skenario 8
1. Pada hari sabtu ahsan sedang bersantai dirumah dan membu-ka timeline city113
2. ahsan melihat laporan mengenai jalan berlubang didaerah be-nowo
3. Ahsan sangat terganggu dengan keadaan jalan berlubang di-daerah benowo karena itu jalanan yang biasa dilewat saat ahs-an hendak bekerja
4. Ahsan ingin menambahkan komentar tentang bagaimana ter-ganggungnya perjalanan dan keselamatan dirinnya akitbat adan-nya jalan berlubang tersebut.
5. Ahsan menuliskan komentar pada kolom komentar dan me-nekan tombol kirim.
4.5.9 Storyboard
Storyboard adalah ilustrasi penggambaran skenario dengan sketsa. Tujuannya adalah bagaimana user dapat mencapai epic atau goal. Skenario 1
Epic : Mencari keluhan(android+twitter)
Skenario 2
Epic : Posting ke twitter
Skenario 3
Epic : Melihat komentar dari masyarakat berdasarkan laporan
Gambar 4.86: Melihat komentar dari masyarakat berdasarkan la-poran
Skenario 4
Epic : Memberikan tanggapan pada keluhan(android)
Skenario 5
Epic : Menambahkan State laporan
Skenario 6
Epic : Melihat Notifikasi pengelola saat menerima laporan
Skenario 7
Epic : Menambahkan Dukungan dan melihat status(android)
Gambar 4.90: Menambahkan Dukungan dan melihat sta-tus(android)
Skenario 8
Epic : Memberikan komentar pada laporan (android)
4.5.10 Validasi
Proses validasi pada iterasi 1 dilakukan dengan metode wawanca-ra yakni langsung mendatangi Diskominfo Suwawanca-rabaya. Nawawanca-rasumber adalah bu novi selaku penanggung jawab mediacenter dan masfu selaku programmer dari diskominfo. Berikut ini adalah rekap dari hasil mentoring untuk validasi iterasi 1.
Tabel 4.8: Feedback validasi 2
No Komentar dan Saran 1 UI Sudah bagus
2 Kalau bisa diberikan fitur untuk memberikan level kepada user
3 User dapat mengganti profile picture dengan gambar-gambar lucu
4 Seharusnya aplikasi dapat dibuka melalui handphone
5 Seharusnya aplikasi dapat diberikan program untuk melakukan redeem poin