UI DESAIN CMMS

LAPORAN
PRAKTIK KERJA LAPANGAN
PENGEMBANGAN USER INTERFACE APLIKASI

COMPUTERIZED MAINTENANCE MANAGEMENT SYSTEM
(CMMS) PERTAMINA RETAIL
IKA NUR AININA RIZKIKA

4617040005
PROGRAM STUDI TEKNIK MULTIMEDIA DAN DIGITAL

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
DEPOK
2020
HALAMAN PENGESAHAN LAPORAN
PRAKTIK KERJA LAPANGAN
a. Judul : PENGEMBANGAN USER INTERFACE

APLIKASI COMPUTERIZED
MAINTENANCE MANAGEMENT
SYSTEM (CMMS) PERTAMINA RETAIL
b. Penyusun
1) Nama : Ika Nur Ainina Rizkika
2) NIM : 4617040005
c. Program Studi : Teknik Multimedia Digital
d. Jurusan : Teknik Informatika dan Komputer
e. Waktu Pelaksanaan : 18 Agustus – 18 November 2020
f. Tempat Pelaksanaan : Jalan Raya Tebet No. 45 D, Tebet, Jakarta
Selatan, DKI Jakarta, Indonesia
Pembimbing PNJ
(Noorlela Marcheta, S.Kom., M.Kom.)

NIP. 199303022019032022
Mengesahkan,
KPS Teknik Multimedia Digital
(Iwan Sonjaya, S.T., M.T.)

NIP. 197605302008121002
i
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang telah
memberikan rahmat dan karunia-Nya, sehingga laporan Praktik Kerja Lapangan
(PKL) ini dapat diselesaikan dengan tepat waktu. Kegiatan Praktik Kerja Lapangan
(PKL) ini merupakan kurikulum wajib yang harus dilaksanakan oleh mahasiswa
sebagai syarat untuk mencapai gelar Diploma Empat (D4) dan sebagai sarana untuk
mengenalkan mahasiswa pada kondisi nyata yang ada di lapangan.
Kelancaran kegiatan Praktik Kerja Lapangan ini tidak terlepas dari bantuan
berbagai pihak, baik secara langsung maupun tidak. Oleh karena itu, penulis
mengucapkan terima kasih kepada pihak-pihak yang telah membantu :
a. Noorlela Marcheta, S.Kom., M.Kom. selaku dosen pembimbing yang telah

menyediakan waktu, tenaga, dan pikiran untuk mengarahkan penulis dalam
proses penyusunan laporan Praktik Kerja Lapangan.
b. Pihak PT. Berkah Putra Mandala, yang telah memberikan izin dan kebijakan
kepada penulis untuk melaksanakan Praktik Kerja Lapangan.
c. Ibu Alia Saputri, selaku pembimbing industri yang telah mengarahkan
penulis selama melaksanakan Praktik Kerja Lapangan.
d. Orang tua dan keluarga penulis yang telah memberikan bantuan dan
dukungan material dan moral.
e. Teman-teman prodi Teknik Multimedia Digital angkatan 2017 dan rekan
Praktik Kerja Lapangan yang telah banyak membantu penulis dalam
menyelesaikan laporan Praktik Kerja Lapangan ini.
Demikian laporan Praktik Kerja Lapangan ini disusun. Semoga laporan Praktik
Kerja Lapangan ini dapat membawa manfaat bagi perkembangan ilmu
pengetahuan.
Depok, 20 November 2020
Ika Nur Ainina Rizkika
ii
DAFTAR ISI
HALAMAN PENGESAHAN LAPORAN ............................................................ i
KATA PENGANTAR ......................................................................................... ii
DAFTAR ISI ......................................................................................................iii
DAFTAR GAMBAR ........................................................................................... v
DAFTAR TABEL ............................................................................................... vi
DAFTAR LAMPIRAN ...................................................................................... vii
BAB I .................................................................................................................. 1
1.1 Latar Belakang Kegiatan ........................................................................ 1
1.2 Ruang Lingkup Kegiatan ....................................................................... 2
1.3 Waktu dan Tempat Pelaksanaan ............................................................. 2
1.4 Tujuan dan Kegunaan ............................................................................ 2
BAB II ................................................................................................................. 3
2.1 User Interface ........................................................................................ 3
2.2 Guideline ............................................................................................... 4
2.3 Aplikasi Mobile ..................................................................................... 4
2.4 Wireframe .............................................................................................. 5
2.5 Maintenance .......................................................................................... 5
2.6 Adobe XD ............................................................................................. 5
2.7 Adobe Illustrator .................................................................................... 5
2.8 Prinsip Desain ........................................................................................ 5
2.9 Tahapan/Metode Design Thinking.......................................................... 7
BAB III.............................................................................................................. 10
3.1 Unit Kerja PKL .................................................................................... 10
3.2 Uraian Praktik Kerja Lapangan ............................................................ 11
3.3 Pembahasan Hasil PKL ........................................................................ 15
iii
3.3.1 Emphatize ..................................................................................... 15
3.3.2 Define ........................................................................................... 16
3.3.3 Ideate ........................................................................................... 17
3.3.4 Prototype ...................................................................................... 22
3.3.5 Test ............................................................................................... 30
3.4 Identifikasi Kendala yang Dihadapi ..................................................... 31
BAB IV ............................................................................................................. 33
4.1 Kesimpulan .............................................................................................. 33
4.2 Saran ........................................................................................................ 33
DAFTAR PUSTAKA ........................................................................................ 34
iv
DAFTAR GAMBAR
Gambar 3.1 Struktur Organisasi PT. Berkah Putra Mandala ............................... 11

Gambar 3.2 Mock up dari halaman splash screen ............................................... 23
Gambar 3.3 Mock up dari halaman login ............................................................ 23
Gambar 3.4 Mock up dari halaman home ........................................................... 24
Gambar 3.5 Mock up dari halaman preventive maintenance ............................... 25
Gambar 3.6 Mock up dari halaman preventive maintenance ............................... 26
Gambar 3.7 Mock up dari halaman create work order ........................................ 27
Gambar 3.8 Mock up dari halaman scheduled maintenance ................................ 28
Gambar 3.9 Mock up dari halaman in progress................................................... 29
v
DAFTAR TABEL
Tabel 3.1 User requirement ................................................................................ 15

Tabel 3.2 Referensi dari desain UI aplikasi mobile ............................................. 16
Tabel 3.3 Wireframe dari aplikasi CMMS .......................................................... 17
Tabel 3.4 Material collecting dari desain UI ....................................................... 20
Tabel 3.5 Alpha Testing 1 .................................................................................. 30
Tabel 3.6 Alpha Testing 2 .................................................................................. 31
vi
DAFTAR LAMPIRAN
Lampiran 1 Surat Keterangan PKL....................................................................L-1
Lampiran 2 Log Book Perusahaan.....................................................................L-2
Lampiran 3 User Requirement...........................................................................L-3
Lampiran 4 Gambaran Umum Perusahaan ........................................................L-4
Lampiran 5 Dokumentasi PKL ..........................................................................L-5
vii
BAB I
PENDAHULUAN
1.1 Latar Belakang Kegiatan

