AKTIVITAS KERJA MAGANG DIVISI UI/UX DESAINER DI PT TEKNOLOGI KUPON DIGITAL

(1)

AKTIVITAS KERJA MAGANG DIVISI UI/UX

DESAINER DI PT TEKNOLOGI KUPON DIGITAL

Laporan Kerja Magang

Ditulis sebagai Syarat untuk Memperoleh Gelar Sarjana Desain (S.Ds.)

Nama : Julius Obed Wahyu Jati NIM : 00000014401

Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

(2)

i

HALAMAN PENGESAHAN LAPORAN KERJA MAGANG

AKTIVITAS KERJA MAGANG DIVISI UI/UX

DESAINER DI PT TEKNOLOGI KUPON DIGITAL

Oleh

Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain

Tangerang, 21 April 2021

Pembimbing

Agatha Maisie Tjandra, S. Sn., M. Ds. Frindhinia Medyasepti, S.Sn., M.Sc.

Ketua Program Studi

Mohammad Rizaldi, S.T., M.Ds.

(3)

ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT

DALAM PENYUSUNAN LAPORAN KERJA MAGANG

Dengan ini saya:

Program Studi : Desain Komunikasi Visual

Menyatakan bahwa saya telah melakukan kerja magang:

Nama Perusahaan : PT. TEKNOLOGI KUPON DIGITAL Divisi : UI/UX

Alamat : Jl. Pangeran Jayakarta No. 103,

RT.8/RW7. Mangga Dua Sel., Kecamatan Sawah Besar, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta. 10730.

Periode Magang : Desember 2020 – Maret 2021 Pembimbing Lapangan : Aditya Harya Suryansyah

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.

Jakarta, 21 April 2021

(4)

iii

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa atas rahmat, kasih, dan karunia-Nya sehingga penulis diberi banyak kesempatan dalam merancang dan menyelesaikan laporan kerja magang dengan judul “Aktivitas Kerja Magang Divisi UI/UX Di PT. Teknologi Kupon Digital

Banyak hambatan yang penulis hadapi selama proses kerja magang ini karena terbatasnya gerak penulis dikarenakan adan ya pandemi Covid-19. Namun, berkat bimbingan dan dukungan dari berbagai pihak, penulis dapat menyelesaikan laporan kerja magang dengan baik dan tepat waktu. Oleh karena itu, penulis menyampaikan terima kasih kepada :

1. Mohammad Rizaldi, S.T., M.Ds., selaku Ketua Bidang Studi Visual Brand Design yang sudah meluluskan penulis.

2. Frindhinia Medyasepti, S.Sn., M.Sc.. selaku dosen penguji yang sudah mensidangkan penulis pada sidang magang.

3. Agatha Maisie Tjandra, S. Sn., M. Ds., selaku dosen pembimbing yang sudah membimbing penulis selama melakukan kerja magang dan menyelesaikan laporan kerja magang ini.

4. Nicolas Widi Wahyono, Emiliana Endang Ismijatie dan Johanes Ozem Widjayanto, selaku orangtua dan adik penulis yang selalu memberikan dukungan, motivasi dan semangat kepada penulis sehingga penulis dapat menyelesaikan Tugas Akhir ini.

5. Aditya Suryansyah, selaku pembimbing penulis selama magang di PT Teknologi Kupon Digital

(5)

iv

6. Dezza Rizqi, Bagus Hariyanto, Aluh Shiba, Catharina Nerissa, Selaku tim desain grafis dan tim IT yang sudah bekerjasama dengan penulis selama kerja magang di PT. Teknologi Kupon Digital

Jakarta, 21 April 2021

(6)

v

ABSTRAKSI

Diera yang serba digital membuat perusahaan berbasis teknologi berlomba-lomba menarik minat masyarakat dengan genjar mempromosikan produk atau jasa mereka lewat sosial media ataupun dengan mempromosikan software atau aplikasi cipataan mereka yang dapat mempermudah kehidupan sehari-hari ke semua lini masyarakat. Aplikasi dinilai sangat efektif untuk membantu mengerjakan suatu pekerjaan, mencari barang atau jasa yang dinginkan, serta bisa juga mencari pekerjaan yang ingin lewat aplikasi. PT. Teknologi Kupon Digital (TKD) saat ini sedang menggarap projek baru mereka untuk menciptakan

