PERANCANGAN TAMPILAN UI/UX PREMIUM ACCOUNT DI PT. ATOURIN
TEKNOLOGI NUSANTARA
Laporan Magang
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds)
Nama : Shania Jiehan Geraldine NIM : 00000025554
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG
2021
PENGESAHAN LAPORAN KERJA MAGANG PERANCANGAN TAMPILAN UI/UX PREMIUM ACCOUNT DI PT. ATOURIN
TEKNOLOGI NUSANTARA
Oleh
Nama : Shania Jiehan Geraldine NIM : 00000025554
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Tangerang, 5 Mei 2021
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG
Dengan ini saya:
Nama : Shania Jiehan Geraldine
NIM : 00000025554
Program Studi : Desain Komunikasi Visual Menyatakan bahwa saya telah melakukan kerja magang:
Nama Perusahaan : PT. Atourin Teknologi Nusantara
Divisi : UI/UX Design
Alamat : Jl. Bangka Raya No.42A Pela Mampang Periode Magang : 29 Januari – 30 April 2021
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, 16 April 2021
Shania Jiehan G
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa karena atas rahmatnya membuat penulis dapat menyelesaikan pelaksanaan praktik magang dan laporan dengan judul “Perancangan Tampilan UI/UX Premium Account di PT.
Atourin Teknologi Nusantara” sebagai hasil dari tugas yang sudah penulis kerjakan dengan baik dan tepat waktu.
Laporan ini ditulis sebagaimana bertujuan untuk dapat memberikan gambaran mengenai peran seorang desainer dalam bidang UI/UX di dunia pekerjaan. Tidak hanya itu, penulis mendapatkan kesempatan dalam menerapkan ilmu yang sudah didapat dalam bangku perkuliahan yang dapat berguna bagi perusahaan dan dapat dikembangkan lagi ke depannya.
Dari kesempatan ini, pengalaman praktik kerja magang yang dilalui oleh penulis menjadi sebuah awal baru dalam berproses menjadi seorang desainer yang berkiprah di dalam dunia kerja, khususnya di perusahaan.
Selama proses pengerjaan laporan, penulis menerima banyak sekali bantuan dan dukungan dari berbagai pihak. Oleh karena itu, penulis ingin mengucapkan terima kasih kepada:
1. Mohammad Rizaldi, S.T., M.Ds., selaku Ketua Program Studi Desain Komunikasi Visual di Universitas Multimedia Nusantara
2. Zamzami Almakki, S.Pd., M.Ds., selaku dosen pembimbing magang yang telah membimbing penulis selama menyelesaikan laporan magang.
3. PT. Atourin Teknologi Nusantara yang sudah menerima dan mengizinkan penulis menjadi bagian anggota magang, terutama di dalam divisi UI/UX.
4. Benarivo Triadi Putra selaku pembimbing lapangan yang telah membantu, membimbing, dan mengarahkan penulis selama praktik magang.
5. Kepada semua anggota tim magang UI/UX designer yang telah menemani dan mengajarkan banyak hal baru.
6. Kepada semua anggota magang di PT. Atourin Teknologi Nusanatara yang sudah membantu dalam memberikan penilaian terhadap hasil rancangan.
7. Semua anggota keluarga dan teman dekat yang sudah memberikan dukungan, baik secara mental maupun fisik.
Tangerang, 16 April 2021
Shania Jiehan G
ABSTRAKSI
Semakin berkembangnya zaman, penggunaan aplikasi maupun website sudah menjadi bagian hidup dari keseharian setiap orang di dunia. Hal yang paling berkaitan dengan perancangan website dan aplikasi adalah UI/UX. Sebagai syarat kelulusan mata kuliah internship adalah dengan melakukan praktik kerja magang.
Praktik magang dilakukan sebagai proses pembelajaran di industryidengan menerapkan ilmu yang telah didapatkan di kampus. Penulis melakukan kerja magang di PT. Atourin Teknologi Nusantara yang merupakan perusahaan yang bergerak di bidang travel dan pariwisata. Dengan adanya pandemi Covid-19 ini, membuat penulis melakukan pengerjaan projek magang secara WFH (Work From Home). Penulis menjalankan program magang ini sebagai UI/UX designer dengan mengerjakan 2 proyek tampilan UI/UX, yaitu projek premium account dan proyek podcast dan audio guide. Dalam pengerjaan projek ini, penulis semakin belajar untuk saling bekerja sama dalam tim untuk menyelesaikan proyek dengan baik.
Banyak hal lain juga yang didapat oleh penulis saat bekerja di Atourin ini. Penulis menjadi mengerti cara menggunakan Figma yang merupakan software UI/UX yang sebelumnya belum pernah digunakan oleh penulis. Penulis juga mempelajari cara untuk lebih berpikir kritis dan kreatif untuk mengerjakan proyek yang diberikan.
Penulis juga mendapatkan banyak wawasan dari rekan-rekan kerja mengenai UI/UX yang dapat menjadi ilmu tambahan untuk penulis di masa yang akan datang.
Kata kunci : UI/UX, Praktik Magang, PT Atourin Teknologi Nusantara
DAFTAR ISI
PENGESAHAN LAPORAN KERJA MAGANG... ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... iii
KATA PENGANTAR ... iv
ABSTRAKSI ... vi
DAFTAR ISI ... vii
DAFTAR GAMBAR ... ix
DAFTAR TABEL ...x
DAFTAR LAMPIRAN ... xi
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 GAMBARAN UMUM PERUSAHAAN ...5
2.1.Deskripsi Perusahaan ... 5
2.1.1. Visi dan Misi Perusahaan ... 5
2.1.2. Layanan Perusahaan ... 6
2.2.Struktur Organisasi Perusahaan ... 8
BAB III PELAKSANAAN KERJA MAGANG ...10
3.1.Kedudukan dan Koordinasi ... 10
3.2.Tugas yang Dilakukan ... 11
3.3.Uraian Pelaksanaan Kerja Magang ... 13
3.3.1.Proses Pelaksanaan ... 13
3.3.2.Kendala yang Ditemukan ... 40
3.3.3.Solusi Atas Kendala yang Ditemukan ... 40
BAB IV PENUTUP ...42
4.1.Kesimpulan...42
4.2.Saran………. ... 42
DAFTAR PUSTAKA ... xii
LAMPIRAN A: KM 02 SURAT PENGANTAR MAGANG ... xiii
LAMPIRAN B: SURAT PENERIMAAN MAGANG ... xiv
LAMPIRAN C : KM 03 KARTU KERJA MAGANG ...xv
LAMPIRAN D: KM 04 LEMBAR KEHADIRAN MAGANG ... xvi
LAMPIRAN E: KM 05 LAPORAN REALISASI KERJA MAGANG ... xix
LAMPIRAN F: KM 06 PENILAIAN KERJA MAGANG ... xxi
LAMPIRAN G: KM 07 LEMBAR VERIFIKASI LAPORAN MAGANG xxii LAMPIRAN H: AKTIVITAS SAAT PRAKTIK MAGANG ... xxiii
LAMPIRAN I: SURAT KETERANGAN SELESAI MAGANG ... xxiv
LAMPIRAN J: SURAT PEMBEKALAN MAGANG ...xxv
LAMPIRAN K: BIMBINGAN MAGANG ... xxvi
LAMPIRAN L: SIDANG MAGANG ... xxvii
DAFTAR GAMBAR
Gambar 2.1. Logo Perusahaan...5
Gambar 2.2. Bagan Struktur Perusahaan...8
Gambar 3.1. Struktur Kedudukan Penulis Dalam Divisi UI/UX...10
Gambar 3.2. Bagan Alur Koordinasi...11
Gambar 3.3. Bagan Proses Pelaksanaan Proyek Dalam Divisi UI/UX...13
Gambar 3.4. User persona dari platform Atourin...14
Gambar 3.5. Table of interview premium account...16
Gambar 3.6. Emphaty map premium account...17
Gambar 3.7. Lighting Decision Jam premium account...18
Gambar 3.8. User journey premium account...18
Gambar 3.9. User flow premium account...19
Gambar 3.10. Tampilan premium account pada web di Figma...21
Gambar 3.11. Tampilan halaman free trial pada web di Figma...22
Gambar 3.12. Tampilan berlangganan premium pada web di Figma...23
Gambar 3.13. Tampilan akun langganan pada PWA di Figma...24
Gambar 3.14. Tampilan pop-up pada premium account di Figma...25
Gambar 3.15. User testing fitur premium account...26
Gambar 3.16. Proses wawancara dengan salah satu narasumber...26
Gambar 3.17. Table of Interview Podcast & Audio Guide...27
Gambar 3.18. Empathy Map Podcast & Audio Guide………...…… 28
Gambar 3.19. Lighting Decision Jam Podcast & Audio Guide ……….………29
Gambar 3.20. User Journey Podcast & Audio Guide …………...….………..30
Gambar 3.21. Site map Podcast & Audio Guide…...31
Gambar 3.22. User flow Podcast & Audio Guide ………32
Gambar 3.23. Tampilan audio guide pada akun gratis di Figma...33
Gambar 3.24. Tampilan audio guide pada akun premium di Figma...34
Gambar 3.25. Tampilan audio player di Figma...35
Gambar 3.26. Tampilan fitur map di Figma...36
Gambar 3.27. Tampilan playlist di Figma...37
Gambar 3.28. Tampilan download di Figma...38
Gambar 3.29. Tampilan pop up pada fitur audio guide di Figma...39
Gambar 3.30. Tampilan Maze dari fitur audio guide…………..…..…...40
DAFTAR TABEL
Tabel 3.1. Detail Pekerjaan Yang Dilakukan Selama Magang……….12
DAFTAR LAMPIRAN
LAMPIRAN A: KM 02 SURAT PENGANTAR MAGANG ... xiii
LAMPIRAN B: SURAT PENERIMAAN MAGANG ... xiv
LAMPIRAN C : KM 03 KARTU KERJA MAGANG ... xv
LAMPIRAN D: KM 04 LEMBAR KEHADIRAN MAGANG ... xvi
LAMPIRAN E: KM 05 LAPORAN REALISASI KERJA MAGANG ... xix
LAMPIRAN F: KM 06 PENILAIAN KERJA MAGANG ... xxi
LAMPIRAN G: KM 07 LEMBAR VERIFIKASI LAPORAN MAGANG ... xxii
LAMPIRAN H: AKTIVITAS SAAT PRAKTIK MAGANG ... xxiii
LAMPIRAN I: SURAT KETERANGAN SELESAI MAGANG .. xxiv
LAMPIRAN J: SURAT PEMBEKALAN MAGANG ... xxv