Seiring dengan kemajuan zaman, maka semakin berkembang juga teknologi dalam
menyampaikan informasi dan data. Hal ini dapat dibuktikan dengan banyaknya
gagasan dan inovasi yang telah dibuat, salah satunya adalah user interface (UI). UI
atau tampilan antarmuka pengguna merupakan bagian yang penting dalam sebuah
sistem atau aplikasi (El Ghiffary, Susanto, & Herdiyanti, 2018).
PT. Pertamina Retail merupakan anak perusahaan dari PT. Pertamina (Persero),
yang bergerak di bidang usaha retail produk Pertamina, khususnya bisnis ritel bahan
bakar yang tersedia di Stasiun Pengisian Bahan Bakar Umum (SPBU) di Indonesia.
Untuk mengembangkan dan melakukan maintenance sistem dan device yang
mendukung kelancaran bisnisnya, maka PT. Pertamina Retail ini membutuhkan
sebuah aplikasi.
Aplikasi Computerized Maintenance Management System (CMMS) Pertamina

Retail merupakan sebuah sistem yang berguna untuk melakukan maintenance
sistem internal SPBU yang dikelola oleh PT. Pertamina Retail. Dalam hal ini
Pertamina Retail membutuhkan consultant dalam pembuatan aplikasi mobile
Computerized Maintenance Management System (CMMS) untuk memantau
maintenance SPBU yang dikelola oleh Pertamina Retail.
PT. Berkah Putra Mandala dipilih oleh PT. Pertamina Retail untuk membuat dan
mengembangkan aplikasi mobile (CMMS). Pada tahapan pembuatan aplikasi
mobile tersebut dibutuhkan user interface (UI) sebagai gambaran awal dari aplikasi
mobile CMMS. Hal ini bertujuan untuk memudahkan programmer dalam
mengembangkan aplikasi mobile tersebut. Selain itu, UI ini juga bertujuan sebagai
gambaran bagi client tentang aplikasi mobile CMMS. Karena itu dalam penulisan
laporan Praktik Kerja Lapangan ini, penulis membahas bagaimana pembuatan User
Interface aplikasi Computerized Maintenance Management System (CMMS)
Pertamina Retail.
1
2
1.2 Ruang Lingkup Kegiatan

Ruang lingkup dari pelaksanaan Praktik Kerja Lapangan ini dilakukan di PT.
Berkah Putra Mandala. Adapun ruang lingkup dalam laporan kegiatan Praktik Kerja
Lapangan sebagai Graphic Designer di PT. Berkah Putra Mandala ini sebagai
berikut:
a. Mengidentifikasi dan membuat Guideline desain serta mendiskusikan hal-

hal yang dibutuhkan client untuk kebutuhan aplikasinya.
b. Material collecting asset yang akan digunakan pada UI aplikasi mobile.
c. Membuat prototype dari pengembangan desain UI/UX yang sudah dibuat.
Selain pekerjaan utama di atas, terdapat beberapa job-request lain yang berasal dari
produk lainnya yang akan dideskripsikan di bagian Uraian Praktik Kerja Lapangan.
1.3 Waktu dan Tempat Pelaksanaan

Waktu dan tempat secara keseluruhan pelaksanaan Praktik Kerja Lapangan adalah
sebagai berikut:
a. Waktu Pelaksanaan : 18 Agustus s.d 18 November 2020
b. Nama Perusahaan : PT. Berkah Putra Mandala
c. Alamat Perusahaan : Jalan Raya Tebet No. 45 D, Tebet, Jakarta

Selatan, DKI Jakarta, Indonesia
1.4 Tujuan dan Kegunaan

Tujuan dari Praktik Kerja Lapangan ini adalah mengembangan user interface
aplikasi Computerized Maintenance Management System (CMMS) Pertamina
Retail.
Adapun kegunaan dari aplikasi mobile Computerized Maintenance Management

System (CMMS) Pertamina Retail ini adalah untuk memantau, pemeliharaan dan
melakukan manajemen terhadap sistem dan alat-alat yang ada di setiap SPBU.
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

BAB II
TINJAUAN PUSTAKA
2.1 User Interface

User Interface atau tampilan antarmuka pengguna merupakan bagian yang penting
dalam sebuah sistem atau aplikasi. UI adalah bagian dari sistem yang digunakan
untuk berinteraksi langsung dari pengguna. Oleh karena itu, desain dari UI menjadi
salah satu daya tarik yang berpengaruh, terutama bagi sebuah aplikasi mobile (El
Ghiffary, Susanto, & Herdiyanti, 2018). Panduan untuk menyusun sebuah desain
aplikasi yang mudah digunakan dengan membaginya ke dalam beberapa komponen
yang berpengaruh sebagai berikut:
a. Consistency : Konsistensi dari tampilan antarmuka
pengguna.
b. Hierarchy : Penyusunan hirarki kepentingan dari obyek-

obyek yang terdapat di dalam aplikasi.
c. Personality : Kesan pertama yang terlihat pada aplikasi

yang menunjukkan ciri khas dari aplikasi
tersebut.
d. Layout : Tata letak dari elemen-elemen di dalam

sebuah aplikasi.
e. Type : Tipografi yang digunakan di dalam sebuah

aplikasi.
f. Color : Penggunaan warna yang tepat digunakan pada

sebuah aplikasi.
g. Imagery : Penggunaan gambar, icon, dan sejenisnya

untuk menyampaikan sebuah informasi di
dalam aplikasi.
h. Control and Affordances : Elemen dari antarmuka pengguna yang dapat

digunakan orang untuk berinteraksi dengan
sistem melalui sebuah layar.
3
4
2.2 Guideline
Guideline berfungsi untuk menciptakan bahasa visual untuk para pengguna yang
memadukan prinsip desain yang baik dengan teknologi dan ilmu pengetahuan
(Anggitama, Tolle, & Az-Zahra, 2018).
2.3 Aplikasi Mobile

Aplikasi mobile merupakan aplikasi yang dapat digunakan walaupun pengguna
berpindah dengan mudah dari satu tempat ketempat lain lain tanpa terjadi
pemutusan atau terputusnya komunikasi. Aplikasi ini dapat diakses melalui
perangkat nirkabel seperti pager, telepon seluler dan PDA (Rivaldi, 2016).
Karakteristik perangkat mobile :
a. Ukuran yang Kecil

Perangkat mobile memiliki ukuran yang kecil. Konsumen menginginkan
perangkat yang terkecil untuk kenyamanan dan mobilitas mereka.
b. Memory yang Terbatas
Perangkat mobile juga memiliki memory yang kecil, yaitu primary (RAM)
dan secondary (disk).
c. Daya Proses yang Terbatas
Sistem mobile tidaklah setangguh rekan mereka yaitu desktop.
d. Mengkonsumsi Daya yang Rendah
Perangkat mobile menghabiskan sedikit daya dibandingkan dengan mesin
desktop
e. Kuat dan Dapat Diandalkan
Karena perangkat mobile selalu dibawa kemana saja, mereka harus cukup
kuat untuk menghadapi benturan-benturan, gerakan, dan sesekali tetesan-
tetesan air.
f. Konektivitas yang Terbatas
Perangkat mobile memiliki bandwith rendah, beberapa dari mereka bahkan
tidak tersambung.
g. Masa Hidup yang Pendek
Perangkat-perangkat konsumen ini menyala dalam hitungan detik
kebanyakan dari mereka selalu menyala.

