PERANCANGAN DESAIN TAMPILAN ANTARMUKA UNTUK
APLIKASI KNOWLEDGE MANAGEMENT SYSTEM TRAINING
PT.XYZ
LAPORAN MAGANG
Angelia Chandra 00000021163
PROGRAM STUDI SISTEM INFORMASI
FAKTULTAS TEKNIK INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG BANTEN
2021
iii
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul
“Perancangan Desain Antarmuka untuk Aplikasi Knowledge Management System
Training PT.XYZ ”
Oleh Angelia Chandra
Telah diujikan pada hari Senin, 7 Desember 2020, pukul 13.00 s.d. 14.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut
Dosen Pembimbing Penguji
Johan Setiawan, S.Kom., M.M., M.B.A. Suryasari, S.Kom., M.T.
Disahkan oleh
Ketua Program Studi Sistem Informasi – UMN
iv
PERANCANGAN DESAIN TAMPILAN ANTARMUKA UNTUK APLIKASI KNOWLEDGE MANAGEMENT SYSTEM TRAINING PT.XYZ
ABSTRAK
Oleh : Angelia ChandraPT. XYZ mulai beroperasi di Indonesia sejak tahun 2011. Pada tahun 2015 PT. XYZ berinovasi dengan meluncurkan layanan 4G LTE Advanced pertama di Indonesia. Seiring dengan perkembangan zaman perusahaan mulai melakukan transisi dari segi penerapan sistem internal manual ke mobile-based dari segi sales sampai manajemen perusahaan. Pada saat ini PT.XYZ sedang mengembangkan sebuah proyek
Knowledge Management System Training (KMS Training) untuk meningkatkan knowledge product yang dipasarkan oleh PT.XYZ. Hingga saat ini PT.XYZ belum
memiliki rancangan untuk tampilan antarmuka untuk KMS Training.
Adapun tanggung jawab utama sebagai UI/UX Designer di PT.XYZ adalah membuat
wireframes, prototype dan design yang sudah selesai untuk produk yang ada di
PT.XYZ baik itu mobile maupun website menggunakan tools yakni : Sketch sebagai
tools utama dalam merancang desain tampilan, Abstract berguna sebagai tempat
menyimpan seluruh dokumentasi proyek, Invision adalah platform untuk mengupload hasil desain yang sudah final untuk diberikan kepada developer.
Selain itu sebagai UI/UX Designer pada kesempatan kali ini bertanggung jawab dalam mendesain dari proses wireframes sampai hasil UI final proyek KMS Training di mana dibagi lagi per fitur dalam pembagian tugasnya seperti membuat desain tampilan forum, home , schedule view.
v
DESIGN OF KNOWLEDGE MANAGEMENT SYSTEM INTERFACE DESIGN FOR PT XYZ
ABSTRACT
By : Angelia ChandraPT.XYZ started operating in Indonesia in 2011. In 2015 PT.XYZ innovates by launching the first 4G LTE Advanced service in Indonesia. Along with the times, the company began making a transition from the application of manual internal systems to mobile-based. The system itself used for sales point of view and company management. Now PT.XYZ is developing a Knowledge Management System Training (KMS Training) project to improve product knowledge marketed by PT.XYZ. Until now, PT.XYZ does not yet have a design for the interface for KMS Training.
The responsibility as an UI/UX Designer at PT.XYZ is to make wireframes, prototypes, and finished designs for existing products at PT.XYZ, both mobile and website using tools, namely: Sketch as the main tool in designing display designs, Abstract useful as a place to store all project documentation, Invision is a platform for uploading the final design results to be delivered to developers.
Also, as an UI/UX Designer on this occasion, this role is responsible for designing the wireframes process to the final UI result of the KMS Training project which is further divided per feature in the division of tasks such as creating forum display designs, home, and schedule views.
vi
KATA PENGANTAR
Segala puji syukur saya panjatkan ke hadirat Tuhan Yang Maha Esa hingga saat ini masih memberikan nafas kehidupan dan anugerah akal, sehingga saya dapat menyelesaikan pembuatan laporan ini dengan judul “Perancangan Desain Tampilan Antarmuka Untuk Aplikasi Knowledge Management System Training PT.XYZ ” tepat pada waktunya. Penulisan makalah ini telah semaksimal mungkin saya upayakan dan didukung bantuan berbagai pihak, sehingga dapat memperlancar dalam penyusunannya.
Ucapan terima kasih saya ucapkan kepada Universitas Multimedia Nusantara (UMN). Selain itu, ungkapan rasa terima kasih yang sebesar - besarnya juga disampaikan kepada :
Bapak Johan Setiawan, S.Kom., M.M., M.B.A selaku dosen tetap Prodi Sistem Informasi Universitas Multimedia Nusantara dan pembimbing kerja magang yang telah memberikan bimbingan, informasi, dan nasihat bermanfaat dalam penyusunan laporan kerja magang ini,
Ibu Ririn Ikana Desanti, S.Kom., M.Kom. selaku Kepala Program Studi Sistem Informasi Universitas Multimedia Nusantara,
Saudara Muhammad Irvan Sutroyudo selaku Manager UI/UX Designer PT.XYZ dan pembimbing lapangan yang telah meluangkan waktunya dalam memberikan pengalaman, dukungan, pengetahuan, memberikan masukan dan arahan selama pelaksanaan magang berlangsung,
Teman – teman magang yang melakukan kerja sama bersama selama proses ini berlangsung di mana memberikan banyak masukan, inspirasi, dorongan, pelajaran yang bermanfaat selama proses pelaksanaan magang berlangsung,
Orang tua dan teman-teman kuliah yang telah sebagai sumber motivasi dan dorongan utama dalam pelaksanaan praktik kerja magang hingga sampai pada tahap penyusunan laporan.
vii
Semoga laporan magang ini dapat memberikan manfaat bagi pembaca dan dijadikan referensi untuk penulisan laporan magang terkait berikutnya.
Tangerang , 2 Desember2020
viii
DAFTAR ISI
PERNYATAAN ... i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
ABSTRAK ... iv
ABSTRACT ... v
KATA PENGANTAR ... vi
DAFTAR ISI ... viii
DAFTAR GAMBAR ... x
DAFTAR TABEL ... xii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang... 1
1.2 Maksud dan Tujuan Pelaksanaan Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 2
1.3.1 Waktu Pelaksanaan Kerja Magang ... 2
1.3.2 Prosedur Pelaksanaan Kerja Magang ... 3
BAB II GAMBARAN PERUSAHAAN ... 5
2.1 Tentang PT.XYZ ... 5
2.2 Sejarah Perusahaan ... 6
2.3 Visi Misi Perusahaan ... 6
2.4 Struktur Organisasi Perusahaan ... 7
BAB III PELAKSANAAN KERJA MAGANG... 9
3.1 Kedudukan dan Koordinasi ... 9
ix
3.2.1 Pengembangan desain antarmuka laman UI Home KMS Training .... 16
3.2.2 Pengembangan desain antarmuka laman forum KMS Training for employees ... 20
3.2.3 Pengembangan desain antarmuka laman schedule view KMS Training . ... 30
3.3 Kendala yang Dihadapi ... 39
3.4 Solusi atas Kendala... 39
BAB IV KESIMPULAN & SARAN ... 41
4.1 Kesimpulan ... 41
4.2 Saran ... 42
x
DAFTAR GAMBAR
Gambar 2. 1 Logo PT.XYZ... 5
Gambar 2. 2 Website perushaaan PT.XYZ ... 5
Gambar 2. 3 Struktur Organisasi PT.XYZ ... 7
Gambar 3. 1 Website Google material design ... 11
Gambar 3. 2 Color System ... 12
Gambar 3. 3 Typography... 12
Gambar 3. 4 Shadows ... 13
Gambar 3. 5 Contoh dari elevasi ... 14
Gambar 3. 6 Layout Ruler ... 15
Gambar 3. 7 Use case diagram UI Home ... 17
Gambar 3. 8 UI Home ... 18
Gambar 3. 9 UI profile view ... 19
Gambar 3. 10 Use case diagram forum ... 21
Gambar 3. 11 Diagram activity forum ... 22
Gambar 3. 12 Forum UI - Main ... 23
Gambar 3. 13 Forum UI - expand ... 24
Gambar 3. 14 Create new topic ... 25
Gambar 3. 15 Add tags ... 26
Gambar 3. 16 Select moderator ... 26
Gambar 3. 17 Select moderator 2 ... 27
Gambar 3. 18 Create topic- Filled ... 28
Gambar 3. 19 Notification ... 29
Gambar 3. 20 Use case diagram schedule view ... 31
Gambar 3. 21 Schedule view ... 33
Gambar 3. 22 Calendar view ... 33
Gambar 3. 23 Detail training ... 34
Gambar 3. 24 List trainers ... 35
Gambar 3. 25 Detail trainer ... 35
xi
Gambar 3. 27 Detail trainee ... 36 Gambar 3. 28 Training history ... 37 Gambar 3. 29 Lokasi training ... 38
xii
DAFTAR TABEL
Tabel 1.1 Timeline pelaksanaan kerja magang ... 3 Tabel 2. 1 Timeline sejarah berkembangnya PT.XYZ ... 6 Tabel 3. 1 Tabel nilai elevasi dan komponen ... 14
