PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT. MULTIMEDIA DIGITAL NUSANTARA
LAPORAN MBKM
Angie Dionne Adrian 00000042774
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2023
PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT. MULTIMEDIA DIGITAL NUSANTARA
LAPORAN MBKM
Diajukan Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer (S.Kom)
Angie Dionne Adrian
00000042774
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2023
HALAMAN PERNYATAAN TIDAK PLAGIAT
Dengan ini saya,
Nama : Angie Dionne Adrian
Nomor Induk Mahasiswa : 00000042774
Program studi : Sistem Informasi
Laporan MBKM Penelitian dengan judul:
PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT.
MULTIMEDIA DIGITAL NUSANTARA
merupakan hasil karya saya sendiri bukan plagiat dari karya ilmiah yang ditulis oleh orang lain, dan semua sumber baik yang dikutip maupun dirujuk telah saya nyatakan dengan benar serta dicantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti ditemukan kecurangan/ penyimpangan, baik dalam pelaksanaan maupun dalam penulisan laporan MBKM, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk laporan MBKM yang telah saya tempuh.
Tangerang,
*materai Rp 10.000,00
(Angie Dionne Adrian)
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertandatangan di bawah ini:
Nama : Angie Dionne Adrian
NIM : 00000042774
Program Studi : Sistem Informasi Fakultas : Teknik dan Informatika
JenisKarya : Laporan MBKM
Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Nonekslusif (Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul:
PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT.
MULTIMEDIA DIGITAL NUSANTARA
Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalty Non eksklusif ini Universitas Multimedia Nusantara berhak menyimpan, mengalih media / format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan mempublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis / pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.
Tangerang, 21 Juni 2023 Yang menyatakan,
(Angie Dionne Adrian)
KATA PENGANTAR
Puji Syukur atas selesainya penulisan Laporan Magang ini dengan judul: “PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT. MULTIMEDIA DIGITAL NUSANTARA” dilakukan untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana Jurusan Sistem Informasi Pada Fakultas Teknik dan Informatika Universitas Multimedia Nusantara. Saya menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan sampai pada penyusunan tugas akhir ini, sangatlah sulit bagi saya untuk menyelesaikan tugas akhir ini. Oleh karena itu, saya mengucapkan terima kasih kepada:
1. Bapak Dr. Ninok Leksono, M.A., selaku Rektor Universitas Multimedia Nusantara.
2. Bapak Dr. Eng. Niki Prastomo, S.T., M.Sc., selaku Dekan Fakultas Universitas Multimedia Nusantara.
3. Ibu Ririn Ikana Desanti, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi Universitas Multimedia Nusantara.
4. Bapak Ahmad Faza, S.Kom., M.T.I., sebagai Pembimbing yang telah banyak meluangkan waktu untuk memberikan bimbingan, arahan dan motivasi atas terselesainya laporan MBKM ini.
5. Ibu Dr. Irmawati, S.Kom., M.M.S.I., selaku Penguji yang telah meluangkan waktunya untuk memberikan arahan dalam penulisan laporan MBKM ini.
6. Bapak Andrew Willis, sebagai Pembimbing Lapangan yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya laporan MBKM Penelitian.
7. Kepada Perusahaan PT. Multimedia Digital Nusantara
8. Keluarga yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan laporan MBKM ini.
Semoga karya ilmiah ini dapat memberikan nilai bagi pembaca.
Tangerang, 21 Juni 2023
(Angie Dionne Adrian)
PERAN UI/UX DESIGNER DAN FRONTEND DEVELOPER PADA PT.
MULTIMEDIA DIGITAL NUSANTARA
Angie Dionne Adrian ABSTRAK
Program kerja magang ini dinaungi oleh PT. Multimedia Digital Nusantara dan terdapat dua proyek yang dikerjakan. Proyek utama yaitu pengembangan UI/UX website Merdeka UMN yang bertujuan untuk memperbaiki desain dan fitur website. Pengerjaan proyek utama ini menggunakan Figma dan dimulai dengan analisis business requirements, dilanjutkan dengan penelitian melalui penyebaran kuesioner, hingga membuat desain akhir website Merdeka UMN 2.0. Perubahan desain seperti warna, font, icon, background, serta layout website dilakukan. Selain proyek utama, terdapat juga proyek sampingan dengan deskripsi pekerjaan sebagai frontend developer website CV Management UMN Pictures untuk user role admin. Situs ini memiliki tujuan untuk menyimpan dan mengelola data pelamar pada UMN Pictures sehingga memudahkan dalam proses rekruitmen. Proses pengerjaan proyek sampingan ini dimulai dengan mempelajari gambaran besar proyek, dilanjutkan dengan pembuatan desain website, hingga pemrograman website menggunakan Django framework. Pada kegiatan kerja magang ini ditemukan beberapa kendala seperti kendala komunikasi, perubahan scope proyek, dan kendala dalam menggunakan tools baru, namun dengan keterampilan kerjasama, pemecahan masalah, dan mempunyai sikap proaktif, masalah yang dihadapi dapat diselesaikan.
Kata kunci: UI/UX, Django, Kampus Merdeka, Desain Website, Pengembangan Website.
THE ROLE OF UI/UX DESIGNER AND FRONTEND DEVELOPER AT PT.
MULTIMEDIA DIGITAL NUSANTARA
Angie Dionne Adrian ABSTRACT (English)
This internship program is under PT. Multimedia Digital Nusantara which focused on two projects. The main project is the UI/UX development of Merdeka UMN website that aims to improve the design and features of the website. The process of this project is done by using Figma and begins with an analysis of business requirements, followed by research through the distribution of questionnaires, to making the final design of Merdeka UMN 2.0 website. Design changes such as colors, font, icons, background, and website layouts were made. Aside from the main project, there is also a side project with a job description as a front-end developer for CV Management UMN Pictures website user role admin. This website is used to store and manage applicants’ data so that it will facilitate the recruitment process in UMN Pictures. The process of this side project begins with studying the big picture of the project, followed by creating the website design, and programming the website using Django framework. In this internship, several obstacles were found such as communication issues, changes in project scope, and difficulties in using new tools, but with collaboration skills, problem solving, and having a proactive attitude, the problems encountered can be solved.
Keywords: UI/UX, Django, Kampus Merdeka, Web Design, Website Development
DAFTAR ISI
HALAMAN PERNYATAAN TIDAK PLAGIAT ... ii
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iii
KATA PENGANTAR ... iv
ABSTRAK ... v
ABSTRACT (English) ... vi
DAFTAR ISI ... vii
DAFTAR TABEL ... ix
DAFTAR GAMBAR ... x
DAFTAR LAMPIRAN ... xiii
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 ... 3
BAB II GAMBARAN UMUM PERUSAHAAN ... 8
Sejarah Singkat Perusahaan ... 8
2.1.1 Visi Misi ... 8
Struktur Organisasi Perusahaan ... 9
BAB III PELAKSANAAN KERJA MAGANG ... 11
3.1 Kedudukan dan Koordinasi ... 11
3.2 Tugas dan Uraian Kerja Magang ... 12
3.2.1 Pengenalan proyek, tim, dan supervisor ... 14
3.2.2 Mempelajari dan menganalisa business requirement Merdeka UMN 2.0 ... 15
3.2.3 Melakukan riset dengan membuat kuesioner untuk user terkait UI/UX website Merdeka UMN 1.0 ... 19
3.2.4 Mempelajari sitemap website Merdeka UMN 2.0 ... 26
3.2.5 Membuat wireframe website Merdeka UMN 2.0 ... 26 3.2.6 Membuat desain UI/UX baru dari website Merdeka UMN 2.0 31 3.2.7 Mempelajari proyek website CV Management UMN Pictures . 54
3.2.8 Membuat sitemap website CV Management UMN Pictures ... 55
3.2.9 Membuat wireframe website CV Management UMN Pictures . 55 3.2.10 Membuat desain website CV Management UMN Pictures ... 59
3.2.11 Mempelajari dan melakukan install framework Django ... 64
3.2.12 Perancangan website CV Management UMN Pictures... 66
3.3 Kendala yang Ditemukan ... 73
3.4 Solusi atas Kendala yang Ditemukan ... 74
BAB IV SIMPULAN DAN SARAN ... 76
4.1 Simpulan ... 76
4.2 Saran ... 77
DAFTAR PUSTAKA ... 78
LAMPIRAN ... 80
DAFTAR TABEL
Tabel 1. 1 Kegiatan dan Waktu Pelaksanaan Magang ... 6
Tabel 3. 1 Detail Kegiatan dan Waktu Pelaksanaan Magang ... 13
DAFTAR GAMBAR
Gambar 2. 1 Logo PT. Multimedia Digital Nusantara ... 8
Gambar 2. 2 Bagan Struktur Organisasi PT. Multimedia Digital Nusantara ... 9
Gambar 3. 1 Bagan Struktur Kedudukan ... 11
Gambar 3. 2 Flowchart Alur Kerja ... 12
Gambar 3. 3 Tampilan Awal Kuesioner ... 19
Gambar 3. 4 Penilaian Responden Terhadap Tampilan Website ... 20
Gambar 3. 5 Penilaian Responden Terhadap Layout dan Navigasi Website ... 20
Gambar 3. 6 Penilaian Responden Terhadap Fitur Website ... 21
Gambar 3. 7 Saran Responden Terhadap Fitur Baru Website ... 22
Gambar 3. 8 Penilaian Responden Terhadap Font dan Icon Website ... 22
Gambar 3. 9 Penilaian Responden Terhadap Tampilan Awal Website ... 23
Gambar 3. 10 Penilaian Responden Terhadap Proses Update Data pada Website 23 Gambar 3. 11 Penilaian Responden Terhadap Tingkat Usability Website ... 24
Gambar 3. 12 Penilaian Responden Terhadap Kebutuhan Buku Panduan ... 24
Gambar 3. 13 Penilaian Responden Terhadap Kebutuhan Penjelasan Website ... 25
Gambar 3. 14 Penilaian Responden Terhadap Tingkat Kepuasan Website ... 25
Gambar 3. 15 Wireframe Home Page ... 27
Gambar 3. 16 Wireframe Registration Menu ... 27
Gambar 3. 17 Wireframe Monitoring Registration Menu ... 28
Gambar 3. 18 Wireframe Cover Letter Menu ... 28
Gambar 3. 19 Wireframe Complete Registration Menu ... 29
Gambar 3. 20 Wireframe Daily Task Menu... 29
Gambar 3. 21 Wireframe Exam Menu ... 30
Gambar 3. 22 Wireframe Upload File Menu ... 30
Gambar 3. 23 Home Page Merdeka UMN 2.0 ... 32
Gambar 3. 24 Registration Page Merdeka UMN 2.0 ... 32
Gambar 3. 25 Monitoring Registration Page Merdeka UMN 2.0 ... 33
Gambar 3. 26 Cover Letter Page Merdeka UMN 2.0 ... 33
Gambar 3. 27 Complete Registration Page Merdeka UMN 2.0 ... 34
Gambar 3. 28 Daily Task Page Merdeka UMN 2.0 ... 34
Gambar 3. 29 Exam Page Merdeka UMN 2.0 ... 35
Gambar 3. 30 Upload File Page Merdeka UMN 2.0 ... 35
Gambar 3. 31 Initial Page User Role Lecturer ... 36
Gambar 3. 32 Lecturer Login Page ... 37
Gambar 3. 33 After Login Page Lecturer... 37
Gambar 3. 34 My Advisees Page (Filter not Found) ... 38
Gambar 3. 35 View My Advisees Page ... 38
Gambar 3. 36 Report Title Change Request Page... 39
Gambar 3. 37 View Daily Task Page ... 39
Gambar 3. 38 Student Counseling Review Page ... 40
Gambar 3. 39 Pre-Exam Report Review Page ... 41
Gambar 3. 40 Evaluation Grade Course Page ... 41
Gambar 3. 41 Input Evaluation Grade Page... 42
Gambar 3. 42 Review Submitted Grade Page ... 42
Gambar 3. 43 Review Submitted Grade Detail Page ... 43
Gambar 3. 44 Remarks and Questionnaire Page ... 43
Gambar 3. 45 Exam Schedule Page (Filter not Found) ... 44
Gambar 3. 46 Exam Schedule Page ... 44
Gambar 3. 47 View Exam Report Page ... 45
Gambar 3. 48 Post Exam Report Review Page ... 45
Gambar 3. 49 Exam Course Page ... 46
Gambar 3. 50 Input Exam Grade Page... 46
Gambar 3. 51 Show Submitted Grade Page ... 47
Gambar 3. 52 Show Submitted Grade Detail Page ... 47
Gambar 3. 53 Verification Form Pop-Up Page ... 48
Gambar 3. 54 Monitoring KHS Page ... 49
Gambar 3. 55 Monitoring KHS Page (Filter not Found) ... 49
Gambar 3. 56 Monitoring KHS Page (Filter Found) ... 49
Gambar 3. 57 Show Review KHS Page ... 50
Gambar 3. 58 Review KHS Page ... 50
Gambar 3. 59 Form Input Konversi Matakuliah ... 51
Gambar 3. 60 Form Input Konversi Matakuliah (Dropdown Matakuliah) ... 51
Gambar 3. 61 Form Input Konversi Matakuliah (Dropdown Grade) ... 51
Gambar 3. 62 Monitoring SKS Page ... 52
Gambar 3. 63 Monitoring SKS Page (Filter not Found) ... 52
Gambar 3. 64 Detail SKS Page ... 53
Gambar 3. 65 Review SKS Page... 53
Gambar 3. 66 Sitemap Website User Role Admin ... 55
Gambar 3. 67 Wireframe Initial Page ... 56
Gambar 3. 68 Wireframe Job Vacancies Page ... 56
Gambar 3. 69 Wireframe Job Edit Page... 57
Gambar 3. 70 Wireframe Add Job Page ... 57
Gambar 3. 71 Wireframe Applicant List Page ... 58
Gambar 3. 72 Wireframe Applicant Details Page ... 58
Gambar 3. 73 Color Palette Desain Website CV Management UMN Pictures Role Admin ... 59
Gambar 3. 74 Initial Page... 59
Gambar 3. 75 Sign Up Page ... 60
Gambar 3. 76 Sign In Page ... 60
Gambar 3. 77 Job Vacancies Page ... 61
Gambar 3. 78 Add Job Page ... 61
Gambar 3. 79 Job Edit Page ... 62
Gambar 3. 80 Applicant List Page ... 62
Gambar 3. 81 Applicant Details Page ... 63
Gambar 3. 82 Pop Up Reject Applicant ... 63
Gambar 3. 83 Playlist Tutorial Django oleh Info Tech Channel ... 65
Gambar 3. 84 Video Tutorial Django oleh Info Tech Channel... 65
Gambar 3. 85 Visual Studio Extensions ... 66
Gambar 3. 86 settings.py ... 67
Gambar 3. 87 urls.py ... 68
Gambar 3. 88 apps.py... 68
Gambar 3. 89 views.py... 69
Gambar 3. 90 base.html (header) ... 69
Gambar 3. 91 base.html (style) ... 69
Gambar 3. 92 base.html (block/endblock content) ... 70
Gambar 3. 93 base.html (footer) ... 70
Gambar 3. 94 Hasil Tampilan Header... 71
Gambar 3. 95 Hasil Tampilan Footer ... 71
Gambar 3. 96 jobVacancies.html detail ... 71
Gambar 3. 97 ApplicantList.html detail ... 72
Gambar 3. 98 Hasil Tampilan Halaman Job Vacancies ... 73
Gambar 3. 99 Hasil Tampilan Halaman Applicant List ... 73
DAFTAR LAMPIRAN
Lampiran A Surat Pengantar MBKM (MBKM 01) ... 80
Lampiran B Kartu MBKM (MBKM 02) ... 81
Lampiran C Daily Task Kewirausahaan (MBKM 03) ... 82
Lampiran D Lembar Verifikasi Laporan MBKM Kewirausahaan (MBKM 04) .. 97
Lampiran E Surat Penerimaan MBKM (LoA) ... 98
Lampiran F Form Bimbingan Magang ... 100
Lampiran G Pengecekan Hasil Turnitin ... 101
Lampiran H Lampiran Sitemap User Role Lecturer ... 103