5
2.4 Wireframe
Wireframe adalah kerangka dasar atau blueprint dari suatu halaman aplikasi yang
akan dibangun oleh pengembang aplikasi. Secara garis besar di dalam wireframe
ini kita menempatkan elemen-elemen penting dari halaman aplikasi tersebut pada
posisinya masing-masing seperti banner, body content, menu link, kolom, footer
maupun fitur-fitur lainnya yang ada dalam aplikasi nantinya. Secara visual tampilan
dari wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dari
masing-masing elemen dari layout halaman aplikasi (Anggitama, Tolle, & Az-
Zahra, 2018).
2.5 Maintenance
Maintenance (pemeliharan) adalah seluruh aktivitas yang dilakukan untuk
merawat, menjaga, dan memperbaiki dengan tujuan agar peralatan/mesin dapat
digunakan pada kondisi yang sudah ditetapkan (Habibi & Wijaya, 2020).
2.6 Adobe XD
Adobe XD adalah alat desain berbasis vektor untuk membuat desain situs website
dan aplikasi. Alat ini dikembangkan dan diterbitkan oleh Inc untuk pengguna Mac
dan Windows (Feradhita, 2020).
2.7 Adobe Illustrator

Adobe Illustrator adalah aplikasi untuk membuat desain grafis berbasis vektor.
Dengan illustrasi anda dapat membuat desain-desain yang menakjubkan, di dalam
Illustrator terdapat fasilitas-fasilitas untuk mendesain secara profesional
(Novitasari, Djahir, & Fatimah, 2015).
2.8 Prinsip Desain

Dalam pembuatan suatu media promosi, sebuah media harus memiliki unsur serta
prinsip komunikasi visual dalam perancangannya seperti kesatuan (unity),
keseimbangan (balance), proporsi (proportion), irama (rhythm), dan dominasi

6
(domination) (Yulius, 2016). Adapun fungsi dan tujuan penerapan prinsip desain
komunikasi visual pada media promosi kesehatan antara lain :
a. Kesatuan (Unity)
Kesatuan merupakan salah satu prinsip dasar tata rupa yang sangat penting.
Tidak adanya kesatuan dalam sebuah media promosi kesehatan akan
membuat media tersebut terlihat cerai-berai, yang mengakibatkan media
tersebut tidak nyaman dipandang. Prinsip ini sesungguhnya adalah prinsip
hubungan. Jika salah satu atau beberapa unsur rupa mempunyai hubungan
(warna, raut, arah, dll), maka kesatuan telah tercapai.
b. Keseimbangan (Balance)
Perancangan media promosi kesehatan harus memiliki keseimbangan agar

memiliki kenyamanan saat dipandang dan tidak membuat suatu perasaan
terganggu. Dalam bidang senirupa dan desain keseimbangan ini tidak dapat
diukur tapi dapat dirasakan, yaitu suatu keadaan dimana semua bagian
dalam sebuah karya tidak ada yang saling membebani satu dengan yang lain.
c. Proporsi (Proportion)
Proporsi termasuk prinsip dasar tata rupa untuk memperoleh keserasian.

Untuk memperoleh keserasian dalam sebuah media promosi kesehatan
diperlukan pembanding yang tepat. Pada dasarnya proporsi adalah
perbandingan matematis dalam sebuah bidang. Dalam perancangan suatu
media promosi kesehatan, proporsi ini dapat kita lihat dalam perbandingan
ukuran kertas dan layout pada bidang halaman.
d. Irama (Rhythm)
Irama adalah pengulangan gerak yang teratur dan terus menerus. Dalam
bentuk-bentuk alam bisa kita ambil contoh pengulangan gerak pada ombak
laut, barisan semut, gerak dedaunan, dan lain-lain. Prinsip irama
sesungguhnya adalah hubungan pengulangan dari bentuk-bentuk unsur
rupa.

7
e. Dominasi (Domination)
Dominasi merupakan salah satu prinsip dasar tatarupa yang harus ada dalam
karya seni dan desain. Dominasi berasal dari kata Dominance yang berarti
keunggulan. Sifat unggul dan istimewa ini akan menjadikan suatu unsur
sebagai penarik dan pusat perhatian. Dalam dunia desain, dominasi sering
juga disebut center of interest, focal point dan eye catcher. Dominasi dalam
media promosi kesehatan mempunyai beberapa tujuan yaitu untuk menarik
perhatian, menghilangkan kebosanan dan untuk memecah keberaturan.
2.9 Tahapan/Metode Design Thinking
Design Thinking adalah proses berulang dimana kita berusaha memahami

pengguna, menantang asumsi, dan mendefinisikan kembali masalah dalam upaya
mengidentifikasi strategi dan solusi alternatif yang mungkin tidak langsung terlihat
dengan tingkat awal pemahaman kita. Pada saat yang sama, design thinking
menyediakan pendekatan berbasis solusi untuk menyelesaikan masalah. Ini adalah
cara berpikir dan bekerja serta kumpulan metode langsung (Swarnadwitya, 2020).
Tahapan dalam proses design thinking :
a. Empathise
Tahap pertama dari proses design thinking adalah untuk mendapatkan

pemahaman empatik tentang masalah yang dicoba untuk diselesaikan. Ini
melibatkan para ahli konsultasi untuk mencari tahu lebih banyak tentang
bidang yang menjadi perhatian melalui pengamatan, keterlibatan, dan
empati dengan orang-orang untuk memahami pengalaman dan motivasi
mereka sehingga memperoleh pemahaman pribadi yang lebih jelas tentang
masalah yang terlibat. Empati sangat penting untuk proses desain yang
berpusat pada manusia seperti Design Thinking, dan empati memungkinkan
pemikir desain untuk mengesampingkan asumsi mereka sendiri tentang
dunia untuk mendapatkan wawasan tentang pengguna dan kebutuhan
mereka.

8
b. Define
Selama tahap define, kita mengumpulkan informasi yang telah kita buat dan
kumpulkan selama tahap empathise. Disinilah kita akan menganalisis
pengamatan dan mensistesisnya untuk menentukan masalah inti yang telah
diidentifikasi. Kita harus berusaha menidentifikasi masalah sebagai
pernyataan masalah dengan cara yang berpusat pada manusia.
c. Ideate
Selama tahap ketiga dari proses design thinking, desainer siap untuk mulai
menghasilkan ide. Kita telah tumbuh untuk memahami pengguna dan
kebutuhan mereka di tahap empathize, dan kita telah menganalisis dan
mensistesis pengamatan Anda di tahap define, dan berakhir dengan
pernyataan masalah yang berpusat pada manusia. Dengan latar belakang
yang kuat, kita dan anggota tim dapat mulai “berpikir di luar kotak” untuk
mengidentifikasi solusi baru untuk pernyataan masalah yang dibuat, dan
kita dapat mulai mencari cara alternatif untuk melihat masalah.
d. Prototype
Tim desain akan menghasilkan sejumlah versi produk yang murah dan
diperkecil atau fitur spesifik yang ditemukan dalam produk, sehingga
mereka dapat menyelidiki solusi masalah yang dihasilkan pada tahap
sebelumnya. prototype dapat dibagikan dan diuji dalam tim itu sendiri, di
departemen lain, atau pada sekelompok kecil orang diluar tim desain. Ini
adalah fase eksperimental, dan tujuannya adalah untuk mengidentifikasi
solusi terbaik untuk setiap masalah yang diidentifikasi selama tiga tahap
pertama. Solusi diimplementasikan dalam prototype, dan satu per satu,
mereka diselidiki dan diterima, diperbaiki dan diperiksa ulang, dan ditolak
berdasarkan pengalaman pengguna.
e. Test
Desainer menguji produk lengkap secara ketat menggunakan solusi terbaik
yang diidentifikasi selama fase prototyping. Ini adalah tahap akhir dari
design thinking, tetapi dalam proses berulang, hasil yang dihasilkan selama