core-banking bernama Gapura. PT. TKD saat ini memerlukan UI/UX Designer untuk

merancang tampilan dari Gapura ini. Disaat penulis melihat lowongan pekerjaan bagian UI/UX Designer yang dibuat oleh TKD di sosial media, penulis memberanikan diri untuk mengambil pekerjaan UI/UX Designer tersebut. Penulis sangat tertarik untuk belajar lebih banyak soal UI/UX, melatih ketrampilan desain penulis dalam merancang desain UI/UX, dan mempraktekkan teori desain yang sudah penulis pelajari di masa perkuliah ke dalam dunia kerja.

(7)

vi

ABSTRACT

Digital diera makes technology-based companies compete to attract the public's interest by actively promoting their products or services through social media or by promoting their creation software or applications that can simplify everyday life to all lines of society. Applications are considered very effective for helping do a job, looking for goods or services that you want, and you can also find jobs you want through the application. PT. Digital Coupon Technology (TKD) is currently working on their new project to create core banking called Gapura. PT. TKD currently requires a UI / UX Designer to design the appearance of this Gapura. When I saw job vacancies in the UI / UX Designer section made by TKD on social media, I ventured to take the UI / UX Designer job. The author is very interested in learning more UI / UX questions, training the author's design skills in designing UI / UX designs, and putting the design theory that the author has learned in college into the world of work.

(8)

vii

DAFTAR ISI

HALAMAN PENGESAHAN LAPORAN KERJA MAGANG ………... i

HALAMAN PERSETUJUAN LAPORAN KERJA MAGANG…………... ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG ... iii

KATA PENGANTAR ... iv

ABSTRAKSI ... V ABSTRACT...VI DAFTAR ISI ... VII DAFTAR GAMBAR ...IX DAFTAR TABEL ... XII DAFTAR LAMPIRAN ... XIII BAB I PENDAHULUAN ... 14

1.1. Latar Belakang ... 14

1.2. Maksud dan Tujuan Kerja Magang ... 12

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

1.3.1. Waktu Kerja Magang ………... 13

1.3.2. Prosedur Kerja Magang ………... 14

BAB II GAMBARAN UMUM PERUSAHAAN ... 16

2.1. Profile Perusahaan PT. Teknologi Kupon Digital ... 16

2.2. Struktur Organisasi Perusahaan ... 18

BAB III PELAKSANAAN KERJA MAGANG ... 23

3.1. Kedudukan dan Koordinasi ... 19

3.1.1. Kedudukan ………19

(9)

viii

3.2. Tugas Yang Dikerjakan ... 21

3.3. Uraian Pelaksanaan Kerja Magang ... 24

3.3.1. Perancangan UI/UX Aplikasi Gapura Mobile ………..24

3.3.2. Perancangan UI/UX Webapps Gapura ………..42

3.3.3. Perancangan UI/UX Fitru Aplikasi Kupon Makan..………..56

BAB IV KESIMPILAN DAN SARAN ... 71

4.1. Kesimpulan ... 71

4.2. Saran ... 62

4.2.1. Saran untuk Universitas……….62

4.2.1. Saran untuk Perusahaan……….62

4.2.1. Saran untuk Mahasiswa……….62

DAFTAR PUSTAKA ... xiv

(10)

ix

DAFTAR GAMBAR

Gambar 2.1. Logo TKD ... 18

Gambar 2.2. Logo Kooperatif ... 19

Gambar 2.3. Logo Kupon Makan ... 19

Gambar 2.4. Aplikasi Koop dan Kupon Makan di Play Store ... 20

Gambar 2.5. Tampilan Aplikasi Koop ... 20

Gambar 2.6. Tampilan Aplikasi Kupon Makan ... 21

Gambar 2.7. Bagan Alur Koordinasi ... 22

Gambar 3.1. Bagan Alur Koordinasi ... 23

Gambar 3.2. Bagan Alur Koordinasi Revisi... 24

Gambar 3.3. Sketsa Flowchart Awal Untuk Daftar Akun ... 29

Gambar 3.4. Bagan Flowchart Daftar Gapura ... 30

