Team project 2017 Dony Pratidana S. Hum Bima Agus Setyawan S. IIP

         

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah,

memperbaiki, dan membuat ciptaan turunan bukan untuk

kepentingan komersial, selama anda mencantumkan nama

penulis dan melisensikan ciptaan turunan dengan syarat

yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work

non-commercially, as long as you credit the origin creator

and license it on your new creations under the identical

terms.

PERANCANGAN UI/UX DESAIN APLIKASI

TABRESTO, TABWAITRESS DAN MOBILE

CONSIGNMENT PADA PT TRIMAGNUS PRIMA

DHARMA SEBAGAI UI/UX DESIGNER

LAPORAN KERJA MAGANG

Fadhal Shulhan 00000011514

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNIK DAN INFORMATIKA

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2019

PERANCANGAN UI/UX DESAIN APLIKASI TABRESTO,

TABWAITRESS DAN MOBILE CONSIGNMENT PADA PT

TRIMAGNUS PRIMA DHARMA SEBAGAI UI/UX DESIGNER

ABSTRAK

Oleh: Fadhal Shulhan

Trimagnus adalah perusahaan yang bergerak pada bidang konsultan IT dan

outsourcing pada bidang teknologi. Trimagnus memiliki produk yaitu TabResto,

TabWaitress dan Mobile Consignment. Aplikasi TabResto memiliki tampilan desain antarmuka yang perlu dilakukan pengembangan untuk diperbarui dan diperbaiki sedangkan aplikasi TabWaitress dan Mobile Consignment perlu dilakukan perancangan desain antarmuka yang baru. Oleh karena itu, perihal tersebut dijadikan sebagai landasan utama dilaksanakannya magang sebagai UI/UX

Designer.

Tanggung jawab utama yang diperoleh sebagai UI/UX Designer adalah melakukan analisis masalah dan tujuan pada kebutuhan perusahaan dan bisnis, merancang user journey map yang terdiri dari alur tugas pengguna (user task flow), tujuan pengguna yang harus dicapai (user goals) dan titik permasalahan pada user

(user pain points), mengembang dan merancang desain antarmuka (user interface)

dan melakukan usability testing (user research) dari desain antaramuka (user

interface) melalui prototype yang telah dibuat pada user yang telah ditentukan pada

aplikasi TabResto sedangkan usability testing pada aplikasi TabWaitress dan Mobile Consignment tidak dilaksanakan dikarenakan masih dalam tahapan pengembangan.

Kata Kunci: magang, usability testing, user journey map, user interface,

iv

UI / UX DEVELOPMENT AND DESIGN TABRESTO,

TABWAITRESS, MOBILE CONSIGNMENT APPLICATION DESIGN

IN PT TRIMAGNUS PRIMA DHARMA AS UI / UX DESIGNER

ABSTRACT

By: Fadhal Shulhan

Trimagnus is a company engaged in the field of IT consulting and outsourcing in the field of technology. Trimagnus has products namely TabResto, TabWaitress and Mobile Consignment. The TabResto application has an interface design that needs to be developed to be updated and improved while the TabWaitress and Mobile Consignment applications need to be designed to design a new interface. Therefore, the subject matter was used as the main foundation for the implementation of the internship as a UI / UX Designer.

The main responsibility obtained as a UI / UX Designer is to analyze problems and objectives in the needs of companies and businesses, design user journey maps that consist of user task flow, user goals to be achieved (user goals) and problem points in the user (user pain points), expand and design the interface design (user interface) and do usability testing (user research) from the interface design (user interface) through the prototype that has been created on the user specified in the TabResto application and while usability testing on the TabWaitress and Mobile Consignment applications is not implemented because it is still in the development stage.

Keywords: internship, usability testing, user journey map, user interface, user experience

KATA PENGANTAR

Puji syukur kepada Allah SWT yang telah memberikan kekuatan dan rahmat-Nya sehingga penulis dapat menyelesaikan praktik kerja magang dengan baik dan laporan kerja magang yang berjudul “Perancangan UI/UX Design Aplikasi TabResto, TabWaitress dan Mobile Consignment pada PT Trimagnus Prima Dharma Sebagi UI/UX Designer” dapat selesai tepat pada waktunya.