9
fase testing sering digunakan untuk mendefinikan kembali satu atau lebih
masalah dan menginformasi pemahaman pengguna, kondisi penggunaan,
bagaimana orang berpikir, berperilaku, dan merasakan, dan berempati.
Bahkan selama fase ini, perubahan dan penyempurnaan dilakukan untuk
menyingkirkan solusi masalah dan memperoleh pemahaman sedalam
mungkin terhadap produk dan penggunanya.

BAB III
HASIL PEMBAHASAN PKL
3.1 Unit Kerja PKL

Praktik Kerja Lapangan ini dilaksanakan di PT. Berkah Putra Mandala pada bagian
kreatif sosial media. Selama kegiatan PKL ini berlangsung, tugas yang diberikan
meliputi pembuatan user interface, dan desain untuk akun sosial media. PT. Berkah
Putra Mandala (“BPM“) didirikan pada tahun 2016. Dengan pendiri yang memiliki
pengalaman yang meluas dan kegigihan dalam mengatasi berbagai kendala, Berkah
Putra Mandala bertanggung jawab kepada klien dengan keyakinanan dan konsisten
bergerak maju dalam menjaga kualitas pelayanan perusahaan.
Pada skala yang besar, BPM terlibat dalam lini bisnis penyediaan teknologi dan
konstruksi efisiensi energi. BPM memfokuskan keahlian dan layanan pemasok dan
kontraktor serta sistem yang terintegrasi ke sektor strategi listrik dan
telekomunikasi. Proses bisnis dikelola dengan mengoptimalkan pengembangan dan
pemanfaatan sumber daya perusahaan kami adalah cara yang sehat, BPM sebisa
mungkin bersikap profesional agar tetap menjaga kepercayaan dari para klien.
Selain itu, BPM juga memiliki satu bagian yang bergerak dalam bidang kreatif
berbasis media sosial yang dinamai Rafid Poppy Creators (RPC). Dimana RPC ini
merupakan bagian dari BPM yang bertugas untuk mengelola beberapa akun
Instagram, fungsi dari RPC sendiri sebenarnya untuk menarik klien untuk
melakukan kerjasama dengan PT. BPM itu sendiri. Karena saat ini memasuki era
digital, RPC berusaha untuk terus menarik minat orang-orang diluar sana dengan
membuat akun Instagram seperti @Tech.lads, @Bride.Channel,
@The.MovieChannel, @TheHijrah.Team, @Taaruf.Channel,
@TheBeaute.Channel, @TheJokes.Channel, dan @Kickoff.bola untuk mencakup
seluruh target pasar yang ada.
Di RPC seluruh akun yang ada disertakan kontak seperti email atau nomor telpon
yang gunanya untuk mempermudah calon klien untuk menghubungi jika ingin
mengadakan kerjasama karena akun tersebut juga ternyata digunakan sebagai
portofolio agar calon klien makin percaya dengan kinerja dari RPC.
10
11
Gambar 3.1 Struktur Organisasi PT. Berkah Putra Mandala
Gambar 3.1 merupakan struktur organisasi dari PT. Berkah Putra Mandala. Pada
saat melaksanakan PKL, menulis bekerja dibawah divisi Digital Marketing.
3.2 Uraian Praktik Kerja Lapangan

Praktik Kerja Lapangan ini dilaksanakan selama kurang lebih 3 bulan, dimulai pada
tanggal 18 Agustus 2020 sampai dengan 18 November 2020. Pada minggu pertama
Praktik Kerja Lapangan, penulis berkenalan dengan pihak PT. Berkah Putra
Mandala dan teman-teman Praktik Kerja Lapangan lainnya. Setelah itu penulis
diberi pengarahan atau briefing oleh pembimbing perusahaan mengenai design
guideline dari konten Instagram yang dikelola oleh RPC. Selain itu pada minggu
pertama juga penulis diberi tugas untuk membuat logo untuk akun beaute.channel.
Selain itu, penulis juga melakukan brainstorming mengenai UI dari aplikasi
CMMS.
Pada minggu kedua Praktik Kerja Lapangan, penulis mengerjakan konten poster
digital untuk akun Instagram bride.channel mengenai “Ide Pernikahan selama
Pandemi”, “Tips Usir Cemas sebelum Pernikahan”, “Ide Souvenir Pernikahan”, dan

12
“Pernikahan Ala Exo L”; akun Instagram tech.lads mengenai “Profesi-profesi yang
Ada di Era Revolusi Industri 4.0” , “Programmer Pertama di Dunia : Ada
Lovelace”, “Aplikasi yang Memudahkan WFH”, dan “Programmer Disabilitas :
HastuWijayasri”; akun Instagram thehijrah.team mengenai “Kenapa Harus
Berhijrah”, “Hijrah I’tiqadiyah”, “Amalan pada Malam Hari”, dan “Quotes
Potongan Hadist”.
Pada minggu ketiga Praktik Kerja Lapangan, penulis mengerjakan konten poster
digital untuk akun instagram bride.channel mengenai “Inspirasi seserahan”,
“Liputan engagement Gina Meidina”, “Liputan Pernikahan Chef Marinka”, dan
pengeditan video liputan lamaran “Nikita Willy”; akun Instagram tech.lads
mengenai “Transkrip Audio”, “Fitur Google Chrome”, “Kyoko Shimada”, “Skill
yang Dicari di Tahun 2020”, dan segmen “TechLads Says”; akun Instagram
thehijrah.team mengenai “Niat Puasa Ayyamul Bidh”, dan “8 Pintu Rezeki”; dan
melakukan brainstorming, user flow, wireframe dan konsep UI/UX dari Aplikasi
CMMS Pertamina Retail.
Pada minggu keempat Praktik Kerja Lapangan, penulis mengerjakan konten poster
digital untuk akun Instagram bride.channel mengenai “Pernikahan Drive Thru di
Bekasi”, “Inspirasi Kotak Cincin”, “Pernikahan Tea Pai Ceremony”, “Inspirasi
Kebaya dari Robby Dion”, dan “B&W Photoshoot Concept”; akun Instagram
tech.lads mengenai “Segmen ‘Tech Lads Says’”, “Tren Web Design 2020”,
“Perbedaan Warna pada Helm Proyek”, “Kecerdasan Buatan”, dan segmen
“TechLads Says”; akun Instagram thehijrah.team mengenai “Do’a untuk
Mendapatkan Jodoh”, “Semua Butuh Proses”, “Percayalah”, “Jalan Wanita untuk
Masuk Surga”; dan pembuatan desain UI/UX Aplikasi CMMS Pertamina Retail.
Pada minggu kelima Praktik Kerja Lapangan, penulis mengerjakan revisi desain
dari UI/UX Aplikasi CMMS Pertamina Retail, pembuatan konten poster digital
untuk akun Instagram bride.channel mengenai “Liputan Pernikahan Ardina
Putri dan Dhino Haryo”, “Foto-Foto Pernikahan Chef Marinka”, “Liputan
Pernikahan Inge Amelia Nasution”, “Foto Pre-Wedding Tara Basro dan Daniel
Adnan”, dan “Foto Pre-Wedding Atta Halilintar dan Aurel Hermansyah”; akun
Instagram tech.lads mengenai “Kebiasaan Buruk yang Dapat Merusak Laptop”,

