PERANCANGAN FITUR GUIDE CHAT DALAM APLIKASI MOBILE DI PT. ATOURIN TEKNOLOGI
NUSANTARA
Laporan Magang
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Marvella Yovita Chandra
NIM : 00000021013
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG
2021
PENGESAHAN LAPORAN KERJA MAGANG
PERANCANGAN FITUR GUIDE CHAT DALAM APLIKASI MOBILE DI PT. ATOURIN TEKNOLOGI
NUSANTARA
Oleh
Nama : Marvella Yovita Chandra
NIM : 00000021013
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Tangerang, 2 Juni 2021 .
Pembimbing
Rani Aryani Widjono, S.Sn., M.Ds.
Penguji
Nadia Mahatmi, M.Ds.
Mengetahui, Ketua Program Studi
Mohammad Rizaldi, S.T., M.Ds.
ii
iii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG
Dengan ini saya:
Nama : Marvella Yovita Chandra NIM : 00000021013
Program Studi : Desain Komunikasi Visual Menyatakan bahwa saya telah melakukan kerja magang:
Nama Perusahaan : PT. Atourin Teknologi Nusantara Divisi : UI/UX Design
Alamat : WorKing Zone, Jl. Bangka Raya No.42A Pela Mampang, Mampang Prapatan, Jakarta Selatan, 12720
Periode Magang : 3 bulan
Pembimbing Lapangan : Benarivo Triadi Putra
Laporan kerja magang ini merupakan hasil karya saya sendiri, dan saya tidak melakukan plagiat. Semua kutipan karya ilmiah orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah saya sebutkan sumber kutipannya serta saya cantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti melakukan kecurangan/penyimpangan baik dalam pelaksanaan kerja magang maupun penulisan laporan kerja magang, maka saya bersedia menerima sanksi dinyatakan tidak lulus untuk mata kuliah magang yang telah saya tempuh.
Tangerang, 21 Mei 2021
Marvella Yovita Chandra
iv
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa karena dengan rahmat dan karunia-Nya yang sangat berlimpah sehingga penulis dapat menyelesaikan praktik kerja magang beserta laporan magang yang berjudul “Perancangan Fitur Guide Chat dalam Aplikasi Mobile di PT. Atourin Teknologi Nusantara” dengan baik dan tepat waktu sehingga penulis dapat memenuhi syarat kelulusan untuk memperoleh gelar sarjana desain di Universitas Multimedia Nusantara.
Tujuan dilakukannya praktik kerja magang ini yakni untuk mengaplikasikan ilmu dan kemampuan yang telah didapatkan selama menjalani perkuliahan di Universitas Multimedia Nusantara dan mengaplikasikan pembelajaran UI/UX ini di dunia kerja secara nyata serta memberikan pengalaman baru bagi penulis dalam mempelajari alur kerja perancangan UI/UX dan pentingnya memahami kebutuhan pengguna sebelum mendesain.
Selama proses praktik magang di PT. Atourin Teknologi Nusantara, penulis mendapatkan pengalaman kerja baik di bidang soft skill maupun hard skill serta ilmu baru mengenai dunia UI/UX yang sebelumnya belum pernah didapatkan oleh penulis. Maka dari itu, penulis juga ingin mengucapkan terima kasih kepada berbagai pihak yang membantu penulis selama praktik kerja magang maupun menulis laporan magang ini. Pihak-pihak tersebut sebagai berikut:
1. PT. Atourin Teknologi Nusantara sebagai perusahaan yang menerima dan memberikan kesempatan kepada penulis dalam menjalani praktik kerja magang.
2. Benarivo Triadi Putra selaku supervisor divisi UI/UX design yang membimbing penulis selama pelaksanaan magang berlangsung.
3. Rekan-rekan Intern UI/UX Designer di PT. Atourin Teknologi Nusantara yang telah bekerja bersama penulis.
4. Mohammad Rizaldi, S.T., M.Ds. sebagai Ketua Program Studi Desain Komunikasi Visual di Universitas Multimedia Nusantara.
5. Rani Aryani Widjono, S.Sn., M.Ds. selaku dosen pembimbing magang
v penulis.
6. Keluarga dan teman-teman yang selalu memberi motivasi penulis untuk dapat menyelesaikan praktik kerja magang dan laporan magang ini.
Tangerang, 21 Mei 2021
Marvella Yovita Chandra
vi
ABSTRAKSI
Inovasi teknologi pada masa kini kian berkembang pesat dalam menunjang kehidupan manusia salah satunya pengembangan aplikasi/website digital. Penulis memilih tempat magang di PT. Atourin Teknologi Nusantara atau yang dikenal dengan sebutan Atourin karena penulis tertarik dengan bidang UI/UX Design dan inovasi yang diberikan oleh Atourin dalam meningkatkan mutu pariwisata Indonesia dengan cara mengembangkan website digital. Kemudian pelaksanaan magang ini juga menjadi salah satu syarat penulis untuk lulus dan memperoleh gelar sarjana di Universitas Multimedia Nusantara.
Dalam menjalani praktik magang di PT. Atourin Teknologi Nusantara, penulis mendapatkan banyak ilmu dan pengalaman baru mengenai desain khususnya UI/UX. Selain itu penulis juga belajar cara berkomunikasi dan bekerja sama secara professional antar anggota dan supervisor dalam merancang tampilan UI/UX. Hambatan dan kendala yang dialami penulis dalam magang ini yakni dari segi memahami kebutuhan/ kebiasaan pengguna dengan baik sehingga dapat memberikan pengalaman yang lebih optimal terutama pada saat ingin menambah atau mengembangkan sebuah fitur. Namun seiring dengan berjalannya praktik magang, kendala yang dialami oleh penulis dapat terselesaikan dengan baik dengan banyak bertanya dan belajar dari rekan-rekan lainnya.
Kata kunci: PT. Atourin Teknologi Nusantara, UI/UX, Aplikasi
vii
DAFTAR ISI
PENGESAHAN LAPORAN KERJA MAGANG ... III LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG ... III KATA PENGANTAR ... IV ABSTRAKSI ... VII DAFTAR ISI ... VIII DAFTAR GAMBAR ... IX DAFTAR TABEL ... XI DAFTAR LAMPIRAN ... XII
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Maksud dan Tujuan Kerja Magang ... 2
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 2
BAB II TINJAUAN PUSTAKA ... 4
2.1. Deskripsi Perusahaan ... 4
2.1.1. Sejarah Perusahaan ... 5
2.1.2. Visi & Misi Perusahaan ... 5
2.4. Struktur Organisasi Perusahaan ... 6
BAB III METODOLOGI ... 7
3.1. Kedudukan & Koordinasi ... 7
3.1.1. Kedudukan ... 7
3.2.2. Koordinasi ... 7
3.2. Tugas yang Dilakukan ... 9
3.3. Uraian Pelaksanaan Kerja Magang ... 11
3.3.1. Proses Pelaksanaan...11
viii
3.3.2. Kendala yang Ditemukan...35
3.3.3. Solusi Atas Kendala yang Ditemukan...36
BAB IV PENUTUP ... 37
4.1. Kesimpulan ... 37
4.2. Saran ... 37 DAFTAR PUSTAKA ... XIII
ix
DAFTAR GAMBAR
Gambar 2.1. Logo PT. Atourin Teknologi Nusantara ... 4
Gambar 2.2. Bagan Struktur Organisasi PT. Atourin Teknologi Nusantara ... 6
Gambar 3.1. Bagan Alur Koordinasi Project “Guide Chat” ... 8
Gambar 3.2. Timeline Kerja Divisi UI/UX Designer ... 12
Gambar 3.3. Guideline UI/UX ... 13
Gambar 3.4. Empathy Map Fitur Guide Chat ... 14
Gambar 3.5. LDJ How Might We Fitur Guide Chat ... 15
Gambar 3.6. User Journey Penggunaan Fitur Guide Chat ... 16
Gambar 3.7. Salah Satu Contoh Penggunaan Grid ... 17
Gambar 3.8. Salah Satu Flow Prototype Pilihan Metode Pembayaran Transfer .. 18
Gambar 3.9. Tampilan micro-interaction Pada Saat Pembayaran GoPay ... 18
Gambar 3.10. Flow Prototype Top-Up AtourinPay ... 19
Gambar 3.11. Flow Prototype Pembelian Paket Konsultasi ... 20
Gambar 3.12. Tampilan Rincian Pembayaran Sebelum & Sesudah Revisi ... 21
Gambar 3.13. Mengganti Button Pilihan Metode Pembayaran... 22
Gambar 3.14. Tampilan Muncul Notifikasi Kekurangan Saldo AtourinPay ... 23
Gambar 3.15. Tampilan Transaksi Gagal ... 23
Gambar 3.16. LDJ Challenges Untuk Fitur “Audio Guide & Podcast” ... 25
Gambar 3.17. User Journey Penggunaan Fitur Podcast ... 25
Gambar 3.18. Flow Protoype Halaman Utama Podcast ... 26
Gambar 3.19. Flow Protoype Membuat Playlist Baru ... 27
Gambar 3.20. Flow Protoype Halaman Detail Premium Podcast ... 29
Gambar 3.21. Flow Protoype Akses Draft Transkrip di Profil ... 29
Gambar 3.19. Tampilan Bar Sebelum & Sesudah di Revisi ... 30
Gambar 3.22. Tampilan Player Sebelum & Sesudah di Revisi ... 31
Gambar 3.23. Empathy Map Sistem Gamification ... 32
Gambar 3.24. Pop-Up Cara Bermain ... 33
Gambar 3.25. Flow Prototype Detail FAQ ... 34
Gambar 3.26. Penggunaan Aset Peta ... 34
x
Gambar 3.27. Halaman Lihat Semua Mission ... 35
xi
DAFTAR TABEL
Tabel 3.1. Detail Pekerjaan Yang Dilakukan Selama Magang ... 9
xii
DAFTAR LAMPIRAN
LAMPIRAN A: HASIL KERJA MAGANG LAYOUT “GUIDE CHAT” . XIV LAMPIRAN B: HASIL KERJA MAGANG LAYOUT “PODCAST ... XIX LAMPIRAN C: HASIL KERJA MAGANG LAYOUT GAMIFICATION XIV LAMPIRAN D: SURAT PEMBEKALAN MAGANG ... XIX LAMPIRAN E: SURAT PENGANTAR MAGANG ... XIV LAMPIRAN F: SURAT PENERIMAAN MAGANG ... XIX LAMPIRAN G: KM-03 KARTU KERJA MAGANG ... XXVI LAMPIRAN H: KM-04 KEHADIRAN KERJA MAGANG ... XXVII LAMPIRAN I: KM-05 LAPORAN REALISASI KERJA MAGANG ... XXX LAMPIRAN J: KM-07 VERIFIKASI LAPORAN MAGANG ... XXXII LAMPIRAN K: SURAT SELESAI MAGANG ... XXXIII