Penulis tidak akan dapat menyelesaikan laporan ini tanpa bantuan dari berbagai pihak yang telah menyumbangkan pikiran, masukan, waktu dan tenaga. Oleh karena itu, penulis mengucapkan terima kasih kepada:

1. Orang tua dan keluarga penulis yang telah mendukung secara moral, mental dan doa serta motivasi untuk penulis dalam menyelesaikan laporan magang ini.

2. Ibu Ririn Ikana Desanti, S. Kom., M. Kom. selaku Kepala Program Studi Sistem Informasi Universitas Multimedia Nusantara.

3. Bapak Ir. Raymond Sunardi Oetama, M.C.I.S. yang telah memberikan bimbingan, informasi dan saran-saran kepada penulis selama penyusunan laporan kerja magang.

4. Seluruh dosen Program Studi Sistem Informasi yang tidak dapat disebutkan satu persatu tanpa menghilangkan rasa hormat yang telah memberikan ilmu kepada penulis selama perkuliahan.

5. Ibu Ika Purnamasari selaku pembimbing lapangan yang telah membantu penulis selama melaksanakan kerja magang.

DAFTAR ISI PERNYATAAN ... i HALAMAN PENGESAHAN ... ii ABSTRAK ... iii ABSTRACT ... iv KATA PENGANTAR ... v

DAFTAR ISI ... vii

DAFTAR GAMBAR ... ix

DAFTAR TABEL ... xiv

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Maksud dan Tujuan Pelaksanaan Kerja Magang ... 2

1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3

1.3.1.Waktu Pelaksanaan Kerja Magang ... 3

1.3.2.Prosedur Pelaksanaan Kerja Magang ... 6

BAB II GAMBARAN UMUM PERUSAHAAN ... 8

2.1. Tentang PT Trigmanus Prima Dharma ... 8

2.2. Visi Misi Perusahaan ... 9

2.3. Struktur Organisasi Perusahaan ... 9

BAB III PELAKSANAAN KERJA MAGANG... 10

3.1. Kedudukan dan Koordinasi ... 10

3.2. Tugas yang Dilakukan ... 11

3.2.1.Minggu ke – 1: Meeting & Review Aplikasi TabResto, TabWaitress, Mobile Consignment ... 11

3.2.2.Pengembangan Desain Ulang User Interface and User Experience pada Aplikasi TabResto ... 13

1. Minggu ke – 2: analisis latar belakang TabResto ... 13

2. Minggu ke – 2: analisis business requirement dan tujuan TabResto 13 3. Minggu ke – 2: analisis user journey map TabResto ... 14

viii

6. Minggu ke – 4 dan 5: pembuatan desain antarmuka TabResto ... 33

7. Minggu ke – 5: pelaksanaan usability testing TabResto ... 86

3.2.3.Perancangan User Interface Baru pada Aplikasi TabWaitress ... 104

1. Minggu ke – 6: analisis latar belakang TabWaitress ... 104

2. Minggu ke – 6: analisis business requirement dan tujuan TabWaitress ... 104

3. Minggu ke – 6: analisis user journey map TabWaitress ... 105

4. Minggu ke – 6: pembuatan alur tugas pengguna TabWaitress ... 106

5. Minggu ke – 7 dan 8: pembuatan desain antarmuka TabWaitress 110 3.2.4.Perancangan User Interface Baru pada Aplikasi Mobile Consignment ... ... 116

1. Minggu ke – 9: analisis latar belakang Mobile Consignment ... 116

2. Minggu ke – 9: analisis business requirement dan tujuan Mobile Consignment ... 116

3. Minggu ke – 9: analisis user journey map Mobile Consignment .. 117

4. Minggu ke – 9: pembuatan alur tugas pengguna Mobile Consignment ... 118

5. Minggu ke – 10 dan 11: pembuatan desain antarmuka Mobile Consignment ... 123