13
“Penerapan IoT pada Berbagai Bidang”, “Macam-Macam Bahasa Pemrograman”,

“Profesi Data Scientist”, dan “Aplikasi Lowongan Pekerjaan”; akun Instagram
thehijrah.team mengenai “Sifat Wanita”, “Kata-Kata Mutiara”, “Tips Mendapatkan
Rezeki”, dan “Ikhlas”
Pada minggu keenam Praktik Kerja Lapangan, penulis melakukan fiksasi desain
setelah revisi pertama untuk desain UI/UX Aplikasi CMMS Pertamina Retail dan
membuat prototype dari desain UI/UX Aplikasi CMMS Pertamina Retail. Selain
itu penulis juga mengerjakan konten poster digital untuk akun Instagram
bride.channel mengenai “Foto Pre-Wedding Karina Nadila”, “Inspirasi Dekorasi”,
“Liputan Pertunangan Vinnie Adjie”, “Foto Pre-Wedding Reza Arap dan Wendy
Walters”, dan “Inspirasi Gaun Pernikahan”; akun Instagram tech.lads mengenai
“Cara Menghasilkan Uang sebagai Programmer”, “Segmen ‘Tech Lads Says’”,
“Karakteristik Gaya Arsitektur”, dan “Tren Arsitektur”; dan akun thehijrah.team
mengenai “Ikhlas”, “Kata-Kata Mutiara”, dan “Rumah di Surga”.
Pada minggu ketujuh Praktik Kerja Lapangan, penulis melakukan fiksasi desain dan
prototype UI/UX Aplikasi CMMS Pertamina Retail. Selain itu penulis juga
mengerjakan konten poster digital untuk akun Instagram bride.channel mengenai
“Akad #DirumahAja”, dan “Inspirasi Kebaya Kutubaru”; akun Instagram tech.lads
mengenai “Meme Arsitech”, “Segmen ‘Tech Lads Says’”, dan “Skill Arsitek”; dan
akun Instagram thehijrah.team mengenai “Doa Pagi”, “Subuh Tepat Waktu”, dan
“Sunnah di Hari Jumat”.
Pada minggu kedelapan Praktik Kerja Lapangan, penulis mengerjakan konten

poster digital untuk akun Instagram bride.channel mengenai “Inspirasi Gaun Putih
Ala Peggy Hartanto”, “Inspirasi Outdoor Wedding”, “Konsep Pernikahan Unik”,
dan editing video mengenai “Inspirasi Pernikahan dengan Konsep India”; akun
Instagram tech.lads mengenai “Backup File”, dan “Rolling Sphere”; dan akun
Instagram thehijrah.team mengenai “Kata-Kata Mutiara”, dan “Ikhlas”.
Pada minggu kesembilan Praktik Kerja Lapangan, penulis mengerjakan konten

poster digital mengenai “Inspirasi Foto Sunset Pre-Wedding ”, “Inspirasi Foto Pre-
Wedding di Dalam Ruangan”, “Liputan Pertunangan Imaz Fitriawati dan Sam
Diaz”, “Liputan Pernikahan Nikita Willy”; akun Instagram tech.lads mengenai

14
“Warna dan Fungsi Kabel”, “Segmen ‘Tech Lads Says’”, “Aplikasi Edit Foto”, dan
“Base Transceiver Station”; akun Instagram thehijrah.team mengenai
“Alhamdulillah”, dan “Do’a Nabi di Pagi Hari”.
Pada minggu kesepuluh Praktik Kerja Lapangan, penulis mengerjakan konten

poster digital untuk akun Instagram bride.channel mengenai “Foto Pre-Wedding
Konsep Pandemi”, “Inspirasi Intimate Wedding”, dan “Inspirasi Outdoor
Wedding”; akun Instagram tech.lads mengenai “Jenis-Jenis Baut”, “Fitur Youtube”,
“Fitur Instagram”, dan “Jurusan Teknik Pangan”; akun Instagram thehijrah.team
mengenai “Kata-kata Mutiara”, “Hijahlah”, “Semua Butuh Proses”, dan “Laki-laki
Soleh”.
Pada minggu kesebelas Praktik Kerja Lapangan, penulis mengerjakan konten poster
digital untuk akun Instagram bride.channel mengenai “Foto Pre-Wedding Konsep
Casual”, “Bulang Mandailing”, “Liputan Pernikahan Kevin Aprilio” dan “Inspirasi
Gaun”, akun Instagram tech.lads mengenai “Segmen ‘Tech Lads Says’”, “Rumus
Excel”, “ANC”, dan “Fitur Baru Gmaps”, dan editing video “Tech Net”; akun
Instagram thehijrah.team mengenai “Karena Allah”, “Tips Jika Lupa”,
“Percayalah”, dan “10 Waktu Mustajabnya Do’a”
Pada minggu keduabelas Praktik Kerja Lapangan, penulis mengerjakan editing

video mengenai inspirasi Make Up ala Betawi, video pernikahan Sherina Munaf,
video “Tech Net” untuk akun Instagram bride.channel dan tech.lads. Selain itu
penulis juga mengerjakan konten poster digital untuk akun Instagram tech.lads
mengenai fitur dark mode pada Facebook; akun Instagram thehijrah.team mengenai
“Kata-kata Mutiara”, “Aku, Ibadahku, dan Aibku”, dan “Sempatkan Sholat
Dhuha”.
Pada minggu ketigabelas Praktik Kerja Lapangan, penulis mengerjakan editing

video mengenai “Inspirasi Resepsi Pernikahan”, “Software Engineer” untuk akun
bride.channel dan tech.lads. Selain itu penulis mengerjakan konten poster digital
untuk akun tech.lads mengenai “Segmen ‘Tech Lads Says’”, dan “Line Code
Terbesar”; akun Instagram thehijrah.team mengenai “Kata-kata Mutiara”, dan
“Do’a Dalam Diam”.

15
Pada minggu keempatbelas Praktik Kerja Lapangan, penulis mengerjakan editing

video mengenai “Resepsi Pernikahan”, “Tips Agar Terlihat Slim dengan Gaun
Pernikahan” untuk akun bride.channel. Selain itu penulis juga mengerjakan konten
poster digital untuk akun Instagram tech.lads mengenai “Segmen ‘Tech Lads
Says’”, dan “Shannon Walker”; akun Instagram thehijrah.team mengenai
“Perempuan”, dan “Kata-kata Mutiara”.
3.3 Pembahasan Hasil PKL

