ix
DAFTAR ISI
TUGAS AKHIR ... ii
LEMBAR PENGESAHAN ... i
HALAMAN PERNYATAAN ORISINALITAS ... ii
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI ... iii
ABSTRAK ... iv
ABSTRACT ... v
MOTTO ... vi
LEMBAR PERSEMBAHAN ... vii
KATA PENGANTAR ... viii
DAFTAR ISI ... ix
DAFTAR TABEL ... xii
DAFTAR GAMBAR ... xiii
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 4
1.3 Tujuan Penelitian ... 4
1.4 Manfaat Penelitian ... 5
1.5 Batasan Masalah... 5
1.6 Sistematika Penelitian ... 5
BAB 2 LANDASAN TEORI ... 7
2.1 Tinjauan Pustaka ... 7
2.1.1 Prototype Aplikasi Solusi ... 7
2.1.2 Task Centered System Design (TCSD) ... 7
2.1.2.1 Identification ... 8
2.1.2.2 Requirement ... 8
2.1.2.3 Design Through Scenario ... 8
2.1.2.3.1 Figma ... 8
2.1.2.3.2 Flutter ... 8
2.1.2.4 Evaluation ... 8
2.1.3 Populasi dan Sampel ... 9
x
2.1.4 Purposive Sampling ... 9
2.1.5 Heuristic Usability ... 9
2.1.6 System Usbility Scale (SUS) ... 11
2.2 Tinjauan Studi ... 12
BAB 3 METODOLOGI PENELITIAN ... 14
3.1 Alur Penelitian ... 14
3.1.1 Identifikasi... 14
3.1.2 Analisis Kebutuhan Pengguna ... 15
3.1.2.1 Analisis Kebutuhan ... 16
3.1.2.2 Usecase Diagram ... 16
3.1.3 Skenario Desain ... 16
3.1.3.1 Prototype ... 17
3.1.3.2 Frontend... 17
3.1.4 Evaluasi ... 17
3.1.4.1 Pengujian Tahap 1 Heuristic Usability ... 18
3.1.4.2 Perbaikan Desain ... 24
3.1.4.3 Pengujian Tahap 2 ... 24
3.1.5 Sampel Responden ... 24
3.1.6 User Testing ... 25
3.2 Kesimpulan ... 27
BAB 4 HASIL IMPLEMENTASI DAN PENGUJIAN ... 28
4.1 Identifikasi... 28
4.1.1 Pengumpulan Kebutuhan ... 28
4.2 Analisis Kebutuhan ... 37
4.2.1 Gambaran Proyek ... 37
4.2.2 Dasar Proyek ... 38
4.2.3 Dampak Bisnis ... 40
4.2.4 Kebutuhan Fungsional ... 41
4.2.5 Usecase Diagram ... 46
4.3 Skenario Desain ... 47
4.3.1 Prototype High Fidelity... 47
4.3.2 Prototype Aplikasi Pengguna Pelanggan ... 48
4.3.2.1 Fitur Login ... 48
4.3.2.2 Fitur Beranda ... 50
xi
4.3.2.3 Fitur Proyek ... 57
4.3.2.4 Fitur Pesan ... 57
4.3.2.5 Fitur Profil... 57
4.3.3 Prototype Aplikasi Customer Service ... 59
4.3.3.1 Fitur Login ... 59
4.3.3.2 Fitur Beranda ... 61
4.3.3.3 Fitur Pesan ... 66
4.3.3.4 Fitur Profil... 67
1.3 Frontend Aplikasi ... 68
4.4 Evaluasi ... 68
4.4.1 Pengujian Tahap 1 Metode Heuristik Usability ... 68
4.4.2 Evaluasi Desain ... 71
4.4.3 Pengujian Tahap 2 Metode Heuristik Usability ... 77
4.4.4 Pengujian Metode System Usability Scale (SUS) ... 80
4.4.5 Hasil Pengujian Metode System Usability Scale (SUS) ... 82
4.4.6 Analisis Hasil Pengujian Usability ... 83
BAB 5 KESIMPULAN DAN SARAN ... 85
5.1 Kesimpulan ... 85
5.2 Saran ... 86
DAFTAR PUSTAKA ... 87
LAMPIRAN ... 91
xii
DAFTAR TABEL
Tabel 2. 1 Prinsip-Prinsip Heuristik ... 10
Tabel 2. 2 Tinjauan Studi Penelitian ... 13
Tabel 3. 1 Profil Evaluator ... 19
Tabel 3. 2 Form Pertanyaan dan Penilain Heuristik Usability ... 20
Tabel 3. 3 Pembobotan Nilai Pengujian Heuristik ... 23
Tabel 4. 1 Hasil Wawancara Stakeholder Pertama ... 29
Tabel 4. 2 Hasil Wawancara Stakeholder Kedua ... 35
Tabel 4. 3 Spesifikasi Kebutuhan Fungsional ... 41
Tabel 4. 4 Hasil Pengujian Tahap 1 Heuristik Usability ... 69
Tabel 4. 5 Evaluasi Desain ... 71
Tabel 4. 6 Hasil Penilaian Kedua Heuristik Usability ... 78
Tabel 4. 7 Responden Pengujian System Usabiluty Scale ... 81
Tabel 4. 8 Hasil Nilai Pengujian Tampilan Antarmuka Aplikasi ... 82
xiii
DAFTAR GAMBAR
Gambar 3. 1 Alur Penelitian ... 14
Gambar 3. 2 Proses tahap identifikasi ... 15
Gambar 3. 3 Proses pada tahap Requirement ... 16
Gambar 3. 4 Proses pada tahap desain ... 17
Gambar 3. 5 Alur Pengujian Metode Heurisrik ... 18
Gambar 3. 6 Alur Pengujian System Usability Scale ... 26
Gambar 3. 7 Penentuan hasil penilaian (Bangor, Kortum, & Miller, 2009) ... 27
Gambar 4. 1 Usecase Diagram Aktor Pelanggan ... 46
Gambar 4. 2 Usecase Diagram Aktor Admin ... 47
Gambar 4. 3 Desain SplashScreen ... 48
Gambar 4. 4 Desain Halaman Login ... 48
Gambar 4. 5 Desain Validasi Login ... 48
Gambar 4. 6 Halaman Validasi Login (2) ... 48
Gambar 4. 7 Desain Halaman Registrasi ... 49
Gambar 4. 8 Desain halaman Validasi Registrasi ... 49
Gambar 4. 9 Desain Halaman Validasi Registrasi (2) ... 49
Gambar 4. 10 Desain Halaman Lupa kata sandi ... 49
Gambar 4. 11 Desain Halaman Alert Cek Email ... 49
Gambar 4. 12 Desain Halaman Beranda ... 50
Gambar 4. 13 Desain Halaman List Proyek ... 50
Gambar 4. 14 Desain Detail Proyek ... 50
Gambar 4. 15 Desain Layanan Membangun ... 50
Gambar 4. 16 Desain Form Membangun Toko ... 50
Gambar 4. 17 Desain Form Membangun Rumah ... 50
Gambar 4. 18 Desain Form Membangun Ruko ... 51
Gambar 4. 19 Desain Form Membangun Kost ... 51
Gambar 4. 20 Desain Form Membangun Kantor ... 51
Gambar 4. 21 Desain Form Membangun Taman ... 51
Gambar 4. 22 Desain Validasi Form Membangun ... 51
Gambar 4. 23 Desain Pop Up Sukses Membangun ... 51
xiv
Gambar 4. 24 Desain layanan Renovasi ... 52
Gambar 4. 25 Desain Form Renovasi Kantor ... 52
Gambar 4. 26 Desain Form Renovasi Toko ... 52
Gambar 4. 27 Desain Form Renovasi Taman ... 52
Gambar 4. 28 Desain Form Renovasi Ruumah ... 52
Gambar 4. 29 Desain Form Renovasi Ruko ... 52
Gambar 4. 30 Desain Form Renovasi Kost ... 53
Gambar 4. 31 Desain Validasi Form Renovasi ... 53
Gambar 4. 32 Desain Pop Up Form Renovasi ... 53
Gambar 4. 33 Desain layanan desain ... 53
Gambar 4. 34 Desain Form Renovasi Toko ... 53
Gambar 4. 35 Desain Form Mendesain Rumah ... 53
Gambar 4. 36 Desain Form Mendesain Ruko ... 54
Gambar 4. 37 Desain Form Mendesain Taman ... 54
Gambar 4. 38 Desain Form Mendesain Kantor ... 54
Gambar 4. 39 Desain Form Mendesain Kost ... 54
Gambar 4. 40 Desain Validasi Form Mendesain ... 54
Gambar 4. 41 Desain Pop Up Sukse Mendesain ... 54
Gambar 4. 42 Desain List Mitra Perusahaan ... 55
Gambar 4. 43 Desain Detail Mitra Perusahaan ... 55
Gambar 4. 44 Desain List Iklan ... 55
Gambar 4. 45 Desain Detail Iklan ... 55
Gambar 4. 46 Desain Form Buat Iklan ... 55
Gambar 4. 47 Desain Validasi Form Buat Iklan ... 56
Gambar 4. 48 Desain Pop Up Sukses Buat Iklan ... 56
Gambar 4. 49 Desain FAQ ... 56
Gambar 4. 50 Desain FAQ (2) ... 56
Gambar 4. 51 Detail Fitur Proyek ... 57
Gambar 4. 52 Desain List Proyek ... 57
Gambar 4. 53 Desain Detail Proyek ... 57
Gambar 4. 54 Desain Fitur Pesan ... 57
Gambar 4. 55 Desain Halaman Pesan ... 57
xv
Gambar 4. 56 Desain Halaman Profil ... 58
Gambar 4. 57 Desain halaman Edit Profil ... 58
Gambar 4. 58 Desain Sidebar Profil ... 58
Gambar 4. 59 Desain Sidebar Kontak CS ... 58
Gambar 4. 60 Desain Sidebar Tim Marketing ... 58
Gambar 4. 61 Desain Sidebar Profil perusahaan ... 58
Gambar 4. 62 Desain Sidebar tentang aplikasi ... 59
Gambar 4. 63 Desain Sidebar bagikan aplikasi ... 59
Gambar 4. 64 Desain Iklan saya ... 59
Gambar 4. 65 Desain Iklan saya (hapus) ... 59
Gambar 4. 66 Desain Alert Keluar ... 59
Gambar 4. 67 Desain Splashscreen ... 60
Gambar 4. 68 Desain Login Admin ... 60
Gambar 4. 69 Desain Validasi Login Admin ... 60
Gambar 4. 70 Desain Validasi Login Admin (2) ... 60
Gambar 4. 71 Desain Lupa Kata sandi Admin ... 61
Gambar 4. 72 Desain Alert Cek Email ... 61
Gambar 4. 73 Desain Beranda Admin ... 61
Gambar 4. 74 Desain List Kontraktor ... 62
Gambar 4. 75 Desain Detail Kontraktor ... 62
Gambar 4. 76 Desain Alert Hapus Kontraktor ... 62
Gambar 4. 77 Desain List Desainer ... 62
Gambar 4. 78 Desain List Arsitek ... 63
Gambar 4. 79 Desain Daftar Pengajuan Proyek ... 63
Gambar 4. 80 Desain Detail Proyek ... 63
Gambar 4. 81 Desain Detail Proyek (2) ... 63
Gambar 4. 82 Desain Proyek Terverifikasi ... 64
Gambar 4. 83 Desain Detail Proyek Terverifikasi ... 64
Gambar 4. 84 Desain Detail Proyek Terverifikasi (2) ... 64
Gambar 4. 85 Desain Detail Proyek Sudah Terverifikasi ... 64
Gambar 4. 86 Desain List Proyek Tersurvei ... 65
Gambar 4. 87 Desain Detail Proyek Tersurvei ... 65
xvi
Gambar 4. 88 Desain Detail Proyek Tersurvei (2) ... 65
Gambar 4. 89 Desain List Proyek Terlaksana ... 65
Gambar 4. 90 Desain Detail Proyek Terlaksana ... 65
Gambar 4. 91 Desain List Proyek Selesai ... 66
Gambar 4. 92 Desain Detail Proyek Selesai ... 66
Gambar 4. 93 Desain Detail Proyek Selesai (2) ... 66
Gambar 4. 94 Desain Fitur Pesan ... 66
Gambar 4. 95 Desain List Pesan ... 66
Gambar 4. 96 Desain Detail Pesan ... 66
Gambar 4. 97 Desain Fitur Profil ... 67
Gambar 4. 98 Desain Fitur Edit Admin ... 67
Gambar 4. 99 Desain Sidebbar Profil ... 67
Gambar 4. 100 Desain Form Registrasi Admin ... 67
Gambar 4. 101 Desain List Admin... 67
Gambar 4. 102 Desain List tim Marketing ... 67
Gambar 4. 103 Desain Profil Perusahaan ... 68
Gambar 4. 104 Desain Tentang Aplikasi ... 68
Gambar 4. 105 Desain Alert Keluar ... 68
Gambar 4. 106 Perbaikan halaman edit ... 73
Gambar 4. 107 Perbaikan Warna List Proyek (1) ... 74
Gambar 4. 108 Perbaikan Warna List Proyek (2) ... 74
Gambar 4. 109 Perbaikan Warna List Riwayat Proyek ... 74
Gambar 4. 110 Perbaikan Warna pada Tentang aplikasi ... 75
Gambar 4. 111 Perbaikan Warna Pop up Sukses (1) ... 75
Gambar 4. 112 Perbaikan Warna Pop up Sukses (2) ... 75
Gambar 4. 113 Perbaikan Warna Pop up Sukses (3) ... 75
Gambar 4. 114 Perbaikan Warna pada Beranda ... 76
Gambar 4. 115 Perbaikan Fitur Pesan ... 76