Gambar 3.5. Tampian UI/UX Daftar Akun Pertama... 31

Gambar 3.6. Sketsa Tampilan UI/UX Homepage ... 32

Gambar 3.7. Tampilan UI/UX Homepage Pertama ... 33

Gambar 3.8. Tampilan UI/UX Hompage Final ... 34

Gambar 3.9. Bagan Flowchart Untuk Akses Produk Simpan Pinjam ... 35

Gambar 3.10. Tampilan UI/UX Page Produk Simpanan dan Pinjaman ... 36

Gambar 3.11. Bagan Flowchart Untuk Tambah Produk Simpanan ... 37

Gambar 3.12. Tampilan UI/UX Untuk Simpanan Berjangka ... 38

Gambar 3.13. Tampilan UI/UX Untuk Simpanan Berkala... 38

Gambar 3.14. Tahap UI/UX Untuk Simpanan Flexi ... 39

(11)

x

Gambar 3.16. Tampilan UI/UX Untuk Pinjaman Agunan Kendaraan... 41

Gambar 3.17. Tampilan UI/UX Untuk Pinjaman Agunan Properti ... 42

Gambar 3.18. Tampilan UI/UX Untuk Pinjaman Tanpa Agunan... 43

Gambar 3.19. Bagan Flowchart Untuk Pembayaran ... 44

Gambar 3.20. Tampilan UI/UX Untuk Tagihan Lsitrik dan Token Listrik ... 45

Gambar 3.21. Tampilan UI/UX Untuk Pulsa Pascabayar, Prabayar, dan Paket Data ... 47

Gambar 3.22. Tampilan UI/UX Untuk PDAM ... 47

Gambar 3.23. Tampilan UI/UX Untuk BPJS ... 48

Gambar 3.24. Tampilan UI/UX Untuk E-Money ... 48

Gambar 3.25. Tampilan UI/UX Untuk Streaming ... 49

Gambar 3.26. Tampilan UI/UX Untuk Kartu Kredit ... 49

Gambar 3.27. Tampilan UI/UX Untuk Asuransi ... 50

Gambar 3.28. Tampilan UI/UX Untuk Angsuran ... 50

Gambar 3.29. Dashboard Waveapps ... 51

Gambar 3.30. Purchase Waveapps ... 52

Gambar 3.31. Employees Waveapps ... 52

Gambar 3.32. Homepage/Dasboard Webapps Gapura ... 53

Gambar 3.33. Produk Simpan Pinjam ... 53

Gambar 3.34. Homepage Gapura ... 54

Gambar 3.35. Section Daftar Anggota ... 54

Gambar 3.36. Section Daftar Officer ... 55

(12)

xi

Gambar 3.38. Section Daftar Pengajuan ... 55

Gambar 3.39. Navigasi ... 56

Gambar 3.40. Detail Navigasi ... 57

Gambar 3.41. Login ... 58

Gambar 3.42. Homepage ... 58

Gambar 3.43. Daftar Anggota ... 59

Gambar 3.44. Detail Anggota ... 60

Gambar 3.45. Daftar Officer ... 61

Gambar 3.46. Daftar Pinjaman ... 61

Gambar 3.47. Daftar Simpanan ... 62

Gambar 3.48. Page Pengajuan ... 62

Gambar 3.49. Pengajuan Simpanan Berjangka ... 63

Gambar 3.50. Pengajuan Pinjaman Agunan Dengan Kendaraan ... 64

Gambar 3.51. Pengajuan Pinjaman Tanpa Agunan ... 65

Gambar 3.52. Sketsa Flowchart Tukar Voucher ... 66

Gambar 3.53. Landingpage Kupon Makan Baru ... 67

Gambar 3.54. Tahap Tukar Voucher... 68

Gambar 3.55. Tahap Tarik Tunai ... 69

(13)

xii

DAFTAR TABEL

(14)

xiii

DAFTAR LAMPIRAN

Lampiran 1. SKPM Julius Obed ... 67

Lampiran 2. Form KM-03 ... 68

Lampiran 3. Surat Penerimaan Magang ... 69

Lampiran 7. Surat Keterangan Selesai Magang ... 77

Lampiran 9. Lampiran Wawancara Dengan Aditya Harya Suryansyah ... 79