Pembahasan dari hasil PKL yang akan dibahas adalah user interface yang dibuat
nantinya akan diimplementasikan ke dalam aplikasi mobile Computerized
Maintenance Management System (CMMS) Pertamina Retail. User interface ini
berfungsi sebagai media informasi dan penghubung dari user interface designer
kepada programmer dan client. Dalam proses pengembangan UI ini, penulis
mengikuti tahapan dari design thinking.
3.3.1 Emphatize
Pada tahapan ini, penulis berfokus terhadap user requirement dari client. Tahap ini
dibutuhkan karena desainer harus mengerti kebutuhan dan permasalahan dari client
dalam penggunaan dari sebuah aplikasi.
3.3.1.1 User Requirement
Pihak client, yaitu PT. Pertamina Retail membutuhkan sebuah aplikasi yang mudah
digunakan oleh staff dan teknisi dari Pertamina dalam pemeliharaan dan perawatan
sistem internal SPBU. User requirement dari UI aplikasi CMMS adalah sebagai
berikut
Tabel 3.1 User requirement
No User Requirement
1 Pembuatan layout yang easy to use
2 Pembuatan icon yang seusai dan user friendly
3 Penggunaan warna yang tepat sesuai dengan warna pada logo PT.
Pertamina (pilih salah satu dari merah, biru, hijau)
4 Pembuatan user flow yang lebih sederhana dan user friendly

16
3.3.2 Define
Pada tahap ini dilakukan identifikasi berdasarkan informasi yang diperoleh dari
tahap emphatize. Lalu pada tahap define ini juga penulis melakukan riset mengenai
tren dan referensi mengenai tampilan desain UI.
Tabel 3.2 Referensi dari desain UI aplikasi mobile
No Referensi Inspirasi
1 Penggunaan warna biru

dan putih
2 Penggunaan style button

dan style icon

17
3 Desain kalender
3.3.3 Ideate
Pada tahap ideate atau ideasi ini berdasarkan permasalahan yang ditemukan dari
tahap emphatize dan define, maka penulis mendapatkan sebuah ide dan konsep yang
dapat dikembangkan. Proses yang dilakukan pada tahap ini yaitu pembuatan
wireframe dan material collecting asset.
3.3.3.1 Wireframe
Wireframe adalah blueprint dari suatu halaman aplikasi yang akan dibangun oleh
pengembang aplikasi. Wireframe ini juga digunakan sebagai acuan agar dalam
proses pembuatan desain UI lebih mudah.
Tabel 3.3 Wireframe dari aplikasi CMMS
No. Gambar Keterangan
1 Sketsa wireframe
disamping merupakan
halaman dari splash screen
yang menjadi halaman
pertama yang berisi nama
aplikasi dan ditampilkan
hanya sebentar (sekitar 2
detik).

18
2 Sketsa wireframe
disamping merupakan
halaman dari login page
yang menampilkan form
untuk mengisikan username
dan password untuk bisa
login ke aplikasi CMMS ini.
3 Sketsa wireframe
disamping merupakan
halaman dari home page
yang berisi nama user, nama
SPBU, logo perusahaan,
slider “Menu”, dan button
berupa menu-menu dari
fitur CMMS yaitu
“Preventive Maintenance”,
“Create Work Order”,
“Scheduled Maintenance”,
dan “In Progress”. Selain
itu pada home page ini juga
terdapat fitur “News Info”
yang berisi artikel dari
berita terbaru mengenai PT.
Pertamina Retail.
Pada bagian bawah
merupakan tampilan sketsa
wireframe home page jika
slider Menu di-klik.

19
4 Sketsa wireframe
disamping merupakan
halaman dari fitur
Preventive Maintenance
yang berisi tanggal dari
maintenance, dan button
dari tiap kategori. Lalu pada
gambar di bawah terdapat
sketsa wireframe jika salah
satu kategori tersebut di-
klik dan terdapat dropdown
menu jika salah satu sub
kategori di-klik.
5 Sketsa wireframe
disamping merupakan
halaman dari fitur In
Progress. Pada page In
Progress berisi 3 button
berupa status dari
maintenance, yaitu
“disetujui”, “proses
persetujuan”, dan
“pekerjaan selesai”. Lalu
pada gambar di bawah
terdapat sketsa wireframe
jika salah satu status di-klik
maka akan muncul
dropdown menu berupa list
pekerjaan yang ada di status
tersebut.

20
6 Sketsa wireframe
disamping merupakan
halaman dari fitur
Scheduled Maintenance
yang berisi 2 button
mengenai status dari
scheduled maintenance.
Pada bagian pojok bawah
terdapat button “+” yang
berfungsi untuk
menambahkan scheduled
maintenance.
3.3.3.2 Material Collecting Asset

Pada tahap ini, pengumpulan materi dilakukan dengan membuat mencari icon yang
sesuai dengan kebutuhan untuk desain UI aplikasi CMMS ini. Proses pembuatan
asset dilakukan dengan aplikasi Adobe Illustrator CC 2019 karena aplikasi tersebut
tepat untuk pengolahan vector.
Tabel 3.4 Material collecting dari desain UI
No. Material Format Sumber
1 .png PT. Pertamina

Retail
2 .png Creative Team

PT. Berkah Putra
Mandala
3 .png Karya Penulis

21

22
4 .jpg Pexels.com
3.3.4 Prototype
Dalam tahap prototype ini mulai dilakukan pembuatan desain UI aplikasi CMMS
berdasarkan pada sketsa wireframe yang sudah dibuat. Pada tahap ini semua asset
dimasukkan dan disusun ke dalam desain UI. Kegiatan desain UI dilakukan dengan
bantuan aplikasi Adobe XD CC 2020, karena aplikasi Adobe XD CC 2020
merupakan aplikasi yang diperuntukan untuk membuat desain UI. Selain itu
aplikasi Adobe XD CC 2020 menyediakan fitur untuk membuat prototype dari
desain tersebut.
3.3.4.1 Mock Up
Mock up adalah media visual yang digunakan untuk melihat preview sebuah konsep
desain yang kemudian diberikan efek visual sehingga hasil gambar terlihat
menyerupai wujud yang sebenarnya. Mock up yang dibuat disesuaikan dengan
wireframe yang sudah ada dalam tahap ideate sehingga mock up tersebut sudah
memuat apa yang menjadi user requirement dari client.

23
Gambar 3.2 Mock up dari halaman splash screen
Pada gambar 3.2 merupakan tampilan dari Splash Screen yang menampilkan nama
aplikasi.
Gambar 3.3 Mock up dari halaman login
Pada gambar 3.3 merupakan tampilan dari Login Page yang menampilkan Login
Form untuk bisa masuk ke dalam aplikasi. Login Form tersebut terdiri dari
Username dan Password, dan terdapat button Login untuk bisa melanjutkan proses
login pada aplikasi.