3.3. Kendala yang Dihadapi ... 130

3.4. Solusi atas Kendala ... 131

BAB IV KESIMPULAN DAN SARAN ... 132

4.1. Kesimpulan ... 132

4.2. Saran ... 133

4.2.1.Saran untuk Universitas ... 133

4.2.2.Saran untuk Perusahaan ... 134

4.2.3.Saran untuk Mahasiswa ... 135

DAFTAR PUSTAKA ... 136

DAFTAR LAMPIRAN ... 139

DAFTAR GAMBAR

Gambar 2.1. Logo Trimagnus ... 8

Gambar 2.2. Struktur Organisasi PT Trimagnus Prima Dharma ... 9

Gambar 3.1. Alur Pengguna Kasir Melakukan Transaksi ... 16

Gambar 3.2. Alur Pengguna Kasir Memilih Seat ... 17

Gambar 3.3. Alur Pengguna Kasir Memilih Customer ... 18

Gambar 3.4. Alur Pengguna Kasir Memilih Discount ... 19

Gambar 3.5. Alur Pengguna Transaction History ... 20

Gambar 3.6. Alur Pengguna Treasury Recap, Treasury In, Treasury Out ... 21

Gambar 3.7. Alur Pengguna Customer Management ... 22

Gambar 3.8. Alur Pengguna Seat Management ... 23

Gambar 3.9. Alur Pengguna Stock List ... 24

Gambar 3.10. Alur Pengguna Order Purchase ... 25

Gambar 3.11. Alur Pengguna Stock In By Purchase Order ... 26

Gambar 3.12. Alur Pengguna Stock In By Cash ... 27

Gambar 3.13. Alur Pengguna Stock Opname... 28

Gambar 3.14. Alur Pengguna Setting ... 29

Gambar 3.15. Alur Pengguna Update ... 30

Gambar 3.16. Alur Pengguna Change Branch... 31

Gambar 3.17. Alur Pengguna Change Account ... 32

Gambar 3.18. Tampilan Lama Halaman Login TabResto ... 33

Gambar 3.19. Tampilan Baru Halaman Login TabResto ... 33

Gambar 3.20. Tampilan Lama Halaman Beranda TabResto ... 34

Gambar 3.21. Tampilan Baru Halaman Beranda TabResto ... 34

Gambar 3.22. Tampilan Baru Halaman Beranda TabResto Layout Baris ... 35

Gambar 3.23. Tampilan Baru Halaman Beranda TabResto Kategori Minimize ... 36

Gambar 3.24. Tampilan Baru Halaman Discount Jika Persentase ... 37

Gambar 3.25. Tampilan Baru Halaman Discount Jika Rupiah ... 38

Gambar 3.26. Tampilan Baru Halaman Proses Kasir Memilih Customer ... 39 Gambar 3.27. Tampilan Baru Halaman Beranda Setelah Kasir Memilih Customer

x

Gambar 3.28. Tampilan Baru Proses Kasir Memilih Seat ... 40

Gambar 3.29. Tampilan Baru Halaman Filter Seat Available ... 41

Gambar 3.30. Tampilan Baru Halaman Filter Seat Not Available ... 42

Gambar 3.31. Tampilan Baru Halaman Beranda Setelah Kasir Memilih Seat dan Customer ... 43

Gambar 3.32. Tampilan Lama Halaman Pembayaran Via Cash ... 44

Gambar 3.33. Tampilan Baru Halaman Pembayaran Via Cash ... 44

Gambar 3.34. Tampilan Baru Halaman Pembayaran Selesai Via Cash ... 45

Gambar 3.35. Tampilan Baru Halaman Pembayaran Via Kartu ... 46

Gambar 3.36. Tampilan Baru Halaman Pembayaran Selesai Via Kartu ... 47

Gambar 3.37. Tampilan Lama Halaman Transaction History ... 48

Gambar 3.38. Tampilan Baru Halaman Transaction History ... 48

Gambar 3.39. Tampilan Halaman Treasury In ... 49

