PERANCANGAN WEBSITE UNTUK BKPSDM KOTA TANGERANG SEBAGAI UX DESIGNER
LAPORAN MAGANG
ATILLIO DWIEN KUSUMA 00000032189
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2022
i
PERNYATAAN
ii
HALAMAN PERSETUJUAN
iii
HALAMAN PENGESAHAN
Laporan Kerja Magang Dengan Judul
“Perancangan Website untuk BKPSDM Kota Tangerang sebagai UX Designer”
oleh
Nama : Atillio Dwien Kusuma
NIM : 00000032189
Program Studi : Sistem Informasi Fakultas : Teknik dan Informatika
Telah diujikan pada hari kamis , 6 Januari 2022 Pukul 13.00 s/d 14.00 dan dinyatakan
LULUS
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Friska Natalia, Ph.D Johan Setiawan, S.Kom., M.M., M.B.A
Disahkan oleh
Ketua Program Studi Sistem Informasi- UMN
Ririn Ikana Desanti, S.Kom., M.Kom
iv
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademika Universitas Multimedia Nusantara, saya yang bertandatangan di bawah ini:
Nama : Atillio Dwien Kusuma
NIM : 00000032189
Program Studi : Sistem Informasi Fakultas : Teknik dan Informatika Jenis Karya : Laporan Magang
Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Noneklusif (Non-exclusive Royalty-Free Right) ata karya ilmiah saya yang berjudul:
“
PERANCANGAN WEBSITE UNTUK BKPSDM KOTA TANGERANG SEBAGAI UX DESIGNER
”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 sama saya sebagai penulis / pencipta dan sebagai pemilik Hak Cipta
Demikian pernyataan ini saya buat dengan sebenarnya.
Tangerang, 15 Desember 2021
Atillio Dwien Kusuma
v
KATA PENGANTAR
Puji Syukur atas berkat dan rahmat kepada Tuhan Yang Maha Esa, atas selesainya penulisan laporan magang disertasi ini dengan judul:
“Perancangan Website untuk BKPSDM Kota Tangerang sebagai UX Designer”
Dilakukan untuk memenuhi salah satu syarat untuk mencapai gelar Sarjana Komputer (S.Kom) 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 laporan magang ini, sangatlah sulit bagi saya untuk menyelesaikan laporan magang ini. Oleh karena itu, saya mengucapkan terima kasih kepada:
1. Dr. Ninok Leksono, M.A, selaku Rektor Universitas Multimedia Nusantara.
2. Dr. Eng. Niki Prastomo, S.T., M.Sc., selaku Dekan Fakultas Tehnik dan Informatika Universitas Multimedia Nusantara.
3. Ibu Ririn Ikana Desanti, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi Universitas Multimedia Nusantara.
4. Ibu Friska Natalia, Ph.D., selaku pembimbing yang telah membimbing dan memberikan saran selama pembuatan laporan magang.
5. Bapak Taufiq Hidayat, S.Kom, M.T sebagai Pembimbing lapangan membantu selama melaksanakan kerja magang di BKPSDM SDM Kota Tangerang.
6. Rekan-rekan kerja di dalam tim yang bekerja sama dalam projek dan saling membantu dan memotivasi selama kerja magang.
7. Orang Tua, dan keluarga saya yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan laporan magang ini.
Semoga Laporan Kerja Magang ini bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca.
Tangerang, 1 Oktober 2021
(Atillio Dwien Kusuma)
vi
PERANCANGAN WEBSITE UNTUK BKPSDM KOTA TANGERANG SEBAGAI UX DESIGNER
ABSTRAK
Oleh: Atillio Dwien Kusuma
Pelaksanaan Kerja Magang di Badan Kepegawaian dan Pengembangan Sumber Daya Manusia atau dapat disingkat sebagai BKPSDM ini berlangsung selama 100 hari kerja atau 800 jam dalam sebuah Project Perancangan Website Public dan Admin Dashboard BKPSDM. BKPSDM Kota Tangerang merupakan sebuah lembaga yang memiliki tugas sebagai pelaksana penyusunan kebijakan daerah yang berkaitan pada bidang pelayanan kepegawaian, mutasi, pengembangan pegawai, pemberian pendidikan dan pelatihan, dan juga pelaksanaan proses rekrutmen untuk Calon Pegawai Negeri Sipil (CPNS) Kota Tangerang. BKPSDM Kota Tangerang menggunakan sebuah Website yang digunakannya sebagai perantara untuk berkomunikasi dengan masyarakat tentang informasi dan berita- berita penting yang berkaitan dengan BKPSDM dan pelaksanaan rekrutmen CPNS Kota Tangerang.
Website dan Admin Dashboard yang digunakan oleh BKPSDM pada saat ini memiliki tampilan yang terlihat “outdated” atau tertinggal sehingga kurang menarik perhatian para penggunanya. Oleh sebab itu kegiatan yang dilakukan selama melaksanakan Kerja Magang ini adalah melakukan Analisis terhadap Website BKPSDM Kota Tangerang yang lama, untuk melihat kekurangan yang tidak perlu diterapkan di Website yang baru, Lalu sebagai UX Designer mendesain sebuah tampilan yang sesuai dengan trend yang sedang digunakan sekarang.
Pengalaman yang di dapatkan dari kerja magang di BKPSDM adalah bekerja sama dan berkoordinasi dengan anggota tim project dan juga dengan BKPSDM untuk menyesuaikan desain UI/UX yang baru dengan keinginan yang sudah disepakati agar pengerjaan Project Website Public dan Website Admin Dashboard mencapai hasil yang maksimal.
Kata kunci: analisis, berkoordinasi, kerja magang, request, User Experience, Website Public dan Admin Dashboard.
vii
WEBSITE DESIGN FOR BKPSDM CITY OF TANGERANG AS A UX DESIGNER
ABSTRACT By: Atillio Dwien Kusuma
The implementation of the Internship at Badan Kepegawaian dan Pengembangan Sumber Daya Manusia or can be abbreviated as BKPSDM lasts 100 working days or 800 hours in a Public Website Design Project and BKPSDM Admin Dashboard. BKPSDM is an institution that has the task of implementing regional policies related to the field of personnel services, transfers, employee development, providing education and training, as well as implementing the recruitment process for Candidates for Civil Servants (CPNS) Tangerang City. The Tangerang City BKPSDM uses a Website that it uses as an intermediary to communicate with the Public about important information and news related to BKPSDM and the implementation of Tangerang City CPNS recruitment.
The Website and Admin Dashboard used by BKPSDM at this time have an appearance that looks "outdated" or left behind so that it does not attract the attention of its users. Therefore, the activities carried out during this Internship are conducting an Analysis of the old Tangerang City BKPSDM Website, to see deficiencies that do not need to be applied to the new Website, Then as a UX Designer design a display that is in accordance with the current trend.
The experience gained from internships at BKPSDM is collaborating and coordinating with project team members and also with BKPSDM to adjust the new UI/UX design with the agreed-upon desire so that the Public Website Project and Website Admin Dashboard project achieve maximum results.
Keywords: analysis, coordination, internship, request, User Experience, Public Website and Admin Dashboard..
viii
DAFTAR ISI
PERNYATAAN... i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ...iv
KATA PENGANTAR ... v
ABSTRAK ...vi
ABSTRACT ... vii
DAFTAR ISI... viii
DAFTAR TABEL ... x
DAFTAR GAMBAR ... xi
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Maksud dan Tujuan Pelaksanaan Kerja Magang ... 3
1.2.1. Maksud Pelaksanaan Kerja Magang ... 3
1.2.2. Tujuan Pelaksanaan Kerja Magang ... 3
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 4
1.3.1. Waktu Pelaksanaan Kerja Magang ... 4
1.3.2. Prosedur Pelaksanaan Kerja Magang ... 5
BAB II GAMBARAN UMUM PERUSAHAAN ... 2
2.1. Tentang Perusahaan ... 2
2.2. Visi Misi Perusahaan ... 8
2.3. Struktur Organisasi Lembaga ... 9
BAB III PELAKSANAAN KERJA MAGANG ... 15
ix
3.1. Kedudukan dalam Kerja Magang ... 15
3.2. Tugas dan Uraian dalam Kerja Magang ... 16
3.3. Kendala dan Solusi Kerja Magang ... 42
BAB IV SIMPULAN DAN SARAN ... 44
4.1. Simpulan ... 44
4.2. Saran ... 45
4.2.1. Untuk Perusahaan... 45
4.2.2. Untuk Universitas (Prodi) ... 45
4.2.3. Untuk Mahasiswa ... 45
DAFTAR PUSTAKA ... 47
LAMPIRAN... 48
x
DAFTAR TABEL
BAB I
Tabel 1. 1 Gantt Chart Aktivitas Website Public ... 4 Tabel 1. 2 Gantt Chart Aktivitas Admin Dashboard ... 5 BAB III
Tabel 3. 1 Tabel Rincian Aktivitas Magang ... 17
xi
DAFTAR GAMBAR
BAB II
Gambar 2. 1 Logo BKPSDM ... 2
Gambar 2. 2 Struktur Organisasi BKPSDM ... 9
BAB III Gambar 3. 1 Tampilan Homepage Lama ... 21
Gambar 3. 2 Tampilan Halaman Berita dan Artikel Lama ... 22
Gambar 3. 3 Tampilan Halaman Galeri Lama ... 23
Gambar 3. 4 Tampilan Halaman Visi dan Misi Lama ... 25
Gambar 3. 5 Tampilan Halaman Login Lama ... 26
Gambar 3. 6 Tampilan Homepage Banner (Baru) ... 28
Gambar 3. 7 Tampilan Homepage Visi dan Misi (Baru) ... 29
Gambar 3. 8 Tampilan Homepage Tombol (Baru) ... 30
Gambar 3. 9 Tampilan Berita dan Artikel (Baru) ... 31
Gambar 3. 10 Tampilan Galeri (Baru) ... 32
Gambar 3. 11 Fungsi Zoom Galeri ... 33
Gambar 3. 12 Tampilan Fungsi Login ... 34
Gambar 3. 13 Tampilan Admin Dashboard Lama ... 35
Gambar 3. 14 Sketsa Layout Admin Dashboard Baru ... 36
Gambar 3. 15 Tampilan Admin Dashboard Baru ... 38
Gambar 3. 16 Tampilan Horizontal Bar Chart ... 39
Gambar 3. 17 Tampilan Vertical Bar Chart ... 40
Gambar 3. 18 Tampilan Data Table 1 ... 41
Gambar 3. 19 Tampilan Data Table 2 ... 42
