commit cb3f7569fdd0f337bc917a11393e0fa9c66e832e Author: Erlynaberlian Date: Fri Jul 11 20:27:42 2025 +0700 Upload files to "Laporan TA atau Skripsi" diff --git a/Laporan TA atau Skripsi/Skripsi_Erlyna Berlian Prastiti_E41211399.pdf b/Laporan TA atau Skripsi/Skripsi_Erlyna Berlian Prastiti_E41211399.pdf new file mode 100644 index 0000000..5aca622 --- /dev/null +++ b/Laporan TA atau Skripsi/Skripsi_Erlyna Berlian Prastiti_E41211399.pdf @@ -0,0 +1,5178 @@ + IMPLEMENTASI METODE DESIGN THINKING DALAM + PERANCANGAN ULANG UI/UX PADA PENGECEKAN +ONGKIR DAN LACAK PAKET APLIKASI SICEPAT EXPRESS + + HALAMAN SAMPUL + + SKRIPSI + + oleh + Erlyna Berlian Prastiti + + NIM E41211399 + + PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2025 + + i + IMPLEMENTASI METODE DESIGN THINKING DALAM + PERANCANGAN ULANG UI/UX PADA PENGECEKAN +ONGKIR DAN LACAK PAKET APLIKASI SICEPAT EXPRESS + + HALAMAN JUDUL + + SKRIPSI + + Sebagai salah satu syarat untuk memperoleh gelar Sarjana Sains Terapan + Komputer (S. Tr. Kom) di Program Studi Diluar Kampus Utama (PSDKU) + + Teknik Informatika Kab. Nganjuk + Jurusan Teknologi Informasi + + oleh + Erlyna Berlian Prastiti + + NIM E41211399 + + PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2025 + + ii + MOTO + “Allah tidak akan membebani sesorang melainkan sesuai dengan + + kesanggupannya.” + (QS. Al-Baqarah 2: 286) +“Dan janganlah kamu merasa lemah dan jangan (pula) bersedih hati, sebab kamu + paling tinggi (derajatnya), jika kamu orang yang beriman.” + (QS. Al-Insyirah 3: 139) + “Sesungguhnya setelah kesulitan itu pasti ada kemudahan.” + (QS. Al-Insyirah 94: 6) + “Kamu boleh menangis, kamu boleh teriak, tapi tidak untuk menyerah.” + + (Jeon Jungkook) + + vi + PERSEMBAHAN + + Dengan mengucapkan “Alhamdulillah hirabbil 'alamin” sebagai bentuk rasa +syukur kepada Allah SWT, serta dengan kerendahan hati saya ucapkan terima kasih +kepada semua pihak yang terlibat. Skripsi saya yang berjudul “Implementasi +Metode Design Thinking dalam Perancangan Ulang UI/UX pada Pengecekan +Ongkir dan Lacak Paket Aplikasi SiCepat Express” Saya persembahkan kepada: + 1. Allah SWT yang telah melimpahkan rahmat, taufik serta kelancaran dalam + + setiap langkah yang saya tempuh + 2. Kedua orang tua saya tercinta Bapak Eko dan Ibu Yulin, serta saudara + + kandung dan nenek yang selalu mendampingi saya serta memberikan doa, + kasih sayang, dan dukungan yang tiada henti baik moral maupun material + 3. Dosen pembimbing saya Ibu Dr. Khomsatun Ni'mah, S.Pd., M.Pd., yang + telah memberikan dukungan, bimbingan, masukan dan saran serta motivasi + dalam penyusunan skripsi ini + 4. Teman teman terdekat saya (Endiening, Enggar, dan Nila) yang selalu + membantu, menemani, memberikan semangat dan saling mendukung + dalam penyusunan skripsi + 5. Diri saya sendiri Erlyna Berlian Prastiti, sebagai bentuk pencapaian dan + bukti bahwa usaha tidak mengkhianati hasil, terima kasih atas kerja keras, + doa dan telah bertahan hingga sejauh ini dan tidak menyerah + 6. Seseorang yang selalu membuat saya semangat menyelesaikan skripsi ini, + Jeon Jungkook. Terima kasih selalu menjadi motivasi dan penyemangat + saya dalam menyelesaikan skripsi + 7. Seluruh pihak yang telah turut membantu dan berkontribusi dalam segala + aspek terutaman pada kelancaran penyusunan skripsi ini + + vii + Implementasi Metode Design Thinking dalam Perancangan Ulang UI/UX + pada Pengecekan Ongkir dan Lacak Paket Aplikasi SiCepat Express + Dibimbing oleh Dr. Khomsatun Ni’mah S.Pd., M.Pd. + + Erlyna Berlian Prastiti + Program Studi Teknik Informatika + + Jurusan Teknologi Informasi + + ABSTRAK + +Penelitian ini dilatarbelakangi oleh data observasi dari ulasan Play Store pada +aplikasi SiCepat Express dengan rating 1,3. Aplikasi SiCepat Express membantu +pengguna untuk mengecek biaya pengiriman dan melacak paket. Namun, +berdasarkan observasi dari ulasan tersebut, ditemukan keluhan mengenai +pengalaman pengguna dalam menggunakan aplikasi SiCepat Express, antara lain +tampilan kontras warna kurang, tampilan tidak update, dan fitur belum terintegrasi +dengan baik. Penelitian ini bertujuan untuk mendesain ulang aplikasi SiCepat +Express dengan menggunakan metode Design Thinking. Metode ini terdiri dari lima +tahap, yaitu Empathize, Define, Ideate, Prototype, dan Test. Pengumpulan data +dilakukan dengan menggunakan analisis ulasan dan penyebaran kuesioner kepada +pengguna. Berdasarkan analisis tersebut, pengguna menginginkan tampilan yang +sederhana dan mudah dioperasikan serta pengalaman pengguna yang intuitif. +Prototype baru tersebut kemudian di uji kepada responden melalui pengujian +usability menggunakan maze yang menghasilkan skor sebesar 85 dan Pengujian +A/B menggunakan kuesioner SUS yang menunjukkan adanya peningkatan skor +pada desain baru, dimana desain lama memiliki skor sebesar 45 sedangkan desain +baru memiliki skor sebesar 81. Perancangan ulang UI/UX pada aplikasi SiCepat +Express menggunakan metode design thinking menghasilkan peningkatan pada +user interface dan user experience + +Kata Kunci: aplikasi SiCepat Express, desain ulang, design thinking, user +experience, user interface + + viii + Implementation of Design Thinking Method in Redesigning UI/UX on + Shipping Cost Checking and Package Tracking Application SiCepat Express + + Supervised by Dr. Khomsatun Ni’mah S.Pd., M.Pd. + + Erlyna Berlian Prastiti + Study Program of Informatics Engineering + + Major of Information Technology + + ABSTRACT + +This research is motivated by observation data from Play Store reviews on the +SiCepat Express application with a rating of 1.3. The SiCepat Express application +helps users to check shipping costs and track packages. However, based on +observations from these reviews, complaints were found regarding user experience +in using the SiCepat Express application, including the lack of color display, the +display is not updated, and the features are not well integrated. This study aims to +redesign the SiCepat Express application using the Design Thinking method. This +method consists of five stages, namely Empathize, Define, Ideate, Prototype, and +Test. The data was collected using analysis of reviews and distribution of +questionnaires to users. Based on this analysis, users want a simple and easy-to- +operate display and an intuitive user experience. The new prototype was then tested +on respondents through usability testing using a maze which produced a score of +85 and A/B Testing using the SUS questionnaire which showed an increase in the +score on the new design, where the old design had a score of 45 while the new +design had a score of 81. The redesign of the UI/UX on the SiCepat Express +application using the design thinking method resulted in improvements in the +appearance of the interface and user experience. + +Keywords: design thinking, redesign, SiCepat Express Application, user +experience, user interface + + ix + RINGKASAN + +Implementasi Metode Design Thinking dalam Perancangan Ulang UI/UX pada +Pengecekan Ongkir dan Lacak Paket Aplikasi SiCepat Express, Erlyna Berlian +Prastiti, NIM. E41211399, Tahun 2025, 221 hlm., Teknologi Informasi, Politeknik +Negeri Jember PSDKU Nganjuk, Dr. Khomsatun Ni’mah S.Pd., M.Pd. (Dosen +Pembimbing). + + SiCepat Express merupakan perusahaan ekspedisi berdiri pada tahun 2014 +yang membantu memudahkan masyarakat dengan memberikan pelayanan dalam +segi pengantaran barang dan juga pengiriman barang dengan mudah yang dapat +dilakukan dimanapun melalui aplikasi SiCepat Express. Aplikasi SiCepat Express +ini memiliki rating 1,3 pada Play Store. Pada aplikasi ini terdapat fitur untuk +melakukan pengecekan ongkir dan pelacakan paket yang dapat membantu +pengguna mengetahui harga dan lokasi paketnya. Namun, konsumen merasa kurang +puas dengan desain aplikasi pengecekan ongkos kirim dan pelacakan paket yang +ditawarkan oleh SiCepat Ekspress. Berdasarkan observasi dari ulasan tersebut +ditemukan adaya keluhan terkait pengalaman pengguna dalam menggunakan +aplikasi SiCepat Express antara lain tampilan warna yang kurang, tampilan tidak di +update, dan fitur tidak terintegrasi dengan baik. Sehingga pada penelitian ini +dilakukan redesign pada aplikasi SiCepat Express menggunakan metode Design +Thinking. + + Metode ini terdiri dari lima tahapan yaitu Empathize, Define, Ideate, +Prototype, dan Test. Adapun data dikumpulkan menggunakan analisis pada ulasan +dan penyebaran kuesioner kepada pengguna. Prototype baru kemudian diuji kepada +responden melalui usability testing dengan menggunakan maze yang menghasilkan +skor 85 dan A/B Testing dengan menggunakan kuesioner SUS yang menunjukkan +peningkatan skor pada desain baru, yang mana pada desain lama memiliki skor 45 +sedangkan desain yang baru memiliki skor 81. Perancangan ulang UI/UX pada +aplikasi SiCepat Express menggunakan metode design thinking memberikan hasil +berupa peningkatan pada tampilan antarmuka dan pengalaman pengguna. + + x + PRAKATA + + Puji syukur penulis panjatkan ke hadirat Allah Swt. atas berkat rahmat dan +karunia-Nya sehingga penulisan skripsi yang berjudul “Implementasi Metode +Design Thinking dalam Perancangan Ulang UI/UX pada Pengecekan Ongkir dan +Lacak Paket Aplikasi SiCepat Express” dapat terselesaikan dengan tepat waktu. + + Tulisan ini merupakan laporan dari hasul penelitian yang dilakukan mulai +bulan Desember 2024 sampai dengan 23 Mei 2025 di Jurusan Teknologi Informasi +Politeknik Negeri Jember. Penelitian ini sebagai salah satu syarat untuk +mendapatkan gelar Sarjana Sains Terapan (S.Tr.Kom) di Program Studi Teknik +Informatika, Jurusan Teknologi Informasi. + + Pada kesempatan ini penulis ingin menyampaikan penghargaan dan ucapan +terima kasih yang sebesar besarnya kepada: +1. Bapak Syaiful Anwar, S.Tp. M.P., selaku Direktur Politeknik Negeri Jember. +2. Bapak Hendra Yufit Riskiawan, S.Kom. M.Cs., selaku Ketua Jurusan + + Teknologi Informasi. +3. Ibu Ulfa Emi Rahmawati, S.Kom, M.Kom., selaku Ketua Program Studi + + Teknik Informatika Kampus 3 Kabupaten Nganjuk. +4. Ibu Dr. Khomsatun Ni’mah S.Pd., M.Pd., selaku dosen Pembimbing. +5. Rekan-rekan dan semua pihak yang telah membantu dalam penelitian dan + + penulisan laporan ini. + Penulis menyadari bahwa laporan karya tulis ini masih jauh dari kata + +sempurna, oleh karena itu kritik dan saran yang membangun dari berbagai pihak +sangat diharapkan untuk menghasilkan perbaikan yang lebih baik. Akhir kata, +Semoga tulisan ini dapat memberikan manfaat dan wawasan yang lebih luas bagi +pembaca. + + Nganjuk, 5 Juni 2025 + + Erlyna Berlian Prastiti + + xi + DAFTAR ISI + + Halaman +HALAMAN SAMPUL ................................................................................................ i +HALAMAN JUDUL................................................................................................... ii +HALAMAN PENGESAHAN ................................................................................... iii +SURAT PERNYATAAN ............................................................................................ iv +SURAT PERNYATAAN PUBLIKASI ...................................................................... v +MOTO ......................................................................................................................... vi +PERSEMBAHAN ..................................................................................................... vii +ABSTRAK................................................................................................................ viii +ABSTRACT.................................................................................................................. ix +RINGKASAN .............................................................................................................. x +PRAKATA .................................................................................................................. xi +DAFTAR ISI.............................................................................................................. xii +DAFTAR TABEL ..................................................................................................... xvi +DAFTAR GAMBAR............................................................................................... xvii +DAFTAR LAMPIRAN ..........................................................................................xxiii +BAB 1. PENDAHULUAN ......................................................................................... 1 + + 1.1 Latar Belakang ............................................................................................ 1 + 1.2 Rumusan Masalah....................................................................................... 4 + 1.3 Tujuan.......................................................................................................... 4 + 1.4 Manfaat........................................................................................................ 4 + + 1.4.1 Bagi Peneliti............................................................................................ 4 + 1.4.2 Bagi SiCepat Express ............................................................................. 4 + + xii + 1.4.3 Bagi Politeknik Negeri Jember.............................................................. 5 +BAB 2. TINJAUAN PUSTAKA ................................................................................ 6 + + 2.1 State of the Art............................................................................................. 6 + 2.2 Profil PT SiCepat Express........................................................................ 10 + 2.3 Populasi dan Sampel..................................................................................11 + 2.4 Aplikasi Mobile......................................................................................... 12 + 2.5 Aplikasi SiCepat Express ......................................................................... 13 + 2.6 UI (User Interface) ................................................................................... 14 + 2.7 UX (User Experience).............................................................................. 15 + 2.8 Figma ......................................................................................................... 18 + 2.9 Evaluasi Heuristik..................................................................................... 19 + 2.10 Design Thinking ........................................................................................ 21 + + 2.10.1 Empathize.......................................................................................... 21 + 2.10.2 Define ................................................................................................ 22 + 2.10.3 Ideate................................................................................................. 23 + 2.10.4 Prototype........................................................................................... 23 + 2.10.5 Test..................................................................................................... 24 + 2.11 A/B Testing................................................................................................ 24 + 2.12 SUS (System Usability Scale) .................................................................. 25 + 2.13 Usability Testing ....................................................................................... 27 +BAB 3. METODE PENELITIAN ............................................................................ 29 + 3.1 Waktu dan Tempat Pelaksanaan............................................................... 29 + 3.2 Alat dan Bahan.......................................................................................... 29 + 3.2.1 Alat ........................................................................................................ 29 + 3.2.2 Bahan..................................................................................................... 30 + + xiii + 3.3 Metode Penelitian ..................................................................................... 30 + 3.4 Tahap Penelitian........................................................................................ 31 + + 3.4.1 Identifikasi Masalah ............................................................................. 32 + 3.4.2 Perumusan Masalah.............................................................................. 32 + 3.4.3 Metode Pengumpulan Data.................................................................. 32 + 3.4.4 Metode Design Thinking ...................................................................... 33 + 3.4.5 Evaluasi Hasil Pengujian ..................................................................... 35 + 3.5 Pelaksanaan Penelitian ............................................................................. 35 +BAB 4. HASIL DAN PEMBAHASAN .................................................................. 36 + 4.1 Identifikasi Masalah ................................................................................. 36 + 4.2 Perumusan Masalah .................................................................................. 36 + 4.3 Pengumpulan Data.................................................................................... 37 + 4.3.1 Observasi............................................................................................... 37 + 4.3.2 Kuesioner .............................................................................................. 38 + 4.4 Metode Design Thinking .......................................................................... 38 + 4.4.1 Tahap Empathize................................................................................... 39 + 4.4.2 Tahap Define ......................................................................................... 49 + 4.4.3 Tahap Ideate.......................................................................................... 57 + 4.4.4 Prototype ............................................................................................... 80 + 4.4.5 Testing ................................................................................................. 140 + 4.5 Evaluasi Hasil Pengujian........................................................................ 175 + 4.5.1 Pada pengujian menggunakan Maze ................................................. 175 + 4.5.2 Pengujian A/B ..................................................................................... 176 +BAB 5. KESIMPULAN DAN SARAN ................................................................ 177 + 5.1 Kesimpulan ............................................................................................. 177 + + xiv + 5.2 Saran ........................................................................................................ 177 +DAFTAR PUSTAKA .............................................................................................. 178 +LAMPIRAN ............................................................................................................ 187 + + xv + DAFTAR TABEL + + Halaman +Tabel 2. 1 Tabel State of the Art ................................................................................. 6 +Tabel 2. 2 Perbandingan Rating Ekspedisi ...............................................................11 +Tabel 2. 3 Pertanyaan Kuesioner SUS ..................................................................... 25 +Tabel 2. 4 Skor Jawaban Kuesioner ......................................................................... 26 +Tabel 2. 5 SUS Score................................................................................................. 27 +Tabel 3. 1 Pelaksanaan Penelitian ............................................................................ 35 +Tabel 4. 1 Permasalahan pada Ulasan Aplikasi ....................................................... 36 +Tabel 4. 2 Penjelasan Pain Points ............................................................................ 52 +Tabel 4. 3 Penjelasan How Might We ....................................................................... 53 +Tabel 4. 4 Task dan Skenario Maze........................................................................ 140 +Tabel 4. 5 Perbadingan Desain A dan B................................................................. 162 +Tabel 4. 6 Hasil Skor Awal Desain A (Sebelum) ................................................... 169 +Tabel 4. 7 Hasil Skor Desain A Perhitungan SUS ................................................. 170 +Tabel 4. 8 Hasil Setelah Penjumlahan Skor pada Desain A.................................. 171 +Tabel 4. 9 Hasil Skor Awal Desain B (Sesudah) ................................................... 172 +Tabel 4. 10 Hasil Skor Desain B Perhitungan SUS............................................... 173 +Tabel 4. 11 Hasil Setelah Penjumlahan Skor pada Desain B................................ 174 + + xvi + DAFTAR GAMBAR + + Halaman +Gambar 2. 1 Design Thinking (Fauziah Surya Inayatun, 2023) ............................. 21 +Gambar 3. 1 Tahap Penelitian (modifikasi dari Febri, 2019) ................................. 31 +Gambar 4. 1 Jumlah Pengguna, Ulasan pada Playstore .......................................... 38 +Gambar 4. 2 Data Pekerjaan Responden.................................................................. 41 +Gambar 4. 3 Data Keseringan Responden Menggunakan Aplikasi ....................... 41 +Gambar 4. 4 Data Kemudahan Responden.............................................................. 42 +Gambar 4. 5 Data Kejelasan Informasi Pelacakan Paket........................................ 43 +Gambar 4. 6 Data Keakurat Informasi Pelacakan Paket......................................... 43 +Gambar 4. 7 Data Tampilan Aplikasi ....................................................................... 44 +Gambar 4. 8 Data Kemudahan Teks dan Ikon ......................................................... 44 +Gambar 4. 9 Data Kenyamanan Warna dan Tata Letak .......................................... 45 +Gambar 4. 10 Data Keseringan Fitur Cek Ongkir................................................... 45 +Gambar 4. 11 Data Kemudahan Ongkir................................................................... 46 +Gambar 4. 12 Data Kejelasan Informasi Ongkir ..................................................... 47 +Gambar 4. 13 Data Kendala Utama Penggunaan Aplikasi ..................................... 47 +Gambar 4. 14 Data Saran Peningkatan Fitur ........................................................... 48 +Gambar 4.15a Pain Point.......................................................................................... 49 +Gambar 4.15b Pain Point ......................................................................................... 50 +Gambar 4.15c Pain Point.......................................................................................... 50 +Gambar 4.15d Pain Point ......................................................................................... 51 +Gambar 4.15e Pain Point.......................................................................................... 51 +Gambar 4.15f Pain Point .......................................................................................... 51 +Gambar 4.16a How Might We.................................................................................. 53 +Gambar 4.16b How Might We.................................................................................. 53 +Gambar 4. 17 User Persona ..................................................................................... 55 +Gambar 4. 18 User Journey Map ............................................................................. 56 +Gambar 4.19a Solution Idea ..................................................................................... 57 + + xvii + Gambar 4.19b Solution Idea..................................................................................... 57 +Gambar 4.19c Solution Idea ..................................................................................... 58 +Gambar 4.19d Solution Idea..................................................................................... 58 +Gambar 4. 20 User Flow Masuk, Lupa Sandi, dan Daftar ..................................... 60 +Gambar 4. 21 User Flow Pusat Bantuan.................................................................. 62 +Gambar 4. 22 User Flow Lacak Paket .................................................................... 63 +Gambar 4. 23 User Flow Cek Ongkir, Pick Up, Drop Off, dan Layanan ............. 65 +Gambar 4. 24 User Flow Gerai Terdekat................................................................ 66 +Gambar 4. 25 User Flow Berita .............................................................................. 67 +Gambar 4. 26 User Flow Menu Paket..................................................................... 68 +Gambar 4. 27 User Flow Menu Pembayaran ......................................................... 69 +Gambar 4. 28 User Flow Edit Profil ....................................................................... 70 +Gambar 4. 29 User Flow Draft................................................................................ 72 +Gambar 4. 30 User Flow Daftar Kontak................................................................. 73 +Gambar 4. 31 User Flow Alamat Saya ................................................................... 74 +Gambar 4. 32 User Flow Notifikasi........................................................................ 75 +Gambar 4. 33 User Flow Tagihan Kurang Bayar................................................... 76 +Gambar 4. 34 User Flow Syarat dan Ketentuan..................................................... 77 +Gambar 4. 35 User Flow Kebijakan Privasi ........................................................... 78 +Gambar 4. 36 User Flow Ubah Kata Sandi, Hapus Akun dan Keluar .................. 79 +Gambar 4. 37 Design System.................................................................................... 80 +Gambar 4. 38 Low Fidelity Splash Screen............................................................... 83 +Gambar 4. 39 Low Fidelity Masuk........................................................................... 83 +Gambar 4. 40 Low Fidelity Lupa Sandi ................................................................... 84 +Gambar 4. 41 Low Fidelity Kode Verifikasi ............................................................ 84 +Gambar 4. 42 Low Fidelity Atur Ulang Sandi ......................................................... 85 +Gambar 4. 43 Low Fidelity Daftar ........................................................................... 85 +Gambar 4. 44 Low Fidelity Beranda ........................................................................ 86 +Gambar 4. 45 Low Fidelity Pusat Bantuan .............................................................. 87 +Gambar 4. 46 Low Fidelity FAQ .............................................................................. 87 +Gambar 4. 47 Low Fidelity Lacak Paket.................................................................. 88 + + xviii + Gambar 4. 48 Low Fidelity Cek Ongkir................................................................... 89 +Gambar 4. 49 Low Fidelity Pick Up (Pengirim)...................................................... 89 +Gambar 4. 50 Low Fidelity Pick Up (Penerima) ..................................................... 90 +Gambar 4. 51 Low Fidelity Pick Up (Paket)............................................................ 90 +Gambar 4. 52 Low Fidelity Detail Pick Up ............................................................. 91 +Gambar 4. 53 Low Fidelity Voucher ........................................................................ 92 +Gambar 4. 54 Low Fidelity Drop Off (Pengirim) .................................................... 92 +Gambar 4. 55 Low Fidelity Drop Off (Penerima).................................................... 93 +Gambar 4. 56 Low Fidelity Drop Off (Paket) .......................................................... 93 +Gambar 4. 57 Low Fidelity Detail Drop Off ............................................................ 94 +Gambar 4. 58 Low Fidelity Gerai Terdekat ............................................................. 95 +Gambar 4. 59 Low Fidelity Berita ............................................................................ 95 +Gambar 4. 60 Low Fidelity Detail Berita................................................................. 96 +Gambar 4. 61 Low Fidelity Layanan........................................................................ 96 +Gambar 4. 62 Low Fidelity Menu Paket (Pengirim) ............................................... 97 +Gambar 4. 63 Low Fidelity Menu Paket (Penerima)............................................... 97 +Gambar 4. 64 Low Fidelity Menu Profil .................................................................. 98 +Gambar 4. 65 Low Fidelity Pengaturan Akun ......................................................... 98 +Gambar 4. 66 Low Fidelity Ubah Kata Sandi.......................................................... 99 +Gambar 4. 67 Low Fidelity Tagihan Kurang Bayar ................................................ 99 +Gambar 4. 68 Low Fidelity Daftar Kontak ............................................................ 100 +Gambar 4. 69 Low Fidelity Tambah Kontak.......................................................... 100 +Gambar 4. 70 Low Fidelity Alamat Saya ............................................................... 101 +Gambar 4. 71 Low Fidelity Tambah Alamat.......................................................... 101 +Gambar 4. 72 Low Fidelity Syarat dan Ketentuan ................................................ 102 +Gambar 4. 73 Low Fidelity Kebijakan Privasi ...................................................... 102 +Gambar 4. 74 High Fidelity Splash Screen............................................................ 103 +Gambar 4. 75 High Fidelity Masuk........................................................................ 104 +Gambar 4. 76 High Fidelity Lupa Sandi ................................................................ 105 +Gambar 4. 77 High Fidelity Kode Verifikasi......................................................... 105 +Gambar 4. 78 High Fidelity Atur Ulang Sandi...................................................... 106 + + xix + Gambar 4. 79 High Fidelity Daftar ........................................................................ 107 +Gambar 4. 80 High Fidelity Beranda ..................................................................... 108 +Gambar 4. 81 High Fidelity Pusat Bantuan ........................................................... 108 +Gambar 4. 82 High Fidelity FAQ ........................................................................... 109 +Gambar 4. 83 High Fidelity Lacak Paket............................................................... 110 +Gambar 4. 84 High Fidelity Scan Kode Resi ........................................................ 110 +Gambar 4. 85 High Fidelity Lacak Paket................................................................111 +Gambar 4. 86 High Fidelity Cek Ongkir ................................................................111 +Gambar 4. 87 High Fidelity Estimasi Biaya .......................................................... 112 +Gambar 4. 88 High Fidelity Pick Up (Pengirim) .................................................. 113 +Gambar 4. 89 High Fidelity Provinsi, Kota, dan Kecamatan ............................... 113 +Gambar 4. 90 High Fidelity Pilih Alamat .............................................................. 114 +Gambar 4. 91 High Fidelity Pick Up (Penerima).................................................. 115 +Gambar 4. 92 High Fidelity Pick Up (Paket) ........................................................ 115 +Gambar 4. 93 High Fidelity Metode Pembayaran................................................. 116 +Gambar 4. 94 High Fidelity Detail Pick Up .......................................................... 117 +Gambar 4. 95 High Fidelity Voucher ..................................................................... 117 +Gambar 4. 96 High Fidelity FAQ poin................................................................... 118 +Gambar 4. 97 High Fidelity Drop Off (Pengirim)................................................. 119 +Gambar 4. 98 High Fidelity Drop Off (Penerima) ................................................ 119 +Gambar 4. 99 High Fidelity Drop Off (Paket)....................................................... 120 +Gambar 4. 100 High Fidelity Detail Drop Off....................................................... 121 +Gambar 4. 101 High Fidelity Gerai Terdekat ........................................................ 121 +Gambar 4. 102 High Fidelity Berita....................................................................... 122 +Gambar 4. 103 High Fidelity Detail Berita............................................................ 123 +Gambar 4. 104 High Fidelity Layanan................................................................... 123 +Gambar 4. 105 High Fidelity Detail Layanan ....................................................... 124 +Gambar 4. 106 High Fidelity Menu Paket (Pengirim) .......................................... 125 +Gambar 4. 107 High Fidelity Menu Paket (Penerima) ......................................... 125 +Gambar 4. 108 High Fidelity Menu Pembayaran (Pick Up) ................................ 126 +Gambar 4. 109 High Fidelity Detail Pick Up ........................................................ 127 + + xx + Gambar 4. 110 High Fidelity Menu Pembayaran (Drop Off) ............................... 127 +Gambar 4. 111 High Fidelity Detail Drop Off ....................................................... 128 +Gambar 4. 112 High Fidelity Profil........................................................................ 129 +Gambar 4. 113 High Fidelity Ubah Profil.............................................................. 129 +Gambar 4. 114 High Fidelity Pengaturan Akun .................................................... 130 +Gambar 4. 115 High Fidelity Ubah Kata Sandi..................................................... 131 +Gambar 4. 116 High Fidelity Notifikasi Keluar .................................................... 131 +Gambar 4. 117 High Fidelity Hapus Akun ............................................................ 132 +Gambar 4. 118 High Fidelity Draft (Pick Up)....................................................... 133 +Gambar 4. 119 High Fidelity Draft (Drop Off) ..................................................... 133 +Gambar 4. 120 High Fidelity Notifikasi ................................................................ 134 +Gambar 4. 121 High Fidelity Tagihan Kurang Bayar ........................................... 135 +Gambar 4. 122 High Fidelity Daftar Kontak ......................................................... 135 +Gambar 4. 123 High Fidelity Tambah Kontak ...................................................... 136 +Gambar 4. 124 High Fidelity Opsi Daftar Kontak ................................................ 137 +Gambar 4. 125 High Fidelity Alamat Saya............................................................ 137 +Gambar 4. 126 High Fidelity Tambah Alamat....................................................... 138 +Gambar 4. 127 High Fidelity Opsi Daftar Alamat ................................................ 138 +Gambar 4. 128 High Fidelity Syarat dan Ketentuan ............................................. 139 +Gambar 4. 129 High Fidelity Kebijakan Privasi ................................................... 139 +Gambar 4. 130 Pengujian Maze Masuk - Beranda................................................ 146 +Gambar 4. 131 Pengujian Maze Beranda - Pusat Bantuan ................................... 147 +Gambar 4. 132 Pengujian Maze Beranda - Layanan............................................. 148 +Gambar 4. 133 Pengujian Maze Beranda - Berita................................................. 148 +Gambar 4. 134 Pengujian Maze Beranda - Lacak Paket ...................................... 149 +Gambar 4. 135 Pengujian Maze Beranda - Pick Up (Pengirim) .......................... 150 +Gambar 4. 136 Pengujian Maze Beranda – Pick Up (Penerima) ......................... 151 +Gambar 4. 137 Pengujian Maze Beranda - Pick Up (Paket) ................................ 152 +Gambar 4. 138 Pengujian Maze Beranda – Drop Off (Pengirim) ........................ 153 +Gambar 4. 139 Pengujian Maze Beranda - Drop Off (Penerima) ........................ 154 +Gambar 4. 140 Pengujian Maze Beranda - Drop Off (Paket) ............................... 155 + + xxi + Gambar 4. 141 Pengujian Maze Paket (Pengirim) ................................................ 155 +Gambar 4. 142 Pengujian Maze Paket (Penerima) ............................................... 156 +Gambar 4. 143 Pengujian Maze Pembayaran (Pick Up) ...................................... 157 +Gambar 4. 144 Pengujian Maze Pembayaran (Drop Off)..................................... 157 +Gambar 4. 145 Pengujian Maze Profil - Ubah Profil ............................................ 158 +Gambar 4. 146 Pengujian Maze Profil - Pengaturan Akun................................... 159 +Gambar 4. 147 Pengujian Maze profil – Daftar Kontak ....................................... 160 +Gambar 4. 148 Pengujian Maze Profil – Alamat Saya ......................................... 161 +Gambar 4. 149 Skor Pengujian Maze .................................................................... 161 + + xxii + DAFTAR LAMPIRAN + Halaman + +Lampiran 1 Surat Izin Penelitian ............................................................................ 187 +Lampiran 2 Observasi Kantor SiCepat Ekspress .................................................. 188 +Lampiran 3 Ulasan Pengguna Play Store .............................................................. 189 +Lampiran 4a Lembar Validasi Kuesioner Awal ..................................................... 190 +Lampiran 4b Lembar Validasi Kuesioner Awal ..................................................... 194 +Lampiran 5 Pertanyaan Kuesioner Awal................................................................ 197 +Lampiran 6 Link Figjam Pain Point, How Might We, User Persona, User Journey +Map, Solution Idea .................................................................................................. 197 +Lampiran 7 Link User Flow.................................................................................... 197 +Lampiran 8 Kuesioner Pengujian A/B ................................................................... 198 +Lampiran 9 Link Skor Kuesioner A/B ................................................................... 198 + + xxiii + BAB 1. PENDAHULUAN + +1.1 Latar Belakang + Seiring berjalannya waktu, teknologi saat ini menjadi bagian yang tidak dapat + +terpisahkan bagi manusia. Pesatnya pengembangan teknologi informasi, +memungkinkan diterapkannya produksi, distribusi dan konsumsi barang dan jasa +lebih efisien. Pada era informasi saat ini, jarak geografis tidak lagi menjadi faktor +penentu dalam hubungan antara masyarakat dan lembaga usaha (Anshori, 2020) + + Adanya teknologi dapat membawa pengaruh dalam setiap kegiatan dan +aktivitas manusia dalam sehari-hari, salah satunya dalam pengembangan bisnis +pada penyedia jasa pengiriman barang. Penyedia jasa pengiriman bersaing untuk +memberikan pelayanan terbaik kepada pelanggan. Layanan yang diberikan oleh +perusahaan pengiriman bervariasi, ada yang menawarkan pengiriman ke luar kota +di Indonesia dan berbagai negara di dunia, dan ada juga yang hanya mengrim ke +tujuan-tujuan tertentu (Jamaludin dkk, 2023). + + Jasa pengiriman barang ini sangat dibutuhkan oleh semua orang dalam +melakukan pengiriman barang dengan jangkauan wilayah yang luas. Adanya jasa +pengiriman ini memberikan dampak positif bagi Masyarakat. Jasa pengiriman dapat +membantu masyarakat dalam melakukan pengiriman berupa barang pribadi +maupun barang barang untuk keperluan bisnis salah satunya melalui SiCepat +Express. + + SiCepat Express merupakan perusahaan ekspedisi yang didirikan pada tahun +2014 yang mengklaim bahwa barang yang dikirim akan sampai dengan waktu yang +cepat. Berbasis sistem teknologi terkini, SiCepat Express memiliki cabang dan +gerai yang terbesar di seluruh kota di Indonesia (Wulansari dkk, 2021). SiCepat +Express juga memudahkan masyarakat dengan memberikan pelayanan dalam segi +pengantaran barang dan juga pengiriman barang dengan mudah yang dapat +dilakukan dimanapun melalui aplikasi SiCepat Express. + + Aplikasi SiCepat Express ini juga menyediakan fitur untuk melakukan +pengecekan ongkir dan pelacakan paket yang dapat membantu pengguna +mengetahui harga dan lokasi paketnya. Pengecekan ongkos kirim digunakan untuk + + 1 + 2 + +mempermudah pelanggan dalam memeriksa ongkos kirim. Informasi mengenai +ongkos kirim dapat disediakan oleh situs E-Commerce yang bekerja sama dengan +jasa ekspedisi. (Aditya Firmansyah Putra and Arwani, 2021), sedangkan menurut +(Apridonal M and Muhazir, 2023), Pelacakan Paket merupakan suatu teknologi +yang digunakan untuk mengetahui posisi, pergerakan, atau lokasi suatu paket +dengan menggunakan perangkat. Tujuan utama pelacakan paket adalah untuk +mengumpulkan data yang akurat tentang lokasi suatu paket dalam waktu nyata. + + SiCepat Express memberikan pelayanan yang memudahkan pengguna. +Namun, konsumen merasa kurang puas dengan desain aplikasi pengecekan ongkos +kirim dan pelacakan paket yang ditawarkan oleh Sicepat Ekspress. Menurut +(Kristianto and Yuono, 2023), desain termasuk dalam pemikiran kreatif manusia +yang digunakan sebagai sarana komunikasi. + + Desain UI harus dibuat rapi dan membuat pengguna tertarik untuk +menggunakan fitur-fitur tersebut. Selain desain UI, desain UX juga sangat penting +karena fokus dari UX sendiri adalah user sebagai pusat dari berhasil atau tidaknya +rancangan desain yang dibuat. Perancangan UX harus dilakukan karena digunakan +untuk mengukur seberapa baik pandangan user terhadap suatu fitur, serta seberapa +mudah user dapat menggunakan fitur tersebut (Reynaldi and Setiyawati, 2022). +Menurut (Nugroho and Sari, 2023) UI/UX pada aplikasi mempunyai pengaruh +terhadap keberhasilan suatu sistem. + + Berdasarkan hasil observasi per tanggal 5 Maret 2024 di Google Playstore, +aplikasi SiCepat Express memiliki 100 ribu pengguna, dan 7 ribu ulasan dengan +rating 1.3. Mengacu pada observasi tersebut, pengguna dalam menggunakan +aplikasi SiCepat Express mengeluhkan salah satunya terkait tampilan warna yang +kurang, tampilan tidak di update, dan fitur tidak terintegrasi dengan baik seperti +tertera pada lampiran 2. + + Mengacu pada hal tersebut di atas, peneliti akan melakukan perancangan +desain ulang UI/UX pada aplikasi SiCepat Express untuk menghasilkan sebuah +aplikasi yang nyaman dan mudah digunakan oleh para pengguna. Menurut (Salsabil +dkk, 2023), perancangan ulang adalah proses melakukan perubahan reformatif dari +model lama ke bentuk bentuk model yang baru untuk mencapai tujuan yang + 3 + +mengarah pada kemajuan. Konsep redesign didasarkan pada pengulangan dan +desain, yang berarti mendesain ulang suatu merek atau produk untuk tujuan +tertentu. Redesign adalah kegiatan mengubah ataupun merancang kembali UI/UX +dengan tujuan tertentu yang mempengaruhi kemajuan. + + UI dan UX singkatan dari User Interface dan User Experience yang +merupakan tampilan visual dari suatu aplikasi. UI/UX yang baik akan membantu +meningkatkan kepuasan pengguna terhadap aplikasi, oleh karena itu dilakukan +perancangan ulang UI/UX pada aplikasi SiCepat Express untuk memberikan +pengalaman yang terbaik. Adapun metode yang dapat digunakan dalam merancang +UI/UX antara lain UCD (User Centered Design), Lean UX, HCD (Human Centered +Design), ACD (Activity Centered Design), The Wheel, dan Design Thinking. Namun +pada penelitian ini, menggunakan metode Design Thinking. Design thinking adalah +metode kolaborasi yang mengumpulkan banyak ide dari disiplin ilmu untuk +memperoleh solusi. Metode ini memiliki lima tahap atau proses untuk memperoleh +hasil yang inovatif (Gani, Arum Puspita and Tripiawan, 2021). + + Metode Design Thinking ini dipilih karena dapat membantu mendefinisikan +kembali masalah yang dialami pengguna, menciptakan banyak ide dalam +brainstorming, menggunakan prototipe dan pengujian untuk mengetahui +kekurangan dari suatu rancangan. Design Thinking sangat berguna untuk mengatasi +masalah yang tidak jelas atau tidak diketahui (Saputra and Kania, 2022). Selain itu, +metode Design Thinking ini digunakan untuk mengetahui kebutuhan dan +permasalahan pengguna saat menggunakan aplikasi SiCepat Express dan +menyelesaikannya dengan solusi yang diberikan yaitu bentuk desain antarmuka dan +interaksi. + + Design Thinking memiliki lima tahapan yaitu Emphatize, Define, Ideate, +Prototype dan Test. Emphatize (empati) digunakan untuk memahami suatu masalah +yang terjadi, Define (mendefinisikan) merupakan gambaran dari masalah, Ideate +(menghasilkan ide-ide) digunakan untuk menyelesaikan masalah yang +didefinisikan sebelumnya, Prototype (membuat prototipe) digunakan untuk +mewujudukan ide atau memecahkan masalah yang diberikan, dan Test (pengujian) +dengan menggunakan Usability Testing menggunakan Maze untuk memberikan + 4 + +umpan balik terhadap prototipe yang dirancang dan juga A/B Testing yang +membandingkan desain lama dengan desain yang baru menggunakan kuesioner +dengan menggunakan System Usability Scale (SUS) (Albert dkk, 2021). Hasil dari +perancangan ulang ini berupa tampilan UI/UX baru pada aplikasi SiCepat Express +pengecekan ongkir dan pelacakan paket yang mudah digunakan dengan skor testing +pada A/B testing 81 sehingga mengalami peningkatan pada desain baru. + +1.2 Rumusan Masalah + Mengacu pada latar belakang di atas, rumusan masalah pada penelitian ini + +adalah Bagaimana implementasi Metode Design Thinking dalam perancangan +ulang UI/UX pada aplikasi SiCepat Express yang dapat meningkatkan desain +antarmuka dan pengalaman pengguna dengan menggunakan pengujian maze dan +kuesioner A/B testing? + +1.3 Tujuan + Berdasarkan rumusan masalah di atas, maka tujuan dari penelitian ini adalah + +untuk mendeskripsikan implementasi metode Design Thinking pada rancangan +ulang UI/UX pada aplikasi SiCepat Express agar meningkatkan desain antarmuka +dan pengalaman pengguna. + +1.4 Manfaat + Adapun Manfaat dari penelitian ini antara lain: + +1.4.1 Bagi Peneliti + a. Menganalisis permasalahan dan kebutuhan pengguna serta merancang ulang + UI/UX pada aplikasi SiCepat Express dengan menggunakan Design + Thinking. + b. Menambah keterampilan dan wawasan mengenai pembuatan desain + antarmuka pada aplikasi SiCepat Express. + +1.4.2 Bagi SiCepat Express + a. Memberikan solusi dari hasil penelitian berupa perancangan ulang tampilan + pada aplikasi SiCepat Express Pengecekan Ongkir dan Pelacakan Paket. + 5 + + b. Menghasilkan tampilan baru dari aplikasi SiCepat Express yang sesuai + dengan kebutuhan pengguna untuk meningkatkan pengalaman pengguna. + +1.4.3 Bagi Politeknik Negeri Jember + a. Sebagai pengembangan ilmu pengetahuan bagi mahasiswa Teknik + Informatika + b. Sebagai referensi pada penelitian berikutnya pada bidang desain khususnya + mahasiswa/mahasiswi Politeknik Negeri jember Program Studi Teknik + Informatika. + BAB 2. TINJAUAN PUSTAKA + +2.1 State of the Art + State of the Art merupakan penelitian pendahulu yang memiliki fungsi untuk + +menganalisa dan memperkaya pembahasan penelitian, serta membedakannya +dengan penelitian yang sedang dilakukan. State of the Art adalah kumpulan jurnal +yang dapat digunakan sebagai referensi dalam penelitian. State of the art juga +memberikan penjelasan mengenai perbedaan antara penelitian terdahulu dengan +penelitian yang akan dilakukan (Jeka dkk, 2023). Adapun State of the Art adalah +seperti pada Tabel 2.1 + +Tabel 2. 1 Tabel State of the Art + +No Judul Peneliti, Tahun Hasil Penelitian + + Tahun + +1 Evaluasi Usability Doni Abdul 2020 Penelitian ini tidak dilakukan + hingga tahap User Experience, + dan Perbaikan Fatah sehingga tidak diketahui respon + pengguna ketika menggunakan + Desain Aplikasi aplikasi + + Mobile 2022 Aplikasi Yulibu.com masih + memiliki sistem yang belum + Menggunakan sederhana, masih banyak fitur + yang terlalu kompleks dan + Usability Testing berpotensi besar membuat + pengguna tidak nyaman + dengan Pendekatan + + Human Centered + + Design (HCD) + +2 Redesain Website Al-Mu’taz + + Marketplace Billah, dkk. + + Yulibu.com untuk + + Meningkatkan + + User Experience + + Pengguna + + Menggunakan + + Metode Lean UX + + 6 + 7 + +No Judul Peneliti, Tahun Hasil Penelitian + + Tahun + +3 Pendekatan Migunani 2022 Hasil Pengujian awal memiliki + + Metode User- Puspita grade F menjadi grade C. Selain + + Centered Design Eugenia, dkk itu perancangan ulang tidak + + dan System dilakukan untuk keseluruhan, + + Usability Scale sehingga pengguna tidak + + dalam Redesain menguji dan menilai keseluruhan + + dan Evaluasi mockup desain. + + Antarmuka + + Website + +4 Peningkatan In'am 2023 Hasil redesain masih belum + + Pengalaman Falahuddin, diterima dan memerlukan + + Pengguna melalui dkk. banyak perbaikan. Selain itu + + Redesain UI/UX responden merasa bingung, + + Aplikasi Cincau rumit, belum familiar dan + + Stasion memerlukan bantuan saat + + Menggunakan menggunakan aplikasi. + + Pendekatan Design + + Thinking + +5 Perancangan Avina Dwi 2024 Terdapat beberapa fitur dimana + + UI/UX Sistem Ratnasari, pengguna kurang puas, yang + + Monitoring dkk. mana pengguna mengalami + + Pengangkutan kesulitan terhadap fitur dan + + Sampah Berbasis merasa antarmuka perlu + + Activity Centered ditingkatkan untuk + + Design meningkatkan kenyamanan dan + + kecepatan pengguna + +6 Implementasi Erlyna Berlian 2025 Hasil perancangan ulang desain + + Metode Design Prastiti ini dilakukan pengujian dengan + + Thinking dalam melibatkan pengguna melalui + + Perancangan aplikasi maze pada usability + 8 + +No Judul Peneliti, Tahun Hasil Penelitian + + Tahun + + Ulang UI/UX pada testing untuk menjalankan + Pengecekan skenario pada aplikasi dan juga + Ongkir dan Lacak dilakukan penyebaran kuesioner + Paket Aplikasi untuk melakukan pengujian A/B + SiCepat Express dengan membandingkan desain + lama dan desain baru + + Berdasarkan tabel 2.1 State of the Art, pada penelitian dengan judul “Evaluasi +Usability dan Perbaikan Desain Aplikasi Mobile Menggunakan Usability Testing +dengan Pendekatan Human Centered Design” oleh (Fatah, 2020) memiliki +permasalahan yaitu masih kurangnya penataan letak isi dari dashboard yang mana +ditampilkan 4 baris statistik utama dalam info cuaca Indonesia. Pada masing masing +baris ini hanya dipisahkan dengan nuansa warna yang berbeda sehingga user +kesulitan fokus pada satu topik karena terkesan bercampur, selain itu pada fitur +pengaturan tampilan UI hanya ada set lokasi saja yang membuat pengguna +kesulitan. Oleh karena itu dilakukan redesain agar aplikasi ini dapat terlihat +sederhana dan tidak membingungkan. Hasil dari penelitian ini adalah tidak +dilakukan hingga tahap User Experience, sehingga tidak diketahui respon pengguna +terkait fungsionalitas saat menggunakan aplikasi. + + Pada penelitian dengan judul “Redesain Website Marketplace Yulibu.com +untuk Meningkatkan User Experience Pengguna Menggunakan Metode Lean UX” +oleh (Billah Arifin, Pramudya Putra Prasetya and Nirwana, 2022) memiliki tujuan +untuk menciptakan desain yang baru untuk aplikasi website Yulibo.com agar +meningkatnya user experience pengguna. Adapun redesain ini didasari oleh +permasalahan pada UI/UX website Yulibo.com. Hasil dari penelitian yaitu Aplikasi +Yulibu.com masih memiliki sistem yang belum sederhana, masih banyak fitur yang +terlalu kompleks dan berpotensi besar membuat pengguna tidak nyaman. + + Pada penelitian dengan judul “Pendekatan Metode User-Centered Design dan +System Usability Scale dalam Redesain dan Evaluasi Antarmuka Website” oleh + 9 + +(Puspita Eugenia et al., 2022), Peneliti ini ingin melakukan pembaharuan pada +tampilan antarmuka website sebagai rekomendasi rancangan website di masa +mendatang, Adapun pembaharuan tersebut yaitu website yang responsive dan user +friendly agar dapat menampilkan informasi yang lebih efektif, useful, nyaman dan +mudah digunakan di semua kalangan di setiap perangkat. Penelitian ini memiliki +tujuan yaitu mendapatkan website hasil redesain yang powerful dan memenuhi +kebutuhan pengguna. Adapun hasil dari penelitian ini yaitu perancangan ulang tidak +dilakukan untuk keseluruhan, sehingga pengguna tidak menguji dan menilai +keseluruhan mockup desain, dan hasil pengujian awal memiliki grade F kemudian +menjadi grade C. + + Pada penelitian dengan judul “Peningkatan Pengalaman Pengguna melalui +Redesain UI/UX Aplikasi Cincau Stasion Menggunakan Pendekatan Design +Thinking” dilakukan oleh (Falahuddin dkk, 2023). Metode yang digunakan dalam +penelitian ini adalah metode design thinking melalui tahap emphatize, define, +ideate, prototype, dan testing. Perancangan ulang ini dilakukan untuk memberikan +solusi terhadap masalah yaitu pada informasi setiap menu, fitur pembelian via +aplikasi baik pick up maupun delivery, serta fitur lokasi toko. Kesimpulan dari +penelitian ini adalah desain ulang UI/UX pada Aplikasi Cincau Stasion belum dapat +diterima dan diperlukan banyak perbaikan untuk mencapai keunggulan, selain itu +responden merasa bingung, rumit, belum familiar dan memerlukan bantuan saat +menggunakan aplikasi. + + Pada penelitian dengan judul “Perancangan UI/UX Sistem Monitoring +Pengangkutan Sampah Berbasis Activity Centered Design” oleh (Ratnasari et al., +2024), penelitian ini didasari oleh permasalahan armada truk yang sering terlambat +untuk menjemput sampah dari TPS ke TPA sehingga menyebabkan penumpukan +sampah di TPS, selain itu kurangannya armada truk juga menjadi masalah utama. +Oleh karena itu, untuk mengatasi permasalahan tersebut peneliti ini bertujuan untuk +merancang sistem yang dapat memonitoring pengangkutan sampah di setiap TPS +agar lebih terjadwal dan mempermudah pihak pemerintah dalam pelaporan jumlah +sampah yang terkumpul di TPS dengan penekanan pada desain UI/UX +menggunakan metode ACD. Hasil dari penelitian ini adalah terdapat beberapa fitur + 10 + +dimana pengguna kurang puas, yang mana pengguna mengalami kesulitan terhadap +fitur dan merasa antarmuka perlu ditingkatkan untuk meningkatkan kenyamanan +dan kecepatan pengguna. + + Berdasarkan penelitian terdahulu, pada penelitian ini peneliti akan melakukan +desain ulang UI/UX aplikasi SiCepat Express pada Pengecekan Ongkos Kirim dan +Pelacakan paket dengan menggunakan metode design thinking yang terdiri dari +lima tahapan yaitu: Empathize, Define, Ideate, Prototype, dan Testing. Penelitian +ini bertujuan untuk menghasilkan tampilan UI/UX yang baru pada aplikasi SiCepat +Express pengecekan ongkir dan pelacakan paket yang mudah digunakan. Adapun +penelitian ini dilakukan berdasarkan observasi ulasan pengguna di Google +Playstore pada saat menggunakan aplikasi tersebut serta dilakukan penyebaran +kuesioner. Hasil perancangan ulang desain ini dilakukan pengujian dengan +melibatkan pengguna melalui aplikasi maze pada usability testing untuk +menjalankan skenario pada aplikasi dan juga dilakukan penyebaran kuesioner untuk +melakukan pengujian A/B dengan membandingkan desain lama dan desain baru. + +2.2 Profil PT SiCepat Express + SiCepat Express adalah perusahaan ekspedisi yang berfokus pada solusi + +praktis e-commerce, market place dan toko online yang menawarkan layanan +kebutuhan pelaku bisnis online dengan sistem teknologi terkini. SiCepat Express +didirikan pada tahun 2014 oleh Rudy Darwin Swigo. Berdirinya perusahaan ini +diawali dengan Rudy Darwin yang tertarik untuk memulai bisnis sendiri, Ia +menemukan harapan dalam bisnis kargo terutama pengiriman barang elektronik +lainnya ke berbagai daerah (Nurlaela, 2022). + + Sering kali orang mengeluh saat pengiriman barang ke berbagai daerah. +Berdasarkan pengalaman yang terjadi, Ia memanfaatkan kesempatan tersebut untuk +membangun Sentral Cargo (SC) yang bertempat di ITC Roxy Mas, Jakarta. +Pembangunan SC berhasil meluas ke berbagai wilayah di Indonesia dengan 20 +cabang SC hasil kerja sama dan 11 cabang milik Rudy. SC ini tersebar di berbagai +Ibukota Provinsi dan memiliki 4 cabang di daerah Jakarta. Cakupan SC ini masih +terbilang kecil dibandingkan dengan perusahaan logistik lainnya. Namun Rudy + 11 + +mencari peluang dan manfaat yang dapat meningkatkan SC ini menjadi lebih baik +(Nurlaela, 2022). + + SC mengutamakan aspek kecepatan dan keamanan pengiriman, dan juga +berfokus pada pengiriman barang elektronik dan berbagai aksesorisnya. Setelah SC +terkenal sebagai jasa ekspedisi atau kargo yang handal dan cepat, Rudy mulai +membangun layanan baru dengan nama SiCepat Express yang memiliki target yaitu +toko Online. Perbedaan SC dengan SiCepat Express terletak pada ukuran +produknya, SC ditujukan untuk produk berukuran besar sedangkan SiCepat Express +dapat digunakan untuk pengiriman barang dalam jumlah kecil (Nurlaela, 2022). + + Penelitian ini menggunakan SiCepat Express karena memiliki rating yang +rendah dibandingkan ekspedisi lain. SiCepat Express merupakan perusahaan +ekspedisi yang menawarkan layanan kebutuhan berupa pengiriman barang antar +wilayah yang dibangun oleh Rudy Darwin Swigo pada tahun 2014. Ekspedisi ini +memiliki aplikasi untuk mengecek ongkos kirim dan melacak paket yang dapat +dilakukan dimanapun. Adapun ekspedisi lainnya yang memiliki peran seperti +SiCepat Express, antara lain J&T, JNE, Antaraja, dan Ninja Express. Rating +penilaian per tanggal 5 Maret 2024 seperti tabel 2.2. + +Tabel 2. 2 Perbandingan Rating Ekspedisi + +No Nama Ekspedisi Rating + 2.0 +1 J&T 1.5 + 1.3 +2 JNE 1.8 + 1.4 +3 SiCepat Express + +4 Antaraja + +5 Ninja Express + +2.3 Populasi dan Sampel + Populasi merujuk pada suatu kelompok yang memiliki karakteristik tertentu + +yang ingin diteliti. Populasi bisa terdiri dari individu, objek, kejadian, atau apapun +yang relevan dengan penelitian yang dilakukan (Asrulla, Jailani and Jeka, 2023). +Sedangkan menurut (Millah and Suryana, 2020), Populasi adalah wilayah + 12 + +generalisasi yang terdiri atas abyek atau subyek yang mempunyai kualitas dan +karakteristik tertentu yang ditetapkan oleh peneliti untuk dipelajari dan diambil +kesimpulannya. + + Menurut (Asrulla, Jailani and Jeka, 2023), Sampel adalah bagian dari +populasi atau wakil populasi yang diteliti dan diambil sebagai sumber data serta +dapat mewakili seluruh populasi, atau sampel adalah sebagian dari jumlah dan +karateristik yang dimiliki oleh populasi. Sedangkan menurut (Millah and Suryana, +2020), Sampel adalah bagian dari jumlah dan karakteristik yang dimiliki oleh +populasi tersebut. Adapun cara pengambilan sampel ini menggunakan rumus slovin +seperti berikut: + + = --------------------------------------------------2.1 + 1+()2 + +Keterangan: + = Jumlah target sampel + +N = Jumlah keseluruhan populasi + +e = Jumlah persen ketidaktelitian karena kesalahan pengambilan sampel yang dapat +ditolerir + +Berdasarkan data pada Play Store terkait aplikasi SiCepat Ekpress per tanggal 5 +Maret 2024, terdapat 100.000 yang mengunduh aplikasi. + +2.4 Aplikasi Mobile + Aplikasi adalah perangkat lunak yang dapat digunakan untuk memudahkan + +manusia dalam memecahkan masalah-masalah tertentu yang dihadapi user dengan +menggunakan sebuah komputer (Hari Utami, 2022). Salah satu jenis aplikasi yang +umum digunakan adalah Aplikasi Mobile yang dapat dijalankan pada perangkat +mobile seperti smartphone. Aplikasi Mobile merupakan aplikasi yang dapat +diunduh melalui situs tertentu seperti Google PlayStore. + 13 + + Menurut (Sari, Yani and Suryani, 2021), Aplikasi mobile terdiri dari dua kata, +yaitu aplikasi dan mobile. Secara istilah, aplikasi adalah program siap pakai yang +dibuat untuk menjalankan fungsi pengguna atau aplikasi lain, sedangkan mobile +adalah perpindahan dari satu tempat ke tempat yang lain. Secara lebih lengkap, +aplikasi mobile adalah program siap pakai yang menjalankan fungsi tertentu yang +dipasang pada perangkat mobile. + + Menurut (Darmawan, 2021), Aplikasi mobile adalah aplikasi yang dapat +digunakan dengan mudah walaupun pengguna berpindah dari satu tempat ketempat +lain tanpa terjadi pemutusan konektivitas atau terputusnya komunikasi. Perangkat +mobile memiliki karakteristik seperti ukuran kecil, memori kecil yaitu primary +(RAM) dan secondary (disk), daya pemrosesan terbatas dibandingkan desktop, +konsumsi daya rendah, dan dapat diandalkan. + + Aplikasi mobile merupakan perangkat lunak yang dirancang untuk +menjalankan fungsi tertentu yang ada pada perangkat mobile. Pada android, aplikasi +dapat diunduh melalui Google Playstore, sedangkan pada iOS dapat diunduh +melalui Apple Appstore. Aplikasi mobile memiliki beberapa fungsi salah satunya +adalah untuk layanan. Layanan tersebut dapat membantu memudahkan pengguna +sesuai dengan fungsi tertentu. Keungulan aplikasi mobile dapat digunakan dimana +saja sehingga membuat komunikasi terputus, selain itu aplikasi mobile juga +memiliki fungsional khusus dengan memanfaatkan fitur fitur yang ada. + +2.5 Aplikasi SiCepat Express + Aplikasi SiCepat Express pengecekan ongkir dan pelacakan paket merupakan + +aplikasi yang dapat digunakan untuk mengetahui biaya ongkos kirim dan +pemantauan pengiriman paket (Nurlaela, 2022). Rudy mengembangkan sistem IT +yang memungkinkan untuk mengawasi pengiriman paket yang dapat diunduh +melalui Google Playstore dan Appstore. Melalui aplikasi ini, pengguna dapat +memantau pengiriman paketnya menggunakan kode resi pengiriman, Selain itu +pengguna dapat mengetahui biaya ongkos kirim dengan menambahkan lokasi +penerima atau pengiriman. Namun, pada aplikasi pengecekan ongkir dan pelacakan +paket saat ini memiliki rating rendah pada aplikasi, dimana pengguna mengeluhkan + 14 + +terkait tampilan warna yang kurang, tampilan tidak di update, dan fitur tidak +terintegrasi dengan baik. + +2.6 UI (User Interface) + User Interface merupakan bagian dari UX (User Experience) yang + +merupakan representasi visual dari desain suatu sistem. Tampilan ini +memungkinkan pengguna untuk menghubungkan dan mengoperasikan produk. +User Interface tidak hanya sebagai penghubung, namun juga berfungsi untuk +memperindah tampilan yang meningkatkan kepuasan pengguna. User Interface di +rancang tidak hanya untuk keindahan, tetapi juga fokus pada kemudahan pengguna. +(Umiga, 2022). + + UI (User Interface) merupakan desain antarmuka berfokus pada keindahan +tampilan, seperti pemilihan warna yang sesuai dan tepat untuk membuat tampilan +menjadi lebih menarik. UI (User Interface) berfokus pada interaksi pengguna +melalui desain yang menarik. UI biasanya dibuat setelah UX (User Experience) +selesai dengan menentukan desain dari layout, logo, warna, typography, dan hal +lainnya. User Interface adalah apa yang terlihat selama pengoperasian suatu +program (Dafitri dkk, 2023). + + Beberapa elemen dalam User Interface seperti warna, tombol, ikon, tipografi, +tema, layout dan animasi. +a. Warna + + Warna melengkapi gambar dan mewakili suasana komunikasi. Warna juga +merupakan elemen yang sangat tajam untuk menyentuh pengelihatan, sehingga +dapat merangsang munculnya emosi (Kartika Virgantara et al., 2024) . +b. Ikon + + Ikon pada user interface harus mudah dipahami dan dibaca dalam berbagai +ukuran, dan proporsinya harus sesuai dengan grid yang sudah ditentukan (Anggita +et al., 2021). +c. Tipografi + + Tipografi adalah sebagai proses mendesain publikasi dengan menggunakan +huruf cetak. Oleh karena itu, mendesain bentuk huruf cetak dan menyusunnya + 15 + +dalam komposisi yang tepat dapat memperoleh efek tampilan yang diinginkan +(Muhyidin dkk, 2020). +d. Logo + + Logo merupakan suatu unsur grafis yang berupa ideogram, simbol, ikon atau +tanda yang digunakan sebagai lambang suatu brand. Logo adalah fitur paling +penting yang terlihat secara fisik dari sebuah brand (Bayu et al., 2021). +e. Tata Letak + + Tata letak komponen interface ditentukan oleh breakpoint system mengenai +ukuran margin, isi, dan jumlah kolom (Anggita et al., 2021). + + Peranan UI tidak bisa dianggap remeh di era digital saat ini, karena UI +merupakan tampilan sebuah produk yang dilihat oleh pengguna. Tampilan UI dapat +berupa warna, logo, tombol, ikon, tema, layout, animasi dan visual lainnya yang +ditampilkan pada produk. + +2.7 UX (User Experience) + UX (User Experience) adalah pengalaman pengguna pada proses interaksi + +dengan suatu aplikasi atau perangkat lunak untuk memberikan pengalaman +pengguna yang memuaskan. Pengalaman tersebut dapat dilihat dari kemudahan +pengguna dalam menggunakan produk tersebut. Serta, memiliki kemampuan untuk +memanfaatkan semua aspek, seperti fitur, desain, dan konten untuk membantu +pengguna mencapai tujuan saat berinteraksi dengan aplikasi. UX (User Experience) +yang baik juga didukung dengan antarmuka yang baik (Kridalukmana and Pertiwi +Windasari, 2023). + + UX (User Experience) adalah suatu desain yang memiliki tujuan untuk +meningkatkan kepuasan pengguna melalui kesenangan dan kegunaan interaksi +antara pengguna dengan produk. UX ini dirancang untuk membuat aplikasi yang +lebih mudah dan tidak membingungkan pengguna. UX dapat digambarkan sebagai +keseluruhan elemen termasuk susunan, struktur, dan navigasi yang memudahkan +perpindahan dari satu halaman ke halaman lainnya. User Experience adalah apa + 16 + +yang dirasakan oleh pengguna saat menggunakan suatu program (Dafitri dkk. +2023). + + User Experience mengacu pada pengalaman pengguna saat berinteraksi +dalam menggunakan aplikasi. Pengalaman ini dapat diukur dan diverifikasi dari +seberapa mudah pengguna menjalankan suatu aplikasi. User Experience yang baik +tidak membuat pengguna kesulitan dalam berinteraksi dan menggunakan sebuah +aplikasi (Sutanto, 2022). Adapun, komponen UX mencakup semua aspek +fungsional yang disediakan oleh produk, struktur desain, navigasi penggunaan +produk, aspek visual desain, dan interaksi dengan pengguna. + + Menurut (Yudarmawan dkk, 2020), dengan memahami komponen akan +membantu dalam mengimplementasikan desain UX dengan baik dan menciptakan +produk yang lebih baik dibandingkan produk lainnya. Terdapat enam komponen +penting yang perlu diketahui dalam user experience (UX) yaitu usability, +interaction design, visual design, information architecture, content strategy, dan + +user research. Adapun menurut (Yudarmawan et al., 2020b), komponen UX seperti + +berikut: +a. Usability + + Usability adalah hal pertama yang harus dipertimbangkan. Usability memiliki +tujuan untuk mengetahui sejauh mana pengguna dapat menggunakan suatu apikasi +untuk mencapai tujuan tertentu dan juga kepuasan pengguna pada saat +menggunakan aplikasi. +b. Interaction Design + + Interaction design merupakan desain interaksi antara pengguna dengan +aplikasi. Interaction Design memiliki tujuan utama yaitu untuk memudahkan +pengguna mengakses aplikasi tanpa kebingungan atau kesulitan. +c. Visual Design + + Fokus komponen ini adalah pada berbagai elemen tampilan visual mulai dari +garis, rupa, pilihan warna, tekstur visual, tipografi, hingga bentuk tampilan animasi. +Setiap elemen harus memberikan pengalaman yang menyenangkan ketika +pengguna berinteraksi dengan aplikasi. +d. Information architecture + 17 + + Information architecture adalah struktur informasi dalam suatu produk yang +membantu memudahkan pengguna untuk memahaminya. Information architecture +memudahkan pengguna ketika mengakses dan mendapatkan hasil maksimal dari +aplikasi. +e. Content Strategy + + Fokus content strategy terletak pada perencanaan, pembuatan, penerapan, dan +pengelolaan aplikasi. Content strategy memiliki tujuan untuk menciptakan konten +yang bermakna dan menarik. +f. User Research + + User research adalah tindakan wawancara dengan pengguna atau calon +pengguna suatu aplikasi untuk menentukan serangkaian tujuan. User research dapat +membantu menemukan kelemahan dalam aplikasi sebelum akhirnya diluncurkan. + + Pengembangan desain aplikasi mobile yang user friendly, perlu +menggunakan strategi desain UX yang efektif. Berikut beberapa langkah penting +yang harus diambil dalam proses pengembangan menurut (Santoso, 2023): +a. Penelitian Pengguna: Digunakan untuk memahami siapa pengguna dari + + aplikasi, apa tujuan mereka, dan tantangan apa yang mereka hadapi. + Penelitian pengguna ini meliputi wawancara, survei, dan analisis perilaku + pengguna yang ada. +b. Persona Pengguna: Digunakan untuk memahami siapa pengguna yang akan + menggunakan aplikasi. Persona ini mencakup karakteristik demografi, + preferensi, dan masalah yang terkait dengan pengguna. +c. Prototipe: Pembuatan prototipe interaktif pada suatu aplikasi adalah cara + untuk menguji konsep desain sebelum mengembangkan aplikasi yang + sebenarnya. Selain itu, prototipe digunakan untuk mendapatkan umpan balik + awal dari pengguna dan membuat perubahan yang diperlukan. +d. Desain Responsif: Aplikasi harus dirancang untuk beradaptasi dengan + perangkat, ukuran layar, dan orientasi yang beragam. Desain yang responsif + adalah aspek penting dari UX yang baik. + 18 + +e. Konsistensi Desain: Kunci utama dari konsistensi desain adalah konsistensi + tata letak, warna, dan elemen desain lainnya. Pengguna harus merasakan + aplikasi yang konsisten dalam semua aspeknya. + +f. Navigasi yang Intuitif: Navigasi pada suatu aplikasi harus mudah dipahami + dan intuitif. Pengguna dapat dengan cepat menemukan apa yang mereka cari + tanpa merasa bingung. + +g. Pengujian Pengguna: Menguji aplikasi dengan pengguna yang sebenarnya + merupakan langkah yang penting dalam memvalidasi desain UX. Pengujian + pengguna dapat membantu mengidentifikasi potensi masalah dan + memastikan kenyamanan pengguna saat menggunakannya. + +h. Iterasi Desain: Pengembang harus bersedia melakukan iterasi dan + memperbaiki desain aplikasi berdasarkan hasil pengujian pengguna. Proses + ini harus berkelanjutan selama pengembangan + +i. Optimisasi Kinerja: Aplikasi harus dirancang agar bisa berjalan dengan cepat + dan responsif. Waktu muat yang lama dan respon yang buruk merupakan + masalah kinerja yang dapat mempengaruhi pengalaman pengguna. + +j. Pemantauan Penggunaan: Setelah aplikasi diluncurkan, penting untuk + melakukan pemantauan pada penggunaan. Hal ini dapat memberikan + wawasan yang bermanfaat tentang bagaimana pengguna berinteraksi dengan + aplikasi dan memungkinkan adanya perbaikan. + +2.8 Figma + Figma adalah aplikasi desain yang berbasis cloud dan alat pembuatan + +prototyping untuk proyek digital. Figma dirancang untuk memudahkan +penggunanya berkolaborasi dalam proyek dan bekerja dalam bentuk tim di mana +saja. Figma membantu berkolaborasi dengan memberi komentar, saran, bahkan +perubahan rencana desain yang ada secara bersamaan, sehingga dapat menghemat +waktu untuk melakukan verifikasi desain (Pramudita dkk, 2021). + + Figma adalah salah satu alat desain yang digunakan untuk membuat tampilan +aplikasi baik mobile, desktop, website dan lain-lain. Figma dapat digunakan pada +sistem operasi Windows, Linux ataupun Mac dengan koneksi internet. Keunggulan + 19 + +dari Figma yaitu memungkinkan banyak orang untuk bekerja sama pada tugas yang +sama meskipun berada di lokasi yang berbeda. Keunggulan yang dimiliki oleh +Figma, menjadikan Figma dipilih oleh desainer UI/UX untuk membuat prototype +aplikasi karena kemampuan yang dimiliki tersebut (Al-Faruq dkk, 2022). + + Figma merupakan aplikasi yang digunakan untuk membuat tampilan aplikasi +yang dapat digunakan oleh banyak orang berkolaborasi dalam mengerjakan +pekerjaan yang ada dan dapat dilakukan dimanapun tanpa harus berasa di lokasi +yang sama. + +2.9 Evaluasi Heuristik + Pendekatan heuristik ini berdasarkan pada pemilihan strategi yang mungkin + +menghasilkan solusi yang baik dalam jangka waktu yang terbatas, namun tidak ada +jaminan bahwa solusi tersebut optimal. Metode heuristik mengabaikan pemrosesan +atau analisis menyeluruh dan sistematis yang diperlukan untuk metode yang +akurat.Sebaliknya, pendekatan heuristik mencari solusi yang "cukup baik" atau +"cukup memadai" dalam konteks masalah tertentu. Metode heuristik ini +dikembangkan oleh Jacob Nielsen dan Rolf Molich dan telah menjadi salah satu +alat evaluasi yang paling banyak digunakan dalam bidang desain interaksi manusia +dan komputer (Rosiana dkk 2023). + + Metode heuristik mengacu pada pendekatan atau teknik yang digunakan +untuk memecahkan masalah berdasarkan pengalaman, pengetahuan terbatas, atau +penilaian aturan praktis. Metode heuristik digunakan ketika solusi yang lengkap +tidak memungkinkan dicapai dalam waktu yang wajar. (Bahariyani et al., 2020) +menyatakan terdapat 10 aturan heuristik untuk usability yang dikemukakan oleh +Nielsen untuk evaluasi, Adapun menurut (Rosiana dkk, 2023) aturan heuristik +tersebut sebagai berikut: +a. Visibility of system status (Visibilitas status sistem) + + Sistem harus menginformasikan dengan jelas kepada pengguna mengenai apa +yang terjadi dalam bentuk umpan balik yang sesuai. +b. Match between system and the real world (Kesesuaian antara sistem dan + + dunia nyata) + 20 + + Membantu pengguna agar dapat memahami dan menggunakan sistem, +konsep yang digunakan pada antarmuka harus konsisten dan akrab dengan dunia +nyata pengguna. +c. User control and freedom (Kebebasan dan kontrol pengguna) + + Pengguna harus berinteraksi dengan sistem dan memiliki kendali penuh atas +sistem dengan kemampuan untuk membatalkan atau menghentikan tindakan yang +tidak diinginkan. +d. Consistency and standards (Konsisten dan standar) + + Tampilan antarmuka pengguna harus konsisten dan sesuai dengan standar +desain secara umum, sehingga pengguna dapat memahami dan mengingat cara +menggunakan elemen antarmuka. +e. Error prevention (Pencegahan kesalahan) + + Sistem dirancang dengan cermat untuk menghindari kesalahan dengan +memberikan konfirmasi sebelum mengambil tindakan. +f. Recognition rather than recall (Pengenalan daripada mengingat) + + Antarmuka dirancang untuk membantu pengguna mengenali elemen dan +pilihan tanpa harus mengingat setiap informasi. Misalnya penggunaan ikon dapat +membantu dalam pengenalan. +g. Flexibility and efficiency of use (Fleksibilitas dan efisiensi) + + Pengguna dapat mengatur sistem dan menyesuaikan dengan tindakan yang +sering mereka lakukan. +h. Aesthetic and minimalist design (Estetika dan desain minimalis) + + Desain antarmuka harus memiliki keindahan yang baik dan menghindari +tampilan yang buruk. +i. Help users recognize, diagnose, and recover from errors (Membantu + + pengguna mengenali, mendiagnosis, dan meyelesaikan kesalahan) + Ketika terjadi kesalahan, sistem harus memberikan pesan yang jelas, +deksriptif dan sederhana untuk mengatasi kesalahan tersebut. +j. Help and documentation (Bantuan pengguna dan dokumentasi) + 21 + + Tampilan harus memberikan bantuan dan dokumentasi yang mudah +ditemukan atau diakses oleh pengguna. Bantuan ini harus jelas dan relevan dengan +tugas pengguna dengan memberikan instruksi atau langkah langkah. + +2.10 Design Thinking + Design Thinking merupakan metode kolaborasi yang mengumpulkan banyak + +ide dari disiplin ilmu untuk mendapatkan solusi. Design thinking tidak hanya +berfokus pada apa yang dapat dilihat dan dirasakan, tetapi juga pada pengalaman +pengguna. Design thinking digunakan untuk mencari solusi yang paling efektif dan +efisien untuk memecahkan masalah yang kompleks (Sari dkk, 2020). Adapun +design thinking ini dipilih karena dapat membantu mendorong ide-ide inovatif +selama peneliti berada pada fase inspirasi, ideasi, dan implementasi. Proses metode +ini juga dapat dilakukan pengulangan yang memungkinkan siklus berulang ketika +mengembangkan ide-ide baru dan mengeksplorasi solusi baru hingga solusi dan +desain yang sesuai tercapai. Design thinking terdiri dari lima tahapan yaitu: +Empathize, Define, Ideate, Prototype, dan Testing. Tahapan dari Design Thinking +dapat dilihat pada Gambar 2.1. + + Gambar 2. 1 Design Thinking (Fauziah Surya Inayatun, 2023) +2.10.1 Empathize + + Tahap empathize (empati) memiliki tujuan untuk memahami kebutuhan +konsumen. Fokus pada tahap ini adalah pengumpulan data untuk memahami + 22 + +kebutuhan pengguna melalui wawancara, observasi, tanya jawab dan survei. Tujuan +utama dari tahap ini adalah untuk mengidentifikasi secara menyeluruh terkait +masalah yang dihadapi pengguna dan memahami keinginan dan kebutuhan mereka +untuk mengarahkan desain dan pengembangan sistem di masa depan (Nursamsiatun +and Ismail, 2024). Pada tahapan Empathize ini menggunakan teknik observasi. +Menurut (Supriadi, Sani and Putra Setiawan, 2020), Observasi adalah pengumpulan +data yang dilakukan dengan melalui pengamatan dengan menggunakan pencatatan +yang sistematis, pengamatan dilakukan dengan cara ikut serta dalam proses +perolehan data. + +2.10.2 Define + Pada tahap Define, dilakukan analisis dan memahami hasil yang telah + +dilakukan pada proses Emphatize. Tujuannya adalah untuk menentukan +permasalahan sebagai point of view atau perhatian utama pada penelitian (Sari dkk, +2020). Pada Define menggunakan Affinity Diagram, Pain Point, How Might We, +User Persona, dan User Journey Map. Adapun (Nabil dkk, 2024) menjelaskan +mengenai Affinity Diagram, Pain Point, How Might We dan User Persona, User +Journey Map menurut(Aziza, 2021) adalah seperti berikut: +a. Affinity diagram + + Affinity Diagram yang bertujuan untuk mengelompokkan fitur-fitur yang +telah dibuat pada tahap sebelumnya berdasarkan kesamaan di setiap fitur-fiturnya. +b. Pain Point + + Pain Point berisikan tentang beberapa keluhan yang didapat dari hasil +observasi. +c. How Might We + + How Might We adalah membuat pernyataan solusi berdasarkan tahap Pain +Point. +d. User Persona + + User Persona digunakan untuk memahami perilaku pengguna terkait +permasalahan yang ada. + 23 + +e. User Journey Map + User Journey Map digunakan untuk mendeskripsikan aktivitas yang + +dilakukan pengguna, memahami permasalahan pada setiap aktivitas dan +menemukan solusi berupa fitur yang akan dimasukkan. + +2.10.3 Ideate + Ideate adalah menghasilkan sebanyak mungkin ide atau solusi untuk + +mengatasi masalah yang telah diidentifikasi. Tahap ini dilakukan melalui proses +brainstorming dan pembuatan mindmap untuk memunculkan ide-ide kreatif (Rifa +and Darso, 2024). Menurut (Saputra and Kania, 2022b), ideate adalah proses yang +berfokus pada penciptaan solusi berdasarkan penelitian atau data yang telah +dikumpulkan selama fase empathize dan define. + +2.10.4 Prototype + Pada tahap ini, proses desain UI ini dimulai dengan membuat gambar untuk + +setiap bagian dalam bentuk low-fidelity wireframe, dan kemudian membuat desain +prototype untuk interface akhir dalam bentuk high-fidelity wireframe (Achyani and +Andini, 2024). Pada prototype ini membuat representasi visual berupa wireframe, + +menurut (Fadilah and Sweetania, 2023),Wireframe merupakan sebuah kerangka + +desain suatu aplikasi untuk penataan item–item pada halaman aplikasi sebelum +proses desain sesungguhnya dimulai. Secara visual, wireframe berupa garis dan +kotak yang mengatur tata letak elemen–elemen pada aplikasi. Wireframe terbagi +menjadi dua jenis yaitu wireframe low–fidelity dan high –fidelity +a. Low Fidelity + + Low Fidelity Prototyping yaitu metode Prototyping dengan tingkat ketelitian +yang rendah, perancangan lebih fokus kepada konsep dan layout layar, +menggunakan perangkat konvensional dalam pembuatan prototipe seperti +storyboard dan sketsa (Firdaus, Kusumo and Selviandro, 2024). + 24 + +b. High Fidelity + High Fidelity merupakan desain yang memiliki tingkat presisi tinggi. Warna, + +ukuran, jarak, dan bentuk elemen dibuat dengan sangat memperhatikan detail. High +Fidelity dapat dikatakan sebagai penyempurnaan dari Low Fidelity Design. +Pembuatan High Fidelity design ini diawali dengan memasukan elemen warna, +icon, typhograph, dan desain grafis (Riyan Maulana dkk, 2023). + +2.10.5 Test + Test adalah proses pengujian prototype untuk memastikan suatu produk atau + +aplikasi telah sesuai dan bersifat user friendly atau mudah digunakan oleh pengguna +(Ginanjar and Sukoco, 2022). Suatu produk dapat dikatakan user friendly jika +memiliki ciri ciri mudah digunakan, mudah dipahami dan praktis. Kemudahan +penggunaan ini bisa dilihat dari kemudahan ketika mengakses fitur-fiturnya +kemudian penggunaan istilah-istilah umum yang mudah dipahami juga dapat +memberikan kemudahan bagi para penggunanya (Masida and Fauzi, 2022). + +2.11 A/B Testing + Pengujian A/B Testing dilakukan dengan cara membandingkan dua prototype + +atau antarmuka. Tujuan dari A/B Testing adalah untuk menemukan solusi desain +yang paling efisien (Ibrahim & Lestari, 2023). Menurut (Ernowo dkk, 2021), A/B +Testing atau dikenal split testing digunakan untuk mengevaluasi elemen desain pada +sebuah aplikasi, dimana metode A/B Testing melakukan uji coba pada pengguna +dengan menampilkan varian versi antarmuka, perbedaan setiap versi hanya terletak +pada satu elemen saja. + + Pengujian A/B dikenal sebagai split testing merupakan proses +membandingkan dua versi perangkat lunak atau perangkat keras untuk menentukan +versi mana yang lebih baik. Pada A/B testing dilakukan pengembangan untuk +membuat versi modifikasi dari versi sebelumnya yang telah dibuat. Terdapat dua +versi yaitu versi asli (control) dan versi modifikasi (variasi). Setiap pengujian +menggunakan A/B testing yang perlu diperhatikan adalah pada pengukuran dan +analisa hasil pengujian untuk menentukan apakah perubahan yang dilakukan + 25 + +berdampak positif, negatif, atau tidak berdampak sama sekali terhadap pengujian +(Aulia Taqwa dkk, 2020). A/B testing merupakan metode pengujian yang +digunakan untuk membandingkan 2 varian yaitu varian asli dan varian modifikasi +yang memiliki guna untuk menentukan kinerja mana yang lebih baik. + +2.12 SUS (System Usability Scale) + Metode SUS merupakan salah satu metode yang dapat digunakan untuk + +mengukur kegunaan suatu sistem. Metode SUS bersifat "quick and dirty". Metode +ini menggunakan kuesioner yang terdiri dari 10 pertanyaan dan bentuk tanggapan +berupa skala Likert dengan 5 skor penilaian dari skala “Sangat Tidak Setuju” hingga +skala “Sangat Setuju” pada masing-masing pertanyaan (Kesuma, 2020). Adapun +daftar pertanyaan kuesioner SUS seperti pada tabel 2.3 berikut. + +Tabel 2. 3 Pertanyaan Kuesioner SUS + +No. Pertanyaan + +1. Saya berpikir akan menggunakan sistem ini lagi + +2. Saya merasa sistem ini rumit untuk digunakan + +3. Saya merasa sistem ini mudah untuk digunakan + +4. Saya membutuhkan bantuan orang lain/teknisi ketika menggunakan sistem ini + +5. Saya merasa fitur-fitur sistem ini berjalan dengan semestinya + +6. Saya merasa ada banyak hal yang tidak konsisten pada sistem ini + +7. Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan + + cepat + +8. Saya merasa sistem ini membingungkan + +9. Saya merasa tidak ada hambatan ketika menggunakan sistem ini + +10. Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini + +Sumber: Balafif (2022) + + Adapun untuk jawaban dari pertanyaan kuesioner adalah skor 1-5 seperti +tabel 2.4 berikut. + 26 + +Tabel 2. 4 Skor Jawaban Kuesioner Skor + 1 + Jawaban 2 + Sangat Tidak Setuju (STS) 3 + 4 + Tidak Setuju (TS) 5 + Ragu-ragu (RG) + + Setuju (S) + Sangat Setuju (SS) +Sumber: Yoga Pudya Ardhana (2022) + + Menurut (Nur Kholifah et al., 2023), cara perhitungan menggunakan SUS +adalah sebagai berikut: +a. Pernyataan ganjil, yaitu: 1, 3, 5, 7, dan 9 skor yang diberikan oleh responden + + dikurangi dengan 1 + + ∑ Px -1 ---------------------------------------------2.2 + Keterangan: + Px = Jumlah pernyataan ganjil +b. Pernyataan genap, yaitu 2, 4, 6, 8, dan 10 skor yang diberikan oleh responden + digunakan untuk mengurangi 5 + + ∑ 5 - Pn ---------------------------------------------2.3 + + Keterangan: + Pn = Jumlah pernyataan genap +c. Hasil dari konversi tersebut selanjutnya dijumlahkan untuk setiap responden + kemudian dikalikan dengan 2,5 agar mendapatkan rentang nilai antara 0 –100 + + (∑ skor ganjil + ∑ skor genap) x 2,5 -----------------2.4 + +Keterangan: +Skor ganjil = total keseluruhan dari pernyataan ganjil +Skor genap = total keseluruhan dari pernyataan genap + 27 + +d. Mencari skor rata-rata dengan cara menjumlahkan semua hasil skor dan dibagi + dengan jumlah responden yang ada menggunakan rumus berikut + + X̅ = ∑x ---------------------------------------------2.5 + + n + +Keterangan: + +X̅ = Skor rata – rata + +∑x = Total skor SUS + +n = Jumlah responden + +Berikut SUS Score dari semua hasil dapat dilihat pada tabel 2.5. + +Tabel 2. 5 SUS Score + +Grade Score Adjective Rating + Excellent +A >80,3 Good + Ok +B 68 – 80,3 Poor + Awful +C 68 + +D 51 – 68 + +F <51 + +Sumber:Yoga Pudya Ardhana (2022) + +2.13 Usability Testing + Usability testing adalah penguijan yang dilakukan untuk memastikan bahwa + +produk interaktif mudah dipelajari, efektif digunakan, dan menyenangkan dari +sudut pandang pengguna. Hal ini mengenai pengoptimalan interaksi antara +pengguna dengan produk atau halaman yang digunakan (Mirza, Lusita and Diana, +2023). Menurut (Larasati, 2020), Usability Testing adalah salah satu metode +evaluasi kegunaan yang mengevaluasi sebuah produk dengan mengujinya langsung +kepada pengguna. Tujuannya adalah untuk mengidentifikasi masalah pada +pengujian seperti, mengumpulkan data kualitatif dan kuantitatif, mengukur +kemudahan, mengukur efisiensi dan menentukan kepuasan pengguna terkait +produk. + 28 + + Terdapat beberapa teknik evaluasi yang berbeda dalam usability testing. +Adapun teknik pada usability testing yaitu teknik yang mengukur keberhasilan, +kinerja, dan kecepatan dalam menyelesaikan tugas, atau teknik pengukuran kinerja. +Selain itu, terdapat teknik yang memungkinkan responden mengungkapkan +perasaan, pemikiran, dan opininya saat berinteraksi dengan aplikasi. Kedua, teknik +ini mudah digunakan dan dapat mengukur aspek penting dalam usability yaitu +efektivitas, efisiensi, dan kepuasan pengguna (Utami et al., 2020). + + Usability testing adalah proses mengevaluasi produk dengan menguji secara +langsung dengan pengguna. Tujuan usability testing yaitu untuk mengidentifikasi +masalah pada desain yang telah dibuat dengan memahami bagaimana interaksi +pengguna dengan produk, dan melakukan perbaikan apabila ditemukan kekurangan +atau ketidaksesuaian untuk meningkatkan pengalaman pengguna. Pada usability +testing ini melibatkan pengamatan dan analisis mengenai pengguna dalam +menyelesaikan tugas-tugas tertentu ketika menggunakan produk yang diuji. + BAB 3. METODE PENELITIAN + +3.1 Waktu dan Tempat Pelaksanaan + Penelitian dengan judul “Implementasi Metode Design Thinking Dalam + +Perancangan Ulang UI/UX Pada Pengecekan Ongkir Dan Lacak Paket Aplikasi +Sicepat Express” dilaksanakan selama 6 bulan yang dimulai pada akhir bulan +Desember 2024 hingga Mei 2025, dan lokasi tempat penelitian di Kampus 3 +Politeknik Negeri Jember PSDKU Nganjuk yang berlokasi di Jalan Gatot Subroto +No. 2 Kauman, Nganjuk dan kantor SiCepat Express cabang Nganjuk yang +berlokasi di Jalan Jenderal Gatot Subroto RT001/RW005, Kauman, Nganjuk. + +3.2 Alat dan Bahan + Adapun alat dan bahan yang digunakan dalam penelitian ini adalah sebagai + +berikut: +3.2.1 Alat + + Alat yang digunakan pada penelitian ini berdasarkan pada kebutuhan +spesifikasi. Peneliti menentukan alat yang sesuai dengan kebutuhan spesifik, namun +penggunaan spesifikasi lainnya dapat juga digunakan untuk menjalankan perangkat +lunak yang diperlukan dan tidak dibatasi harus menggunakan spesifikasi yang +sama. Adapun pada penelitian ini terdiri dari 2 macam, yaitu perangkat keras +(Hardware) dan perangkat lunak (Software). +a. Perangkat Keras (Hardware) + + Perangkat Keras yang digunakan untuk melakukan penelitian yaitu + 1) Laptop dengan spesifikasi sebagai berikut + + a. Processor 13th Gen Intel(R) core(TM) i5-13500H + b. RAM 16 GB + c. SSD 512 GB + 2) Smartphone dengan spesifikasi sebagai berikut + a. Android 14 + b. RAM 8 GB + c. Memory 256 GB + + 29 + 30 + +b. Perangkat Lunak (Software) + Perangkat Lunak yang digunakan untuk melakukan penilitian yaitu + 1) Sistem Operasi Windows 11 + 2) Web Browser (Google Chrome) + 3) Figma Browser + 4) Draw.io + 5) Microsoft Word + 6) Mendeley Reference Manager + 7) Google Playstore + 8) Figma Mirror + 9) Maze + +3.2.2 Bahan + Bahan yang digunakan dalam penelitian ini yaitu Aplikasi SiCepat Express + +Pengecekan Ongkos Kirim dan Pelacakan Paket, pengguna aplikasi dan data-data +yang dikumpulkan berupa observasi ulasan, kuesioner dan kebutuhan pengguna +yang kemudian diolah untuk mendapatkan hasil yang diharapkan. Adapun data +yang digunakan sebagai referensi dalam penelitian yaitu data yang diperoleh dari +studi literatur berupa dokumen terkait topik penelitian seperti jurnal dan beberapa +sumber lainnya yang berhubungan dengan penelitian. + +3.3 Metode Penelitian + Metode penelitian yang digunakan untuk perancangan ulang UI/UX pada + +penelitian ini adalah Metode Design Thinking. Metode Design Thinking terdapat 5 +tahapan yaitu: Empathize, Define, Ideate, Prototype, dan Test. Pada setiap tahapan +tersebut saling berkaitan antara tahap satu dengan yang lain. Setelah itu, pengujian +dilakukan dengan menggunakan A/B testing dan Usability Testing dengan +menggunakan System Usability Scale (SUS). + 31 +3.4 Tahap Penelitian + + Tahapan kegiatan ini berisi langkah- langkah yang digunakan untuk membuat +rancangan ulang UI/UX pada Aplikasi SiCepat Pengecekan Ongkos Kirim dan +Pelacakan Paket dengan menggunakan metode Design Thinking. Berikut langkah- +langkah yang akan dilakukan, seperti gambar 3.1 berikut. + + Gambar 3. 1 Tahap Penelitian (modifikasi dari Febri, 2019) + 32 + +3.4.1 Identifikasi Masalah + Tahap awal dalam penelitian ini adalah mengidentifikasi masalah yang ada + +pada Aplikasi SiCepat Pengecekan Ongkos Kirim dan Pelacakan Paket. Peneliti +harus memiliki pemahaman mengenai masalah yang akan diteliti, untuk +mengidentifikasi permasalahan adalah dengan cara observasi di kantor SiCepat +Ekspress, dan melihat ulasan pada aplikasi Playstore. + +3.4.2 Perumusan Masalah + Pada tahap ini, peneliti mencatat permasalahan apa saja yang ada berdasarkan + +observasi di kantor SiCepat serta permasalahan yang didapat dari aplikasi Playstore. +Pada perumusan masalah ini menghasilkan permasalahan apa saja yang dialami +pengguna. + +3.4.3 Metode Pengumpulan Data + Adapun metode pengumpulan data yang digunakan dalam penelitian ini + +adalah obersevasi dan kuesioner sebagai berikut: +a. Observasi + + Observasi dilakukan dengan mengamati objek yang sedang diteliti. +Pelaksanaan observasi digunakan untuk mendapatkan data yang sesuai, sehingga +peneliti mendapatkan informasi. Pada kegiatan observasi ini, peneliti melakukan +observasi ke kantor SiCepat Ekspress dan menganalisis dari rating dan ulasan dari +aplikasi SiCepat Express melalui Google Playstore. + +b. Kuesioner + Pada tahap ini, Kuesioner digunakan untuk mengumpulkan data berupa + +informasi mengenai kebutuhan pengguna yang nantinya digunakan untuk +perancangan ulang UI/UX. Adapun kuesioner ini diberikan kepada pengguna yang +menggunakan aplikasi SiCepat Express. Pengumpulan data kuesioner ini +menggunakan rumus slovin pada rumus 2.1. + 33 + +3.4.4 Metode Design Thinking + Metode design thinking terdiri dari lima tahapan yaitu Empathize, Define, + +Ideate, Prototype, dan Test seperti berikut: +a. Empathize + + Pada tahap ini, Empathize digunakan untuk memahami permasalahan dan +kebutuhan pengguna secara lebih mendalam. Tahapan ini memiliki tujuan untuk +memahami kebutuhan pengguna atau permasalahan yang terjadi. Pada tahap ini +peneliti melakukan pengumpulan data berupa penyebaran kuesioner ke 100 +responden dan ulasan tentang keluhan terkait dengan UI/UX dari pengguna yang +mengunduh aplikasi SiCepat Express pengecekan ongkir dan pelacakan paket. + +b. Define + Pada tahapan ini digunakan untuk mendefinisikan permasalahan mengenai + +informasi yang telah didapatkan sebelumnya. Peneliti menganalisis data yang sudah +diperoleh pada tahap Empathize agar permasalahan tersebut lebih jelas dan +terstruktur. Pada tahap ini, didapatkan sebuah informasi yang digunakan untuk +perancangan ulang terhadap sistem terkait fitur yang dapat menjadi solusi bagi +permasalahan yang terjadi. Permasalahan ini digambarkan dengan menggunakan +Affinity Diagram yang akan mengelompokkan data yang telah diperoleh, tahap ini +juga mendefinisikan pain point atau permasalahan yang ada dan juga target dari +permasalahan. Selanjutnya membuat How Might We yang digunakan untuk mencari +solusi dari permasalahan, How Might We ini didapat dari pain point yang telah +disusun sebelumnya, dan kemudian membuat User Persona dan User Journey Map. +Tahapan ini, dilakukan dengan mencatat hasilnya menggunakan Figjam. + +c. Ideate + Tahapan Ideate ini, peneliti melakukan brainstorming untuk menghasilkan + +ide atau solusi untuk menyelesaikan permasalahan yang didapatkan pada tahap +sebelumnya. Brainstorming ini dimulai berdasarkan How Might We yang telah +dibuat. Adapun Ide yang dihasilkan harus terfokus untuk menyelesaikan masalah +yang dialami oleh pengguna, dimana jumlah ide tersebut tidak dibatasi. Ide ini + 34 + +nantinya akan digunakan untuk perancangan ulang UI/UX pada sistem. Selanjutnya +pada tahap ini juga dilakukan pembuatan user flow untuk mengidentifikasi alur +yang dilakukan pengguna dalam menggunakan aplikasi. + +d. Prototype + Pada tahap ini, membuat rancangan desain antarmuka untuk menyelesaikan + +masalah yang terjadi. Peneliti akan membuat Prototype dengan menyusun ulang +antarmuka sistem sesuai dengan ide atau solusi yang diberikan. Prototype ini +digunakan untuk memvisualisasikan ide-ide yang dibuat oleh peneliti, pada tahap +ini peneliti akan melakukan perancangan dengan membuat wireframe yang dimulai +dari low-fidelity yang mana belum adanya warna, teks, tombol dan lain-lainnya. +Kemudian dari low-fidelity tersebut akan diubah ke high-fidelity yang mana sudah +memiliki warna, teks, tombol, dan elemen lainnya. Setelah high-fidelity selesai +kemudian menambahkan interaksi ke dalam prototype untuk memberikan transisi +antara halaman tampilan dapat ditekan sesuai dengan fungsinya, sehingga tampilan +aplikasi akan menjadi lebih hidup. Pada pembuatan prototype ini peneliti +menggunakan aplikasi Figma untuk menghasilkan user interface dan user +experience yang baik dan sesuai kebutuhan pengguna. + +e. Test + Tahapan terakhir pada Design Thinking adalah pengujian pada solusi yang + +diperoleh. Pengujian ini dilakukan pada prototype high-fidelity yang sudah dibuat +sebelumnya yang berkaitan dengan tampilan antarmuka, fungsionalitas dan +pengalaman pengguna. Pada tahap ini, pengujian Usability Testing dilakukan +menggunakan Maze pada prototype yang dibuat serta mencatat umpan balik yang +diberikan oleh pengguna. Pengujian Usability Testing ini, pengguna menjalankan +aplikasi dan peneliti memberikan skenario kepada pengguna. Umpan balik +digunakan untuk mengetahui apakah solusi desain yang sesuai atau tidak dengan +kebutuhan dan permasalahan yang dialami pengguna. Pada tahap ini juga dilakukan +pengujian A/B Testing dengan menggunakan System Usability Scale (SUS), dan + 35 + +pengguna akan diberikan kuesioner menggunakan Google Form yang mana akan +membandingkan desain sebelumnya dengan desain yang dirancang ulang. + +3.4.5 Evaluasi Hasil Pengujian + Pada tahap ini, peneliti melakukan evaluasi dengan menganalisis dari hasil + +pengujian dan membuat kesimpulan dari pengujian desain aplikasi Sicepat Express +pengecekan ongkir dan pelacakan paket. + +3.5 Pelaksanaan Penelitian + Berikut merupakan waktu pelaksanaan pada tahapan penelitian dengan + +rentang waktu 6 bulan yang digambarkan dengan diagram pada tabel 3.1 + +Tabel 3. 1 Pelaksanaan Penelitian + +No Kegiatan Bulan + + 1 2 3 4 5 6 + +1 Identifikasi + Masalah + +2 Perumusan + Masalah + +3 Observasi + +4 Empathize + +5 Define + +6 Ideate + +7 Prototype + +8 Testing + +9 Evaluasi + Hasil + Pengujian + BAB 4. HASIL DAN PEMBAHASAN + +4.1 Identifikasi Masalah + Tahap awal yang dilakukan adalah identifikasi masalah, pada tahap ini telah + +dilakukan analisa untuk mendapatkan informasi berupa permasalahan yang +dihadapi oleh pengguna aplikasi SiCepat Express. Permasalahan yang ada tersebut +diperoleh dari hasil observasi di kantor, ulasan Play Store terhadap ulasan pengguna +pada Aplikasi SiCepat Express, beberapa ulasan yang didapatkan peneliti antara +lain pada tampilan yang tidak di update, kurang kesesuaian warna dan kontras, +terdapat juga fitur yang tidak bisa digunakan dengan baik seperti tertera pada +lampiran 2. Berdasarkan permasalahan yang ada, digunakan untuk penyusunan +perbaikan dengan perancangan ulang pada aplikasi menggunakan metode Design +Thinking untuk memenuhi kebutuhan pengguna. + +4.2 Perumusan Masalah + Permasalahan yang telah ditemukan pada aplikasi SiCepat Express + +menunjukkan perlu adanya perbaikan pada aplikasi dengan perancangan ulang +UI/UX aplikasi SiCepat Express. Adapun permasalahan keseluruhan dikumpulkan +dan dirangkum pada tabel 4.1 berikut. + +Tabel 4. 1 Permasalahan pada Ulasan Aplikasi + +No Sumber Ulasan + +1 Ulasan Play Store Tidak ada informasi atau pesan yang + + ditampilkan untuk memberikan + + pemahaman kepada pengguna + +2 Ulasan Play Store Aplikasi tidak ada informasi ketika sedang + + loading + +3 Ulasan Play Store Ketika menginput data atau mengetik tidak + + terlihat tulisannya karena tulisan putih, + + background putih + + 36 + 37 + +No Sumber Ulasan + +4 Ulasan Play Store Tidak ditampilkan nomor kurir untuk + + dihubungi + +5 Ulasan Play Store Tidak ada tombol untuk hapus resi ketika + + sudah memasukkan inputan + +6 Ulasan Play Store Tampilan deskripsi pengiriman paket tidak + + lengkap + +7 Ulasan Play Store Warnanya kurang tepat kurang kuat, + + kontrasnya rendah + +8 Ulasan Play Store Tampilan tidak di update + +9 Ulasan Play Store Tidak ada notifikasi yang memberitahukan + + pengguna + +4.3 Pengumpulan Data + Metode pengumpulan data yang digunakan dalam penelitian ini adalah + +obersevasi dan kuesioner sebagai berikut: +4.3.1 Observasi + + Peneliti melakukan observasi ulasan pada aplikasi SiCepat Express di Play +Store sebanyak 100 ribu pengguna, dan 7 ribu ulasan serta pada kantor SiCepat +Ekspress di cabang Nganjuk. Data observasi ini diambil per tanggal 5 Maret 2024, +dengan menggunakan 300 ulasan. Adapun beberapa ulasan yang didapatkan +peneliti antara lain pada tampilan warna dan kontras yang kurang, dan terdapat juga +fitur yang tidak bisa digunakan dengan baik. Jumlah pengguna, ulasan serta rating +dapat dilihat pada gambar 4.1 berikut. + 38 + + Gambar 4. 1 Jumlah Pengguna, Ulasan pada Playstore +4.3.2 Kuesioner + + Selain melalui observasi, peneliti melakukan penyebaran kuesioner +menggunakan Google Form dimulai pada tanggal 23 Februari 2025 untuk +mengetahui pengalaman pengguna dalam menggunakan aplikasi SiCepat Express. +Peneliti melakukan analisa terkait dengan data dari responden yang menggunakan +aplikasi SiCepat Express. Hasil selengkapnya terkait kuesioner di deskripsikan +pada tahap empathize (kuesioner). +4.4 Metode Design Thinking + + Metode design thinking terdiri dari lima tahapan yaitu Empathize, Define, +Ideate, Prototype dan Test seperti berikut: + 39 + +4.4.1 Tahap Empathize + Pada tahapan Empathize ini mengidentifikasi terkait permasalahan dan juga + +kebutuhan pengguna. Pengumpulan data terkait kebutuhan pengguna ini dilakukan +dengan menggunakan observasi pada ulasan aplikasi di Play Store serta dengan +penyebaran kuesioner. +a. Observasi Ulasan + + Peneliti melakukan observasi dengan menggunakan 7 ribu ulasan pengguna +yang menggunakan aplikasi SiCepat Express serta mengakses pada aplikasi +tersebut. Observasi ini dilakukan untuk menganalisis kebutuhan pengguna, dan +menemukan masalah. Permasalahan ini membantu peneliti untuk merancang +perbaikan atau merancang ulang tampilan aplikasi untuk meningkatkan +pengalaman dan menyesuaikan kebutuhan pengguna. Adapun permasalahan yang +peneliti temukan pada aplikasi tersebut, yaitu: +1) Fitur tidak saling terhubung: Terdapat fitur pada aplikasi yang tidak dapat + + berfungsi atau terhubung dengan fitur lainnya sehingga tidak membantu + pengguna ketika mengakses fitur tersebut. +2) Umpan Balik: Permasalahan tidak adanya umpan balik berupa informasi + dapat membuat pengguna bingung atau tidak mengetahui apa yang terjadi + pada aplikasi +3) Warna dan Kontras: Penggunaan warna pada teks dan latar belakang yang + serupa maupun kurang sesuai dapat membuat pengguna kesulitan dalam + membaca, sehingga pengguna tidak mengetahui apa yang diketikkan dan + dapat memungkinkan terjadinya kesalahan dalam input. +4) Kontrol pengguna: Pengguna dapat mengendalikan aplikasi sesuai yang + diinginkan termasuk menghapus atau mengedit pada inputan yag dimasukkan +5) Kelengkapan informasi: Informasi digunakan pengguna untuk terhindar dari + kebingungan, informasi yang lengkap dan jelas dapat membantu pengguna + dalam memahami atau mengetahui suatu fitur tanpa harus mencari. + 40 + +b. Kuesioner + +Penyebaran kuesioner ini menggunakan Google Form yang mana pertanyaan + +pada kuesioner telah di validasi oleh validator pada lampiran 2. penggunaan Google + +Form ini digunakan karena dapat memudahkan peneliti dalam mengumpulkan data + +yang mana jawaban dari responden akan otomatis tersimpan pada Google + +Spreadsheet dan hasilnya berbentuk grafik. Kuesioner ini dibagikan menggunakan + +link kepada responden yang menggunakan aplikasi SiCepat Express untuk + +mengetahui pengalaman pengguna serta saran mengenai aplikasi. Jumlah + +responden sebanyak 100. Pengambilan responden tersebut menggunakan rumus + +slovin pada rumus 2.1 dengan perhitungan responden seperti berikut + + = 100.000 + 1+100.000 (0,10)2 + + = 100.000 + + 1+100.000 × 0,01 + + = 100.000 + + 1.001 + + = 99,9 + + = 100 + + Adapun data terkait responden adalah sebagai berikut: +1) Pekerjaan + + Hasil jawaban mengenai pekerjaan responden yaitu 8 orang belum bekerja, 1 +orang buruh harian lepas, 2 orang sebagai freelance, 1 orang sebagai graphic +design, 2 orang sebagai guru, 4 orang ibu rumah tangga, 1 orang intern, 6 orang +sebagai karyawan, 2 orang sebagai karyawan pabrik, 7 orang sebagai karyawan +swasta, 1 orang sebagai karyawan toko, 43 orang sebagai mahasiswa, 4 orang +pedagang, 2 orang bekerja di pertambangan, 1 orang sebagai QC inspector, 6 orang +sebagai wiraswasta, 3 orang sebagai wirausaha, 5 orang sebagai admin dan terapis +ABK 1 orang. Berdasarkan data grafik tersebut, kebanyakan responden yang +menggunakan aplikasi adalah mahasiswa. Grafik untuk pekerjaan responden dapat +dilihat pada gambar 4.2 berikut. + 41 + + Gambar 4. 2 Data Pekerjaan Responden +2) Pertanyaan terkait seberapa sering responden menggunakan aplikasi + + Hasil jawaban dari responden terkait seberapa sering menggunakan aplikasi +yaitu 44% (44 orang) jarang menggunakan aplikasi, 14% (14 orang) baru pertama +kali dalam menggunakan aplikasi, 2% (2 orang) setiap hari menggunakan aplikasi, +4 % (4 orang) menggunakan aplikasi dalam beberapa minggu dan 36% (36 orang) +menggunakan aplikasi beberapa kali dalam satu bulan. + + Berdasarkan data grafik tersebut, kebanyakan responden jarang +menggunakan aplikasi SiCepat Ekspress. Grafik jawaban ini dapat dilihat pada +gambar 4.3 berikut. + + Gambar 4. 3 Data Keseringan Responden Menggunakan Aplikasi + 42 + +3) Pertanyaan terkait seberapa mudah responden menemukan fitur pelacakan + paket + Hasil jawaban dari responden terkait seberapa mudah menemukan fitur + +pelacakan paket yaitu 16% (16 orang) cukup sulit menemukan, 17% (17 orang) sulit +menemukan, 7% (7 orang) sangat sulit untuk menemukan, 9% (9 orang) sangat +mudah menemukan, dan 51% (51 orang) mudah menemukan fitur tersebut. +Berdasarkan data grafik tersebut, kebanyakan responden mudah menemukan tata +letak pelacakan paket. Grafik jawaban ini dapat dilihat pada gambar 4.4 berikut. + + Gambar 4. 4 Data Kemudahan Responden +4) Pertanyaan terkait informasi pelacakan paket jelas dan mudah dipahami + + Hasil jawaban dari responden terkait informasi pelacakan paket pada aplikasi +yaitu 26% (26 orang) cukup jelas, 54% (54 orang) kurang jelas, 7% (7 orang) tidak +jelas, dan 13% (13 orang) sangat jelas. Berdasarkan data grafik tersebut, +kebanyakan responden kurang jelas dengan informasi yang disajikan aplikasi +SiCepat Ekspress. Grafik jawaban ini dapat dilihat pada gambar 4.5 berikut. + 43 + + Gambar 4. 5 Data Kejelasan Informasi Pelacakan Paket +5) Pertanyaan terkait seberapa akurat informasi pelacakan paket + + Hasil jawaban dari responden terkait seberapa akurat informasi pelacakan +paket yaitu 30% (30 orang) cukup akurat, 41% (41 orang) tidak akurat, 5% (5 orang) +sangat tidak akurat, 4% (4 orang) sangat akurat dan 20% (20 orang) akurat. +Berdasarkan data grafik tersebut, kebanyakan responden merasa informasi pada +aplikas SiCepat Ekspress tidak akurat. Grafik jawaban ini dapat dilihat pada gambar +4.6 berikut. + + Gambar 4. 6 Data Keakurat Informasi Pelacakan Paket +6) Pertanyaan terkait tampilan desain aplikasi + + Hasil jawaban dari responden terkait tampilan desain aplikasi yaitu 20% (20 +orang) menarik, 36% (36 orang) biasa saja, 32% (32 orang) kurang menarik, 4% (4 +orang) tidak menarik dan 8% (8 orang) sangat menarik. Berdasarkan data grafik + 44 + +tersebut, kebanyakan responden merasa tampilan aplikasi SiCepat Ekspress biasa +saja. Grafik jawaban ini dapat dilihat pada gambar 4.7 berikut. + + Gambar 4. 7 Data Tampilan Aplikasi +7) Pertanyaan terkait ukuran teks dan ikon + + Hasil jawaban dari responden terkait ukuran teks dan ikon yaitu 34% (34 +orang) cukup mudah, 48% (48 orang) kurang mudah, 7% (7 orang) tidak mudah +dan 11% (11 orang) sangat mudah. Berdasarkan data grafik tersebut, kebanyakan +responden merasa teks dan ikon aplikasi SiCepat Ekspress kurang mudah dibaca +dan digunakan. Grafik jawaban ini dapat dilihat pada gambar 4.8 berikut. + + Gambar 4. 8 Data Kemudahan Teks dan Ikon +8) Pertanyaan terkait warna dan tata letak aplikasi + + Hasil jawaban dari responden terkait warna dan tata letak aplikasi yaitu 33% +(33 orang) cukup nyaman, 53% (53 orang) kurang nyaman, 6% (6 orang) tidak +nyaman dan 8% (8 orang) sangat nyaman. Berdasarkan data grafik tersebut, + 45 + +kebanyakan responden merasa warna dan tata letak aplikasi SiCepat Ekspress +kurang nyaman dilihat dalam waktu lama. Grafik jawaban ini dapat dilihat pada +gambar 4.9 berikut. + + Gambar 4. 9 Data Kenyamanan Warna dan Tata Letak +9) Pertanyaan terkait seberapa sering menggunakan fitur pengecekan ongkir + + Hasil jawaban dari responden terkait seberapa sering menggunakan fitur +pengecekan ongkir aplikasi yaitu 57% (57 orang) kadang kadang, 21% (21 orang) +jarang, 7% (7 orang) sangat sering, dan 15% (15 orang) sering menggunakan fitur +pengecekan ongkir. Berdasarkan data grafik tersebut, kebanyakan responden +kadang kadang menggunakan aplikasi SiCepat Ekspress untuk pengecekan ongkir. +Grafik jawaban ini dapat dilihat pada gambar 4.10 berikut. + + Gambar 4. 10 Data Keseringan Fitur Cek Ongkir + 46 + +10) Pertanyaan terkait kemudahan proses pengecekan ongkir + Hasil jawaban dari responden terkait seberapa proses pengecekan ongkir + +yaitu 27% (27 orang) mudah, 56% (56 orang) cukup sulit, 8% (8 orang) sangat sulit +dan 9% (9 orang) sangat mudah. Berdasarkan data grafik tersebut, kebanyakan +responden merasa fitur pengecekan ongkir aplikasi SiCepat Ekspress cukup sulit. +Grafik jawaban ini dapat dilihat pada gambar 4.11 berikut. + + Gambar 4. 11 Data Kemudahan Ongkir + +11) Pertanyaan terkait informasi ongkir + Hasil jawaban dari responden terkait informasi ongkir yang ditampilkan pada + +aplikasi yaitu 26% (26 orang) cukup jelas, 41% (41 orang) tidak jelas, 6% (6 orang) +sangat tidak jelas, 8% (8 orang) sangat jelas, dan 19% (19 orang) jelas. Berdasarkan +data grafik tersebut, kebanyakan responden merasa informasi ongkir pada aplikasi +SiCepat Ekspress tidak jelas. Grafik jawaban ini dapat dilihat pada gambar 4.12 +berikut. + 47 + + Gambar 4. 12 Data Kejelasan Informasi Ongkir +12) Pertanyaan terkait kendala pada saat menggunakan aplikasi + + Hasil jawaban dari responden terkait kendala ketika menggunakan aplikasi +yaitu 43% (43 orang) informasi kurang akurat, 61% (61 orang) antarmuka sulit +dipahami dan dioperasikan, 26% (26 orang) proses pencarian lambat, 1% (1 orang) +penggabungan warna kurang menarik. Berdasarkan data grafik tersebut, +kebanyakan responden merasa antarmuka aplikasi SiCepat Ekspress sulit dipahami +dan dioperasikan. Grafik jawaban ini dapat dilihat pada gambar 4.13 berikut. + + Gambar 4. 13 Data Kendala Utama Penggunaan Aplikasi +13) Pertanyaan terkait perbaikan pada aplikasi + + Hasil jawaban dari responden perbaikan pada aplikasi yaitu 44% (44 orang) +notifikasi yang memberikan pemahaman kepada pengguna, 72% (72 orang) +informasi yang lebih detail, 41% (41 orang) tampilan yang lebih mudah digunakan, +dan 1% (1 orang) tampilan yang minimalis dan Paduan warna yang tidak mencolok. + 48 + +Berdasarkan data grafik tersebut, kebanyakan responden menginginkan +peningkaran pada informasi yang lebih detail pada aplikasi SiCepat Ekspress. +Grafik jawaban ini dapat dilihat pada gambar 4.14 berikut. + + Gambar 4. 14 Data Saran Peningkatan Fitur + Berdasarkan pengumpulan data menggunakan kuesioner, dapat diambil +kesimpulan bahwa kebanyakan responden adalah mahasiswa, dengan penggunaan +aplikasi jarang dikarenakan merasa tampilan aplikasi kurang nyaman tanpa +notifikasi yang membantu pengguna, pengguna juga merasa mudah menemukan +fitur pelacakan dikarenakan fitur tersebut tampil di halaman beranda. Responden +merasa informasi yang disajikan kurang jelas, serta merasa informasi dalam +pelacakan tidak akurat karena tidak sesuai dengan pelacakan aplikasi marketplace +dan tidak ada nomor kurir untuk dihubungi. + Adapun tampilan menurut responden terkait tampilan aplikasi adalah biasa +saja dikarenakan warna yang kurang sesuai dan kontras, selain itu merasa ukuran +teks dan ikon kurang mudah dibaca karena ukuran yang sedikit lebih kecil, serta +tata letak dan warna kurang nyaman dilihat karena kurangnya kontras. Responden +juga kadang kadang dalam menggunakan fitur ongkos kirim karena merasa +pengecekan ongkir cukup sulit dikarenakan pada bagian alamat ketika pengguna +sudah memasukkan alamat namun tidak bisa dan harus memilih pada opsi yang +muncul. + Selain itu pengguna merasa informasi mengenai ongkos kirim tidak jelas. +Kebanyakan responden mengalami kendala yaitu pada antarmuka sulit dipahami + 49 + +dan dioperasikan, karena ketika pengguna memasukkan inputan warna kolom dan +inputan sama dan juga ketika pengguna sudah memasukkan semua inputan, namun +tombol tidak aktif dan tidak ada notifikasi yang memberitahukan pengguna. +Adapun yang perlu ditingkatkan menurut responden adalah informasi yang detail, +karena tidak adanya informasi dapat membuat pengguna kebingungan ketika +terdapat kesalahan. +4.4.2 Tahap Define + + Pada tahapan define ini, penulis menentukan permasalahan apa saja yang +dialami oleh pengguna aplikasi SiCepat Express. Permasalahan ini didapatkan +menggunakan ulasan dan penyebaran kuesioner pada tahap empathize yang +kemudian didefinisikan ke dalam bentuk pain point dan how might we. +a. Pain Point + + Pain point digunakan untuk mengidentifikasi permasalahan yang dihadapi +oleh pengguna dengan didokumentasikan menggunakan Figjam untuk memahami +masalah yang harus diselesaikan. Adapun hasil dari pain point tertera pada gambar +4.15 berikut. + + Gambar 4.15a Pain Point + 50 +Gambar 4.15b Pain Point +Gambar 4.15c Pain Point + 51 + +Gambar 4.15d Pain Point +Gambar 4.15e Pain Point +Gambar 4.15f Pain Point + 52 + + Berdasarkan data Pain Points tersebut, peneliti mengelompokkan +permasalahan yang sesuai dengan penelitian penulis. Adapun penjelasan pain +points terdapat pada tabel 4.2 berikut. + +Tabel 4. 2 Penjelasan Pain Points + +No Pain Points Detail + +1 Penggunaan warna dan Pemilihan warna menggunakan kombinasi + + background warna yang sesuai dengan mencerminkan + + branding, serta warna teks pada saat input + + tidak sama dengan warna background + +2 Informasi yang kurang detail Tampilan informasi yang detail dapat + + membantu pengguna memberikan + + informasi lebih mendalam mengenai data, + + fitur pada aplikasi + +3 Tidak ada notifikasi Notifikasi membantu memberikan + + pemberitahuan pemberitahuan atau peringatan kepada + + pengguna + +4 Fitur yang tidak terhubung Aplikasi yang terhubung akan membuat + + pengguna dapat berinteraksi dengan + + aplikasi. Ketika pengguna menggunakan + + fitur tersebut maka dapat beralih pada + + halaman selanjutnya + +5 Konsistensi penggunaan Penggunaan icon pada inputan tidak + + icon konsisten, yang mana pada inputan + + sebelumnya menggunakan icon, dan + + selanjutnya hanya teks + +b. How Might We + How Might We ini merupakan pertanyaan berdasarkan hasil identifikasi pada + +pain points. Pertanyaan ini digunakan untuk brainstorming yang mana hasil dari +how might we ini merupakan solusi dan dapat dilihat pada gambar 4.16 berikut. + 53 + + Gambar 4.16a How Might We + + Gambar 4.16b How Might We + Berdasarkan how might we tersebut, penulis memilih pertanyaan yang relevan +dengan topik penelitian. Penulis mengambil 8 pertanyaan yang relevan dari 11 +pertanyaan, Adapun pertanyaan how might we tersebut dijelaskan pada tabel 4.3 +berikut. + +Tabel 4. 3 Penjelasan How Might We + +No Pertanyaan Tujuan + +1 Bagaimana membuat Tujuan dari pertanyaan ini adalah untuk + + aplikasi lebih mudah di menciptakan pengalaman pengguna yang + + pahami oleh pengguna? intuitif, mengurangi kebingungan + 54 + +No Pertanyaan Tujuan + + pengguna, serta mengurangi kesalahan + + pengguna. + +2 Bagaimana agar pengguna Tujuan pertanyaan ini adalah mengurangi + + dapat dengan mudah waktu atau usaha ketika pengguna + + menemukan fitur? mengoperasikan aplikasi ini serta + + membantu memahami aplikasi ketika + + pertama kali digunakan. + +3 Bagaimana menyajikan Tujuan dari pertanyaan ini adalah untuk + + informasi yang mudah membantu pengguna memahami informasi + + dipahami pengguna? tanpa harus kebingungan atau bertanya. + +4 Bagaimana meminimalkan Tujuan dari pertanyaan ini adalah untuk + + kesalahan input pada saat mengurangi kesalahan input sehingga + + pengguna menginputkan membuat pengguna tidak mengulang pada + + data? saat pengisian + +5 Bagaimana membuat desain Tujuan dari pertanyaan ini adalah untuk + + yang menarik, user friendly, menciptakan antarmuka dan pengalaman + + dan modern? pengguan yang mudah digunakan sesuai + + dengan tren desain, selain itu untuk + + meningkatkan daya tarik tampilan aplikasi + + dan membuat pengguna merasa nyaman + +6 Bagaimana agar pengguna Tujuan dari pertanyaan ini adalah untuk + + nyaman ketika menciptakan pengalaman yang + + menggunakan aplikasi? menyenangkan, lancar dan tidak + + membingungkan serta mengurangi frustasi + + ketika pengguna menggunakan aplikasi + +7 Bagaimana menggabungkan Tujuan dari pertanyaan ini adalah untuk + + warna agar aplikasi menjadi meningkatkan daya tarik visual sehingga + + menarik? meningkatkan keterbacaan dan + + kenyamanan mata yang menciptakan + + indentitas merek + 55 + +No Pertanyaan Tujuan + +8 Bagaimana agar teks dan Tujuan dari pertanyaan ini adalah untuk + + icon aplikasi mudah dibaca? mengurangi kesalahan pengguna yang + + diakibatkan salah memahami ikon atau teks + + dan memastikan pengguna bisa memahami + + terkait aplikasi + +c. User Persona + User persona ini merepresentasikan dari salah satu pengguna kuesioner yang + +mana pada user persona ini berisikan profil singkat, perilaku, permasalahan yang +dihadapi, tujuan dan kebutuhan. Pemilihan user persona ini dikarenakan pada +responden memiliki perilaku menggunakan aplikasi beberapa kali dalam sebulan, +sering menggunakan fitur ongkir, serta memiliki permasalahan dan kebutuhan yang +relevan dengan tujuan perancangan ulang. User persona pada penelitian ini dapat +dilihat pada gambar 4.17 berikut. + + Gambar 4. 17 User Persona + 56 +d. User Journey Map + + User journey map berisi langkah-langkah yang diambil oleh salah satu +pengguna ketika menggunakan aplikasi. User journey map membantu memahami +pengalaman pengguna dan mengidentifikasi masalah yang dihadapi serta solusi +yang dilakukan untuk meningkatkan kepuasan pengguna. User Journey Map dapat +dilihat pada gambar 4.18 berikut. + + Gambar 4. 18 User Journey Map + 57 +4.4.3 Tahap Ideate + + Pada tahapan ini, dihasilkan beberapa ide atau solusi untuk menyelesaikan +permasalahan yang telah didapatkan sebelumnya. +a. Solution Idea + + Solution idea berikut digunakan untuk menjawab permasalahan yang sudah +didapatkan sebelumnya. Solution idea merupakan hasil dari proses brainstorming +yang mana digunakan untuk menciptakan fitur yang dapat menyelesaikan masalah. +Solution idea dapat dilihat pada gambar 4.19 berikut. + + Gambar 4.19a Solution Idea + + Gambar 4.19b Solution Idea + 58 +Gambar 4.19c Solution Idea +Gambar 4.19d Solution Idea + 59 + +b. User Flow + User Flow ini digunakan untuk menggambarkan semua langkah-langkah + +yang diikuti pengguna ketika menggunakan aplikasi. Tujuan dibuatnya user flow +ini untuk mempermudah pengguna mengetahui alur pada setiap fitur di aplikasi. +Perancangan user flow ini dilakukan pada setiap fitur, agar pengguna lebih rinci dan +dapat dengan mudah dipahami. User Flow untuk aplikasi SiCepat Ekspress seperti +berikut +1) User Flow Masuk, Lupa Sandi dan Daftar + + Pada user flow halaman masuk dan daftar ini dimulai dengan pengguna +membuka aplikasi SiCepat, kemudian menampilkan halaman splash screen, lalu +terdapat opsi yaitu masuk atau daftar. Untuk masuk digunakan apabila pengguna +sudah memiliki akun, pengguna dapat klik tombol “Masuk” dan kemudian +diarahkan pada halaman masuk. Pada halaman masuk pengguna memasukkan no +hp dan kata sandi yang telah terdaftar kemudian dapat klik tombol “Masuk”. +Apabila inputan pengguna cocok, maka akan menampilkan notifikasi berhasil dan +akan beralih halaman ke beranda, namun apabila inputan tidak cocok atau salah +maka akan menampikan notifikasi gagal dan diminta untuk memasukkan inputan +yang cocok. + + Apabila pengguna lupa mengenai kata sandi yang terdapat, maka dapat klik +pada “Lupa Kata Sandi” dan akan dialihkan ke halaman lupa sandi yang mana +pengguna memasukkan nomor hp yang terdaftar. Jika nomor hp benar maka akan +mendapatkan kode verifikasi yang dikirimkan melalui SMS dan beralih ke halaman +kode verifikasi. Pada halaman kode verifikasi, pengguna memasukkan kode yang +didapatkan dari SMS, dan kemudian beralih ke halaman untuk atur ulang sandi. +Pada halaman atur ulang sandi, pengguna memasukkan kata sandi baru dan +konfirmasi kata sandi baru, dan kemudian akan mendapatkan notifikasi dan beralih +ke halaman masuk. + + Selanjutnya pada fitur daftar, fitur ini digunakan apabila belum memiliki +akun, maka dapat menekan tombol “Daftar” dan diarahkan ke halaman daftar. Pada +halaman daftar pengguna memasukkan nama, no hp, email, tanggal lahir, kata +sandi, konfirmasi kata sandi dan jenis kelamin, kemudian dapat klik tombol + 60 +“Daftar”. Apabila inputan pengguna cocok, maka akan menampilkan notifikasi +berhasil dan akan beralih halaman ke masuk, namun apabila inputan tidak cocok +atau salah maka akan menampikan notifikasi gagal dan diminta untuk memasukkan +inputan yang cocok. User Flow pada halaman masuk dan daftar dapat dilihat pada +gambar 4.20 berikut. + + Gambar 4. 20 User Flow Masuk, Lupa Sandi, dan Daftar + 61 + +2) User Flow Pusat Bantuan + Pada user flow halaman pusat bantuan ini dimulai dari halaman beranda, + +dimana pengguna sudah masuk menggunakan akun yang terdaftar. Pada halaman +beranda terdapat ikon (?) yang mana merupakan pusat bantuan. Ketika pengguna +menekan ikon tersebut, maka akan menampilkan halaman pusat bantuan. Adapun +pusat bantuan terdapat beberapa cara yaitu menghubungi menggunakan WhatsApp, +untuk menghubungi dengan WhatsApp ini pengguna dapat mengklik pada pilihan +WhatsApp dan kemudian beralih ke aplikasi WhatsApp. Kemudian dapat +menggunakan Email, untuk menghubungi dengan Email pengguna dapat mengklik +pada pilihan Email dan kemudian beralih ke Email. + + Selain menggunakan WhatsApp dan Email dapat juga dilakukan dengan +Telepon, pengguna dapat mengklik Telepon maka akan dialihkan ke Telepon. +Selanjutnya juga dapat membaca melalui “FAQ”, pengguna dapat mengklik pada +“Pertanyaan yang sering diajukan” dan akan menampilkan halaman FAQ yang +berisi pertanyaan pertanyaan. Untuk mengetahui jawaban dari pertanyaan tersebut, +pengguna dapat mengklik pada dropdown sesuai dengan pertanyaan. User Flow +pada halaman pusat bantuan dapat dilihat pada gambar 4.21 berikut. + 62 + + Gambar 4. 21 User Flow Pusat Bantuan +3) User Flow Lacak Paket + + Pada user flow halaman lacak paket ini dimulai dari halaman beranda, dimana +pengguna sudah masuk menggunakan akun yang terdaftar. Pada halaman beranda +terdapat masukkan resi yang mana merupakan halaman untuk lacak paket. Ketika +pengguna memilih pada “Masukkan Nomor Resi”, maka pengguna dapat +memasukkan kode resi dan klik “Enter” kemudian akan menampilkan halaman +lacak paket sesuai kode yang dimasukkan. Selain itu pada halaman lacak ini juga +menampilkan riwayat pencarian, pengguna dapat klik pada salah satu daftar riwayat +pencarian dan akan beralih ke halaman lacak paket. User Flow pada halaman lacak +paket dapat dilihat pada gambar 4.22 berikut. + 63 + + Gambar 4. 22 User Flow Lacak Paket +4) User Flow Cek Ongkir, Pick Up, Drop Off, dan Layanan + + Pada user flow halaman cek ongkir dimulai dari halaman beranda, dimana +pengguna sudah masuk menggunakan akun yang terdaftar. Pada halaman beranda +terdapat ikon dan label cek ongkir yang mana merupakan halaman untuk mengecek +ongkos kirim paket. Ketika pengguna mengklik pada cek ongkir maka akan +menampilkan halaman cek ongkir dan pengguna memasukkan alamat pengirim, +alamat tujuan, berat, panjang, lebar, dan tinggi barang lalu klik tombol “Cek +Ongkir” dan akan menampilkan informasi estimasi layanan. Pada estimasi layanan +terdapat opsi pick up atau drop off, pengguna dapat memilih pick up atau drop off +yang ketika di klik akan menampilkan halaman pick up atau drop off. + + Selain dari halaman estimasi layanan, halaman pick up dan drop off dapat +diakses dari beranda. Pada bagian pengirim, pengguna memasukkan nama, no hp, +alamat, label tempat, provinsi, dan catatan. Pada halaman ini terdapat 2 tombol +yaitu “Simpan Draft” dan “Selanjutnya”. Jika sudah mengisi semuanya, namun +pengguna belum ingin melanjutkan maka dapat menekan pada tombol “Simpan +Draft” yang nantinya akan muncul konfirmasi “Yakin ingin simpan draft?” jika + 64 + +pengguna yakin, dapat mengklik tombol “Simpan Draft” dan akan menampilkan +notifikasi berhasil, apabila tidak maka menampilkan halaman pick up seperti +sebelumnya. Pada tombol “Selanjutnya” digunakan jika pengguna sudah mengisi +semuanya, dan akan melanjutkan maka dapat mengklik pada tombol “Selanjutnya” +dan mengarah ke bagian penerima. Pada bagian penerima ini inputan dan fungsi +tombol sama seperti bagian pengirim yang mana pengguna memasukkan nama, +nama, no hp, alamat, label tempat, provinsi, dan catatan. Selanjutnya pada tahap +paket, setelah mengklik tombol “Selanjutnya” pada bagian penerima, maka akan +menampilkan pada bagian paket. + + Bagian paket pada pick up dan drop off memiliki perbedaan yaitu pada tanggal +pick up (pada drop off tidak menggunakan tanggal pick up). Pada bagian paket, +pengguna memasukkan nama barang, berat, Panjang, lebar, tinggi, layanan dan +tanggal pada pick up. Setelah mengisi semua inputan maka dapat mengklik tombol +“Selesai”, dan akan dialihkan pada halaman metode pembayaran dan pengguna +memilih metode pembayaran yang akan digunakan, jika sudah memilih maka dapat +mengklik tombol “Selesai” dan dialihkan ke halaman order dan pengguna dapat +klik tombol “Order”. + + Selanjutnya pada bagian fitur layanan, fitur ini dapat diakses pada halaman +beranda. Pada halaman beranda terdapat layanan, yang mana pada layanan terdapat +“Lihat Semua”. Pengguna dapat menekan “Lihat Semua” untuk menampilkan +daftar layanan yang ada. Pengguna juga dapat mengklik tombol “Kirim Paket” pada +layanan tersebut dan nantinya akan menampilkan halaman detail dari layanan +tersebut serta menampilkan opsi pick up atau drop off. User Flow pada halaman cek +ongkir, pick up, drop off, dan layanan dapat dilihat pada gambar 4.23 berikut. + Gambar 4. 23 User Flow Cek Ongkir, Pick Up, Drop Off, dan Layanan + + 65 + 66 + +5) User Flow Gerai Terdekat + Pada user flow gerai terdekat dimulai dari halaman beranda, dimana + +pengguna sudah masuk menggunakan akun yang terdaftar. Pada halaman beranda +terdapat ikon serta label yang menunjukkan gerai terdekat. Pada label tersebut, +pengguna dapat memilih dengan mengklik dan kemudian akan menampilkan daftar +gerai terdekat yang ada. User Flow pada halaman gerai terdekat dapat dilihat pada +gambar 4.24 berikut. + + Gambar 4. 24 User Flow Gerai Terdekat +6) User Flow Berita + + Pada user flow berita dimulai dari halaman beranda, dimana pengguna sudah +masuk menggunakan akun yang terdaftar. Pada halaman beranda terdapat berita, +yang mana terdapat “Lihat Semua”. Pengguna dapat menekan “Lihat Semua” untuk +menampilkan daftar berita yang ada. Setelah itu, dapat di klik pada berita tersebut +dan nantinya akan menampilkan halaman detail dari berita tersebut. User Flow pada +halaman berita dapat dilihat pada gambar 4.25 berikut. + 67 + + Gambar 4. 25 User Flow Berita +7) User Flow Menu Paket + + Pada user flow menu paket dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Paket”. Pada +menu ini terdapat 2 tab yaitu Pengirim dan Penerima. Untuk melihat pada tab +pengirim, pengguna dapat mengklik pada “Pengirim” kemudian akan menampilkan +daftar paket pada tab pengirim. Pengguna dapat menekan pada daftar paket tersebut +dan kemudian menampilkan halaman lacak paket. + + Selanjutnya pada tab penerima, pengguna dapat mengklik pada “Penerima” +kemudian akan menampilkan daftar paket pada tab penerima. Pengguna dapat +menekan pada daftar paket tersebut dan kemudian menampilkan halaman lacak +paket. User Flow pada halaman menu paket dapat dilihat pada gambar 4.26 berikut. + 68 + + Gambar 4. 26 User Flow Menu Paket +8) User Flow Menu Pembayaran + + Pada user flow menu pembayaran dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Pembayaran”. +Pada menu ini terdapat 2 tab yaitu Pick Up dan Drop Down. Untuk melihat pada +tab pick up, pengguna dapat mengklik pada “Pick Up” kemudian akan +menampilkan daftar riwayat pembayaran pada tab pick up. Ketika pengguna +menekan pada daftar riwayat pembayaran tersebut akan menampilkan halaman +detail pembayaran. + + Selanjutnya pada tab drop off, pengguna dapat mengklik pada “drop off” +kemudian akan menampilkan daftar riwayat pembayaran pada tab drop off. +Pengguna dapat menekan pada daftar riwayat pembayaran tersebut dan kemudian +menampilkan halaman detail pembayaran. User Flow pada halaman menu +pembayaran dapat dilihat pada gambar 4.27 berikut. + 69 + + Gambar 4. 27 User Flow Menu Pembayaran +9) User Flow Edit Profil + + Pada user flow edit profil dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada ikon +edit profil. Setelah menekan edit profil, pengguna dapat mengubah foto profil, atay +mengubah nama, tanggal lahir, jenis kelamin, alamat, dan provinsi. Setelah +mengedit profil dapat menekan tombol “Simpan” dan kemudian apabila berhasil +akan menampilkan notifikasi berhasil, namun apabila gagal mengedit maka akan +menampilkan notifikasi gagal dan pengguna diminta untuk memasukkan inputan +yang sesuai. User Flow pada halaman edit profil dapat dilihat pada gambar 4.28 +berikut. + 70 + + Gambar 4. 28 User Flow Edit Profil +10) User Flow Draft + + Pada user flow draft ini dimulai ketika pengguna sudah masuk menggunakan +akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada halaman profil +ini akan menampilkan beberapa fitur, pengguna menekan pada fitur “Draft”. Pada +Draft ini terdapat 2 tab yaitu draft pick up dan draft drop off. Pengguna menekan +pada tab draft pick up atau drop off maka akan menampilkan daftar draft. Pada draft +tersebut pengguna dapat melihat detail draft atau menghapus draft. Untuk +menghapus daftar draft pada pick up atau drop off, pengguna dapat menekan ikon +hapus pada daftar dan kemudian akan menampilkan konfirmasi “Yakin ingin hapus + 71 + +draft?”, apabila tidak maka akan tetap menampilkan daftar draft, namun jika iya +maka akan menampikan notifikasi berhasil hapus dan draft terhapus. + + Apabila pengguna ingin melihat detail dari draft, maka dapat klik pada daftar +draft dan selanjutnya menampilkan halaman pick up atau drop off paket. Pada +bagian pengirim, pengguna memasukkan nama, no hp, alamat, label tempat, +provinsi, dan catatan. Pada halaman ini terdapat 2 tombol yaitu “Simpan Draft” dan +“Selanjutnya”. Jika sudah mengisi semuanya, namun pengguna belum ingin +melanjutkan maka dapat menekan pada tombol “Simpan Draft” yang nantinya akan +muncul konfirmasi “Yakin ingin simpan draft?” jika pengguna yakin, dapat +mengklik tombol “Simpan Draft” dan akan menampilkan notifikasi berhasil, +apabila tidak maka menampilkan halaman pick up seperti sebelumnya. Pada tombol +“Selanjutnya” digunakan jika pengguna sudah mengisi semuanya, dan akan +melanjutkan maka dapat mengklik pada tombol “Selanjutnya” dan mengarah ke +bagian penerima. Pada bagian penerima ini inputan dan fungsi tombol sama seperti +bagian pengirim yang mana pengguna memasukkan nama, no hp, alamat, label +tempat, provinsi, dan catatan. Selanjutnya pada tahap paket, setelah mengklik +tombol “Selanjutnya” pada bagian penerima, maka akan menampilkan pada bagian +paket. + + Bagian paket pada pick up dan drop off memiliki perbedaan yaitu pada tanggal +pick up (pada drop off tidak menggunakan tanggal pick up). Pada bagian paket, +pengguna memasukkan nama barang, berat, panjang, lebar, tinggi, layanan dan +tanggal pada pick up. Setelah mengisi semua inputan maka dapat mengklik tombol +“Selesai”, dan akan dialihkan pada halaman metode pembayaran dan pengguna +memilih metode pembayaran yang akan digunakan, jika sudah memilih maka dapat +mengklik tombol “Selesai” dan dialihkan ke halaman order dan pengguna dapat +klik tombol “Order”. User Flow pada draft dapat dilihat pada gambar 4.29 berikut. + 72 + + Gambar 4. 29 User Flow Draft +11) User Flow Daftar Kontak + + Pada user flow daftar kontak dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Daftar Kontak”. Setelah menekan daftar kontak, akan menampilkan halaman +daftar kotak. Pada halaman daftar kontak ini pengguna juga dapat menekan tombol +“Tambah Kontak”, lalu akan diarahkan kehalaman tambah kontak dan pengguna +memasukkan nama, no hp, email, alamat, provinsi, dan catatan. Setelah pengguna +memasukkan inputan dapat menekan tombol “Simpan Kontak” dan kemudian + 73 + +menampilkan notifikasi. User Flow pada halaman daftar kontak dapat dilihat pada +gambar 4.30 berikut + + Gambar 4. 30 User Flow Daftar Kontak +12) User Flow Alamat Saya + + Pada user flow alamat saya dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Alamat Saya”. Setelah menekan fitur tersebut, akan menampilkan halaman alamat +saya. Pada halaman ini, pengguna juga dapat menekan tombol “Tambah Alamat”, +yang akan diarahkan ke halaman tambah alamat dan pengguna memasukkan nama, +no hp, email, alamat, provinsi, dan catatan. Setelah pengguna memasukkan inputan +dapat menekan tombol “Simpan Alamat” dan kemudian menampilkan notifikasi. +User Flow pada halaman alamat saya dapat dilihat pada gambar 4.31 berikut. + 74 + + Gambar 4. 31 User Flow Alamat Saya +13) User Flow Notifikasi + + Pada user flow notifikasi dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Notifikasi”. Setelah menekan fitur, maka menampilkan daftar notifikasi, pengguna +dapat mengklik pada daftar notifikasi tersebut dan akan menampilkan ke halaman +lacak paket. User Flow pada halaman notifikasi dapat dilihat pada gambar 4.32 +berikut. + 75 + + Gambar 4. 32 User Flow Notifikasi +14) User Flow Tagihan Kurang Bayar + + Pada user flow tagihan kurang bayar dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Tagihan Kurang Bayar”. Setelah menekan fitur tersebut, maka akan menampilkan +halaman dari tagihan. User Flow pada halaman tagihan kurang bayar dapat dilihat +pada gambar 4.33 berikut. + 76 + + Gambar 4. 33 User Flow Tagihan Kurang Bayar +15) User Flow Syarat dan ketentuan + + Pada user flow syarat dan ketentuan dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Syarat dan Ketentuan”. Setelah menekan syarat dan ketentuan, maka akan +menampilkan halaman detail dari syarat dan ketentuan. User Flow pada halaman +syarat dan ketentuan dapat dilihat pada gambar 4.34 berikut. + 77 + + Gambar 4. 34 User Flow Syarat dan Ketentuan +16) User Flow Kebijakan Privasi + + Pada user flow kebijakan privasi dimulai ketika pengguna sudah masuk +menggunakan akun yang terdaftar, kemudian menekan pada menu “Profil”. Pada +halaman profil ini akan menampilkan beberapa fitur, pengguna menekan pada fitur +“Kebijakan Privasi”. Setelah menekan fitur tersebut, maka akan menampilkan +halaman detail dari kebijakan privasi. User Flow pada halaman kebijakan privasi +dapat dilihat pada gambar 4.35 berikut. + 78 + + Gambar 4. 35 User Flow Kebijakan Privasi +17) User Flow Ubah Kata Sandi, Hapus Akun, Keluar + + Pada user flow ubah kata sandi, hapus akun dan keluar ini dimulai ketika +pengguna sudah masuk menggunakan akun yang terdaftar, kemudian menekan pada +menu “Profil”. Pada halaman profil ini akan menampilkan beberapa fitur, pengguna +menekan pada fitur “Pengaturan Akun”. Pada pengaturan akun ini terdiri dari ubah +kata sandi, pengguna dapat mengklik pada “Ubah Kata Sandi” untuk mengubah +kata sandi. Setelah klik fitur tersebut maka akan menampilkan halaman ubah kata +sandi, yang mana pengguna memasukkan kata sandi lama, kata sandi baru, dan +konfirmasi kata sandi baru. Setelah mengisi semua inputan maka dapat klik tombol +“Simpan”. Apabila pengguna berhasil mengubah sandi maka akan menampilkan +notifikasi berhasil, namun apabila tidak berhasil maka akan menampilkan notifikasi +gagal dan diminta untuk memasukkan inputan yang sesuai. + + Selain ubah kata sandi, terdapat juga fitur hapus akun. Untuk hapus akun ini +pengguna mengklik pada “Hapus Akun” dan kemudian akan muncul konfirmasi + 79 +“Apakah yakin ingin hapus akun?”, jika pengguna yakin maka dapat menekan +tombol “Ya” lalu beralih ke halaman masuk, namun apabila klik tombol “Tidak” +maka akan menampikan halaman pengaturan akun. Kemudian terdapat juga fitur +keluar, pada fitur ini apabila pengguna ingin keluar dapat menekan “Keluar” lalu +akan muncul konfirmasi “Yakin ingin keluar?”, Jika pengguna yakin maka dapat +menekan tombol “Ya” lalu akan beralih ke halaman masuk, namun apabila klik +tombol “Tidak” maka akan menampikan halaman pengaturan akun. User Flow pada +ubah kata sandi, hapus akun dan keluar dapat dilihat pada gambar 4.36 berikut. + + Gambar 4. 36 User Flow Ubah Kata Sandi, Hapus Akun dan Keluar + 80 +4.4.4 Prototype + + Pada tahap prototype ini sebagai representasi awal dari ide atau solusi yang +telah dibuat untuk menguji dan memvalidasi ide dengan pengguna. Adapun +pembuatan desain ini menggunakan design system yang terdiri dari warna, teks, +dan grid system. Design system yang digunakan untuk membuat desain ini dapat +dilihat pada gambar 4.37 berikut. + + Gambar 4. 37 Design System + Berdasarkan design system pada gambar 4.37 tersebut memiliki makna pada +penggunaannya, Makna penggunaan dari masing masing komponen adalah sebagai +berikut: + 81 + +a. Warna + Pada bagian warna terdapat warna primary, secondary dan neutral. Pada + +warna primary menggunakan warna merah dengan kode #D42B2E, kemudian pada +warna secondary menggunakan warna abu abu dengan kode #A2A2A2. Pemilihan +warna merah ini selain merupakan identitas dari SiCepat, juga memiliki makna +yaitu kuat, kebahagiaan, kemenangan, berani, menarik perhatian dan penuh +semangat (Karja, 2021). Sedangkan pada warna abu abu bermakna untuk memberi +ketenangan, dan kebijaksanaan (Dafrina, Abadi and Purnama Lisa, 2022). Pada +warna netral terdapat hitam dan putih, yang mana pada warna putih sebagai +background, menurut (Dafrina, Abadi and Purnama Lisa, 2022), warna putih +memiliki makna cahaya, kesucian, kejujuran, ketulusan, bersih. + + Pengguna warna abu abu dengan kode #6C6C6C digunakan sebagai deskripsi +pada teks agar terlihat jelas. Pada warna abu abu dengan kode #515151 ini +digunakan sebagai inputan yang sudah terisi. Kemudian pada warna abu abu kode +#B2B2B2 digunakan sebagai inputan yang belum terisi. Pada kode warna #363636 +digunakan untuk judul halaman. Selanjutnya penggunaan teks berwana hitam kode +#000000 digunakan untuk notifikasi baik notifikasi gagal maupun berhasil yang +makna memiliki makna tegas. Warna putih kode #FFFFFF, penggunaan warna ini +digunakan pada halaman yang memiliki background merah. Warna merah kode +#D42B2E pada teks digunakan disesuaikan dengan warna primary dan digunakan +untuk aksi. + + Berdasarkan karakteristik responden yang ada, kebanyakan berusia 20 +tahunan yang mana pada perpaduan warna merah, putih dan abu abu dapat +memberikan kesan desain yang bersih, menarik perhatian dan energik sesuai +dengan karakteristik usia responden yang cenderung aktif. +b. Tipografi + + Pada pembuatan desain ini menggunakan teks “Poppins”. Menurut (Fitri, +Andreas Rio Adriyanto and Jiwa Utama, 2024), Teks Poppins merupakan font jenis +sans-serif, yang dalam bahasa Prancis memiliki makna tidak memiliki kait pada +ujung bagian hurufnya. dengan tingkat keterbacaan yang tinggi. Selain itu menurut +(Tri Atmaji et al., 2024), font ini memiliki bentuk modern, minimalis dan tidak + 82 + +terlalu tebal namun tegas dengan tingkat ketebalan yang dapat digunakan yaitu +Bold, Medium, Regular dan Light. Adapun aplikasi yang menggunakan font +Poppins antara lain aplikasi Auto Kirim, Borobudur Marathon, Borzo, Kasir +Warung, dan Mr Speedy. +c. Grid + + Penggunaan grid ini membantu memudahkan posisi atau tata letak agar rapi +dan konsisten selain itu untuk menjaga jarak antar elemen lainnya. Penggunan grid +pada mobile menggunakan 4 Column, Margin 16 dan Gutter 16, agar tidak terlalu +dekat dengan tepi layar (Tri Atmaji et al., 2024). + + Pada tahap prototype, terdapat 2 tahapan yaitu low fidelity dan high fidelity. +Pada tahap Low Fidelity peneliti membuat tampilan kasar atau sketsa tanpa warna, +sedangkan pada tahap High Fidelity sudah terdapat warna. +a. Low Fidelity + + Pada tahapan low fidelity ini, peneliti membuat tampilan kerangka awal +dengan sederhana tanpa ada warna atau menggunakan warna abu abu dengan +bentuk kotak, garis dan lingkaran untuk mewakili tombol, teks dan gambar. Berikut +untuk tampilan low fidelity. + +1) Halaman Splash Screen + Pada halaman splash screen terdapat lingkaran yang mana sebagai logo dari + +SiCepat, garis sebagai teks tagline dan terdapat tombol. Tampilan low fidelity +halaman splash screen dapat dilihat pada gambar 4.38 berikut. + 83 + + Gambar 4. 38 Low Fidelity Splash Screen +2) Halaman Masuk + + Pada halaman masuk terdapat inputan no hp dan kata sandi, dan teks lupa +sandi serta terdapat tombol masuk. Terdapat juga tombol untuk masuk dengan opsi +lain, serta terdapat untuk klik daftar. Tampilan low fidelity halaman splash screen +dapat dilihat pada gambar 4.39 berikut. + + Gambar 4. 39 Low Fidelity Masuk +3) Halaman Lupa Sandi + + Pada halaman lupa sandi ini, terdapat judul halaman, kemudian terdapat +informasi mengenai sandi. Selain itu terdapat inputan no hp dan terdapat tombol. +Tampilan low fidelity halaman lupa sandi dapat dilihat pada gambar 4.40 berikut. + 84 + + Gambar 4. 40 Low Fidelity Lupa Sandi +4) Halaman Kode Verifikasi + + Pada halaman kode verifikasi ini, terdapat perintah untuk memasukkan kode, +kemudian 4 inputan untuk kode verifikasi. Selain itu terdapat tombol untuk +melanjutkan. Tampilan low fidelity halaman kode verifikasi dapat dilihat pada +gambar 4.41 berikut. + + Gambar 4. 41 Low Fidelity Kode Verifikasi +5) Halaman Atur Sandi Baru + + Pada halaman atur sandi, terdapat judul halaman, informasi mengenai sandi. +Selain itu juga terdapat inputan sandi baru dan konfirmasi sandi baru, serta tombol + 85 +untuk simpan. Tampilan low fidelity halaman atur ulang sandi baru dapat dilihat +pada gambar 4.42 berikut. + + Gambar 4. 42 Low Fidelity Atur Ulang Sandi +6) Halaman Daftar + + Pada halaman daftar, terdapat inputan yaitu nama, no hp, email, tanggal lahir, +jenis kelamin, kata sandi, dan konfimasi kata sandi. Kemudian terdapat tombol +untuk daftar dan opsi daftar cara lain, serta untuk klik masuk. Tampilan low fidelity +halaman daftar dapat dilihat pada gambar 4.43 berikut. + + Gambar 4. 43 Low Fidelity Daftar + 86 + +7) Halaman Beranda + Pada halaman beranda terdapat icon untuk profil dan pusat bantuan, kotak + +untuk informasi gopay dan poin, lacak paket, cek ongkir, pick up, drop off, dan +gerai terdekat. Kemudian terdapat promo, berita, lihat semua pada berita, layanan +dan lihat semua pada layanan. Tampilan low fidelity halaman beranda dapat dilihat +pada gambar 4.44 berikut. + + Gambar 4. 44 Low Fidelity Beranda +8) Halaman Pusat Bantuan + + Pada halaman pusat bantuan terdapat lingkaran untuk logo, judul halaman, +bantuan WhatsApp, bantuan email, bantuan telepon, dan pertanyaan yang sering +diajukan. Tampilan low fidelity halaman bantuan dapat dilihat pada gambar 4.45 +berikut. + 87 + + Gambar 4. 45 Low Fidelity Pusat Bantuan +9) Halaman Pertanyaan yang sering diajukan + + Pada halaman pertanyaan yang sering diajukan, terdapat icon untuk kembali, +judul halaman, pertanyaan dan icon untuk jawabana. Tampilan low fidelity halaman +pertanyaan yang sering diajukan dapat dilihat pada gambar 4.46 berikut. + + Gambar 4. 46 Low Fidelity FAQ +10) Halaman Lacak Paket + + Pada halaman lacak paket terdapat icon untuk kembali, kemudian search bar +dan icon scan, serta menampilkan daftar riwayat lacak apabila pengguna sudah + 88 + +melakukan lacak sebelumnya. Ketika pengguna memasukkan kode resi atau +melakukan scan pada kode, maka akan menampilkan halaman tracking yang +memberitahukan lokasi, alamat pengiriman, nama barang, nama kurir dan status +pengiriman. Tampilan low fidelity halaman lacak paket dapat dilihat pada gambar +4.47 berikut. + + Gambar 4. 47 Low Fidelity Lacak Paket +11) Halaman Cek Ongkir + + Pada halaman cek ongkir, terdapat inputan yaitu alamat asal, alamat tujuan +panjang, lebar, tinggi, dan berat barang serta tombol untuk cek ongkir. Tampilan +low fidelity halaman cek ongkir dapat dilihat pada gambar 4.48 berikut. + 89 + + Gambar 4. 48 Low Fidelity Cek Ongkir +12) Halaman Pick Up + + Pada halaman pick up, terdapat 3 bagian untuk inputan yaitu pengirim, +penerima, dan paket. +a) Pengirim + + Pada bagian pengirim, terdapat langkah atau tahapan, nama, no hp, alamat +pengirim, label tempat, provinsi, kota, kecamatan dan catatan. Serta terdapat tombol +simpan draft dan selanjutnya. Tampilan low fidelity halaman pick up pengirim dapat +dilihat pada gambar 4.49 berikut. + + Gambar 4. 49 Low Fidelity Pick Up (Pengirim) + 90 + +b) Penerima + Pada bagian penerima, terdapat langkah atau tahapan, nama, no hp, alamat + +peneriman, label tempat, provinsi, kota, kecamatan dan catatan. Serta terdapat +tombol simpan draft dan selanjutnya. Tampilan low fidelity halaman pick up +penerima dapat dilihat pada gambar 4.50 berikut. + + Gambar 4. 50 Low Fidelity Pick Up (Penerima) +c) Paket + + Pada bagian paket, terdapat langkah atau tahapan, nama, berat, panjang, lebar, +tinggi barang, layanan, dan tanggal pick up. Serta terdapat tombol simpan draft dan +tombol selesai. Tampilan low fidelity halaman pick up paket dapat dilihat pada +gambar 4.51 berikut. + + Gambar 4. 51 Low Fidelity Pick Up (Paket) + 91 + +13) Halaman Detail Pick Up + Pada halaman detail pick up, terdapat informasi mengenai nama, no hp dan + +alamat pengirim maupun penerima, nama barang, waktu pick up, layanan, voucher, +metode pembayaran dan rincian pembayaran, serta terdapat tombol order. Tampilan +low fidelity halaman detail pick up dapat dilihat pada gambar 4.52 berikut + + Gambar 4. 52 Low Fidelity Detail Pick Up +14) Halaman Voucher + + Pada halaman voucher, Halaman voucher terdapat 2 tab yaitu voucherku dan +hadiah poin. Pada bagian voucherku, terdapat untuk inputan kode voucher serta +tombol pakai, terfapat judul, keterangan dan tanggal berlaku serta radio button dan +tombol gunakan. Bagian hadiah poin menampilkan informasi poin, judul, +keterangan tanggal berlaku, radio button dan tombol gunakan. Tampilan low fidelity +halaman voucher dapat dilihat pada gambar 4.53 berikut. + 92 + + Gambar 4. 53 Low Fidelity Voucher +15) Halaman Drop Off + + Pada halaman drop off, terdapat 3 bagian untuk inputan yaitu pengirim, +penerima, dan paket. +a) Pengirim + + Pada bagian pengirim, terdapat langkah atau tahapan, nama, no hp, alamat +pengirim, label tempat, provinsi, kota, kecamatan dan catatan. Serta terdapat tombol +simpan draft dan selanjutnya. Tampilan low fidelity halaman drop off pengirim +dapat dilihat pada gambar 4.54 berikut. + + Gambar 4. 54 Low Fidelity Drop Off (Pengirim) + 93 + +b) Penerima + Pada bagian penerima, terdapat langkah atau tahapan, nama, no hp, alamat + +penerima, label tempat, provinsi, kota, kecamatan dan catatan. Serta terdapat +tombol simpan draft dan selanjutnya. Tampilan low fidelity halaman drop off +penerima dapat dilihat pada gambar 4.55 berikut. + + Gambar 4. 55 Low Fidelity Drop Off (Penerima) +c) Paket + + Pada bagian paket, terdapat langkah atau tahapan, nama, berat, panjang, lebar, +tinggi, dan layanan. Serta terdapat tombol simpan draft dan selesai. Tampilan low +fidelity halaman drop off paket dapat dilihat pada gambar 4.56 berikut. + + Gambar 4. 56 Low Fidelity Drop Off (Paket) + 94 + +16) Halaman Detail Drop Off + Pada halaman detail drop off, terdapat informasi mengenai nama, alamat + +pengirim dan nama, alamat penerima, nama barang, layanan, voucher, metode +pembayaran dan rincian pembayaran, serta terdapat tombol order. Tampilan low +fidelity halaman detail drop off dapat dilihat pada gambar 4.57 berikut. + + Gambar 4. 57 Low Fidelity Detail Drop Off +17) Halaman Gerai Terdekat + + Halaman gerai terdapat judul halaman, dan daftar gerai yang mana pada daftar +terdapat ikon lokasi, judul, dan keterangan. Tampilan low fidelity halaman gerai +terdekat dapat dilihat pada gambar 4.58 berikut. + 95 + + Gambar 4. 58 Low Fidelity Gerai Terdekat +18) Halaman Berita + + Halaman gerai terdapat judul halaman, foto berita, judul, keterangan berita +dan baca selengkapnya. Tampilan low fidelity halaman berita dapat dilihat pada +gambar 4.59 berikut. + + Gambar 4. 59 Low Fidelity Berita +19) Halaman Detail Berita + + Pada halaman detail berita, terdapat judul halaman, foto berita, judul dan isi +berita. Tampilan low fidelity halaman detail berita dapat dilihat pada gambar 4.60 +berikut. + 96 + + Gambar 4. 60 Low Fidelity Detail Berita +20) Halaman Layanan + + Halaman layanan terdapat judul halaman, dan daftar layanan yang mana pada +daftar terdapat logo layanan, judul, tagline dan tombol kirim paket. Tampilan low +fidelity halaman layanan dapat dilihat pada gambar 4.61 berikut. + + Gambar 4. 61 Low Fidelity Layanan + 97 + +21) Halaman Menu Paket + Pada halaman menu paket ini terbagi menjadi 2 tab, yaitu pengirim dan + +penerima +a) Pengirim + + Pada bagian pengirim, menampilkan kode resi, nama barang, status +pengiriman, dan tanggal pengiriman. Tampilan low fidelity halaman paket tab +pengirim dapat dilihat pada gambar 4.62 berikut. + + Gambar 4. 62 Low Fidelity Menu Paket (Pengirim) +b) Penerima + + Pada bagian penerima, menampilkan marketplace, kode resi, status +pengiriman, dan tanggal pengiriman. Tampilan low fidelity halaman paket tab +penerima dapat dilihat pada gambar 4.63 berikut. + + Gambar 4. 63 Low Fidelity Menu Paket (Penerima) + 98 + +22) Halaman Menu Profil + Pada bagian menu profil, menampilkan ikon profil, nama profil, no ho, dan + +email. Selain itu terdapat fitur lainnya yaitu edit profil, pengaturan akun, daftar +draft, daftar kontak, tagihan kurang bayar, alamat saya, notifikasi, syarat dan +ketentuan, dan kebijakan privasi. Tampilan low fidelity halaman menu profil dapat +dilihat pada gambar 4.64 berikut. + + Gambar 4. 64 Low Fidelity Menu Profil +23) Halaman Pengaturan Akun + + Pada halaman pengaturan akun, terdapat fitur ubah kata sandi, keluar dan +hapus akun. Tampilan low fidelity halaman pengaturan akun dapat dilihat pada +gambar 4.65 berikut. + + Gambar 4. 65 Low Fidelity Pengaturan Akun + 99 + +24) Halaman Ubah Kata Sandi + Pada halaman ubah kata sandi, menampilkan judul, informasi terkait ubah + +sandi, inputan sandi lama, kata sandi baru, dan konfirmasi kata sandi serta tombol +untuk simpan. Tampilan low fidelity halaman ubah kata sandi dapat dilihat pada +gambar 4.66 berikut. + + Gambar 4. 66 Low Fidelity Ubah Kata Sandi +25) Halaman Tagihan Kurang Bayar + + Pada halaman tagihan kurang bayar, menampilkan logo, dan informasi terkait +tagihan kurang bayar. Tampilan low fidelity halaman tagihan kurang bayar dapat +dilihat pada gambar 4.67 berikut. + + Gambar 4. 67 Low Fidelity Tagihan Kurang Bayar + 100 + +26) Halaman Daftar Kontak + Pada halaman daftar kontak, menampilkan judul halaman, search bar dan + +daftar kontak yang sudah disimpan. Pada daftar kontak menampilkan nama, no hp +dan alamat serta ikon opsi untuk ubah dan hapus kontak serta tombol untuk tambah +kontak. Tampilan low fidelity halaman daftar kontak dapat dilihat pada gambar 4.68 +berikut. + + Gambar 4. 68 Low Fidelity Daftar Kontak +27) Halaman Tambah Kontak + + Pada halaman tambah kontak, menampilkan judul halaman, nama lengkap, +nomor hp, email, alamat, provinsi, kota, kecamatan dan catatan, serta tombol untuk +simpan kontak. Tampilan low fidelity halaman tambah kontak dapat dilihat pada +gambar 4.69 berikut. + + Gambar 4. 69 Low Fidelity Tambah Kontak + 101 + +28) Halaman Alamat Saya + Pada halaman alamat saya, menampilkan judul halaman, search bar dan daftar + +alamat yang sudah disimpan. Pada daftar alamat menampilkan nama, dan alamat +serta ikon opsi untuk simpan alamat sebagai utama, ubah dan hapus alamat serta +tombol untuk tambah alamat. Tampilan low fidelity halaman tambah alamat dapat +dilihat pada gambar 4.70 berikut. + + Gambar 4. 70 Low Fidelity Alamat Saya +29) Halaman Tambah Alamat + + Pada halaman tambah alamat, menampilkan judul halaman, nama pengirim, +nomor hp, alamat, label tempat, provinsi, kota, kecamatan dan catatan, serta tombol +untuk simpan alamat. Tampilan low fidelity halaman tambah alamat dapat dilihat +pada gambar 4.71 berikut. + + Gambar 4. 71 Low Fidelity Tambah Alamat + 102 +30) Halaman Syarat dan Ketentuan + + Pada halaman syarat dan ketentuan ini, menampilkan ikon kembali, judul +halaman, logo dan informasi syarat dan ketentuan. Tampilan low fidelity halaman +syarat dan ketentuan dapat dilihat pada gambar 4.72 berikut. + + Gambar 4. 72 Low Fidelity Syarat dan Ketentuan +31) Halaman Kebijakan Privasi + + Pada halaman kebijakan privasi ini, menampilkan ikon kembali, judul +halaman, dan informasi kebijakan privasi. Tampilan low fidelity halaman kebijakan +privasi dapat dilihat pada gambar 4.73 berikut. + + Gambar 4. 73 Low Fidelity Kebijakan Privasi + 103 + +b. High Fidelity + Pada tahapan high fidelity ini, peneliti membuat tampilan visual dilengkapi + +warna dan disertai interaksi antar halaman. Berikut untuk link prototype pada +desain: +https://figma.fun/pzWqOA +1) Halaman Splash Screen + + Halaman Splash Screen merupakan halaman pertama yang muncul ketika +pengguna menjalankan aplikasi. Pada halaman ini memiliki latar belakang gradasi +merah dengan menampilkan logo, nama, dan ikon aplikasi. Setelah beberapa detik +akan menampilkan halaman untuk memulai aplikasi dengan menampilkan logo, +nama, ikon, tagline serta tombol masuk atau daftar. Pada tombol masuk ini memiliki +latar belakang merah dan teks berwarna putih, sementara pada bagian daftar hanya +ditampilkan teks berwarna merah. Tampilan halaman Splash Screen dapat dilihat +pada gambar 4.74 berikut. + + Gambar 4. 74 High Fidelity Splash Screen +2) Halaman Masuk + + Pada halaman masuk ini, menampilkan latar belakang berwarna merah dan +terdapat card berwarna putih yang berisi elemen-elemen yaitu judul halaman, dua + 104 + +kolom textfield untuk inputan nomor hp dan kata sandi serta ikon untuk melihat kata +sandi, selain itu juga terdapat teks untuk lupa sandi yang berwarna merah. Adapun +tombol masuk ini memiliki latar belakang merah dan teks berwarna putih, selain itu +terdapat tampilan opsi untuk masuk menggunakan google. Pada bagian bawah +terdapat teks untuk melakukan daftar dengan warna merah untuk ajakan mendaftar. +Tampilan halaman masuk dapat dilihat pada gambar 4.75 berikut. + + Gambar 4. 75 High Fidelity Masuk +3) Halaman Lupa Sandi + + Halaman lupa sandi ini, di bagian atas terdapat ikon untuk back dan juga judul +halaman. Selanjutnya terdapat teks keterangan untuk memberitahukan pengguna +bahwa harus memasukkan nomor hp yang sudah terdaftar, kemudian terdapat satu +kolom textfield di dalam card untuk memasukkan inputan nomor hp. Pada bagian +bawah terdapat tombol untuk melanjutkan dengan latar belakang berwarna merah +dan teks berwarna putih. Tampilan halaman Splash Screen dapat dilihat pada +gambar 4.76 berikut. + 105 + + Gambar 4. 76 High Fidelity Lupa Sandi +4) Halaman Kode Verifikasi + + Halaman kode verifikasi ini terdapat ikon untuk back, serta judul halaman. +Selanjutnya di bawah judul halaman terdapat keterangan singkat untuk +memberitahukan pengguna untuk memasukkan kode yang telah didapatkan melalui +SMS pada nomor hp dan terdapat 4 card untuk memasukkan kode verifikasi +tersebut. Setelah card tersebut terdapat tombol teks “Kirim Ulang” serta waktu +kadaluwarsa kode dengan warna merah. Kemudian terdapat tombol “Lanjut” +dengan latar belakang berwarna merah dan teks berwarna putih. Tampilan halaman +kode verifikasi dapat dilihat pada gambar 4.77 berikut. + + Gambar 4. 77 High Fidelity Kode Verifikasi + 106 + +5) Halaman Atur Ulang Kata Sandi + Bagian atas halaman ini terdapat tombol untuk kembali dan judul halaman, + +kemudian terdapat sebuah card berwarna biru yang berisi ikon informasi dan +informasi terkait ketentuan kata sandi baru yaitu kombinasi huruf, angka, simbol +dan minimal karakter. Selanjutnya terdapat card yang berisi dua kolom textfield +untuk kata sandi baru dan konfirmasi kata sandi serta ikon untuk melihat kata sandi. +Bagian bawah halaman ini terdapat tombol simpan dengan latar belakang merah +dan teks putih. Tampilan halaman atur ulang sandi dapat dilihat pada gambar 4.78 +berikut. + + Gambar 4. 78 High Fidelity Atur Ulang Sandi +6) Halaman Daftar + + Halaman daftar ini menampilkan latar belakang berwarna merah dan terdapat +card berwarna putih yang berisi elemen-elemen yaitu judul halaman, enam kolom +textfield untuk inputan nama lengkap, nomor hp, email, tanggal lahir, kata sandi dan +konfirmasi kata sandi serta ikon untuk melihat kata sandi. Terdapat juga tombol +“Daftar” yang memiliki latar belakang merah dan teks berwarna putih, selain itu +terdapat tampilan opsi untuk daftar menggunakan google. Pada bagian bawah +terdapat teks untuk melakukan masuk dengan warna merah untuk ajakan masuk +apabila sudah memiliki akun. Tampilan halaman daftar dapat dilihat pada gambar +4.79 berikut. + 107 + + Gambar 4. 79 High Fidelity Daftar +7) Halaman Beranda + + Halaman beranda merupakan halaman yang tampil setelah pengguna berhasil +masuk. Pada halaman ini menampilkan foto profil, nama pengguna, lokasi dan ikon +untuk batuan. Kemudian terdapat card yang berisi ikon saldo, teks saldo, jumlah +saldo, ikon poin, teks poin dan jumlah poin. Selanjutnya terdapat card untuk +melakukan lacak paket dengan memasukkan nomor resi dan juga ikon untuk scan, +selain itu terdapat card yang berisikan ikon dan teks fitur yaitu untuk cek ongkir, +pick up, drop off, dan gerai terdekat. Kemudian terdapat juga card yang berisikan +mengenai promo dengan menampilkan keterangan, jumlah, dan tanggal, terdapat +juga layanan dengan menampilkan card yang berisikan judul layanan dan tombol +“Kirim Paket” serta terdapat teks berwarna merah untuk lihat semua dari layanan. +Selain itu di bagain bawah terdapat berita dengan menampilkan card yang berisikan +foto, judul berita dan terdapat teks berwarna merah untuk lihat semua dari berita. +Tampilan halaman beranda dapat dilihat pada gambar 4.80 berikut. + 108 + + Gambar 4. 80 High Fidelity Beranda +8) Halaman Pusat Bantuan + + Pada halaman ini menampilkan ikon untuk back, logo customer service, nama +pengguna, dan pertanyaan terkait bantuan. Selanjutnya menampilkan judul +halaman, fitur bantuan dengan menampilkan ikon dari masing masing bantuan yaitu +WhatsApp, Email, Telepon atau pertanyaaan yang sering diajukan. Tampilan +halaman pusat bantuan dapat dilihat pada gambar 4.81 berikut. + + Gambar 4. 81 High Fidelity Pusat Bantuan + 109 + +9) Halaman Pertanyaan yang sering diajukan + Pada halaman ini menampilkan ikon untuk back, judul halaman dan card + +berisi pertanyaan yang sering diajukan, beserta ikon drop down untuk melihat +jawaban dari pertanyaan tersebut. Tampilan halaman pertanyaan yang sering +ditanyakan dapat dilihat pada gambar 4.82 berikut. + + Gambar 4. 82 High Fidelity FAQ +10) Halaman Lacak Paket + + Halaman lacak ini menampilkan ikon untuk back, judul halaman dan kolom +untuk inputan nomor resi yang terdapat ikon untuk pencarian dan scan resi. Selain +itu terdapat logo tracking dan card putih yang berisikan elemen-elemen yaitu judul +riwayat pelacakan, ikon paket, kode resi, status paket, dan tanggal. Tampilan +halaman kode resi lacak paket dapat dilihat pada gambar 4.83 berikut. + 110 + + Gambar 4. 83 High Fidelity Lacak Paket + Selain pengguna memasukkan kode resi, pengguna juga dapat melakukan +pencarian dengan scan kode resi. Pada halaman scan ini menampilkan ikon untuk +back, judul halaman keterangan singkat untuk pengambilan gambar resi. Tampilan +halaman scan kode lacak paket dapat dilihat pada gambar 4.84 berikut. + + Gambar 4. 84 High Fidelity Scan Kode Resi + Setelah pengguna memasukkan atau mengscan kode, maka selanjutnya akan +diarahkan ke halaman lacak paket untuk mengetahui posisi paket. Pada halaman ini +menampilkan ikon untuk back, judul halaman, gambar peta atau lokasi paket, kode + 111 +resi, tanggal pengiriman, detail pengirim, detail barang, kurir dan status +pengantaran. Tampilan halaman lacak paket dapat dilihat pada gambar 4.85 berikut. + + Gambar 4. 85 High Fidelity Lacak Paket +11) Halaman Cek Ongkir + + Pada halaman cek ongkir, menampilkan ikon untuk kembali dan logo terkait +paket dengan latar belakang merah. Kemudian terdapat card putih yang berisikan +judul halaman, textfield untuk alamat pengiriman dan informasi barang serta tombol +untuk cek ongkir dengan latar belakang merah dan teks berwarna putih. Tampilan +halaman cek ongkir dapat dilihat pada gambar 4.86 berikut. + + Gambar 4. 86 High Fidelity Cek Ongkir + 112 + + Setelah pengguna memasukkan alamat dan barang, maka akan menampilkan +estimasi biaya, dan pilihan pengiriman. Pada halaman ini menampilkan judul +halaman dan ikon untuk batal, selain itu menampilkan ikon dan teks terkait alamat +pengiriman dan detail barang. Terdapat juga pilihan pengantaran dengan +menampilkan logo layanan, harga, dan card berwarna biru untuk estimasi waktu +pengiriman. Bagian bawah terdapat card untuk pilihan kirim paket pick up atau drop +off. Tampilan halaman estimasi biaya dan pengiriman dapat dilihat pada gambar +4.87 berikut. + + Gambar 4. 87 High Fidelity Estimasi Biaya +12) Halaman Pick Up + + Pada halaman pick up ini terdapat 3 tahapan, yaitu pada pengirim, penerima +dan paket. +a) Pengirim + + Bagian pengirim ini, menampilkan ikon untuk kembali, ilustrasi pengiriman +dengan latar belakang merah, dan terdapat card putih yang berisikan judul halaman, +alur tahapan, serta card untuk inputan yaitu nama pengirim, nomor hp, alamat +pengirim, label tempat, provinsi, kota, kecamatan dengan ikon drop down dan +catatan. Tampilan halaman pick up pengirim dapat dilihat pada gambar 4.88 berikut. + 113 + + Gambar 4. 88 High Fidelity Pick Up (Pengirim) + Jika pengirim memasukkan alamat secara manual, maka dapat memilih +provinsi, kota, kecamatan menggunakan drop down dan akan menampilkan bottom +sheet yang berisikan judul halaman, ikon batal, card untuk mencari lokasi dan daftar +provinsi, kota, kecamatan yang terdapat SiCepat Ekspress. Tampilan halaman drop +down provinsi, kota, kecamatan dapat dilihat pada gambar 4.89 berikut. + + Gambar 4. 89 High Fidelity Provinsi, Kota, dan Kecamatan + Apabila pengirim memasukkan alamat secara otomatis dengan menggunakan +peta, maka dapat menekan tombol “Pilih lewat peta” dan akan dialihkan ke halaman + 114 + +pilih peta. Pada halaman pilih peta ini menampilkan 2 tab yaitu cari peta dan +terakhir dilihat. Pada tab cari peta akan menampilkan card untuk mencari alamat, +gambar peta dan bottom sheet yang menampilkan kota dan alamat sesuai yang +dipilih. Sedangkan tab terakhir dilihat menampilkan card yang berisikan kota dan +alamat legkap. Tampilan halaman pilih peta dapat dilihat pada gambar 4.90 berikut. + + Gambar 4. 90 High Fidelity Pilih Alamat +b) Penerima + + Bagian penerima ini, bisa diakses setelah bagian pengirim sudah terisi. +Halaman ini menampilkan ikon untuk kembali, ilustrasi pengiriman dengan latar +belakang merah, dan terdapat card putih yang berisikan judul halaman, alur +tahapan, serta card untuk inputan yaitu nama penerima, nomor hp, alamat penerima, +label tempat, provinsi, kota, kecamatan dengan ikon drop down dan catatan. Pada +alur tahapan bagian penerima, bagian tahapan pengirim berwarna merah pada +lingkarannya dan terdapat ceklist berwarna putih. Tampilan halaman pick up +penerima dapat dilihat pada gambar 4.91 berikut. + 115 + + Gambar 4. 91 High Fidelity Pick Up (Penerima) +c) Paket + + Bagian paket ini, bisa diakses setelah bagian pengirim dan penerima sudah +terisi. Halaman ini menampilkan ikon untuk kembali, ilustrasi pengiriman dengan +latar belakang merah, dan terdapat card putih yang berisikan judul halaman, alur +tahapan, serta card untuk inputan yaitu nama barang, berat barang, panjang, lebar, +tinggi barang serta layanan yang terdapat ikon drop down, dan tanggal pick up. Pada +alur tahapan bagian paket, bagian tahapan pengirim dan penerima berwarna merah +pada lingkarannya dan terdapat ceklist berwarna putih. Tampilan halaman pick up +paket dapat dilihat pada gambar 4.92 berikut. + + Gambar 4. 92 High Fidelity Pick Up (Paket) + 116 + +13) Halaman Metode Pembayaran + Setelah pengguna memasukkan semua inputan pada bagian pengirim, + +penerima dan paket maka selanjutnya akan dialihkan ke halaman metode +pembayaran. Pada halaman pembayaran ini menampilkan ikon back, judul halaman +dibagian atas dan kemudian terdapat keterangan untuk memilih metode +pembayaran. Kemudian terdapat card dan berisi opsi pilihan pembayaran yaitu +tunai, Gopay, OVO dan radio button. Tampilan halaman metode pembayaran dapat +dilihat pada gambar 4.93 berikut. + + Gambar 4. 93 High Fidelity Metode Pembayaran +14) Halaman Detail Order Pick Up + + Selanjutnya setelah pengguna sudah memilih metode pembayaran, maka akan +menampilkan detail order pick up. Halaman ini pada bagian atas menampilkan ikon +back, ilustrasi pengiriman dengan latar belakang merah dan kemudian terdapat card +putih yang menampilkan informasi mengenai detail pick up yaitu alamat asal, +alamat tujuan, nama barang, waktu pick up, layanan yang menampilkan logo dan +card berisi estimasi waktu, voucher, metode pembayaran, dan rincian pembayaran, +serta terdapat tombol “Order” dengan latar belakang merah dan teks putih. +Tampilan halaman detail order pick up dapat dilihat pada gambar 4.94 berikut. + 117 + + Gambar 4. 94 High Fidelity Detail Pick Up +15) Halaman Voucher + + Pada halaman ini, menampilkan daftar voucher yang tersedia. Pada bagian +atas terdapat ikon untuk kembali dan judul halaman. Kemudian terdapat card untuk +memasukkan kode voucher dan tombol “Pakai” dengan latar belakang warna merah +teks putih. Selanjutnya menampilkan card yang berisikan voucher dengan judul +voucher, keterangan, waktu dan radio button. Bagian “Hadiah Poin” menampilkan +card berwarna biru dengan ikon info, dan jumlah poin. Tampilan halaman voucher +dapat dilihat pada gambar 4.95 berikut + + Gambar 4. 95 High Fidelity Voucher + 118 + + Icon informasi poin akan menampilkan pertanyaan terkait poin dengan +menampilkan card yang berisi pertanyaan dan drop down untuk melihat jawab +pertanyaan. Tampilan halaman FAQ poin dapat dilihat pada gambar 4.96 berikut. + + Gambar 4. 96 High Fidelity FAQ poin +16) Halaman Drop Off + + Pada halaman drop off ini terdapat 3 tahapan, yaitu pada pengirim, penerima +dan paket. +a) Pengirim + + Bagian pengirim ini, menampilkan ikon untuk kembali, ilustrasi pengiriman +dengan latar belakang merah, dan terdapat card putih yang berisikan judul halaman, +alur tahapan, serta card untuk inputan yaitu nama pengirim, nomor hp, alamat +pengirim, label tempat, provinsi, kota, kecamatan dengan ikon drop down dan +catatan. Tampilan halaman drop off pengirim dapat dilihat pada gambar 4.97 +berikut. + 119 + + Gambar 4. 97 High Fidelity Drop Off (Pengirim) +b) Penerima + + Bagian penerima ini, bisa diakses setelah bagian pengirim sudah terisi. +Halaman ini menampilkan ikon untuk kembali, ilustrasi pengiriman dengan latar +belakang merah, dan terdapat card putih yang berisikan judul halaman, alur +tahapan, serta card untuk inputan yaitu nama penerima, nomor hp, alamat penerima, +label tempat, provinsi, kota, kecamatan dengan ikon drop down dan catatan. Pada +alur tahapan bagian penerima, bagian tahapan pengirim berwarna merah pada +lingkarannya dan terdapat ceklist berwarna putih. Tampilan halaman drop off +penerima dapat dilihat pada gambar 4.98 berikut. + + Gambar 4. 98 High Fidelity Drop Off (Penerima) + 120 + +b. Paket + Bagian paket ini, bisa diakses setelah bagian pengirim dan penerima sudah + +terisi. Halaman ini menampilkan ikon untuk kembali, ilustrasi pengiriman dengan +latar belakang merah, dan terdapat card putih yang berisikan judul halaman, alur +tahapan, serta card untuk inputan yaitu nama barang, berat barang, panjang, lebar, +tinggi barang serta layanan yang terdapat ikon drop down. Pada alur tahapan bagian +paket, bagian tahapan pengirim dan penerima berwarna merah pada lingkarannya +dan terdapat ceklist berwarna putih. Tampilan halaman drop off paket dapat dilihat +pada gambar 4.99 berikut. + + Gambar 4. 99 High Fidelity Drop Off (Paket) +17) Halaman Detail Order Drop Off + + Selanjutnya setelah pengguna sudah memilih metode pembayaran, maka akan +menampilkan detail order pick up. Halaman ini pada bagian atas menampilkan ikon +back, ilustrasi pengiriman dengan latar belakang merah dan kemudian terdapat card +putih yang menampilkan informasi mengenai detail drop off yaitu alamat asal, +alamat tujuan, nama barang, layanan yang menampilkan logo dan card berisi +estimasi waktu, voucher, metode pembayaran, dan rincian pembayaran, serta +terdapat tombol “Order” dengan latar belakang merah dan teks putih. Tampilan +halaman detail order drop off dapat dilihat pada gambar 4.100 berikut. + 121 + + Gambar 4. 100 High Fidelity Detail Drop Off +18) Halaman Gerai Terdekat + + Halaman gerai terdekat ini menampilkan ikon back dan judul pada bagian +atas halaman. Kemudian menampilkan card yang berisikan ikon lokasi, nama gerai, +dan lokasi gerai. Tampilan halaman gerai terdekat dapat dilihat pada gambar 4.101 +berikut. + + Gambar 4. 101 High Fidelity Gerai Terdekat + 122 + +19) Halaman Berita + Halaman berita ini menampilkan ikon kembali dan judul halaman di bagian + +atas halaman. Selanjutnya menampikan card daftar berita yang berisikan foto +berita, judul, keterangan singkat berita dan teks “Baca Selengkapnya” sebagai +tombol dengan warna merah. Tampilan halaman berita dapat dilihat pada gambar +4.102 berikut. + + Gambar 4. 102 High Fidelity Berita +20) Detail Berita + + Halaman detail ini menampilkan ikon kembali dan judul halaman di bagian +atas halaman. Selain itu menampilkan gambar berita, judul, dan keterangan lengkap +dari berita tersebut. Tampilan halaman detail berita dapat dilihat pada gambar 4.103 +berikut. + 123 + + Gambar 4. 103 High Fidelity Detail Berita +21) Halaman Layanan + + Pada halaman layanan ini, menampilkan daftar layanan yang ada pada +SiCepat Ekspress. Bagian atas halaman terdapat ikon back dan judul halaman. +Kemudian pada halaman ini terdapat card yang berisikan logo layanan, judul, +tagline dan tombol kirim paket yang memiliki latar belakang merah dan teks +berwarna putih. Tampilan halaman layanan dapat dilihat pada gambar 4.104 +berikut. + + Gambar 4. 104 High Fidelity Layanan + 124 + +22) Halaman Detail Layanan + Setelah pengguna menekan pada daftar layanan tersebut, maka akan + +menampilkan detail dari layanan tersebut. Pada halaman detail ini menampilkan, +bottom sheet yang berisikan judul halaman, ikon batal, logo layanan, nama layanan, +keterangan, ikon waktu serta card warna biru untuk estimasi waktu, jangkauan, dan +opsi pengiriman paket (Pick Up atau Drop Off). Pada opsi pengiriman paket ini +terdapat card yang berisikan pilihan pengiriman, ikon, serta tombol dengan latar +belakang putih dan teks berwarna merah. Tampilan halaman detail layanan dapat +dilihat pada gambar 4.105 berikut. + + Gambar 4. 105 High Fidelity Detail Layanan +23) Halaman Menu Paket + + Pada halaman menu paket menampilkan daftar dari semua paket yang sedang +atau telah di proses. Halaman ini terdiri dari 2 tab, yaitu Pengirim dan Penerima +a) Pengirim + + Pada tab pengirim ini menampilkan daftar paket yang dikirimkan oleh +pengguna. Selain itu, halaman ini menampilkan card yang terdapat informasi kode +resi pengiriman, ikon copy kode, status pengiriman, nama barang, tanggal +pengiriman, nama dan alamat pengirim, serta nama dan alamat penerima. Tampilan +halaman paket tab pengirim dapat dilihat pada gambar 4.106 berikut. + 125 + + Gambar 4. 106 High Fidelity Menu Paket (Pengirim) +b) Penerima + + Pada tab penerima ini menampilkan daftar paket yang diterima oleh +pengguna. Selain itu, halaman ini menampilkan card yang berisi informasi +marketplace, kode resi pengiriman, ikon copy kode, status pengiriman, tanggal +pengiriman, nama barang, dan nama penerima. Tampilan halaman paket tab +penerima dapat dilihat pada gambar 4.107 berikut. + + Gambar 4. 107 High Fidelity Menu Paket (Penerima) + 126 + +24) Halaman Menu Pembayaran + Pada halaman menu pembayaran ini menampilkan semua riwayat + +pembayaran pada layanan pengiriman. Terdapat 2 tab yaitu Pick Up dan Drop Off. +a) Pick Up + + Pada halaman riwayat pembayaran tab pick up ini menampilkan judul +halaman dibagian atas. Halaman ini menampilkan card yang berisi informasi terkait +metode pembayaran, total pembayaran, deskripsi dan nama barang. Tampilan +halaman riwayat pembayaran tab pick up dapat dilihat pada gambar 4.108 berikut. + + Gambar 4. 108 High Fidelity Menu Pembayaran (Pick Up) +b) Detail Pembayaran Pick Up + + Halaman ini menampilkan detail dari pembayaran. Detail pembayaran ini +menggunakan latar belakang merah yang terdapat ilustrasi pengiriman dan ikon +back. Kemudian terdapat card putih yang berisikan kode resi, ikon copy kode, +alamat pengirim dan penerima, nama barang, waktu pick up, layanan yang +menampilkan logo layanan dan card biru berisikan estimasi waktu, voucher, metode +pembayaran, dan rincian pembayaran. Tampilan halaman detail pembayaran detail +pick up dapat dilihat pada gambar 4.109 berikut. + 127 + + Gambar 4. 109 High Fidelity Detail Pick Up +c) Drop Off + + Pada halaman riwayat pembayaran tab drop off ini menampilkan judul +halaman dibagian atas. Halaman ini menampilkan card yang berisi informasi terkait +metode pembayaran, total pembayaran, deskripsi dan nama barang. Tampilan +halaman riwayat pembayaran tab drop off dapat dilihat pada gambar 4.110 berikut. + + Gambar 4. 110 High Fidelity Menu Pembayaran (Drop Off) + 128 + +d) Detail Pembayaran Drop Off + Halaman ini menampilkan detail dari pembayaran. Detail pembayaran ini + +menggunakan latar belakang merah yang terdapat ilustrasi pengiriman dan ikon +back. Kemudian terdapat card putih yang berisikan kode resi, ikon copy kode, +alamat pengirim dan penerima, nama barang, layanan yang menampilkan logo +layanan dan card biru berisikan estimasi waktu, voucher, metode pembayaran, dan +rincian pembayaran. Tampilan halaman detail pembayaran drop off dapat dilihat +pada gambar 4.111 berikut. + + Gambar 4. 111 High Fidelity Detail Drop Off +25) Halaman Menu Profil + + Halaman menu profil memiliki latar belakang merah dan card putih yang +berisikan fitur lainnya. Pada bagian atas menampilkan foto profil, nama, no hp, +email pengguna, dan ikon untuk edit profil. Selain itu terdapat card berwarna merah +yang lebih muda yang berisikan saldo dan poin pengguna. Bagian card putih +menampilkan beberapa fitur dilengkapi dengan ikon yang sesuai dan drop down. +Adapun fitur tersebut yaitu pengaturan akun, daftar draft, daftar kontak, tagihan +kurang bayar, alamat saya, notifikasi, syarat dan ketentuan, serta kebijakan privasi. +Tampilan halaman menu profil dapat dilihat pada gambar 4.112 berikut. + 129 + + Gambar 4. 112 High Fidelity Profil +26) Halaman Ubah Profil + + Halaman ubah profil memiliki latar belakang merah dan terdapat card putih +untuk textfield. Pada bagian latar belakang merah terdapat ikon untuk kembali dan +foto profil serta ikon untuk mengedit. Pada bagian card putih terdapat untuk inputan +nama lengkap, nomor hp (disable), email (disable), tanggal lahir, jenis kelamin +dengan drop down, alamat, dan provinsi, kota, kecamatan disertai drop down. +Tampilan halaman ubah profil dapat dilihat pada gambar 4.113 berikut. + + Gambar 4. 113 High Fidelity Ubah Profil + 130 + +27) Halaman Pengaturan Akun + Halaman ini menampilkan ikon untuk kembali dan halaman judul di bagian + + atas halaman. Kemudian menampilkan fitur yang dilengkapi dengan ikon dan drop + down. Adapun fitur tersebut yaitu ubah kata sandi, keluar, dan hapus akun. + Tampilan halaman pengaturan akun dapat dilihat pada gambar 4.114 berikut. + + Gambar 4. 114 High Fidelity Pengaturan Akun + 28) Halaman Ubah Kata Sandi + + Halaman ubah kata sandi ini pada bagian atas menampilkan ikon back dan + judul halaman. Selanjutnya terdapat card berwarna biru yang berisikan ikon + informasi, dan informasi mengenai ketentuan kata sandi, kemudian terdapat card + putih yang berisikan untuk inputan kata sandi lama, kata sandi baru, dan konfirmasi + kata sandi serta ikon untuk melihat kata sandi. Bagian bawah card tersebut terdapat + tombol untuk “Simpan” perubahan kata sandi dengan warna merah pada latar + belakang dan teks warna putih. Tampilan halaman ubah kata sandi dapat dilihat + pada gambar 4.115 berikut. + 131 + + Gambar 4. 115 High Fidelity Ubah Kata Sandi +29) Notifikasi Konfirmasi Keluar + + Halaman konfirmasi keluar ini berupa dialog pop up yang menampilkan +ilustrasi tanya dengan teks berupa pertanyaan terkait pengguna yakin ingin keluar. +Kemudian terdapat dua tombol yaitu “Ya, Keluar” dan “Tidak”. Pada tombol +“Tidak” memiliki latar belakang putih dan teks merah, sedangkan untuk tombol +“Ya, Keluar” memiliki latar belakang merah dengan teks berwarna putih. Tampilan +halaman notifikasi konfirmasi keluar dapat dilihat pada gambar 4.116 berikut. + + Gambar 4. 116 High Fidelity Notifikasi Keluar +30) Notifikasi Konfirmasi Hapus Akun + + Halaman konfirmasi hapus akun ini berupa dialog pop up yang menampilkan +ilustrasi tanya dengan teks berupa pertanyaan terkait pengguna yakin ingin hapus +akun. Kemudian terdapat informasi mengenai hapus akun dan terdapat dua tombol +yaitu “Hapus Akun” dan “Tidak”. Pada tombol “Tidak” memiliki latar belakang +putih dan teks merah, sedangkan untuk tombol “Hapus Akun” memiliki latar + 132 + +belakang merah dengan teks berwarna putih. Tampilan halaman notifikasi +konfirmasi hapus akun dapat dilihat pada gambar 4.117 berikut. + + Gambar 4. 117 High Fidelity Hapus Akun +31) Halaman Draft + + Halaman draft berisikan pengiriman yang belum selesai namun disimpan +sebagai draft baik pada pick up maupun drop off. Halaman ini terdapat 2 tab yaitu +pick up dan drop off. +a) Pick Up + + Draft pick up ini menampilkan daftar draft yang belum diselesaikan atau +dilanjutkan oleh pengguna dengan menampilkan card berwarna biru dan berisikan +ikon info dan informasi mengenai draft. Kemudian halaman ini menampilkan card +yang berisi status pengisian pengiriman, tanggal pengisian, nama dan alamat +pengirim serta nama dan alamat penerima. Selanjutnya juga terdapat tombol untuk +menghapus draft dengan tombol berwarna putih dan teks berwarna merah. +Tampilan halaman draft pick up dapat dilihat pada gambar 4.118 berikut. + 133 + + Gambar 4. 118 High Fidelity Draft (Pick Up) +b) Drop Off + + Draft drop off ini menampilkan daftar draft yang belum diselesaikan atau +dilanjutkan oleh pengguna dengan menampilkan card berwarna biru dan berisikan +ikon info dan informasi mengenai draft. Kemudian halaman ini menampilkan card +yang berisi status pengisian pengiriman, tanggal pengisian, nama dan alamat +pengirim serta nama dan alamat penerima. Selanjutnya juga terdapat tombol untuk +menghapus draft dengan tombol berwarna putih dan teks berwarna merah. +Tampilan halaman draft drop off dapat dilihat pada gambar 4.119 berikut. + + Gambar 4. 119 High Fidelity Draft (Drop Off) + 134 + +32) Halaman Notifikasi + Halaman notifikasi ini menampilkan ikon untuk kembali dan judul halaman + +pada bagian atas halaman. Kemudian menampilkan ikon dan pemberitahuan terkait +pengiriman paket baik pick up maupun drop off dimana menampilkan keterangan +dan kode resi pengiriman. Tampilan halaman notifikasi dapat dilihat pada gambar +4.120 berikut. + + Gambar 4. 120 High Fidelity Notifikasi +33) Halaman Tagihan Kurang Bayar + + Halaman ini menampilkan daftar tagihan pembayaran yang belum lunas atau +kurang. Bagian atas halaman ini menampilkan ikon kembali dan judul halaman, +kemudian menampilkan logo maskot SiCepat Ekspress disertai teks keterangan. +Tampilan halaman kurang bayar dapat dilihat pada gambar 4.128 berikut. + 135 + + Gambar 4. 121 High Fidelity Tagihan Kurang Bayar +34) Halaman Daftar Kontak + + Pada halaman daftar kontak ini di bagian atas menampilkan ikon kembali dan +judul halaman. Selanjutnya menampilkan card disertai ikon untuk melakukan +pencarian, dan logo ilustrasi tidak ada data. Halaman ini juga menampilkan +keterangan dan tombol untuk tambah kontak, dimana pada tombol ini memiliki latar +belakang merah dan teks berwarna putih. Tampilan halaman daftar kontak dapat +dilihat pada gambar 4.122 berikut. + + Gambar 4. 122 High Fidelity Daftar Kontak + 136 + +35) Halaman Tambah Kontak + Halaman tambah kontak ini menampilkan ikon kembali dan judul halaman. + +Selain itu juga menampilkan card yang berisikan inputan yaitu nama lengkap, +nomor hp, email, alamat, provinsi, kota, kecamatan dilengkapi dengan drop down, +serta catatan dan tombol simpan. Tampilan halaman tambah kontak dapat dilihat +pada gambar 4.123 berikut. + + Gambar 4. 123 High Fidelity Tambah Kontak + Setelah pengguna menyimpan kontak, maka pada halaman daftar kontak akan +menampilkan card yang berisikan ikon dan informasi nama, nomor hp dan alamat +serta ikon dan bottom sheet opsi yang menampilkan ikon dan aksi untuk ubah +kontak dan hapus kontak. Tampilan halaman daftar kontak menampilkan opsi dapat +dilihat pada gambar 4.124 berikut. + 137 + + Gambar 4. 124 High Fidelity Opsi Daftar Kontak +36) Halaman Alamat Saya + + Pada halaman alamat saya, di bagian atas menampilkan ikon kembali dan +judul halaman. Selanjutnya menampilkan card disertai ikon untuk melakukan +pencarian, dan logo ilustrasi tidak ada data. Halaman ini juga menampilkan +keterangan dan tombol untuk tambah alamat, dimana pada tombol ini memiliki latar +belakang merah dan teks berwarna putih. Tampilan halaman alamat saya dapat +dilihat pada gambar 4.125 berikut. + + Gambar 4. 125 High Fidelity Alamat Saya + 138 + +37) Halaman Tambah Alamat + Halaman tambah alamat ini menampilkan ikon kembali dan judul halaman. + +Selain itu juga menampilkan card yang berisikan inputan yaitu nama pengirim, +nomor hp, alamat, label tempat, provinsi, kota, kecamatan dilengkapi dengan drop +down, serta catatan dan tombol simpan. Tampilan halaman tambah alamat dapat +dilihat pada gambar 4.126 berikut. + + Gambar 4. 126 High Fidelity Tambah Alamat + Setelah pengguna menyimpan alamat, maka pada halaman daftar alamat akan +menampilkan card yang berisikan ikon dan informasi nama, dan alamat serta ikon +dan bottom sheet opsi yang menampilkan ikon dan aksi untuk jadikan alamat utama, +ubah alamat dan hapus alamat. Tampilan halaman daftar alamat menampilkan opsi +dapat dilihat pada gambar 4.134 berikut + + Gambar 4. 127 High Fidelity Opsi Daftar Alamat + 139 + +38) Halaman Syarat dan Ketentuan + Halaman ini menampilkan ikon kembali dan judul halaman pada bagian atas + +halaman. Kemudian menampilkan logo mengenai aturan dan kebijakan serta +menampilkan informasi mengenai penggunaan. Tampilan halaman syarat dan +ketentuan dapat dilihat pada gambar 4.128 berikut. + + Gambar 4. 128 High Fidelity Syarat dan Ketentuan +39) Halaman Kebijakan Privasi + + Halaman ini menampilkan ikon kembali dan judul halaman dibagian atas +halaman dan kemudian menampilkan terkait informasi mengenai bagaimana data +dikumpulkan, disimpan, dan diproses. Tampilan halaman kebijakan privasi dapat +dilihat pada gambar 4.136 berikut. + + Gambar 4. 129 High Fidelity Kebijakan Privasi + 140 + +4.4.5 Testing + Pada tahap testing ini dilakukan pengujian pada desain untuk memastikan + +fitur fitur telah berjalan dengan benar, sistem sesuai dengan kebutuhan pengguna, +memberikan penilaian terkait pengalaman pengguna, untuk menemukan kesalahan +atau kekurangan serta mengumpulkan masukan dari pengguna. Peneliti melakukan +testing dimulai dengan usability testing menggunakan tools Maze. Setelah +didapatkan hasil testing dari Maze, kemudian dilanjutkan pengujian A/B yang +berisikan pertanyaan SUS dengan membandingkan desain lama dan desain baru. +1) Pengujian Maze + + Pada pengujian ini, pengguna diberikan link untuk melakukan pengujian, dan +peneliti memberikan skenario untuk pengguna menjalankan aplikasi. Tujuan +pengujian ini digunakan untuk memastikan bahwa sistem telah bekerja +sebagaimana mestinya dan juga untuk mengumpulkan umpan balik langsung dari +pengguna. Berikut untuk skenario pengujian pada maze dapat dilihat pada tabel 4.4 +berikut. + +Tabel 4. 4 Task dan Skenario Maze + +No Task Skenario + +1 Halaman Masuk - Beranda 1. Splashscreen klik tombol masuk + + 2. Masukkan nomor hp dan kata sandi (klik + + nomor hp) + + 3. Klik tombol Masuk + + 4. Tampil halaman beranda + +2 Halaman Beranda - Pusat Pada halaman beranda + + Bantuan 1. klik icon pusat bantuan, dan + + menampilkan halaman pusat bantuan + + 2. Klik pada "pertanyaan yang sering + + diajukan", lalu menampilkan halaman + + pertanyaan yang sering diajukan + 141 + +No Task Skenario + + 3. Klik drop down pada pertanyaan "kapan + + jam operasional customer service?" + +3 Halaman Beranda - Layanan Pada halaman beranda di bagian "Layanan" + + 1. Klik "lihat lainnya" kemudian + + menampilkan halaman layanan + + 2. Klik tombol "kirim paket" pada bagian + + layanan "REG" dan menampilkan detail + + layanan + +4 Halaman Beranda - Berita Pada halaman beranda di bagian "Berita" + + 1. Scroll pada halaman beranda dan klik + + "lihat lainnya" pada "Berita" kemudian + + menampilkan halaman berita + + 2. Klik "baca selengkapnya", maka akan + + menampilkan halaman detail berita + +5 Beranda - Lacak Paket Cara 1 scan: + + 1. Klik masukkan nomor resi pada halaman + + beranda atau klik icon scan + + 2. Jika klik icon, Beralih ke halaman scan + + icon + + 3. Jika klik pada masukkan nomor resi + + menampilkan daftar riwayat kemudian klik + + icon scan + + 4. Tampilan scan, klik kamera dan + + menampilkan lacak + + Cara 2 dari riwayat: + 1. Klik masukkan nomer resi + 2. Klik daftar pada riwayat, menampilkan + lacak + 142 + +No Task Skenario + +6 Beranda - Pick Up Pada beranda klik "Pick Up" + + (Pengirim) Pengirim: + + 1. Menampilkan halaman pick up, Klik + + "pilih lewat peta", menampilkan peta lalu + + klik "pilih alamat ini" + + 2. Klik form label tempat, klik drop down + + provinsi, kota, kecamatan (scroll pilih Jawa + + Timur - Nganjuk - Bagor), lalu klik form + + catatan dan klik button "selanjutnya" + +7 Beranda - Pick Up Setelah bagian pengirim + + (Penerima) Penerima: + + 1. Menampilkan halaman pick up, klik form + + nama, lalu Klik "pilih lewat peta", + + menampilkan peta dan klik "pilih alamat + + ini" + + 2. Klik form label tempat, klik drop down + + provinsi, kota, kecamatan (scroll pilih Jawa + + Timur - Nganjuk - Nganjuk), lalu klik + + button "selanjutnya" dan menampilkan + + bagian paket. + +8 Beranda Pick Up (Paket) Setelah pick up penerima + + Paket : + + 1. Menampilkan halaman pick up, Klik + + "nama barang" + + 2. Klik drop down layanan (pilih cargo), + + dan klik drop down waktu/tanggal (pilih + + hari ini) lalu klik tombol selesai, dan + + menampilkan pilihan metode pembayaran. + + 3. Pilih "Tunai" pada metode pembayaran, + + dan klik tombol "Selesai" kemudian beralih + 143 + +No Task Skenario + + ke halaman detail pick up dan klik tombol + + "order" + +9 Beranda - Drop Off Pada beranda klik "Drop Off" + + (Pengirim) Pengirim: + + 1. Menampilkan halaman drop off, Klik + + "pilih lewat peta", menampilkan peta lalu + + klik "pilih alamat ini" + + 2. Klik drop down provinsi, kota, + + kecamatan (scroll pilih Jawa Timur - + + Nganjuk - Bagor), lalu klik form catatan dan + + klik button "selanjutnya" dan beralih ke + + bagian penerima + +10 Beranda - Drop Off Setelah bagian pengirim + + (Penerima) Penerima: + + 1. Menampilkan halaman drop off, klik + + form nama, lalu Klik "pilih lewat peta", + + menampilkan peta dan klik "pilih alamat + + ini" + + 2. Klik form label tempat, klik drop down + + provinsi, kota, kecamatan (scroll pilih Jawa + + Timur - Nganjuk - Nganjuk), lalu klik + + button "selanjutnya" dan menampilkan + + bagian paket. + +11 Beranda - Drop Off (Paket) Setelah drop off penerima + + Paket: + + 1. Menampilkan halaman drop off, Klik + + "nama barang" + + 2. Klik drop down layanan (pilih reg), lalu + + klik tombol selesai, dan menampilkan + + pilihan metode pembayaran. + 144 + +No Task Skenario + 3. Pilih "Tunai" pada metode pembayaran, +12 Paket dan klik tombol "Selesai" kemudian beralih + ke halaman detail drop off dan klik tombol +13 Paket "order" + Pada halaman beranda klik menu paket, lalu +14 Pembayaran menampilkan 2 tab pengirim dan penerima + Pengirim: +15 Pembayaran 1. Menampilkan halaman daftar paket yang + dikirimkan oleh pengguna + 2. Klik pada card, dan beralih ke halaman + lacak paket + Pada halaman paket, menampilkan 2 tab + pengirim dan penerima, pilih tab penerima + Penerima: + 1. Menampilkan halaman daftar paket yang + diterima oleh pengguna + 2. Klik pada card, dan beralih ke halaman + lacak paket + Pada halaman beranda, klik menu + pembayaran, maka menampilkan 2 tab Pick + Up dan Drop Off. + Pick Up: + 1. Menampilkan halaman daftar pick up + 2. Klik pada card, dan beralih ke halaman + detail pick up + Pada halaman riwayat pembayaran tab pick + up, klik tab Drop Off. Drop Off: + 1. Menampilkan halaman daftar drop off + 2. Klik pada card, dan beralih ke halaman + detail drop off + 145 + +No Task Skenario + Pada halaman beranda, klik menu profil +16 Profil - ubah profil 1. Menampilkan halaman profil, klik edit + profil +17 Profil - Pengaturan akun 2. Menampilkan halaman ubah profil, +18 Profil - Daftar Kontak Untuk menghapus foto klik icon edit pada +19 Profil - Daftar Alamat foto kemudian menampilkan bottom sheet + opsi, klik hapus foto profil, dan + menampilkan konfirmasi, klik hapus agar + foto hilang + 3. Setelah hapus foto profil, klik form nama + lengkap, kemudian klik tombol simpan + Pada halaman profil bagian pengaturan + akun - Ubah Kata Sandi + 1. Klik ubah kata sandi, menampilkan + halaman kata sandi + 2. Klik pada form ubah kata sandi lama, klik + simpan dan beralih ke halaman login + Pada halaman profil bagian Daftar Kontak + 1. Klik daftar kontak, menampilkan + halaman daftar kontak kemudian klik + tombol "tambah kontak" dan beralih ke + halaman input kontak + 2. Klik pada form nama, lalu klik "pilih + lewat peta" dan klik "pilih alamat ini" + kemudian klik tombol "Simpan" dan beralih + ke halaman daftar kontak + Pada halaman profil bagian Alamat Saya + 1. Klik alamat saya, menampilkan halaman + daftar alamat, kemudian klik tombol + "tambah alamat" dan beralih ke halaman + 146 + +No Task Skenario + + input alamat 2. Klik pada form nama, lalu + + klik "pilih lewat peta" dan klik "pilih alamat + + ini" kemudian klik tombol "Simpan" dan + + beralih ke halaman daftar alamat + +2) Hasil Pengujian Maze + Adapun hasil Pengujian Maze pada task berdasarkan skenario adalah sebagai + +berikut +a. Halaman Masuk - Beranda + + Pada task masuk ke beranda ini, responden yang melakukan pengujian +sebanyak 20 dengan avg. duration (rata rata waktu) 10,8s. Hasil dari pengujian +yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 9,4%. Pengujian pada halaman masuk ke beranda dapat dilihat pada gambar +4.130 berikut + + Gambar 4. 130 Pengujian Maze Masuk - Beranda + + Pada task ini, kesalahan klik yang dilakukan responden adalah menekan +notifikasi setelah responden memasukkan inputan dan menekan tombol masuk +sehingga ketika menekan notifikasi tersebut, akan kembali ke halaman masuk dan +harus menginputkan inputan kembali. Kemudian terdapat juga pengguna yang +menekan tombol masuk tanpa mengisi inputan. + 147 + +b. Halaman Beranda - Pusat Bantuan + Pada task beranda pusat bantuan ini, responden yang melakukan pengujian + +sebanyak 20 dengan avg. duration (rata rata waktu) 15,2s. Hasil dari pengujian +yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 41,8%. Pengujian pada halaman beranda ke pusat bantuan dapat dilihat pada +gambar 4.131 berikut. + + Gambar 4. 131 Pengujian Maze Beranda - Pusat Bantuan + Pada task ini, kesalahan klik yang dilakukan responden adalah menekan pada +fitur selain pertanyaan yang sering diajukan, dan terdapat responden yang menekan +pada layanan di beranda sehingga menampilkan halaman layanan. + +c. Halaman Beranda – Layanan + Pada task beranda layanan ini, responden yang melakukan pengujian + +sebanyak 20 dengan avg. duration (rata rata waktu) 13,3s. Hasil dari pengujian +yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 28%. Pengujian pada halaman beranda ke layanan dapat dilihat pada gambar +4.132 berikut. + 148 + + Gambar 4. 132 Pengujian Maze Beranda - Layanan + Pada task ini, kesalahan klik yang dilakukan responden adalah menekan pada +bagian layanan di beranda secara langsung, tanpa di klik pada “Lihat Semua”. +d. Halaman Beranda – Berita + Pada task beranda berita ini, responden yang melakukan pengujian sebanyak +20 dengan avg. duration (rata rata waktu) 15s. Hasil dari pengujian yaitu pada +success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off (responden +yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan klik) +12,5%. Pengujian pada halaman beranda ke berita dapat dilihat pada gambar 4.133 +berikut. + + Gambar 4. 133 Pengujian Maze Beranda - Berita + 149 + + Pada task ini, kesalahan klik yang dilakukan responden adalah menekan pada +layanan di beranda sehingga menampilkan halaman layanan. +e. Halaman Beranda - Lacak Paket + + Pada task beranda lacak paket ini, responden yang melakukan pengujian +sebanyak 20 dengan avg. duration (rata rata waktu) 26s. Hasil dari pengujian yaitu +pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 35,4%. Pengujian pada halaman beranda ke lacak paket dapat dilihat pada +gambar 4.134 berikut. + + Gambar 4. 134 Pengujian Maze Beranda - Lacak Paket + Pada cara 1 yaitu scan pada lacak, kesalahan klik yang dilakukan responden +adalah pada saat bagian pengambilan gambar kode, pengguna menekan tombol +kembali, yang mana seharusnya responden menekan pada tombol untuk mengambil +gambar. Kemudian kesalahan lainnya yaitu pengguna langsung menekan pada +riwayat lacak bukan pada bagian card pencarian. +f. Halaman Beranda - Pick Up (Pengirim) + Pada task beranda pick up pengirim ini, terdapat lebih banyak flow. +Responden yang melakukan pengujian halaman ini sebanyak 19 dengan avg. + 150 + +duration (rata rata waktu) 47,3s. Hasil dari pengujian yaitu pada success rate +(tingkat keberhasilan) memiliki skor 94,7%, skor drop off (responden yang tidak +menyelesaikan) sebanyak 5,3%, dan skor missclick (kesalahan klik) 47,3%. +Pengujian pada halaman beranda ke pick up (pengirim) dapat dilihat pada gambar +4.135 berikut. + + Gambar 4. 135 Pengujian Maze Beranda - Pick Up (Pengirim) + Pada task ini, kesalahan klik yang dilakukan responden adalah di bagian +alamat pilih peta pengguna menekan pada tab lain yaitu “Terakhir dilihat” dan +menekan pada card di bagian tab terakhir dilihat, yang mana seharusnya langsung +menekan tombol “Pilih Alamat ini” setelah menekan alamat pada peta. Selanjutnya +kesalahan klik yaitu menekan pada peta lokasi di halaman alamat ini. Kesalahan +klik lainnya yaitu pada inputan pemilihan provinsi, kota, kecamatan yang tidak +disesuaikan dengan skenario. + +g. Halaman Beranda - Pick Up (Penerima) + Pada task beranda pick up penerima ini, terdapat lebih banyak flow. + +Responden yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata +waktu) 37,6s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) +memiliki skor 100%, skor drop off (responden yang tidak menyelesaikan) sebanyak +0%, dan skor missclick (kesalahan klik) 32,1%. Pengujian pada halaman beranda +ke pick up (penerima) dapat dilihat pada gambar 4.136 berikut. + 151 + + Gambar 4. 136 Pengujian Maze Beranda – Pick Up (Penerima) + Pada skenario pertama, kesalahan klik yang dilakukan responden adalah +langsung menekan di bagian inputan alamat penerima, kemudian menekan pada +kolom lainnya selain kolom pilih peta dan terdapat pengguna yang menekan +checkbox. Pada bagian scenario kedua, terdapat pengguna yang langsung menekan +pada drop down provinsi, kota, kecamatan dan memilih provinsi, kota, kecamatan +tidak disesuaikan dengan skenario kedua. +h. Halaman Beranda - Pick Up (Paket) + Pada task beranda pick up paket ini, terdapat lebih banyak flow. Responden +yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata waktu) +34,4s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) memiliki +skor 100%, skor drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan +skor missclick (kesalahan klik) 31,9%. Pengujian pada halaman beranda ke pick up +(paket) dapat dilihat pada gambar 4.137 berikut. + 152 + + Gambar 4. 137 Pengujian Maze Beranda - Pick Up (Paket) + Pada task ini, kesalahan klik yang dilakukan responden adalah memilih +layanan selain yang disebutkan dalam skenario, selain itu, terdapat pengguna yang +menekan checkbox dan memilih tanggal pick up. Kemudian terdapat responden +yang menekan voucher pada detail pick up. +i. Halaman Beranda - Drop Off (Pengirim) + Pada task beranda drop off pengirim ini terdapat lebih banyak flow, dan +responden yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata +waktu) 39,5s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) +memiliki skor 100%, skor drop off (responden yang tidak menyelesaikan) sebanyak +0%, dan skor missclick (kesalahan klik) 19,5%. Pengujian pada halaman beranda +ke drop off (pengirim) dapat dilihat pada gambar 4.138 berikut. + 153 + + Gambar 4. 138 Pengujian Maze Beranda – Drop Off (Pengirim) + Kesalahan klik yang dilakukan responden adalah menekan pada bagian menu +paket sehingga menampilkan halaman paket. Kemudian kesalahan klik yang +dilakukan yaitu pada pemilihan provinsi, kota, kecamatan yang tidak disesuaikan +dengan skenario kedua. Terdapat juga responden yang menekan pada alur tahapan +dan checkbox. +j. Halaman Beranda - Drop Off (Penerima) + Pada task beranda drop off penerima ini terdapat lebih banyak flow, responden +yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata waktu) +37,7s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) memiliki +skor 100%, skor drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan +skor missclick (kesalahan klik) 19,3%. Pengujian pada halaman beranda ke drop off +(pengirim) dapat dilihat pada gambar 4.139 berikut. + 154 + + Gambar 4. 139 Pengujian Maze Beranda - Drop Off (Penerima) + Pada skenario pertama terdapat pengguna yang langsung menekan pada +“Pilih Lewat Peta” dan belum menekan pada inputan nama. Kemudian pada +skenario kedua, responden langsung menekan pada bagian pemilihan provinsi, +kota, kecamatan, pada pemilihan ini juga terdapat responden yang memilih tidak +disesuaikan dengan skenario kedua. +k. Halaman Beranda - Drop Off (Paket) + Pada task beranda drop off paket ini terdapat lebih banyak flow, responden +yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata waktu) +24,7s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) memiliki +skor 100%, skor drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan +skor missclick (kesalahan klik) 25,4%. Pengujian pada halaman beranda ke drop off +(paket) dapat dilihat pada gambar 4.140 berikut. + 155 + + Gambar 4. 140 Pengujian Maze Beranda - Drop Off (Paket) + Pada skenario kedua, kesalahan klik yang dilakukan responden adalah +menekan di bagian layanan lainnya yag tidak disebutkan pada skenario. Pada +skenario ketiga, responden menekan pada metode pembayaran lainnya kemudian +menekan tombol kembali dan membuka halaman pick up. +l. Halaman Paket (Tab Pengirim) + Pada task halaman menu paket di tab pengirim, responden yang melakukan +pengujian sebanyak 19 dengan avg. duration (rata rata waktu) 12,5s. Hasil dari +pengujian yaitu pada success rate (tingkat keberhasilan) memiliki skor 94,7%, skor +drop off (responden yang tidak menyelesaikan) sebanyak 5,3%, dan skor missclick +(kesalahan klik) 12,8%. Pengujian pada halaman paket tab pengirim dapat dilihat +pada gambar 4.141 berikut. + + Gambar 4. 141 Pengujian Maze Paket (Pengirim) + 156 + + Kesalahan klik yang dilakukan yaitu pada halaman ini menekan tab bagian +penerima bukan pengirim. Selain itu, terdapat pengguna yang menekan pada bagian +fitur lacak, sehingga pengguna tidak menyelesaikan fitur paket (tab pengirim) + +m. Halaman Paket (Tab Penerima) + Pada task halaman menu paket di tab penerima, responden yang melakukan + +pengujian sebanyak 19 dengan avg. duration (rata rata waktu) 8,1s. Hasil dari +pengujian yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor +drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick +(kesalahan klik) 10,8%. Pengujian pada halaman paket tab penerima dapat dilihat +pada gambar 4.142 berikut. + + Gambar 4. 142 Pengujian Maze Paket (Penerima) + Kesalahan klik yang dilakukan responden adalah menekan di bagian tab +pengirim bukan tab penerima. + +n. Halaman Pembayaran + Pada task pembayaran tab pick up, responden yang melakukan pengujian + +sebanyak 19 dengan avg. duration (rata rata waktu) 16,4s. Hasil dari pengujian +yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 21,3%. Pengujian pada halaman pembayaran tab pick up dapat dilihat pada +gambar 4.143 berikut. + 157 + + Gambar 4. 143 Pengujian Maze Pembayaran (Pick Up) + Pada task ini, kesalah klik yang dilakukan responden yaitu setelah menekan +menu paket dan menampilkan daftar paket, terdapat pengguna yang menekan menu +pembayaran. Kesalah klik lainnya yaitu menekan pada pick up sehingga +menampilkan halaman pick up dan menekan batal pada halaman pick up. +o. Halaman Pembayaran + Pada task pembayaran tab drop off, responden yang melakukan pengujian +sebanyak 19 dengan avg. duration (rata rata waktu) 7,5s. Hasil dari pengujian yaitu +pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 17,7%. Pengujian pada halaman pembayaran tab drop off dapat dilihat pada +gambar 4.144 berikut. + + Gambar 4. 144 Pengujian Maze Pembayaran (Drop Off) + 158 + + Pada skenario pertama, terdapat kesalahan klik yang dilakukan responden +yaitu menekan pada tab pick up dan menekan pada card tab pick up sehingga +menampilkan detail dari pick up. Kemudian terdapat juga pengguna yang menekan +di menu paket dan profil. +p. Halaman Profil - Ubah Profil + + Pada task profil bagian ubah profil ini, terdapat lebih banyak flow, responden +yang melakukan pengujian sebanyak 19 dengan avg. duration (rata rata waktu) +29,6s. Hasil dari pengujian yaitu pada success rate (tingkat keberhasilan) memiliki +skor 94,7%, skor drop off (responden yang tidak menyelesaikan) sebanyak 5,3%, +dan skor missclick (kesalahan klik) 25,6%. Pengujian pada halaman profil bagian +ubah profil dapat dilihat pada gambar 4.145 berikut. + + Gambar 4. 145 Pengujian Maze Profil - Ubah Profil + Kesalahan klik yang dilakukan responden yaitu ketika berada di halaman +menu profil menekan pada pengaturan akun kemudian menekan tombol kembali +dan juga terdapat pengguna yang menekan foto profil bukan pada ikon edit profil. +Pada skenario 2, kesalahan klik yaitu pengguna memilih opsi pilih dari galeri. +Terdapat pengguna yang mana setelah berhasil edit profil menekan pada notifikasi +dan juga tidak mengedit pada nama seperti yang tertera pada skenario 3. + 159 + +q. Halaman Profil - Pengaturan Akun + Pada task profil bagian pengaturan akun ini, responden yang melakukan + +pengujian sebanyak 19 dengan avg. duration (rata rata waktu) 11,1s. Hasil dari +pengujian yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor +drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick +(kesalahan klik) 4,8%. Pengujian pada halaman profil bagian pengaturan akun +dapat dilihat pada gambar 4.146 berikut. + + Gambar 4. 146 Pengujian Maze Profil - Pengaturan Akun + Kesalahan klik yang dilakukan responden yaitu setelah menampilkan +halaman ubah kata sandi, pengguna lagsung menekan tombol dan tidak menekan di +inputan kata sandi lama. Terdapat juga pengguna yang menekan notifikasi setelah +mengubah sandi, dan menekan fitur notifikasi pada halaman profil. +r. Halaman Profil - Daftar Kontak + Pada task profil bagian daftar kontak ini, responden yang melakukan +pengujian sebanyak 19 dengan avg. duration (rata rata waktu) 15,8s. Hasil dari +pengujian yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor +drop off (responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick +(kesalahan klik) 12%. Pengujian pada halaman profil bagian daftar kontak dapat +dilihat pada gambar 4.147 berikut. + 160 + + Gambar 4. 147 Pengujian Maze profil – Daftar Kontak + Kesalahan klik yang dilakukan oleh responden yaitu menekan pada daftar +draft, selain itu terdapat pengguna yang mana setelah menampilkan halaman daftar +kontak menekan pada card pencarian. Kemudian terdapat kesalahan klik oleh +pengguna pada saat menambahkan kontak yaitu langsung menekan pada alamat dan +belum mengisi inputan nama, serta pada saat pemilihan alamat terdapat pengguna +yang menekan pada peta lokasi. Pada saat pengguna berhasil menambahkan kontak, +pengguna menekan notifikasi berhasil. +s. Halaman Profil - Alamat Saya + Pada task profil bagian alamat saya ini, responden yang melakukan pengujian +sebanyak 19 dengan avg. duration (rata rata waktu) 14,2s. Hasil dari pengujian +yaitu pada success rate (tingkat keberhasilan) memiliki skor 100%, skor drop off +(responden yang tidak menyelesaikan) sebanyak 0%, dan skor missclick (kesalahan +klik) 11,5%. Pengujian pada halaman profil bagian alamat saya dapat dilihat pada +gambar 4.148 berikut. + 161 + + Gambar 4. 148 Pengujian Maze Profil – Alamat Saya + Pada skenario pertama, kesalahan klik yang dilakukan responden adalah +menekan di inputan alamat dan inputan lainnya. + Berdasarkan hasil pengujian menggunakan Maze, didapatkan skor rata rata +yaitu 85 yang artinya terdapat beberapa kendala yang dialami oleh responden, +seperti kesalahan klik (misclick) atau terdapat responden yang keluar ketika +melakukan pengujian. Selain itu terdapat juga responden yang sudah melakukan +pengujian, namun pengujian tersebut tidak masuk ke maze peneliti. Adapun skor +rata rata pengujian dapat dilihat pada gambar 4.149 berikut. + + Gambar 4. 149 Skor Pengujian Maze + 162 + +3) Pengujian A/B + Peneliti melakukan pengujian A/B untuk membandingkan antara desain lama + +dan desain yang baru. Peneliti menyebarkan kuesioner kepada responden untuk +mengumpulkan tanggapan dan penilaian responden. Penyusunan kuesioner ini +menggunakan pertanyaan SUS dan skala Likert. Adapun pertanyaan SUS dapat +dilihat pada tabel 2.3 dan skor jawaban kuesioner dapat dilihat pada tabel tabel 2.4. +a. Hasil Perbandingan Desain Sebelum dan Sesudah + + Berikut merupakan tampilan aplikasi sebelum di desain ulang (A) dan +sesudah di desain ulang (B), dapat dilihat pada tabel 4.5 berikut. + +Tabel 4. 5 Perbadingan Desain A dan B + +Halaman Desain Sebelum (A) Desain Sesudah (B) + +Masuk + 163 + +Halaman Desain Sebelum (A) Desain Sesudah (B) + +Daftar + +Beranda + 164 + +Halaman Desain Sebelum (A) Desain Sesudah (B) + + Cek +Ongkir + +Lacak +Paket + 165 + +Halaman Desain Sebelum (A) Desain Sesudah (B) + +Pick Up + +Drop Off + 166 + +Halaman Desain Sebelum (A) Desain Sesudah (B) + + Gerai +Terdekat + + Paket + Kamu +(Penerima) + 167 + +Halaman Desain Sebelum (A) Desain Sesudah (B) + +Profil + + Pada desain lama (desain A) dan desain baru (desain B) pada halaman masuk +memiliki perbedaan dalam aspek visual, hierarki elemen, dan pendekatan branding. +Desain A menggunakan background gradasi merah muda dan oranye, sedangkan +desain B menggunakan warna merah dan putih yang identik dengan identitas +SiCepat. Pada desain B memberikan kejelasan dan informasi bagi pengguna dengan +menampilkan tombol login Google dengan teks "Masuk dengan Google" serta +menampilkan ajakan untuk "Daftar disini" dengan warna merah yang lebih tegas +dibandingkan dengan desain A yang memiliki warna tipis dan minim informasi. + + Pada desain halaman daftar, terdapat ajakan teks "Masuk di sini" yang +berwarna merah pekat, dan membantu meningkatkan daya tarik visual pada desain +B. Selain itu desain B menggunakan dropdown pada bagian "Jenis Kelamin" agar +menampilkan tampilan yang lebih rapi, berbeda dengan desain A yang +menggunakan radio button. Desain B menampilkan inputan di dalam card agar +memberikan kesan yang lebih terstruktur dan profesional. Tombol daftar Google +dalam desain B dilengkapi dengan label teks yang jelas ("Daftar dengan Google"), +sementara pada desain A hanya tersedia dalam bentuk ikon, yang mana kurang jelas +bagi beberapa pengguna. + 168 + + Perbedaan dari desain A dan desain B pada halaman beranda yaitu pada +bagian atas desain A menampilkan informasi pengguna, ikon notifikasi, kemudian +saldo dan poin dalam susunan card yang menyatu, sedangkan desain B +menampilkan profil pengguna, dengan sapaan yang memberikan kesan interaktif, +alamat, dan ikon pusat bantuan. Adapun saldo, dan poin berada dalam satu card. +Kemudian kolom pencarian resi pada desain A lebih menyatu dengan latar +belakang, sedangkan desain B menggunakan card dan teks ajakan “Mari Lacak +Paketmu Disini!”. Perbedaan lainnya pada tampilan fitur layanan "Cek Ongkir," +"Pick Up," "Drop Off," dan "Gerai." Desain A menggunakan latar belakang bulat di +atas teks, sementara desain B ikon di dalam kotak putih agar lebih rapi dan seragam, +selain itu pada bagian gerai menampilkan daftar lokasi gerai terdakat sedangkan +pada desain A menampilkan peta dan pengguna harus mencari titik gerai pada +lokasi. Bagian promo juga lebih menonjol di desain B dan informatif, dibandingkan +desain A yang hanya berupa banner kecil. + + Perbedaan pada halaman cek ongkir yaitu pada desain A menggunakan latar +belakang gradasi warna merah muda dan oranye, sedangkan desain B menggunakan +latar atas berwarna merah dengan ilustrasi karakter maskot yang memperkuat +identitas merek SiCepat. Pada desain A, form dimensi barang disembunyikan dalam +drop down. sedangkan Desain B langsung menampilkan semua kolom input seperti +panjang, lebar, tinggi, dan berat secara terbuka sehingga lebih informatif di awal +dengan langsung terlihat. + + Pada tampilan desain A dan desain B pada detail pengiriman paket memiliki +perbedaan yaitu desain A menggunakan latar belakang gradasi merah muda, dan di +bagian atas terdapat informasi mengenai no resi, penerima, layanan, dan status +pengiriman yang disusun dalam satu area ringkas. Sementara itu, desain B +menggunakan latar belakang putih dan teks yang lebih besar, serta menyertakan +peta lokasi di bagian atas untuk memberikan visualisasi posisi paket saat ini. +Penyampaian informasi desain A lebih singkat dan penggunaan bahasa yang +kurang, sedangkan desain B lebih informatif. + + Pada halaman pick up dan drop off ini hampir sama, yang mana desain A (kiri) +dan desain B (kanan) terdapat beberapa perbedaan yaitu menampilkan beberapa + 169 + +perbedaan dari segi tampilan visual. Dalam hal input data, kedua desain menyajikan +informasi yang serupa, tetapi pada desain A terdapat tombol “Daftar Kontak +Pengirim” yang tidak ada di desain B dikarenakan memiliki fungsi yang sama. Pada +tata letak untuk tombol “Simpan Sebagai Draft” dan “Selanjutnya” di desain B juga +berberda, dimana letak tombol "Simpan draft" sejajar dengan tombol "Selanjutnya” +dan untuk kembali ke tahap selanjutnya dapat menekan pada alur tahapan tersebut. + + Perbedaan desain A dan desain B pada halaman paket tab penerima adalah +desain A penggunaan ukuran font, marketplace dan status pengiriman terlihat kecil +di bagian atas dan kanan kartu. Sedangkan desain B menyajikan informasi dengan +ukuran yang lebih besar dan penggunaan warna latar yang berbeda. + + Perbedaan desain A (kiri) dan desain B (kanan) pada tampilan profil yaitu +desain A menggunakan latar belakang putih dengan sentuhan warna muda, yang +mana tampilan saldo serta poin di dalam card tidak terlalu mencolok dan menyatu +dengan latar belakang. Sementara itu, desain B memiliki tampilan yang lebih +modern dengan latar belakang merah di bagian atas dan menampilkan saldo dan +poin dalam card yang berbeda warna dengan latar belakang. + +b) Hasil Perbandingan Data Responden pada Desain Sebelum dan Sesudah + Pengambilan data ini menggunakan kuesioner yang menyajikan 10 + +pertanyaan pada desain sebelumnya dan desain sesudahnya. Pada penyebaran +kuesioner ini terdapat 100 responden. Responden diminta untuk melakukan +perbandingan dan memberikan nilai terkait desain sebelum dan sesudah. Adapun +data yang didapatkan dari kuesioner pada desain sebelumnya dapat dilihat pada +tabel 4.6 berikut. + +Tabel 4. 6 Hasil Skor Awal Desain A (Sebelum) + +Q1 Q2 Q3 … Q8 Q9 Q10 + +R1 5 2 5 1 5 2 + +R2 3 1 4 1 4 4 + +R3 5 1 5 1 5 2 + +R4 4 2 4 3 4 2 + +R5 5 1 5 1 5 1 + 170 + + Q1 Q2 Q3 … Q8 Q9 Q10 + + . + + . + + . + +R96 3 5 1 5 1 5 + +R97 3 5 1 5 2 4 + +R98 1 4 1 4 1 4 + +R99 2 4 2 4 2 4 + +R100 2 3 3 4 3 4 + +Keterangan: +Q = Merepresentasikan question (pertanyaan) +R = Merepresentasikan Responden + + Berdasarkan tabel 4.6, responden 1 (R1) memberikan skor jawaban 5 pada +pertanyaan 1 (Q1), kemudian untuk pertanyaan 2 (Q2) responden memberikan skor +2. Kemudian pada pertanyaan 3 (Q3) responden memberikan nilai 5, dan untuk +pertanyaan ke 8 (Q8) diberikan skor 1 oleh responden. Pada pertanyaan ke 9 (Q9) +responden memberikan skor 5 dan skor 2 untuk pertanyaan ke 10 (Q10). +Berdasarkan data tersebut, selanjutnya dilakukan perhitungan menggunakan cara +perhitungan SUS sesuai dengan rumus 2.1 dan rumus 2.2 yang mana pada +pertanyaan ganjil akan dikurangi dengan 1, dan pada pertanyaan genap 5 – skor. +Berikut data hasil perhitungan pada desain lama dapat dilihat pada tabel 4.7 berikut. + +Tabel 4. 7 Hasil Skor Desain A Perhitungan SUS + + Q1 Q2 Q3 … Q8 Q9 Q10 + +R1 4 3 4 4 4 3 + +R2 2 4 3 4 3 1 + +R3 4 4 4 4 4 3 + +R4 3 3 3 2 3 3 + +R5 4 4 4 4 4 4 + +. +. +. + +R96 2 0 0 0 0 0 + +R97 2 0 0 0 1 1 + 171 + +Q1 Q2 Q3 … Q8 Q9 Q10 + +R98 0 1 0 1 0 1 + +R99 1 1 1 1 1 1 + +R100 1 2 2 1 2 1 + +Keterangan: +Q = Merepresentasikan question (pertanyaan) +R = Merepresentasikan Responden + + Berdasarkan tabel 4.7, setelah dilakukan perhitungan menggunakan +pernyataan SUS, maka didapatkan skor yaitu pada responden 1 (R1) total skor pada +pertanyaan 1 (Q1) menghasilkan jumlah skor 4, kemudian untuk pertanyaan 2 (Q2) +menghasilkan skor 3. Kemudian pada pertanyaan 3 (Q3) menghasilkan skor 4, dan +untuk pertanyaan ke 8 (Q8) menghasilkan skor 4. Pada pertanyaan ke 9 (Q9) +responden menghasilkan skor 4 dan skor 3 untuk pertanyaan ke 10 (Q10). +Kemudian menghitung jumlah skor ganjil dan skor genap sesuai rumus 2.3 dengan +mengalikan dengan 2,5 dan dilanjutkan menjumlahkan semua hasil dari perkalian +2,5 tersebut. Hasil perhitungan ini, dapat dilihat pada tabel 4.8 berikut. + +Tabel 4. 8 Hasil Setelah Penjumlahan Skor pada Desain A + + R1 Hasil penjumlahan skor (*2,5) + R2 35 87,5 + R3 29 72,5 + R4 33 82,5 + R5 25 62,5 + . 34 85 + . + . 3 7,5 +R96 11 27,5 +R97 5 12,5 +R98 10 25 +R99 16 40 +R100 4507,5 +Total + 172 + + Berdasarkan tabel 4.8, didapatkan hasil jumlah skor pada responden 1 (R1) +yaitu 35. Hasil skor ini didapatkan dari penjumlahan skor dari Q1 hingga Q10. +Setelah mendapatkan hasil penjumlahan dari skor yang dikalikan 2,5, kemudian +mencari skor rata rata dengan cara menambahkan hasil penjumlahan tersebut dan +kemudian dibagi jumlah responden sesuai dengan rumus 2.4. Hasil rata rata dapat +dilihat pada perhitungan berikut + + 4507,5 + 100 + + = 45,075 + + = 45 + + Skor rata rata pada desain yang belum di desain ulang yaitu 45. Selanjutnya +dilakukan perhitungan untuk desain yang baru dengan cara perhitungan yang sama +seperti pada desain sebelumnya. Perhitungan pada desain baru dapat dilihat pada +tabel 4.9 berikut. + +Tabel 4. 9 Hasil Skor Awal Desain B (Sesudah) + +Q1 Q2 Q3 … Q8 Q9 Q10 + +R1 5 1 5 1 5 1 + +R2 3 1 5 1 3 4 + +R3 5 1 5 1 5 2 + +R4 4 2 4 1 5 3 + +R5 5 1 4 1 5 1 + + . 1 5 1 5 1 + . + . + +R96 5 + +R97 5 1 5 1 5 1 + +R98 4 1 4 1 4 1 + +R99 4 2 4 2 4 2 + +R100 4 2 4 2 4 2 + +Keterangan: +Q = Merepresentasikan question (pertanyaan) +R = Merepresentasikan Responden + 173 + + Berdasarkan tabel 4.9, responden 1 (R1) memberikan skor jawaban 5 pada +pertanyaan 1 (Q1), kemudian untuk pertanyaan 2 (Q2) responden memberikan skor +1. Kemudian pada pertanyaan 3 (Q3) responden memberikan nilai 5, dan untuk +pertanyaan ke 8 (Q8) diberikan skor 1 oleh responden. Pada pertanyaan ke 9 (Q9) +responden memberikan skor 5 dan skor 1 untuk pertanyaan ke 10 (Q10). +Berdasarkan data tersebut, selanjutnya dilakukan perhitungan menggunakan cara +perhitungan SUS sesuai dengan rumus 2.1 dan rumus 2.2 yang mana pada +pertanyaan ganjil akan dikurangi dengan 1, dan pada pertanyaan genap 5 – skor. +Berikut data hasil perhitungan pada desain baru dapat dilihat pada tabel 4.10 +berikut. + +Tabel 4. 10 Hasil Skor Desain B Perhitungan SUS + + Q1 Q2 Q3 … Q8 Q9 Q10 + +R1 4 4 4 4 4 4 + +R2 2 4 4 4 2 1 + +R3 4 4 4 4 4 3 + +R4 3 3 3 4 4 2 + +R5 4 4 3 4 4 4 + +. +. +. + +R96 4 4 4 4 4 4 + +R97 4 4 4 4 4 4 + +R98 3 4 3 4 3 4 + +R99 3 3 3 3 3 3 + +R100 3 3 3 3 3 3 + +Keterangan: +Q = Merepresentasikan question (pertanyaan) +R = Merepresentasikan Responden + + Berdasarkan tabel 4.10, setelah dilakukan perhitungan menggunakan +pernyataan SUS, maka didapatkan skor yaitu pada responden 1 (R1) total skor pada +pertanyaan 1 (Q1) menghasilkan jumlah skor 4, kemudian untuk pertanyaan 2 (Q2) +menghasilkan skor 4. Kemudian pada pertanyaan 3 (Q3) menghasilkan skor 4, dan +untuk pertanyaan ke 8 (Q8) menghasilkan skor 4. Pada pertanyaan ke 9 (Q9) + 174 + +responden menghasilkan skor 4 dan skor 4 untuk pertanyaan ke 10 (Q10). +Kemudian menghitung jumlah skor ganjil dan skor genap sesuai rumus 2.3 dan +mengalikan dengan 2,5 dan dilanjutkan menjumlahkan semua hasil dari perkalian +2,5 tersebut. Hasil perhitungan ini, dapat dilihat pada tabel 4.11 berikut. + +Tabel 4. 11 Hasil Setelah Penjumlahan Skor pada Desain B + + R1 Hasil penjumlahan skor (*2,5) + R2 37 92,5 + R3 29 72,5 + R4 37 92,5 + R5 28 70 + . 38 95 + . + . 40 100 +R96 39 97,5 +R97 35 87,5 +R98 30 75 +R99 31 77,5 +R100 8125 +Total + +Berdasarkan tabel 4.11, didapatkan hasil jumlah skor pada responden 1 (R1) + +yaitu 37. Hasil skor ini didapatkan dari penjumlahan skor dari Q1 hingga Q10. + +Setelah mendapatkan hasil penjumlahan dari skor yang dikalikan 2,5, kemudian + +mencari skor rata rata dengan cara menambahkan hasil penjumlahan tersebut dan + +kemudian dibagi jumlah responden sesuai dengan rumus 2.4. Hasil rata rata dapat + +dilihat pada perhitungan berikut + + 8125 + 100 + = 81,25 + + = 81 + +Berdasarkan hasil perhitungan pada perbandingan desain, didapatkan skor + +pada desain lama yaitu 45 sedangkan pada desain baru skor nya 81. Skor pada + +desain baru lebih tinggi dibandingkan dengan skor lama. Berdasarkan hasil + 175 + +perhitungan pada desain baru, masuk pada kategori “Excellent” dengan grade yaitu +A. SUS Score dapat dilihat pada tabel 2.5 + +4.5 Evaluasi Hasil Pengujian + Berdasarkan pengujian yang sudah dilakukan, didapatkan evaluasi pengujian + +seperti berikut: +4.5.1 Pada pengujian menggunakan Maze + + Hasil rata rata dari pengujian menggunakan maze ini adalah 85, yang mana +menunjukkan bahwa desain mampu dipahami oleh pengguna. Pengujian dilakukan +dengan 20 responden dan terdapat 1 responden yang saat melakukan pengujian +maze berhenti pada task beranda lacak paket, dan untuk task selanjutnya data tidak +masuk sehingga untuk task setelah beranda lacak paket jumlah responden sebanyak +19. Terdapat juga pada bagian task alamat saya terdapat 1 responden lagi yang mana +data pengujian tidak masuk, sehingga jumlah responden pada task alamat saya +sebanyak 18. Adapun hasil yang paling rendah yaitu pada task pick up pengirim, +menu paket (tab pengirim) dan ubah profil dengan success rate (tingkat +keberhasilan) sebesar 94,7% dan drop off (responden yang tidak menyelesaikan) +sebesar 5,3%. Pada taks pick up pengirim terdapat 1 orang yang tidak +menyelesaikan task, yang mana pada 1 responden ini pada bagian inputan alamat +menekan pada tab “Terakhir Dilihat” sehingga menampilkan daftar alamat yang +baru saja dilihat dan pengguna menekan pada daftar alamat tersebut. Selain itu, +ketika pengguna menekan pada kolom inputan alamat, pengguna menekan pada +bagian peta yang kemudian pengguna keluar dan tidak menyelesaikan task ini. + + Selanjutnya pada task paket (tab pengirim) terdapat 1 pengguna yang keluar +dan tidak menyelesaikan task, dikarenakan 1 pengguna ini menekan pada bagian +lacak paket sehingga menampilkan halaman untuk melakukan lacak paket. +Kemudian pada task ubah profil, terdapat 1 pengguna yang tidak menyelesaikan +task dikarenakan pada halaman profil menekan pada fitur pengaturan akun dan +menekan tombol kembali, setelah menekan tombol kembali pengguna menekan +pada icon edit, pada edit foto profil ini pengguna menekan pada opsi “Pilih dari +Galeri” serta ikon batal pada bottom sheet opsi dan keluar dari pengujian. + 176 + +4.5.2 Pengujian A/B + Hasil pada pengujian A/B ini menunjukkan bahwa desain baru lebih baik + +dengan skor yang lebih tinggi dibandingkan desain awal. Pada desain awal +memiliki skor 45 sedangkan desain yang baru memiliki skor 81 yang artinya desain +baru memiliki peningkatan dan memiliki perbedaan nilai sebesar 36 dari desain +lama. Meskipun pada desain baru mengalami peningkatan, namun dengan skor 81 +tersebut masih terdapat untuk perbaikan. Adapun pada pengujian A/B ini yang +terdapat skor 0 ada pada Q2 (Saya merasa sistem ini rumit untuk digunakan), Q8 +(Saya merasa sistem ini membingungkan), Q10 (Saya perlu membiasakan diri +terlebih dahulu sebelum menggunakan sistem ini). Berdasarkan skor pada +pertanyaan yang memiliki skor 0, adapun perbaikan yang dapat dilakukan yaitu +menyederhanakan tampilan atau fitur, serta menggunakan bahasa atau informasi +yang dapat dengan mudah dimengerti, selain itu menambahkan informasi pada saat +pengguna membuka fitur sehingga pengguna tahu apa yang akan dilakukan + BAB 5. KESIMPULAN DAN SARAN + +5.1 Kesimpulan + Berdasarkan hasil penelitian yang telah dilakukan dengan implementasi + +metode design thinking yang terdiri dari tahapan empathize, define, ideate, protoype +dan testing agar dapat memudahkan penggunanya, maka didapatkan kesimpulan +bahwa perancangan ulang desain aplikasi SiCepat Ekspress menggunakan dua +pengujian yaitu pengujian usability testing menggunakan maze dan pengujian A/B +dengan penyebaran kuesioner SUS. Pada pengujian maze ini diberikan skenario +untuk melakukan pengujian, dan pengguna menjalankan sesuai dengan skenario. +Hasil dari pengujian maze memiliki skor rata rata 85. Selanjutnya pada pengujian +A/B testing dilakukan penyebaran kuesioner untuk pengujian A/B yang bertujuan +untuk mendapatkan hasil perbandingan antara desail awal dan desain baru. Adapun +pada pengujian A/B ini didapatkan skor lebih tinggi yaitu 81, sedangkan desain +awal didapatkon skor 45 yang menunjukkan bahwa desain baru lebih baik dengan +selisih 36. + +5.2 Saran + Adapun saran yang dapat dilakukan adalah sebagai berikut: + +a. Melakukan iterasi desain sesuai dengan umpan balik berdasarkan + pengalaman pengguna tanpa mengubah struktur yang sudah berhasil + +b. Mempertimbangkan informasi yang jelas dengan bahasa yang mudah + dipahami agar pengguna dapat dengan mudah mengerti + +c. Melakukan cek kembali pada task di pengujian maze di bagian pengguna + yang keluar atau tidak melanjutkan pengujian untuk mengetahui kesalahan + yang dilakukan pengguna + + 177 + DAFTAR PUSTAKA + +Achyani, Y.E. and Andini, A.R. (2024) ‘Perancangan UI/UX Aplikasi Booking Self + +Photo Studio Menggunakan Metode Design Thinking’, Jurnal Teknik + +Komputer, 10(1), pp. 86–94. Available at: + +https://doi.org/10.31294/jtk.v10i1.17006. + +Aditya Firmansyah Putra, K. and Arwani, I. (2021) Pemanfaatan API RajaOngkir + untuk Cek Ongkos Kirim Otomatis pada Pembangunan Website E- + Commerce menggunakan Framework Codeigniter (Studi Kasus: Jingga + Hijab). Available at: http://j-ptiik.ub.ac.id. + +Albert, T., Nugroho, J.A. and Hapsari, R.W. (2021) ‘Perancangan Ulang UI/ UX + Website sebuah Perusahaan Farmasi’. + +Al-Faruq, M.N.M., Nur’aini, S. and Aufan, M.H. (2022) ‘Perancangan UI/UX + Semarang Virtual Tourism Dengan Figma’, Walisongo Journal of + Information Technology, 4(1), pp. 43–52. Available at: + https://doi.org/10.21580/wjit.2022.4.1.12079. + +Anggita, M. et al. (2021) Kajian User Interface Aplikasi Pesan Instan Berbasis + Mobile. + +Anshori, S. (2020) ‘Pemanfaatan Teknologi Informasi Dan Komunikasi Sebagai + Media Pembelajaran’, ‘Civic-Culture: Jurnal Ilmu Pendidikan PKn dan + Sosial Budaya’ Pemanfaatan Teknologi Informasi Dan Komunikasi Sebagai + Media Pembelajaran, pp. 88–100. + +Apridonal M, Y. and Muhazir, A. (2023) ‘Sistem Informasi Pelacakan Paket Pada + PT Grand Anugerah Surya Berbasis Webgis’, Jurnal CoSciTech (Computer + Science and Information Technology), 4(2), pp. 445–450. Available at: + https://doi.org/10.37859/coscitech.v4i2.5356. + + 178 + 179 + +Asrulla, A., Jailani, M.S. and Jeka, F. (2023) Populasi dan Sampling (Kuantitatif), + Serta Pemilihan Informan Kunci (Kualitatif) dalam Pendekatan Praktis. + Available at: https://www.researchgate.net/publication/386875018. + +Aulia Taqwa, I. et al. (2020) Pengembangan Smart Cat Feeder Menggunakan + Metode A/B Testing Development Smart Cat Feeder Using Method A/B + Testing. Available at: www.raspberrypi.org. + +Aziza, R.F.A. (2021) ‘Analisis Kebutuhan Pengguna Aplikasi Menggunakan User + Persona Dan User Journey’, Information System Journal, 3(2), pp. 6–10. + Available at: https://doi.org/10.24076/infosjournal.2020v3i2.420. + +Bahariyani, M. et al. (2020) ‘Analisis Desain Antarmuka Portal Pembelajaran + Online Menggunakan Evaluasi Heuristik’, Jurnal IT CIDA, 6(1). + +Balafif, S. (2022) ‘Analisis Website Menggunakan Heuristic Evaluation Berbasis + Severity Ratings Dan System Usability Scale’, Jurnal Informatika, + Teknologi dan Sains, 4(3), pp. 123–130. Available at: + https://doi.org/10.51401/jinteks.v4i3.1767. + +Bayu, O. et al. (2021) Logo Sebagai Media Komunikasi Teknologi: Analisis + +Semiotika Pada Logo Meta. Available at: + +https://journal.universitasbumigora.ac.id/index.php/sasak. + +Billah Arifin, taz, Pramudya Putra Prasetya, B. and Nirwana, A. (2022) Redesain + Website Marketplace Yulibu.Com Untuk Meningkatkan User Experience + Pengguna Menggunakan Metode Lean UX, SAINSBERTEK Jurnal Ilmiah + Sains & Teknologi. DKV. + +Dafitri, H. et al. (2023) Pelatihan Desain UI/UX Website UMKM Profile Labscarpe + Dengan Aplikasi Figma. + +Dafrina, A., Abadi, F. and Purnama Lisa, N. (2022) Kajian Makna Ornamen Dan + Makna Warna Ornamen Umah Pitu Ruang (Studi Kasus Umah Pitu Ruang + Di Desa Kemili, Aceh Tengah). + 180 + +Darmawan, D. (2021) ‘Pemanfaatan Sig Untuk Sebaran Sistem Zonasi Penerimaan + Peserta Didik Baru (PPDB)’. + +Ernowo, A.E., Julianto, E. and Handarkho, Y.D. (2021) Pengujian Website CGV + Cinemas Berdasarkan Aspek IMK dengan Metode A/B Testing, Jurnal + Informatika Atma Jogja. + +Fadilah, R.N. and Sweetania, D. (2023) ‘Perancangan Design Prototype UI/UX + Aplikasi Reservasi Restoran Dengan Menggunakan Metode Design + Thinking’, JUIT, 2(2). + +Falahuddin, I. et al. (2023) Peningkatan Pengalaman Pengguna melalui Redesain + UI/UX Aplikasi Cincau Stasion Menggunakan Pendekatan Design + Thinking. + +Fatah, D.A. (2020) ‘Evaluasi Usability dan Perbaikan Desain Aplikasi Mobile + Menggunakan Usability Testing dengan Pendekatan Human-Centered + Design (HCD)’, Rekayasa, 13(2), pp. 130–143. Available at: + https://doi.org/10.21107/rekayasa.v13i2.6584. + +Firdaus, M.A., Kusumo, D.S. and Selviandro, N. (2024) ‘Implementasi Desain + Antarmuka Pada Website Cafeasy Menggunakan React.Js (Studi Kasus: + Café di Daerah Bandung’. + +Fitri, L.M., Andreas Rio Adriyanto and Jiwa Utama (2024) ‘Media Edukasi Sebagai + +Pengenalan Tentang Domba Garut’, Judikatif: Jurnal Desain Komunikasi + +Kreatif, 6(1), pp. 74–79. Available at: + +https://doi.org/10.35134/judikatif.v6i1.195. + +Gani, R.P., Arum Puspita, I. and Tripiawan, W. (2021) ‘Perancangan UI/UX Design + Pada Dashboard Monitoring Proyek Menggunakan Metode Design + Thinking Untuk Penerapan Sistem Earned Value Management Pada PT. + XYZ Designing of Dashboard Monitoring Project UI/UX Design Using + Design Thinking Method for Implementation of Earned Value Management + System in PT. XYZ’, 8(5), p. 8465. + 181 + +Ginanjar, J. and Sukoco, I. (2022) Penerapan Design Thinking Pada Sayurbox, + JURISMA: Jurnal Riset Bisnis dan Manajemen. + +Hari Utami, F. (2022) ‘Aplikasi Pelayanan Antrian Pasien Menggunakan Metode + FCFS Menggunakan PHP dan MySQL’, Jurnal Media Infotama, 18(1), p. + 341139. + +Ibrahim, A.A.-Z. and Lestari, I. (2023) ‘Perancangan UI/UX Pada Website Rumah + Tahfidz Akhwat Menggunakan Metode Design Thinking’, Teknika, 12(2), + pp. 96–105. Available at: https://doi.org/10.34148/teknika.v12i2.599. + +Jamaludin, A. et al. (2023) ‘Pengaruh Kecepatan Pengiriman dan Kualitas + Pelayanan terhadap Kepuasan Konsumen PT Sicepat Ekspres Jatisampurna + Bekasi’, Sosio e-Kons, 15(3), p. 275. Available at: + https://doi.org/10.30998/sosioekons.v15i3.20801. + +Jeka, F., Syahran Jailani, M. and Islam Negeri Sulthan Thaha Saifuddin Jambi, U. + (2023) Kajian Literatur dalam Menyusun Referensi Kunci, State of the Art, + dan Keterbaharuan Penelitian (Novelty). + +Karja, I.W. (2021) Makna Warna. Available at: https://en.wikipedia.org/. +Kartika Virgantara, S. et al. (2024) ‘Penerapan Editing Dimensi Ritmis Dan Warna + + Sepia Dalam Musik Video Bin Idris’. Available at: + https://jurnal2.isi.dps.ac.id/index.php/calaccitra. +Kesuma, D.P. (2020) Evaluasi Usability Pada Web Perguruan Tinggi XYZ + Menggunakan System Usability Scale Usability Evaluation of XYZ + University Website Using System Usability Scale, JTSI. +Kridalukmana, R. and Pertiwi Windasari, I. (2023) ‘Perancangan Ulang User + Interface Dan User Experience (UI/UX) Website PT Subur Makmur Migas + Pratama Sebagai Media Monitoring Administrasi Menggunakan Metode + Human-Centered Design (HCD)’, Jurnal Teknik Komputer, 2(1), pp. 53–66. + Available at: https://doi.org/10.14710/jtk.v2i1.38090. + 182 + +Kristianto, M. and Yuono, D. (2023) ‘Interaksi Manusia Dan AI Sebagai + Pendekatan Desain Ruang Kreatif’, Jurnal Sains, Teknologi, Urban, + Perancangan, Arsitektur (Stupa), 5(2), pp. 1699–1710. Available at: + https://doi.org/10.24912/stupa.v5i2.24310. + +Larasati, I. (2020) Evaluasi Penggunaan Website Universitas Islam Negeri Syarif + Hidayatullah Jakarta Dengan Menggunakan Metode Usability Testing, + Computatio: Journal of Computer Science and Information Systems. + Available at: www.dictio.id. + +Masida, D. and Fauzi, A. (2022) Pengaruh Potongan Harga, Daya Tarik Iklan Dan + User Friendly Pada Aplikasi Dompet Digital Terhadap Pembelian Impulsif + Konsumen Generasi Milenial. + +Millah, H. and Suryana, H. (2020) ‘Pengaruh Kualitas Pelayanan Karyawan + Terhadap Kepuasan Konsumen (Studi Kasus Pada Alfamart di Desa + Karangbong Kecamatan Pajarakan)’. + +Mirza, A., Lusita, M.D. and Diana, D. (2023) ‘Design of UI/UX Applications for + Mobile-Based E-Commerce Tech.An Gadgets Using the Design Method + Thinking’, Journal of Information System, Informatics and Computing, 7(1), + p. 58. Available at: https://doi.org/10.52362/jisicom.v7i1.1085. + +Muhyidin, M.A., Sulhan, M.A. and Sevtiana, A. (2020) ‘Perancangan UI/UX + Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan + Aplikasi Figma’, Jurnal Digit, 10(2), p. 208. Available at: + https://doi.org/10.51920/jd.v10i2.171. + +Nabil, M. et al. (2024) ‘Penerapan Metode Design Thinking Dalam Pembuatan + UI/UX Aplikasi Marketplace Ikan Hias’, Jurnal Teknik Informatika dan + Terapan [Preprint], (2). + +Nugroho, D.P. and Sari, R. (2023) Analisis UI/UX menggunakan Metode User + Centered-Design Pada Aplikasi TSP Mobile, Jurnal Infortech. Available at: + http://ejournal.bsi.ac.id/ejurnal/index.php/infortech. + 183 + +Nur Kholifah, S. et al. (2023) Analisis Usability Pada Aplikasi Himfo + Menggunakan Metode System Usability Scale (SUS) (Studi Kasus + Himpunan Mahasiswa Teknik Informatika Unsika), Jurnal Mahasiswa + Teknik Informatika. + +Nurlaela, C. (2022) Analisis Peran Humas PT. Sicepat Express Dalam + Memanfaatkan Social Media Sebagai Media Promosi. Available at: + https://www.researchgate.net/publication/361372478. + +Nursamsiatun, N. and Ismail, I. (2024) ‘Rancang Bangun Sistem Pendataan + Pengemudi di PT. Advancednet Indonesia berbasis Mobile dengan Metode + Design Thinking’, AVITEC, 6(1), p. 31. Available at: + https://doi.org/10.28989/avitec.v6i1.2021. + +Pramudita, R. et al. (2021) ‘Penggunaan Aplikasi Figma Dalam Membangun + UI/UX Yang Interaktif Pada Program Studi Teknik Informatika Stmik + Tasikmalaya’, Shilka Dina Anwariya, 3(1). Available at: + www.youtube.com,. + +Puspita Eugenia, M. et al. (2022) Pendekatan Metode User-Centered Design dan + System Usability Scale dalam Redesain dan Evaluasi Antarmuka Website + Studi Kasus Website Diseminasi Sensus Pertanian, Metode User-Centered + Design dalam Redesain dan Evaluasi Antarmuka. Available at: + https://st2013.bps.go.id/. + +Ratnasari, A.D. et al. (2024) ‘Perancangan UI/UX Sistem Monitoring + Pengangkutan Sampah Berbasis Activity Centered Design UI/UX Design of + Waste Transportation Monitoring System Based on Activity Centered + Design’. Available at: https://doi.org/10.57203/session.v3i1.2024.17-25. + +Reynaldi, V.K. and Setiyawati, N. (2022) Perancangan UI/UX Fitur Mentor on + Demand Menggunakan Metode Design Thinking Pada Platform Pendidikan + Teknologi. + 184 + +Rifa, N.N. and Darso (2024) ‘Perancangan Ulang UI/UX Design Facebook Lite + App Menggunakan Metode Design Thinking’. Available at: + https://doi.org/10.55123. + +Riyan Maulana, M. et al. (2023) ‘SiDaur: Aplikasi Berbasis Mobile dan + Traceability dalam Mengurangi Limbah Makanan di Indonesia’, JURNAL + SWABUMI, 11(1), pp. 54–62. + +Rosiana, P.S. et al. (2023) ‘Analisis Aplikasi Tiktok Berdasarkan Prinsip Dan + Paradigma Interaksi Manusia Dan Komputer Menggunakan Evaluasi + Heuristic’, Jurnal Informatika dan Teknik Elektro Terapan, 11(3). Available + at: https://doi.org/10.23960/jitet.v11i3.3271. + +Salsabil, S., Kaniawulan, I. and Sri Andar Muni, L. (2023) ‘Redesign User Interface + (UI) Dan User Experience (UX) Website PT. Mulia Anugrah Container + Dengan Metode User Center Design (UCD)’, JATI (Jurnal Mahasiswa + Teknik Informatika), 7(3), pp. 1958–1965. Available at: + https://doi.org/10.36040/jati.v7i3.6957. + +Santoso, M.H. (2023) Pengembangan Aplikasi Mobile yang User-Friendly: Strategi + Desain UX. + +Saputra, D. and Kania, R. (2022a) Implementasi Design Thinking untuk User + Experience Pada Penggunaan Aplikasi Digital. + +Saputra, D. and Kania, R. (2022b) Prosiding The 13th Industrial Research + Workshop and National Seminar Bandung. + +Sari, A.M., Yani, D. and Suryani, D. (2021) ‘Implementasi Aplikasi Mobile Peta + NKRI (Negara Kesatuan Republik Indonesia) Berbasis Android + Menggunakan Metode Prototype’. + +Sari, I.P. et al. (2020a) ‘Implementasi Metode Pendekatan Design Thinking dalam + Pembuatan Aplikasi Happy Class Di Kampus UPI Cibiru’, Edsence: Jurnal + Pendidikan Multimedia, 2(1), pp. 45–55. Available at: + https://doi.org/10.17509/edsence.v2i1.25131. + 185 + +Sari, I.P. et al. (2020b) ‘Implementasi Metode Pendekatan Design Thinking dalam + Pembuatan Aplikasi Happy Class Di Kampus UPI Cibiru’, Edsence: Jurnal + Pendidikan Multimedia, 2(1), pp. 45–55. Available at: + https://doi.org/10.17509/edsence.v2i1.25131. + +Supriadi, Sani, A. and Putra Setiawan, I. (2020) ‘Integrasi Nilai Karakter dalam + Pembelajaran Keterampilan Menulis Siswa’, Journal of Management, 3(3), + pp. 84–93. Available at: https://doi.org/10.2568/yum.v3i3.778. + +Sutanto, R.P. (2022) ‘Analisis User Flow pada Website Pendidikan: Studi Kasus + Website DKV UK Petra’, Nirmana, 22(1), pp. 41–51. Available at: + https://doi.org/10.9744/nirmana.22.1.41-51. + +Tri Atmaji, L. et al. (2024) ‘Perancangan Ulang Website PT Jari Solusi International + Sebagai Media Informasi Bagi Pengunjung Website’, Journal of Scientech + Research and Development, 6(2). Available at: https://idm.or.id/JSCR/in. + +Umiga, M. (2022) ‘Perancangan User Interface (UI) dan User Experience (UX) + Aplikasi e-Learning Studi Kasus SMK N Jenawi dengan Pendekatan User + Centered Design’, Jurnal Cakrawala Informasi, 2(2), pp. 56–62. Available + at: https://doi.org/10.54066/jci.v2i2.242. + +Utami, N.W. et al. (2020) Evaluasi Usability Pada E-Learning Universitas + Pendidikan Ganesha Dengan Metode Usability Testing. + +Wulansari et al. (2021) ‘Analisis Kepuasan Konsumen Ditinjau dari Kualitas + Pelayanan Dan Citra Perusahaan (Studi Pada Ekspedisi Sicepat Express)’, + Jurnal Administrasi Sosial dan Humaniora, 4(3), p. 142. Available at: + https://doi.org/10.56957/jsr.v4i3.188. + +Yoga Pudya Ardhana, V. (2022) Evaluasi Usability E-Learning Universitas + Qamarul Huda Menggunakan System Usability Scale (SUS), Journal of + Informatics, Electrical and Electronics Engineering. Available at: + https://djournals.com/jieee. + 186 + +Yudarmawan, R.A. et al. (2020a) Perancangan User Interface dan User Experience + SIMRS pada Bagian Layanan, JITTER-Jurnal Ilmiah Teknologi dan + Komputer. + +Yudarmawan, R.A. et al. (2020b) Perancangan User Interface dan User Experience + SIMRS pada Bagian Layanan, JITTER-Jurnal Ilmiah Teknologi dan + Komputer. + LAMPIRAN +Lampiran 1 Surat Izin Penelitian + + 187 + 188 +Lampiran 2 Observasi Kantor SiCepat Ekspress + 189 +Lampiran 3 Ulasan Pengguna Play Store + 190 +Lampiran 4a Lembar Validasi Kuesioner Awal + 191 + 192 + 193 + 194 +Lampiran 4b Lembar Validasi Kuesioner Awal + 195 + 196 + 197 +Lampiran 5 Pertanyaan Kuesioner Awal + +Lampiran 6 Link Figjam Pain Point, How Might We, User Persona, User Journey +Map, Solution Idea +https://figma.fun/lE9ji7 +Lampiran 7 Link User Flow +http://bit.ly/4nr0j67 + 198 +Lampiran 8 Kuesioner Pengujian A/B + +Lampiran 9 Link Skor Kuesioner A/B +https://bit.ly/4jTPeaw + diff --git a/Laporan TA atau Skripsi/skripsi.fig b/Laporan TA atau Skripsi/skripsi.fig new file mode 100644 index 0000000..00cc1dd Binary files /dev/null and b/Laporan TA atau Skripsi/skripsi.fig differ