Gambar 3.40. Tampilan Baru Halaman Treasury In... 49

Gambar 3.41. Tampilan Baru Halaman Add Harga dan Note Treasury In ... 50

Gambar 3.42. Tampilan Baru Halaman Display Table Treasury In ... 51

Gambar 3.43. Tampilan Lama Halaman Treasury Out... 52

Gambar 3.44. Tampilan Baru Halaman Treasury Out ... 52

Gambar 3.45. Tampilan Baru Halaman Add Harga dan Note Treasury Out ... 53

Gambar 3.46. Tampilan Baru Halaman Display Table Treasury Out ... 54

Gambar 3.47. Tampilan Lama Halaman Treasury Recap... 55

Gambar 3.48. Tampilan Baru Halaman Treasury Recap ... 55

Gambar 3.49. Tampilan Lama Halaman Jika Cash In Treasure pada Treasury Recap ... 56

Gambar 3.50. Tampilan Baru Halaman Jika Cash In Treasure pada Treasury Recap ... 56

Gambar 3.51. Tampilan Baru Halaman Display Table Treasury Recap ... 57

Gambar 3.52. Tampilan Lama Halaman View Display Table Treasury Recap Negatif ... 58

Gambar 3.53. Tampilan Baru Halaman View Display Table Treasury Recap Negatif ... 58

Gambar 3.54. Tampilan Lama Halaman Customer Management ... 59

Gambar 3.55. Tampilan Baru Halaman Customer Management ... 60

Gambar 3.56. Tampilan Lama Halaman New Customer ... 61

Gambar 3.57. Tampilan Baru Halaman New Customer ... 61

Gambar 3.58. Tampilan Baru Halaman Edit Customer ... 62

Gambar 3.59. Tampilan Lama Halaman Seat Management ... 63

Gambar 3.60. Tampilan Baru Halaman Seat Management... 63

Gambar 3.61. Tampilan Lama Halaman New Seat ... 64

Gambar 3.62. Tampilan Baru Halaman New Seat ... 64

Gambar 3.63. Tampilan Lama Halaman Tambah Stock List ... 65

Gambar 3.64. Tampilan Baru Halaman Tambah Stock List... 65

Gambar 3.65. Tampilan Lama Halaman Order Purchase ... 66

Gambar 3.66. Tampilan Baru Halaman Order Purchase ... 66

Gambar 3.67. Tampilan Lama Halaman Detail Order Purchase ... 67

Gambar 3.68. Tampilan Baru Halaman Detail Order Purchase ... 67

Gambar 3.69. Tampilan Baru Halaman Receive Stock pada Detail Order Purchase ... 68

Gambar 3.70. Tampilan Lama Halaman Stock In By Purchase Order ... 69

Gambar 3.71. Tampilan Baru Halaman Stock In By Purchase Order ... 69

Gambar 3.72. Tampilan Lama Halaman Filter Baris pada Stock In By Cash ... 70

Gambar 3.73. Tampilan Baru Halaman Filter Baris pada Stock In By Cash ... 70

Gambar 3.74. Tampilan Baru Halaman Filter Kotak pada Stock In By Cash ... 71

Gambar 3.75. Tampilan Lama Halaman Tambah Stock Opname ... 72

Gambar 3.76. Tampilan Baru Halaman Tambah Stock Opname ... 72

Gambar 3.77. Tampilan Lama Halaman Setting Jika Kasir Memilih Tombol "Off" ... 73

Gambar 3.78. Tampilan Baru Halaman Setting Jika Kasir Memilih Tombol "Off" ... 74

Gambar 3.79. Tampilan Baru Halaman Setting Jika Kasir Memilih Tombol "On" ... 75

xii

Gambar 3.81. Tampilan Lama Halaman Memilih Tipe Printer ... 76

Gambar 3.82. Tampilan Baru Halaman Memilih Tipe Printer ... 77

Gambar 3.83. Tampilan Baru Halaman Setelah Memilih Printer ... 78

Gambar 3.84. Tampilan Baru Halaman Setting Setelah Connect to Printer ... 79

