UNIVERSITAS DIPONEGORO HALAMAN JUDUL
PERANCANGAN USER INTERFACE DAN USER EXPERIENCE (UI/UX) PADA APLIKASI “I-LIFE” DAN “MITRA I-LIFE”
DI PT. IBUNDA DIGITAL INDONESIA DENGAN METODE DESIGN THINKING
HALAMAN JUDUL TUGAS AKHIR
Diajukan sebagai salah satu syarat untuk memperoleh gelar Sajana Teknik
ALVIN ELIAN ABIYYI 21120117130051
FAKULTAS TEKNIK
DEPARTEMEN TEKNIK KOMPUTER SEMARANG
DESEMBER 2021
ii
HALAMAN PENGESAHAN
Tugas Akhir ini diajukan oleh
Nama : Alvin Elian Abiyyi
NIM : 21120117130051
Jurusan/Program Studi : Teknik Komputer
Judul Tugas Akhir : Perancangan User Interface dan User Experience (UI/UX) pada Aplikasi “I-Life” dan “Mitra I-Life" di PT.
Ibunda Digital Indonesia dengan Metode Design Thinking
Telah berhasil dipertahankan di hadapan Tim Penguji dan diterima sebagai bagian persyaratan yang diperlukan untuk memperoleh gelar Sarjana Teknik pada Jurusan/Program Studi Teknik Komputer, Fakultas Teknik, Universitas Diponegoro.
TIM PENGUJI
Pembimbing I : Agung Budi Prasetijo, S.T., M.I.T., Ph.D ( ) Pembimbing II : Ike Pertiwi Windasari, S.T., M.T. ( ) Ketua Penguji : Kurniawan Teguh Martono, S.T., M.T. ( ) Anggota Penguji : Risma Septiana S.T., M.Eng. ( )
iii
HALAMAN PERNYATAAN ORISINALITAS
Tugas Akhir ini adalah hasil karya saya sendiri,
dan semua sumber baik yang dikutip maupun yang dirujuk telah saya nyatakan dengan benar.
Nama : Alvin Elian Abiyyi
NIM : 21120117130051
Tanda Tangan :
Tanggal : Semarang, 22 Desember 2021
iv
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI TUGAS AKHIR UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademika Universitas Diponegoro, saya yang bertanda tangan di bawah ini :
Nama : Alvin Elian Abiyyi
NIM : 21120117130051
Departemen : Teknik Komputer
Fakultas : Teknik
Jenis Karya : Tugas Akhir
demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Diponegoro Hak Bebas Royalti Noneksklusif (Non-exclusive Royalty Free Right) atas karya ilmiah saya berjudul :
Perancangan User Interface dan User Experience (UI/UX) pada Aplikasi “I-Life”
dan “Mitra I-Life" di PT. Ibunda Digital Indonesia dengan Metode Design Thinking
beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti/Noneksklusif ini Universitas Diponegoro berhak menyimpan, mengalihmedia/formatkan, mengelola dalam bentuk pangkalan data (database), merawat dan memublikasikan Tugas Akhir saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak Cipta.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Semarang
Pada tanggal : 22 Desember 2021
Yang menyatakan,
(Alvin Elian Abiyyi)
v
KATA PENGANTAR
Puji syukur atas kehadirat Allah SWT yang telah memberikan rahmat serta hidayah-Nya sehingga penulis dapat menyusun laporan tugas akhir dengan judul
“Perancangan User Interface dan User Experience (UI/UX) pada Aplikasi I-Life dan Mitra I-Life di PT. Ibunda Digital Indonesia dengan Metode Design Thinking”. Penelitian ini bertujuan membuat rancangan user interface dan user experience (UI/UX) serta menerapkan metode design thinking pada aplikasi I-Life dan Mitra I-Life. Selain itu, penelitian ini dapat bermanfaat untuk menambah wawasan bagi pembaca.
Laporan Tugas Akhir ini merupakan salah satu syarat untuk menyelesaikan studi di Departemen Teknik Komputer Fakultas Teknik Universitas Diponegoro.
Diharapkan penyusun laporan Tugas Akhir ini dapat memberikan manfaat dalam bidang Pendidikan.
Dalam penyusunan laporan Tugas Akhir ini penulis banyak mendapatkan dukungan, doa bimbingan dan dorongan dari berbagai pihak. Oleh karenanya, melalui kesempatan ini penulis menyampaikan ucapan terima kasih kepada:
1. Bapak Adian Fatchur Rochim, ST., MT. selaku Ketua Departemen Teknik Komputer Fakultas Teknik Universitas Diponegoro.
2. Bapak Agung Budi Prasetijo, S.T., MIT, PhD. selaku dosen pembimbing I yang telah memberikan petunjuk, masukan, dan bimbingan selama pembuatan Tugas Akhir ini.
3. Ibu Ike Pertiwi Windasari, S.T., M.T. selaku dosen pembimbing II yang telah membantu dalam penulisan laporan Tugas Akhir.
4. Ike Pertiwi Windasari, S.T., M.T. selaku Koordinator Tugas Akhir.
5. Bapak dan Ibu dosen Jurusan Teknik Komputer yang telah membantu Penulis dalam mendapatkan ilmu.
6. PT. Ibunda Digital Indonesia yang telah mengizinkan Penulis menggunakan aplikasi I-Life dan Mitra I-Life sebagai bahan pembuatan Tugas Akhir.
vi
7. Kedua orang tua dan keluarga yang selalu mendoakan dan mendukung Penulis dalam menyelesaikan Tugas Akhir.
8. Tangguh Tri Prasetyo dan Farhan Mazario yang selalu menguatkan dan saling membantu selama Penulis mengerjakan Tugas Akhir ini.
9. Teman-teman Teknik Komputer angkatan 2017 yang telah membantu dan mendukung Penulis.
10. Seluruh responden yang telah bersedia meluangkan waktu untuk membantu dan memberikan saran kepada Penulis.
11. Serta semua pihak yang tidak dapat disebutkan satu persatu yang telah membantu hingga terselesaikannya Tugas Akhir ini.
Penulis menyadari bahwa laporan Tugas Akhir ini jauh dari kesempurnaan. Oleh karena itu, penulis mengharapkan saran dan kritik yang membangun untuk laporan tugas akhir ini. Akhir kata Penulis mengucapkan terima kasih.
Semarang,22 Desember 2021
Alvin Elian Abiyyi
vii
DAFTAR ISI
HALAMAN JUDUL ... i
HALAMAN PENGESAHAN ... ii
HALAMAN PERNYATAAN ORISINALITAS ... iii
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI ... iv
KATA PENGANTAR ... v
DAFTAR ISI ... vii
DAFTAR TABEL ... ix
DAFTAR GAMBAR ... x
ABSTRAK ... xiii
ABSTRACT ... xiv
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 2
1.3 Batasan Masalah ... 2
1.4 Tujuan Penelitian ... 2
1.5 Manfaat Penelitian ... 3
1.6 Metodologi Penelitian ... 3
1.7 Sistematika Penulisan ... 3
BAB II TINJAUAN PUSTAKA ... 5
2.1 Kajian Penelitian Terdahulu ... 5
2.2 Proses Bisnis ... 8
2.3 User Interface (UI) / Antarmuka Pengguna ... 10
2.3.1 User Research ... 11
2.3.2 Design and Prototyping ... 11
2.3.3 Evaluation ... 12
2.4 User Experience (UX) / Pengalaman Pengguna ... 12
2.4.1 Melakukan wawancara terhadap pengguna ... 12
2.4.2 Membuat User Persona ... 12
2.4.3 Membuat User Story ... 12
2.4.4 Membuat Desain Wireframes, Mockups dan Prototypes ... 12
2.4.5 Evaluasi ... 12
2.5 Usability Testing ... 12
viii
2.5.1 Learnability ... 13
2.5.2 Efficiency ... 13
2.5.3 Memorability ... 13
2.5.4 Errors ... 13
2.5.5 Satisfaction ... 13
2.6 Metode Design Thinking ... 13
BAB III ANALISIS DAN PERANCANGAN ... 15
3.1 Tahap Penelitian ... 15
3.2 Tahap Empati ... 16
3.2.1 Pertanyaan Wawancara ... 16
3.2.2 Hasil Wawancara ... 18
3.3 Tahap Penetapan ... 22
3.3.1 Empathy Mapping ... 22
BAB IV PEMBAHASAN ... 24
4.1 Tahap Menentukan Ide ... 24
4.1.1 User Flow Aplikasi I-Life ... 24
4.1.2 Wireframe Aplikasi I-Life ... 31
4.1.3 User Flow Aplikasi Mitra I-Life ... 32
4.1.4 Wireframe Aplikasi Mitra I-Life ... 39
4.2 Tahap Pembuatan Prototyping ... 40
4.2.1 Prototyping Aplikasi I-Life ... 40
4.2.2 Prototyping Aplikasi Mitra I-Life ... 70
4.3 Tahap Uji Coba ... 90
4.3.1 Uji Coba Antarmuka Aplikasi I-Life ... 90
4.3.2 Analisa Hasil Pengujian Aplikasi I-Life ... 92
4.3.3 Uji Coba Antarmuka Aplikasi Mitra I-Life ... 94
4.3.4 Analisa Hasil Pengujian Aplikasi Mitra I-Life ... 96
BAB V KESIMPULAN DAN SARAN ... 99
5.1 Kesimpulan ... 99
5.2 Saran ... 100
DAFTAR PUSTAKA ... 101
Lampiran ... 103
ix
DAFTAR TABEL
Tabel 2. 1 Penelitian Terdahulu ... 6
Tabel 3. 1 Kode Pertanyaan Wawancara Responden Pengguna ... 16
Tabel 3. 2 Kode Pertanyaan Wawancara Responden Mitra ... 16
Tabel 3. 3 Penjabaran Pertanyaan Wawancara Responden Pengguna ... 17
Tabel 3. 4 Penjabaran Pertanyaan Wawancara Responden Mitra... 18
Tabel 3. 5 Rangkuman Hasil Wawancara Responden Pengguna ... 19
Tabel 3. 6 Rangkuman Hasil Wawancara Responden Mitra ... 20
Tabel 3. 7 Kerangka Empathy Map Aplikasi I-Life ... 22
Tabel 3. 8 Kerangka Empathy Map Aplikasi Mitra I-Life... 23
Tabel 4. 1 Tugas dan Tujuan Pengujian Antarmuka Aplikasi I-Life ... 90
Tabel 4. 2 Angket Kepuasan Aplikasi I-Life ... 92
Tabel 4. 3 Profil Responden Pengujian Antarmuka Aplikasi I-Life ... 92
Tabel 4. 4 Data Binary Task Success Pada Pengujian Antarmuka Aplikasi I-Life .... 92
Tabel 4. 5 Hasil Kepuasan Responden terhadap Aplikasi I-Life ... 93
Tabel 4. 6 Saran terhadap Aplikasi I-Life ... 93
Tabel 4. 7 Tugas dan Tujuan Pengujian ANtarmuka Aplikasi Mitra I-Life ... 94
Tabel 4. 8 Angket Kepuasan Aplikasi Mitra I-Life ... 96
Tabel 4. 9 Profil Responden Pengujian Antarmuka Aplikasi Mitra I-Life ... 96
Tabel 4. 10 Data Binary Task Success pada Pengujian Antarmuka Aplikasi Mitra I- Life ... 96
Tabel 4. 11 Hasil Kepuasan Responden terhadap Aplikasi Mitra I-Life ... 97
Tabel 4. 12 Saran terhadap Aplikasi Mitra I-Life ... 97
x
DAFTAR GAMBAR
Gambar 2. 1 Proses bisnis aplikasi I-Life dan Mitra I-Life ... 9
Gambar 2. 2 Ruang design thinking ... 14
Gambar 3. 1 Tahap penelitian ... 15
Gambar 4. 1 User Flow Login Aplikasi I-Life ... 25
Gambar 4. 2 User Flow Pemesanan Pada Aplikasi I-Life ... 26
Gambar 4. 3 User Flow Pesanan Khusus Pada Aplikasi I-Life ... 27
Gambar 4. 4 User Flow Melihat Daftar Pesanan Pada Aplikasi I-Life ... 28
Gambar 4. 5 User Flow Pembatalan Pesanan Pada Aplikasi I-Life ... 28
Gambar 4. 6 User Flow Memberi Ulasan Mitra Pada Aplikasi I-Life ... 29
Gambar 4. 7 User Flow Update Akun Aplikasi I-Life ... 30
Gambar 4. 8 User Flow Logout Aplikasi I-Life ... 30
Gambar 4. 9 Wireframe Aplikasi I-Life ... 31
Gambar 4. 10 User Flow Login Aplikasi MItra I-Life... 32
Gambar 4. 11 User Flow Pesanan Khusus Pada Aplikasi Mitra I-Life ... 33
Gambar 4. 12 User Flow Pesanan Aplikasi Mitra I-Life ... 34
Gambar 4. 13 User Flow Buat Toko Baru Pada Aplikasi Mitra I-Life ... 35
Gambar 4. 14 User Flow Kelola Informasi Toko Pada Aplikasi Mitra I-Life ... 35
Gambar 4. 15 User Flow Kelola Lokasi Toko Pada Aplikasi Mitra I-Life... 36
Gambar 4. 16 User Flow Kelola Kemampuan Pada Aplikasi Mitra I-Life ... 36
Gambar 4. 17 User Flow Melihat Ulasan Pelanggan Pada Aplikasi Mitra I-Life ... 37
Gambar 4. 18 User Flow Kelola Informasi Akun Aplikasi Mitra I-Life ... 37
Gambar 4. 19 User Flow Ubah Kata Sandi Aplikasi Mitra I-Life ... 38
Gambar 4. 20 User Flow Logout Aplikasi Mitra I-Life ... 38
Gambar 4. 21 Wireframe Aplikasi MItra I-Life... 39
Gambar 4. 22 Tampilan halaman Splash Screen ... 40
Gambar 4. 23 Tampilan halaman On Boarding ... 41
Gambar 4. 24 Tampilan halaman Login ... 42
Gambar 4. 25 Tampilan halaman Beranda ... 43
xi
Gambar 4. 26 Tampilan halaman Maps ... 44
Gambar 4. 27 Tampilan halaman Pesan ... 45
Gambar 4. 28 Tampilan halaman Notifikasi ... 46
Gambar 4. 29 Tampilan halaman Daftar Mitra ... 47
Gambar 4. 30 Tampilan halaman Detail Mitra ... 48
Gambar 4. 31 Tampilan halaman Pesan Jasa ... 49
Gambar 4. 32 Tampilan halaman Tawar Jasa ... 50
Gambar 4. 33 Tampilan halaman Tawar Jasa Diterima ... 51
Gambar 4. 34 Tampilan halaman Tawar Jasa Ditolak ... 52
Gambar 4. 35 Tampilan halaman Pesanan Khusus ... 53
Gambar 4. 36 Tampilan halaman Cari Mitra ... 54
Gambar 4. 37 Tampilan halaman Daftar Pesanan ... 55
Gambar 4. 38 Tampilan halaman Detail Pesanan ... 56
Gambar 4. 39 Tampilan halaman Alasan Pembatalan ... 57
Gambar 4. 40 Tampilan halaman Detail Pesanan Diproses ... 58
Gambar 4. 41 Tampilan halaman Detail Pesanan Selesai ... 59
Gambar 4. 42 Tampilan halaman Detail Pesanan Dibatalkan... 60
Gambar 4. 43 Tampilan halaman Detail Pesanan ... 61
Gambar 4. 44 Tampilan halaman Pilih Mitra... 62
Gambar 4. 45 Tampilan halaman Detail Pesanan Diproses ... 63
Gambar 4. 46 Tampilan halaman Detail Pesanan Selesai ... 64
Gambar 4. 47 Tampilan halaman Detail Pesanan Dibatalkan... 65
Gambar 4. 48 Tampilan halaman Nilai dan Ulasan ... 66
Gambar 4. 49 Tampilan halaman Akun ... 67
Gambar 4. 50 Tampilan halaman Edit Akun ... 68
Gambar 4. 51 Tampilan halaman Penilaian Saya ... 69
Gambar 4. 52 Tampilan halaman Splash Screen ... 70
Gambar 4. 53 Tampilan halaman Login ... 71
Gambar 4. 54 Tampilan halaman Daftar ... 72
xii
Gambar 4. 55 Tampilan halaman Beranda / Pesanan Khusus ... 73
Gambar 4. 56 Tampilan halaman Detail Pesanan Khusus ... 74
Gambar 4. 57 Tampilan halaman Chat ... 75
Gambar 4. 58 Tampilan halaman Notifikasi ... 76
Gambar 4. 59 Tampilan halaman Pesanan ... 77
Gambar 4. 60 Tampilan halaman Detail Pesanan ... 78
Gambar 4. 61 Tampilan halaman Transaksi ... 79
Gambar 4. 62 Tampilan halaman Detail Transaksi Diproses ... 80
Gambar 4. 63 Tampilan halaman Detail Transaksi Selesai ... 81
Gambar 4. 64 Tampilan halaman Detail Transaksi Dibatalkan ... 82
Gambar 4. 65 Tampilan halaman Akun ... 83
Gambar 4. 66 Tampilan halaman Buat Toko ... 84
Gambar 4. 67 Tampilan halaman Informasi Toko ... 85
Gambar 4. 68 Tampilan halaman Lokasi Toko ... 86
Gambar 4. 69 Tampilan halaman Kemampuan... 87
Gambar 4. 70 Tampilan halaman Ulasan Pelanggan ... 88
Gambar 4. 71 Tampilan halaman Pengaturan ... 89
xiii ABSTRAK
Perancangan desain aplikasi pada perangkat lunak sering kali tidak melalui tahap observasi atau survei pada calon pengguna. Beberapa aplikasi yang sudah ada terkesan memaksakan pengguna untuk menggunakan fitur yang terkadang tidak diperlukan oleh pengguna atau bahkan menyulitkan pengguna dalam proses penggunaan aplikasi tersebut.
Pembuatan perancangan desain antarmuka dan pengalaman pengguna yang tidak sesuai dapat menimbulkan permasalahan dalam penggunaan aplikasi. Proses iterative untuk mengumpulkan ide dalam perancangan aplikasi sangat diperlukan, salah satunya dengan metode design thinking. Metode design thinking diaplikasikan penulis dalam perancangan desain antarmuka aplikasi dan pengalaman penguna (UI/UX) pada aplikasi I-Life dan Mitra I-Life di PT. Ibunda Digital Indonesia.
Pengumpulan data pengalaman pengguna dilakukan melalui wawancara secara langsung.
Kemudian, hasil wawancara disimpulkan dan ditentukan ide atau solusi desain untuk aplikasi I-Life dan Mitra I-Life. Hasil penelitian ini berbentuk desain aplikasi I-Life dan Mitra I-Life yang telah di uji coba yang dilakukan secara tatap muka. Didapatkan hasil bahwa task success rate aplikasi I-Life sebesar 91,7% dan aplikasi Mitra I-Life sebesar 96,3%.
Kata kunci: desain antarmuka aplikasi, pengalaman pengguna, Design Thinking method.
xiv ABSTRACT
Creating application design in software, usually doesn’t through the observation step or survey step to the potential users. Some existing applications seem to force users to use features that are sometimes not needed by the user or even make it difficult for users in the process of using the application.
The creation of user interface and user experience design that is not appropriate can cause problems in the use of applications. The iterative process to gather ideas in application design is needed, one of which is by design thinking methods. The design thinking method is applied by the author in the design of application interface design and user experience (UI / UX) in I-Life applications and I-Life Partners at PT. Ibunda Digital Indonesia.
The collection of user experience data is done through in depth interviews. Then, the results of the interview are concluded and determined as ideas or design solutions for I-Life and I-Life Partners applications. The results of this study take the form of I-Life application design and I-Life Partners that have been tested face-to-face. It was found that the task success rate of I-Life applications was 91.7%
and I-Life Partner applications by 96.3%.
Keywords: user interface design, user experience, Design Thinking method.