24
Gambar 3.4 Mock up dari halaman home
Pada gambar 3.4 merupakan tampilan dari Home Page yang akan muncul jika
pengguna sudah berhasil login dari Login Page. Pada halaman ini terdiri dari nama
pengguna, nama SPBU dimana pengguna bertugas, foto profil dari pengguna.
Selain itu terdapat button yang akan menghubungkan pengguna ke fitur-fitur dari
aplikasi CMMS tersebut dan terdapat fitur News Info yang berisi button yang akan
menghubungkan pengguna ke website dimana artikel berita tersebut
dipublikasikan.

25
Gambar 3.5 Mock up dari halaman preventive maintenance
Pada gambar 3.5 merupakan tampilan dari Preventive Maintenance Page. Fungsi
dari page ini adalah membuat list dari pemeliharaan device secara berkala. Pada
page ini terdapat kalender sebagai timeline dalam melakukan preventive
maintenance. Selain itu, pada page ini juga terdapat button yang berisi kategori-
kategori bidang untuk melakukan preventive maintenance. Pada mock up di sebelah
kanan merupakan tampilan jika tombol panah yang ada di bawah kalender di-klik.

26
Gambar 3.6 Mock up dari halaman preventive maintenance
Pada gambar 3.6 merupakan tampilan dari page Preventive Maintenance. Jika salah
satu sub-menu di-klik, maka akan muncul dropdown menu berupa device yang
memerlukan tindakan preventive maintenance.

27
Gambar 3.7 Mock up dari halaman create work order
Pada gambar 3.7 merupakan tampilan dari page Create Work Order. Page ini
berfungsi untuk membuat pekerjaan pemeliharaan dengan urgensi yang tinggi. Pada
page ini terdapat tiga kategori. Tiap kategori jika di-klik akan muncul option yang
jika di-klik akan menampilkan dropdown menu. Jika semua option telah dipilih,
maka work order sudah selesai dibuat.

28
Gambar 3.8 Mock up dari halaman scheduled maintenance
Pada gambar 3.8 merupakan tampilan dari page Scheduled Maintenance. Page
ini berfungsi untuk membuat list dari scheduled maintenance atau pemeliharaan
yang sudah terjadwal.

29
Gambar 3.9 Mock up dari halaman in progress
Pada gambar 3.9 merupakan tampilan dari Page In Progress. Fungsi dari page
ini adalah melihat list pekerjaan yang sedang dalam progress. Dalam page ini
terdapat tiga kategori, yaitu pekerjaan pemeliharaan yang sudah disetujui, proses
persetujuan, dan pekerjaan yang sudah selesai dikerjakan. Jika tiap kategori di-
klik, maka akan muncul dropdown list yang berisi detail dari pekerjaan
pemeliharaan.

30
3.3.5 Test
Pada tahap test ini dilakukan untuk memastikan bahwa desain UI yang sudah
dibuat dapat berfungsi dengan baik sehingga dapat diimplementasikan ke dalam
aplikasi. Pengujian ini dilakukan oleh client dan pembimbing industri. Ketika test
ini selesai dilakukan dan sudah memenuhi user requirement yang dibutuhkan oleh
client, maka desain UI ini siap untuk dikembangkan oleh programmer.
Tabel 3.5 Alpha Testing 1
No Deskripsi Telas Belum

Memenuhi Memenuhi
1 Pembuatan layout yang easy to use V -
2 Pembuatan icon yang seusai dan - Terdapat

user friendly beberapa icon
yang masih
kurang sesuai
3 Penggunaan warna yang tepat V -

sesuai dengan warna pada logo PT.
Pertamina (pilih salah satu dari
merah, biru, hijau)
4 Pembuatan user flow yang lebih V -
sederhana dan user friendly
Menurut hasil tabel 3.4, terdapat satu poin yang masih belum terpenuhi dalam
proses pembuatan UI aplikasi CMMS ini. Maka dari itu, dilakukan perbaikan
supaya dapat memenuhi kriteria yang telah ditentukan dengan pihak PT. Berkah
Putra Mandala dan Pertamina Retail. Berikut tabel yang menampilkan poin-poin
penting dari user requirement.

31
Tabel 3.6 Alpha Testing 2
No Deskripsi Telas Belum

Memenuhi Memenuhi
1 Pembuatan layout yang easy to use V -
2 Pembuatan icon yang seusai dan V -

user friendly
3 Penggunaan warna yang tepat V -
sesuai dengan warna pada logo PT.
Pertamina (pilih salah satu dari
merah, biru, hijau)
4 Pembuatan user flow yang lebih V -
sederhana dan user friendly
Berdasarkan hasil dari Tabel 3.5 dapat disimpulkan bahwa pembuatan user
interface Aplikasi CMMS Pertamina Retail telah selesai dibuat sesuai dengan user
requirement dengan baik.
3.4 Identifikasi Kendala yang Dihadapi

Selama pelaksanaan Praktik Kerja Lapangan (PKL) di PT. Berkah Putra Mandala,
penulis mendapatkan beberapa kendala yang dihadapi sehingga didapatkan
beberapa pengalaman dan pembelajaran dari pengalaman tersebut. Beberapa
pengalaman dan pembelajaran yang didapat seperti melatih komunikasi dan
profesionalitas, hingga pengalaman membuat konten Instagram.
3.4.1 Kendala Pelaksanaan Tugas
Berikut ini kendala yang dihadapi saat melaksanakan PKL di PT. Berkah Putra
Mandala :
a. Kurangnya ketelitian penulis dalam mengerjakan tugas desain yang sudah

diberikan oleh pembimbing industri.
b. Terdapat miss communication antara penulis dengan pembimbing industri
sehingga menyebabkan beberapa kali revisi.

32
3.4.2 Cara Mengatasi Kendala

Berikut cara penulis dalam mengatasi kendala saat melaksanakan PKL :
a. Penulis lebih teliti dalam mengerjakan tugas desain yang sudah diberikan oleh
pembimbing industri dan melakukan double check. Selain itu penulis juga
melakukan pencatatan saat melakukan briefing dengan pembimbing industri
dan pihak client.
b. Melakukan koordinasi dengan pembimbing industri dan memastikan desain
mentah kepada pembimbing industri.

BAB IV
PENUTUP
4.1 Kesimpulan
Berdasarkan dari hasil Praktik Kerja Lapangan (PKL) yang dilaksanakan di PT.
Berkah Putra Mandala, dapat disimpulkan bahwa :
a. Pembuatan desain UI aplikasi CMMS sudah memenuhi kebutuhan yang ada

pada user requirement yang diminta oleh client.
b. Berdasarkan desain UI yang sudah dibuat, dapat dipastikan bahwa desain UI
tersebut akan diimplementasikan ke dalam aplikasi.
c. Terselesaikannya desain UI aplikasi Computerized Maintenance
Management System (CMMS) Pertamina Retail.
4.2 Saran
Berdasarkan hasil Praktik Kerja Lapangan (PKL), desai UI yang dibuat oleh penulis
masih belum sempurna, dibutuhkan pengalaman dan ilmu agar desain tersebut lebih
menarik dan lebih user friendly. Oleh karena itu, penulis memberikan saran-saran
yang diperlukan :
a. Lebih memperhatikan detail seperti jarak antara tiap elemen yang ada dalam
pembuatan UI tersebut agar terlihat rapih, balance, dan seirama.
b. Lebih memperdalam mengenai user experience agar dalam pembuatan
prototype user flow lebih dapat memperhatikan aspek user friendly agar
desain UI lebih efisien dan mudah digunakan.
33
34
DAFTAR PUSTAKA
Anggitama, D. R., Tolle, H., & Az-Zahra, H. M. (2018). Evaluasi Dan Perancangan
User Interface Untuk Meningkatkan User Experience Menggunakan
Metode Human Centered Design dan Heuristic Evaluation Pada Aplikasi
EzyPay. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer.
El Ghiffary, M. N., Susanto, T. D., & Herdiyanti, A. (2018). Analisis Komponen

