PERANCANGAN DESAIN UI/UX APLIKASI MOBILE
OEMAH HERBORIST PADA PT VICTORIA CARE
INDONESIA
LAPORAN KERJA MAGANG
Muhamad Ridho Al Qodari 00000009915
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2020
▸ Baca selengkapnya: kesimpulan pt victoria care indonesia
(2)i
PERNYATAAN
Dengan ini saya menyatakan bahwa telah melaksanakan praktik kerja magang pada:
Nama Perusahaan : PT Victoria Care Indonesia
Divisi : UI/UX Designer
Alamat : Wisma SSK, Jl. Daan Mogot KM.11 No.11,
Kedaung Kali Angke, Kec. Cengkareng, Kota Jakarta Barat, DKI Jakarta 11730 Periode Magang : 8 Juli 2019 – 30 Agustus 2019
Pembimbing Lapangan : Pak Frangky
Laporan kerja magang ini adalah karya tulis saya sendiri, bukan plagiat dari karya tulis yang ditulis oleh orang lain atau lembaga lain, dan semua karya tulis orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti ditemukan kecurangan / penyimpangan, baik dalam pelaksanaan kerja magang maupun dalam penulisan laporan kerja magang, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah kerja magang yang telah saya tempuh dan status kesarjanaan strata satu yang sudah diterima akan dicabut.
Tangerang, 26 Agustus 2019
ii
HALAMAN PERSETUJUAN
Laporan Kerja Magang dengan judul
“Perancangan Desain UI/UX Aplikasi Mobile Oemah Herborist pada PT Victoria Care Indonesia”
oleh
Muhamad Ridho Al Qodari Telah disetujui untuk diajukan pada
Sidang Ujian Magang Universitas Multimedia Nusantara
Tangerang, 27 Maret 2020 Menyetujui,
Dosen Pembimbing Ketua Program Studi
iii
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul
“Perancangan Desain UI/UX Aplikasi Mobile Oemah Herborist pada PT Victoria Care Indonesia”
oleh
Muhamad Ridho Al Qodari
Telah diujikan pada hari Senin, 13 April 2020, Pukul 13.00 s.d 14.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Friska Natalia, Ph.D. Ririn Ikana Desanti, S.Kom., M.Kom.
Disahkan oleh
Ketua Program Studi Sistem Informasi - UMN
iv
PERANCANGAN DESAIN UI/UX APLIKASI MOBILE OEMAH
HERBORIST PADA PT VICTORIA CARE INDONESIA
ABSTRAK
Oleh: Muhamad Ridho Al Qodari
PT Victoria Care Indonesia adalah perusahaan yang bergerak di bidang distribusi kosmetik yang produknya sudah dipasarkan hampir di seluruh Indonesia. Sebagai perusahaan yang sudah menggunakan teknologi berbasis digital, perusahaan memerlukan peran User Interface untuk lebih meningkatkan penjualan dan mengenalkan produk-produk baru kepada para customer dengan lebih cepat di tengah persaingan bisnis kosmetik yang begitu ketat di Indonesia. User Interface merupakan hal terpenting karena platform harus menampilkan bentuk kepada pengguna dengan baik dan membuat langkah yang harus jelas, maka PT. Victoria Care Indonesia mempertimbangkan butuhnya peran UI/UX Designer intern.
Pada PT Victoria Care Indonesia, UI/UX Designer bertugas untuk membantu dalam menentukan user journey dan merancang tampilan awal aplikasi yang menarik berupa prototype sebelum dibuat oleh programmer pada rancangan desain UI/UX milik PT Victoria Care Indonesia yaitu aplikasi Oemah Herborist. Aplikasi Oemah Herborist merupakan sebuah aplikasi penjualan produk-produk yang dimiliki oleh PT Victoria Care Indonesia.
Selama program kerja magang yang berlangsung selama 40 hari, banyak ilmu dan pengalaman baru yang didapat. Pada sisi lain juga dapat sebagai pengukur kemampuan dan pemahaman materi yang selama ini dipelajari di kampus sehingga ilmu yang didapat dari kampus dan program kerja magang sangat bermanfaat bagi mahasiswa agar siap menghadapi dunia kerja yang sesungguhnya di masa yang akan datang.
Kata Kunci: Magang, PT Victoria Care Indonesia, UI/UX Designer, Prototype
v
UI / UX DESIGN OF OEMAH HERBORIST MOBILE
APPLICATION DESIGN IN PT VICTORIA CARE INDONESIA
ABSTRACT
By: Muhamad Ridho Al Qodari
PT Victoria Care Indonesia is a company engaged in the distribution of cosmetics whose products have been marketed in almost all of Indonesia. As a company that already uses digital-based technology, the company needs the role of the User Interface to further increase sales and introduce new products to customers more quickly amid the fierce competition in the cosmetics business in Indonesia. The User Interface is the most important thing because the platform must display the form to the user properly and make the steps that must be clear, then PT Victoria Care Indonesia considers the need for internal UI / UX Designer roles. At PT Victoria Care Indonesia, the UI / UX Designer is tasked to assist in determining the user journey and designing an attractive initial appearance of a prototype before it is made by the programmer in PT Victoria Care Indonesia's UI / UX design namely the Oemah Herborist application. The Oemah Herborist application is a sales application for products owned by PT Victoria Care Indonesia.
During the 40-day internship program, a lot of new knowledge and experience is gained. On the other hand it can also be a measure of ability and understanding of the material that has been studied on campus so that the knowledge gained from the campus and internship programs are very useful for students to be ready to face the real world of work in the future.
Keywords: Internship, PT Victoria Care Indonesia, UI / UX Designer, Prototype
vi
KATA PENGANTAR
Puji syukur kepada Allah SWT yang telah memberikan kekuatan dan rahmat-Nya sehingga penulis dapat menyelesaikan praktik kerja magang dengan baik dan laporan kerja magang yang berjudul “Perancangan Desain UI/UX Aplikasi Mobile Oemah Herborist pada PT Victoria Care Indonesia” dapat selesai tepat pada waktunya.
Penulis tidak akan dapat menyelesaikan laporan ini tanpa bantuan dari berbagai pihak yang telah menyumbangkan pikiran, masukan, waktu dan tenaga. Oleh karena itu, penulis mengucapkan terima kasih kepada:
1. Orang tua dan keluarga penulis yang telah mendukung secara moral, mental dan doa serta motivasi untuk penulis dalam menyelesaikan laporan magang ini.
2. Ibu Ririn Ikana Desanti, S. Kom., M. Kom. selaku Kepala Program Studi Sistem Informasi Universitas Multimedia Nusantara.
3. Ibu Friska Natalia, Ph.D. yang telah memberikan bimbingan, informasi dan saran-saran kepada penulis selama penyusunan laporan kerja magang. 4. Bapak Frangky selaku pembimbing lapangan yang telah membantu penulis
selama melaksanakan kerja magang.
5. Bapak Michael dan rekan-rekan kerja di tempat magang yang telah bekerja sama dan membantu penulis sewaktu ada kesulitan di tempat magang. 6. Semua responden yang telah menyempatkan waktu untuk melakukan uji
usability yang tidak disebutkan satu per satu tanpa menghilangkan rasa hormat.
vii
Penulis menyadari bahwa dalam penyusunan laporan magang ini masih jauh dari kesempurnaan. Oleh karena itu, penulis mohon maaf apabila dalam penyusunan laporan magang ini terdapat kesalahan penulisan dan penulis mengharapkan adanya saran serta kritik dari pembaca demi menyempurnakan laporan kerja magang ini. Semoga laporan kerja magang ini dapat memberikan informasi yang bermanfaat bagi penulis dan para pembaca.
Tangerang, 26 Agustus 2019
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 ... xi
BAB I PENDAHULUAN ... 12
1.1. Latar Belakang ... 12
1.2. Maksud dan Tujuan Pelaksanaan Kerja Magang... 13
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 14
1.3.1.Waktu Pelaksanaan Kerja Magang ... 14
1.3.2.Prosedur Pelaksanaan Kerja Magang ... 16
BAB II GAMBARAN UMUM PERUSAHAAN ... 18
2.1. Tentang PT Victoria Care Indonesia... 18
2.2. Visi Misi Perusahaan ... 19
2.3. Struktur Organisasi Perusahaan ... 19
BAB III PELAKSANAAN KERJA MAGANG ... 23
3.1. Kedudukan dan Koordinasi ... 23
3.2. Tugas yang Dilakukan ... 23
3.3. Uraian Kerja Magang ... 26
3.3.1.Minggu ke – 1: Meeting & pengarahan dalam membuat user journey dan flow aplikasi mobile Oemah Herborist ... 26
3.3.2.Minggu ke – 2 : Merancang prototype/mockup tampilan awal aplikasi mobile Oemah Herborist : login, register, home dan landing. ... 29
ix
3.3.3.Minggu ke – 3 : Merancang prototype/mockup tampilan fitur penjualan
aplikasi mobile Oemah Herborist. ... 33
3.3.4.Minggu ke – 4 : Merancang prototype / mockup fitur member card dan tampilan profile account aplikasi mobile Oemah Herborist. ... 43
3.3.5.Minggu ke – 5 : Merancang prototype/mockup fitur pembayaran, change password dan forget password aplikasi mobile Oemah Herborist. ... 45
3.3.6.Minggu ke – 6 : Menganalisa kebutuhan user untuk menciptakan fitur pendukung/tambahan pada Oemah Herborist mobile app. ... 52
3.3.7.Minggu ke – 7 : Membuat prototype/mockup fitur pendukung dalam Oemah Herborist mobile app. ... 54
3.3.8.Minggu ke – 8 : Membuat laporan... 55
3.4. Kendala yang Dihadapi ... 55
3.5. Solusi atas Kendala ... 55
BAB IV KESIMPULAN DAN SARAN ... 57
4.1. Kesimpulan ... 57
4.2. Saran... 57
4.2.1.Saran untuk Universitas ... 57
4.2.2.Saran untuk Perusahaan ... 58
4.2.3.Saran untuk Mahasiswa... 58
DAFTAR PUSTAKA ... 59
x
DAFTAR GAMBAR
Gambar 2.1. Logo PT Victoria Care Indonesia ... 18
Gambar 2.2. Struktur Organisasi PT Victoria Care Indonesia ... 19
Gambar 3.1. Flowchart Aplikasi Oemah Herborist ... 28
Gambar 3.2. Tampilan Sign In Aplikasi Oemah Herborist ... 29
Gambar 3.3. Tampilan Sign Up Aplikasi Mobile Oemah Herborist... 30
Gambar 3.4. Tampilan Landing Aplikasi Mobile Oemah Herborist ... 31
Gambar 3.5. Tampilan Home Aplikasi Mobile Oemah Herborist ... 32
Gambar 3.6. Tampilan Menu Awal Penjualan Aplikasi Mobile Oemah Herborist ... 33
Gambar 3.7. Tampilan Penjualan Produk Herborist ... 34
Gambar 3.8. Tampilan Penjualan Produk Miranda ... 35
Gambar 3.9. Tampilan Penjualan Produk NuFace ... 36
Gambar 3.10. Tampilan Penjualan Produk Iria Goat’s Milk ... 37
Gambar 3.11. Tampilan Penjualan Produk Sixsence ... 38
Gambar 3.12. Tampilan Penjualan Produk Victoria ... 39
Gambar 3.13. Tampilan Produk Body Butter dari Herborist... 40
Gambar 3. 14. Tampilan Trolley Penjualan ... 41
Gambar 3.15. Tampilan Konfirmasi Penjualan ... 42
Gambar 3.16. Tampilan Fitur Member Card ... 43
Gambar 3.17. Tampilan Fitur Check Point Member Card... 44
Gambar 3.18. Tampilan Menu Profile Account ... 45
Gambar 3.19. Tampilan Menu Pembayaran ... 46
Gambar 3.20. Tampilan Menu Change Password... 47
Gambar 3.21. Tampilan Menu Forget Password ... 48
Gambar 3.22. Tampilan Notif Forget Password ... 49
Gambar 3.23. Tampilan E-mail Untuk Reset Password ... 50
Gambar 3.24. Tampilan Konfirmasi Reset Password di Gmail ... 51
Gambar 3.25. Tampilan Reset Password Setelah Konfirmasi ... 52
Gambar 3.26. Flow Fitur Beauty Tips Aplikasi Oemah Herborist ... 53
xi
DAFTAR TABEL
Tabel 1.1. Timeline Pelaksanaan Kerja Magang ... 15 Tabel 3.1. Timeline Kerja Magang ... 23 Tabel 3.2. User dan System Requirements ... 27