Gambar 3.85. Tampilan Baru Halaman Update... 80

Gambar 3.86. Tampilan Baru Halaman New Update ... 81

Gambar 3.87. Tampilan Baru Halaman Memilih Update ... 81

Gambar 3.88. Tampilan Baru Halaman Loading Update ... 82

Gambar 3.89. Tampilan Baru Halaman Update Success ... 83

Gambar 3.90. Tampilan Lama Halaman Change Branch ... 83

Gambar 3.91. Tampilan Baru Halaman Change Branch ... 84

Gambar 3.92. Tampilan Lama Halaman Change Account ... 85

Gambar 3.93. Tampilan Baru Halaman Change Account ... 85

Gambar 3.94. Heat Maps Skenario Aktivitas Masuk Aplikasi ... 90

Gambar 3.95. Heat Maps Skenario Aktivitas Transaksi ... 90

Gambar 3.96. Heat Maps Skenario Aktivitas Memilih Tanggal pada Transaction History ... 91

Gambar 3.97. Heat Maps Skenario Aktivitas Input Treasury In ... 91

Gambar 3.98. Heat Maps Skenario Aktivitas Input Treasury Out ... 92

Gambar 3.99. Heat Maps Skenario Aktivitas Input Treasury Recap ... 92

Gambar 3.100. Heat Maps Skenario Aktivitas Edit Customer ... 93

Gambar 3.101. Heat Maps Skenario Aktivitas Filter Meja ... 93

Gambar 3.102. Heat Maps Skenario Aktivitas Menambahkan Meja ... 94

Gambar 3.103. Heat Maps Skenario Aktivitas Stock Management ... 94

Gambar 3.104. Heat Maps Skenario Aktivitas Pengaturan Printer ... 95

Gambar 3.105. Heat Maps Skenario Aktivitas Update... 95

Gambar 3.106. Heat Maps Skenario Aktivitas Change Branch ... 96

Gambar 3.107. Heat Maps Skenario Aktivitas Change Account ... 96

Gambar 3.108. Alur Pengguna Proses Waitress Login Sampai Dengan Memilih Tipe Orang ... 106

Gambar 3.109. Alur Pengguna Proses Waitress Select Menu ... 107

Gambar 3.110. Alur Pengguna Proses Waitress Order Confirmation ... 108

Gambar 3.111. Alur Pengguna Proses Setting TabWaitress ... 109

Gambar 3.112. Tampilan Halaman Login dan Beranda TabWaitress ... 110

Gambar 3.113. Tampilan Halaman Input Pax dan Name pada Guest TabWaitress ... 111

Gambar 3.114. Tampilan Halaman Input Pax dan Member Name pada Member TabWaitress... 112

Gambar 3.115. Tampilan Halaman Pemilihan Menu TabWaitress ... 113

Gambar 3.116. Tampilan Halaman Order Confirmation TabWaitress... 114

Gambar 3.117. Tampilan Halaman Setting TabWaitress ... 115

Gambar 3.118. Proses Login Mobile Consignment ... 118

Gambar 3.119. Master Article ... 119

Gambar 3.120. Sales Consignment ... 120

Gambar 3.121. Report Sales... 121

Gambar 3.122. Inventory Delivery Order ... 122

Gambar 3.123. Proses Login Mobile Consignment ... 123

Gambar 3.124. Tampilan Halaman Beranda Mobile Consignment ... 124

Gambar 3.125. Tampilan Halaman Master Article ... 125

Gambar 3.126. Tampilan Halaman Sales Consignment ... 126

Gambar 3.127. Tampilan Halaman Add New Transaction Sales Consignment .. 127

Gambar 3.128. Tampilan Halaman Report Sales ... 128

xiv

DAFTAR TABEL

Tabel 1.1 Timeline Pelaksanaan Kerja Magang ... 4

Tabel 3.1. Skenario Pengujian ... 88

Tabel 3.2. Penilaian Pengguna Menggunakan Skala 1 - 5 ... 99

Tabel 3.3. Feedback Pengguna ... 100