Desain Layout, Warna, dan Kontrol Pada Antarmuka Pengguna Aplikasi
Mobile Berdasarkan Kemudahan Penggunaan. Jurnal Teknik ITS.
Feradhita. (2020). Logique Blog. Retrieved November 26, 2020, from

https://www.logique.co.id/blog/2020/06/16/apa-itu-adobe-xd/
Habibi, R. H., & Wijaya, K. (2020). ANALISIS DAN PREVENTIVE

MAINTENANCE PADA MESIN GAS DI PT. SURYA MITRA
KENCANA . Bina Nusantara Library and Knowledge Center.
Novitasari, F., Djahir, Y., & Fatimah, S. (2015). PENGARUH MEDIA ADOBE
ILLUSTRATORTERHADAP HASIL BELAJAR PESERTA DIDIK
PADA MATA PELAJARAN EKONOMI DI SMA SRIJAYA NEGARA.
E Journal Universitas Sriwijaya.
Rivaldi, F. (2016). Jurnal Perancangan Aplikasi Mobile "Kamusku".
Swarnadwitya, A. (2020). Binus University. Retrieved November 26, 2020, from

https://sis.binus.ac.id/2020/03/17/design-thinking-pengertian-tahapan-dan-
contoh-penerapannya/
Yulius, Y. (2016). PERANAN DESAIN KOMUNIKASI VISUAL SEBAGAI

PENDUKUNG MEDIA PROMOSI KESEHATAN. Jurnal Seni Desain
dan Budaya, I, 42-47.
Lampiran 1 Surat Keterangan PKL
L-1
Lampiran 2 Log Book Perusahaan
L-2
L-2
L-2
L-2
L-2
L-2
L-2
L-2
L-2
L-2
L-2
Lampiran 5 User Requirement
L-3
Lampiran 6 User Requirement
L-3
Lampiran 7 Gambaran Umum Perusahaan
PT. Berkah Putra Mandala (“BPM“) didirikan pada tahun 2016. Dengan pendiri
yang memiliki pengalaman yang meluas dan kegigihan dalam mengatasi berbagai
kendala, Berkah Putra Mandala bertanggung jawab kepada klien dengan
keyakinanan dan konsisten bergerak maju dalam menjaga kualitas pelayanan
perusahaan.
Pada skala yang besar, BPM terlibat dalam lini bisnis penyediaan teknologi dan
konstruksi efisiensi energi. BPM memfokuskan keahlian dan layanan pemasok dan
kontraktor serta sistem yang terintegrasi ke sektor strategi listrik dan
telekomunikasi. Proses bisnis dikelola dengan mengoptimalkan pengembangan dan
pemanfaatan sumber daya perusahaan kami adalah cara yang sehat, BPM sebisa
mungkin bersikap profesional agar tetap menjaga kepercayaan dari para klien.
L-4
Lampiran 8 Dokumentasi PKL
L-5

UI DESAIN CMMS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

UI DESAIN CMMS

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

PRAKTIK KERJA LAPANGAN

PENGEMBANGAN USER INTERFACE APLIKASI

IKA NUR AININA RIZKIKA

PROGRAM STUDI TEKNIK MULTIMEDIA DAN DIGITAL

a. Judul : PENGEMBANGAN USER INTERFACE

(Noorlela Marcheta, S.Kom., M.Kom.)

(Iwan Sonjaya, S.T., M.T.)

a. Noorlela Marcheta, S.Kom., M.Kom. selaku dosen pembimbing yang telah

Depok, 20 November 2020

Ika Nur Ainina Rizkika

KATA PENGANTAR ......................................................................................... ii

DAFTAR ISI ......................................................................................................iii

DAFTAR GAMBAR ........................................................................................... v

DAFTAR TABEL ............................................................................................... vi

DAFTAR LAMPIRAN ...................................................................................... vii

1.1 Latar Belakang Kegiatan ........................................................................ 1

1.2 Ruang Lingkup Kegiatan ....................................................................... 2

1.3 Waktu dan Tempat Pelaksanaan ............................................................. 2

1.4 Tujuan dan Kegunaan ............................................................................ 2

2.1 User Interface ........................................................................................ 3

2.2 Guideline ............................................................................................... 4

2.3 Aplikasi Mobile ..................................................................................... 4

2.4 Wireframe .............................................................................................. 5

2.5 Maintenance .......................................................................................... 5

2.6 Adobe XD ............................................................................................. 5

2.7 Adobe Illustrator .................................................................................... 5

2.8 Prinsip Desain ........................................................................................ 5

2.9 Tahapan/Metode Design Thinking.......................................................... 7

3.1 Unit Kerja PKL .................................................................................... 10

3.2 Uraian Praktik Kerja Lapangan ............................................................ 11

3.3 Pembahasan Hasil PKL ........................................................................ 15

3.3.2 Define ........................................................................................... 16

3.3.3 Ideate ........................................................................................... 17

3.3.4 Prototype ...................................................................................... 22

3.3.5 Test ............................................................................................... 30

3.4 Identifikasi Kendala yang Dihadapi ..................................................... 31

4.1 Kesimpulan .............................................................................................. 33

4.2 Saran ........................................................................................................ 33

DAFTAR PUSTAKA ........................................................................................ 34

Gambar 3.1 Struktur Organisasi PT. Berkah Putra Mandala ............................... 11

Tabel 3.1 User requirement ................................................................................ 15

1.1 Latar Belakang Kegiatan

Aplikasi Computerized Maintenance Management System (CMMS) Pertamina

1.2 Ruang Lingkup Kegiatan

a. Mengidentifikasi dan membuat Guideline desain serta mendiskusikan hal-

1.3 Waktu dan Tempat Pelaksanaan

a. Waktu Pelaksanaan : 18 Agustus s.d 18 November 2020

b. Nama Perusahaan : PT. Berkah Putra Mandala

c. Alamat Perusahaan : Jalan Raya Tebet No. 45 D, Tebet, Jakarta

1.4 Tujuan dan Kegunaan

Adapun kegunaan dari aplikasi mobile Computerized Maintenance Management

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

2.1 User Interface

b. Hierarchy : Penyusunan hirarki kepentingan dari obyek-

c. Personality : Kesan pertama yang terlihat pada aplikasi

d. Layout : Tata letak dari elemen-elemen di dalam

e. Type : Tipografi yang digunakan di dalam sebuah

f. Color : Penggunaan warna yang tepat digunakan pada

g. Imagery : Penggunaan gambar, icon, dan sejenisnya

h. Control and Affordances : Elemen dari antarmuka pengguna yang dapat

2.3 Aplikasi Mobile

a. Ukuran yang Kecil