Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work
non-commercially, as long as you credit the origin creator
and license it on your new creations under the identical
terms.
BAB III
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan Koordinasi
Pelaksanaan kerja magang sebagai UI/UX Designer dibawah divisi Principal Product dan dibimbing oleh supervisor yaitu Bapak Ibrahim Aziz selaku Head of UI/UX and Mobile. Pekerjaan akan diberikan pula oleh Bapak Ibrahim Aziz dan akan di-review bersama dengan divisi lain yang bersangkutan setiap harinya pada setiap sesi SCRUM.
Tugas dari UI/UX Designer adalah:
1. Memvisualisasikan ide dan konsep sehingga dapat dimengerti oleh pimpinan internal, partner, dan pelanggan.
2. Mewujudkan suatu konsep menjadi susunan sistem berupa mock-up, UI dan UX yang sederhana dan dapat mudah dimengerti walaupun sistem bersifat kompleks.
3.2. Tugas yang Dilakukan
Praktek kerja magang yang dilakukan sebagai UI/UX Designer pada PT.
Frisidea Tech bertujuan untuk membantu proses pembuatan berbagai proyek, diantaranya: Employee Attendance, Meeting Room, Agency Portal, Customer Portal dan Career Support.
Desain UI dan UX Employee Attendance, dikerjakan sendiri dari awal dengan bimbingan supervisor. Dalam pengerjaannya, terdapat beberapa langkah yang harus dilakukan, yaitu: mempelajari Business Requirement Document (BRD), membuat desain UX dan membuat desain UI. Setelah menyelesaikan langkah- langkah tersebut, tugas akan dievaluasi oleh supervisor dan jika disetujui, maka desain-desain yang telah dibuat akan diberikan kepada front-end programmer.
3.3. Uraian Kerja Magang
3.3.1. Mempelajari Business Requirement Document (BRD)
Business Requirement Document atau BRD merupakan dokumen yang berisi solusi dan tujuan dari dibentuknya suatu sistem. BRD juga merincikan fitur-fitur apa yang harus ada pada suatu sistem. BRD menjadi petunjuk dari macam-macam tombol dan jenis halaman yang akan dirancang oleh UI/UX Designer.
Diketahui pula fungsi-fungsi primary yang harus dapat dilakukan pada situs berupa:
1. Log In
2. Clock In
3. Clock Out
1. Mengubah password
2. Forgot password
3. Melihat dashboard
4. Melihat calendar
5. Mengelola calendar
6. Melihat report absensi
Pada BRD situs Employee Attendance, diberikan rincian obyektif situs bagi admin dan karyawan, yaitu:
1. Karyawan - Login - Dashboard
- Kalender (Public Holiday)
- Melihat report Absensi (Tanggal awal-Tanggal akhir) 2. Admin
- Login - Dashboard
- Melihat Absensi Karyawan - Kalender (Create, Update, Delete) - Report Absensi Karyawan (Per Tanggal)
- Mengatur jam masuk dan keluar
Selain itu, diberikan pula wireframe abstraksi yang diberikan bersama dengan BRD oleh divisi Business Analyst.
Gambar 3.1. Wireframe abstraksi situs untuk admin
Gambar 3.1. merupakan gambar wireframe bersifat abstraksi yang didapat dari divisi Business Analyst sebagai gambaran fitur apa saja yang ada di dalam masing-masing halaman. Berbeda dengan wireframe yang dibuat oleh UI/ UX Designer, tata letak dari tombol dan fitur wireframe ini tidak perlu diikuti.
Gambar 3.2. Wireframe abstraksi situs untuk karyawan
Gambar 3.2. merupakan gambar wireframe bersifat abstraksi yang didapat dari divisi Business Analyst sebagai gambaran fitur apa saja yang ada di dalam masing-masing halaman pada sisi karyawan. Berbeda dengan wireframe yang dibuat oleh UI/ UX Designer, tata letak dari tombol dan fitur wireframe ini tidak perlu diikuti.
3.3.2. User Experience (UX)
User Experience atau UX merupakan desain yang digunakan untuk meningkatkan kepuasan dari pengguna melalui kemudahan dan kegunaan yang diberikan dalam interaksi antar pengguna dan program.
Tugas dari seorang UX Designer adalah merancang susunan dari tampilan serta alur dari program sebelum UI dari program tersebut dirancang. Salah satu tugas dari UI/UX Designer pada PT. Frisidea Tech
adalah menerjemahkan BRD yang didapat dari divisi Business Analyst menjadi rancangan kasar awal atau sketch, yang selanjutnya akan diubah menjadi wireframe.
3.3.2.1 Sketch
Sketch memiliki fungsi untuk menyusun alur halaman pada program sesuai dengan BRD. BRD dibentuk bersama dengan supervisor atau pembimbing lapangan pada papan tulis yang tersedia di dalam ruangan.
Untuk situs Employee Attendance yang memiliki halaman login, home, user, attendance, report dan calendar, gambar 3.3 merupakan sketch dari alur halaman yang saling terhubung.
Sketch menggambarkan bahwa alur penggunaan dimulai dengan proses log in, yang selanjutnya akan membawa pengguna ke dalam halaman home. Tidak semua orang dapat masuk dan mendaftarkan diri mereka ke dalam situs Employee Attendance, sehingga admin dari situs juga memiliki tugas untuk mengundang pengguna baru dengan cara mengirimkan email terpisah. Setelah masuk ke dalam halaman home, pengguna dapat memilih untuk masuk ke dalam halaman lainnya.
Pada halaman calendar, pengguna dapat melihat list dan detail dari acara yang telah terdaftar. Admin memiliki kewenangan untuk menambah, menghapus, dan mengubah acara, sedangkan user tidak.
Gambar 3.3. Sketch halaman situs Employee Attendance
Admin memiliki pilihan untuk mengakses user list, dimana ia dapat menambah dan menghapus user, juga masuk ke dalam user profile melalui list tersebut.
Halaman attendance juga merupakan halaman yang hanya dapat diakses oleh admin, dimana ia dapat melihat list jam masuk dan keluar dari seluruh karyawan pada hari tersebut. Jika list di-klik, maka akan membawa admin ke dalam halaman detail yang akan menampilkan catatan pengguna mengenai keterlambatan datang atau kecepatan kepulangan pengguna.
Selanjutnya halaman report akan menampilkan laporan kehadiran dan kepulangan karyawan yang dapat di-print. Bagi admin, akan tampak list dari seluruh karyawan, sedangkan pada karyawan, hanya akan tampak list dari kehadiran mereka sendiri.
3.2.2.2. Wireframe
Setelah mengetahui halaman-halaman yang harus dibuat pada sketch, desain awal dari halaman-halaman tersebut akan dibuat dalam bentuk wireframe. Wireframe merupakan desain antarmuka dari halaman-halaman yang berfokus pada isi halaman, letak tombol, dll.
Wireframe lalu dibuat menjadi mock-up untuk memastikan
Gambar 3.4. Halaman log in
Gambar 3.4. merupakan tampak wireframe dari halaman log in untuk menentukan letak field yang perlu ada dalam halaman.
Gambar 3.5. Halaman dashboard admin
Gambar 3.5. merupakan tampak wireframe dari halaman dashboard admin untuk menentukan letak field yang perlu ada dalam halaman.
Gambar 3.6. Halaman dashboard karyawan
Gambar 3.6. merupakan tampak wireframe dari halaman dashboard karyawan untuk menentukan letak field yang perlu ada dalam halaman. Perbedaan dari dashboard admin adalah header menu yang ada pada halaman.
Gambar 3.7. Halaman calendar admin
Gambar 3.7. merupakan tampak wireframe dari halaman calendar admin untuk menentukan letak field yang perlu ada dalam halaman. Pada halaman pihak admin, terdapat tombol untuk menambah dan menghapus event.
Gambar 3.8. Halaman calendar user
Gambar 3.8. merupakan tampak wireframe dari halaman calendar karyawan untuk menentukan letak field yang perlu ada dalam halaman.
Gambar 3.9 merupakan tampak wireframe dari halaman report milik admin untuk menentukan letak field yang perlu ada dalam halaman.
Gambar 3.10. Halaman report user
Gambar 3.10. merupakan tampak wireframe dari halaman report pada pihak karyawan untuk menentukan letak field yang perlu ada dalam halaman.
Gambar 3.11. Halaman user detail
Gambar 3.11. merupakan tampak wireframe dari halaman user detail untuk menentukan letak field yang perlu ada dalam halaman.
3.3.3. User Interface (UI)
User Interface atau UI merupakan penghubung antara pengguna dan fungsi suatu program. UI memiliki hubungan erat dengan tampilan visual
warna dan bentuk, namun tentang penyajian dengan menggunakan alat yang benar kepada pengguna agar pengguna dapat mencapai tujuan mereka (UXPin, 2014).
Desain UI dibuat berdasarkan wireframe yang telah dibuat menggunakan Adobe Illustrator.
Gambar 3.12. Halaman log in
Gambar 3.12. merupakan tampak hasil UI dari halaman log in yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.13. Halaman dashboard admin
Gambar 3.13. merupakan tampak hasil UI dari halaman dashboard admin yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.14. Halaman user
Gambar 3.14. merupakan tampak hasil UI dari halaman user yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.15. Halaman user detail
Gambar 3.15. merupakan tampak hasil UI dari halaman user detail yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.16. Halaman report
Gambar 3.16. merupakan tampak hasil UI dari halaman log in yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.17. Halaman calendar admin
Gambar 3.17. merupakan tampak hasil UI dari halaman
Gambar 3.18. Halaman dashboard user
Gambar 3.18. merupakan tampak hasil UI dari halaman dashboard karyawan yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Gambar 3.19. Halaman report user
Gambar 3.19. merupakan tampak hasil UI dari halaman report milik karyawan yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya. Beda halaman karyawan dengan admin adalah karyawan hanya dapat melihat absensi milik mereka sendiri
Gambar 3.20. Halaman calendar user
Gambar 3.20. merupakan tampak hasil UI dari halaman calendar pada pihak karyawan yang dibentuk berdasarkan wireframe yang telah dibuat sebelumnya.
Storyboard adalah cara untuk menyusun grafik dalam bentuk ilustrasi atau gambar yang ditampilkan secara berurutan untuk tujuan pra-visualisasi animasi, grafik atau urutan media interaktif. Pada proses pembangunan suatu sistem, storyboard dibuat untuk memperjelas gambaran dari alur sistem tersebut tanpa harus menggunakan software tersendiri layaknya mockup.
Gambar 3.21. merupakan storyboard dari situs Employee Attendance yang telah selesai. Alur dalam storyboard dibentuk berdasarkan alur yang dibuat pada mockup.
Dijelaskan pada storyboard bahwa hal yang pertama kali user lakukan adalah log in, dimana setelah log in user akan dibawa kepada halaman dashboard tergantung dengan jenis user yang telah log in. Jika user merupakan seorang admin, maka ia akan dibawa ke dashboard admin dan jika ia merupakan seorang karyawan, maka ia akan dibawa ke dashboard karyawan.
Setelah user masuk ke dalam halaman dashboard, barulah mereka bisa menggunakan fitur masing-masing user sesuai dengan yang telah dirincikan dari BRD.
3.3.4. Membuat Asset
Asset merupakan komponen dari UI yang berupa icon, logo, foto dan desain grafis. Pembuatan asset dibuat menggunakan Adobe Illustrator dengan file terpisah untuk di-export dan diberikan kepada front-end programmer.
3.3.5. Melakukan Presentasi kepada Siswa SMK
Pada minggu ke-7, sejumlah siswa SMK peminatan Multimedia datang ke perusahaan untuk melaksanakan kegiatan workshop. UI/UX Designer bertugas untuk menjelaskan kepada para siswa SMK mengenai UI/UX dan memberi pelatihan dasar tentang UI/UX.
3.4. Kendala yang Dihadapi
Selama pelaksanaan program magang ini, terdapat suatu masalah yang terjadi dikarenakan mahasiswa memiliki kepentingan di universitas, sehingga harus izin cuti pada hari kerja.
Pihak perusahaan memberikan peringatan kepada mahasiswa dengan mengancam apabila mahasiswa mengambil hari cuti lagi, maka program magang akan diselesaikan lebih cepat.
3.5. Solusi atas Kendala
Solusi yang dipersetujui oleh kedua pihak adalah dengan tidak melakukan izin dari kerja selama sepanjang bulan Februari. Selain itu, dosen pembimbing juga bersedia untuk membantu mahasiswa dalam hal dokumen yang diminta oleh universitas.
