6
BAB III
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan KoordinasiBerikut merupakan kedudukan penulis dan alur koordinasi pekerjaan selama penulis melakukan praktek kerja magang di B One Corporation.
1. Kedudukan
Kedudukan penulis di B One Corporation adalah sebagai UI designer dan berada di tim yang bekerja untuk merancang UI/UX yang juga berada di dalam naungan tim produk. Selama melakukan magang di B One Corporation, penulis ditugaskan untuk merancang UI dan bekerja di bawah bimbingan project manager, UI designer, dan IT manager yang juga merupakan supervisor.
Gambar 3.1. Bagan Kedudukan
2. Koordinasi
Koordinasi pertama diterima oleh tim pemasaran dari klien lalu brief diserahkan kepada tim produk. Brief pekerjaan secara keseluruhan diberikan langsung kepada tim produk secara langsung dengan melakukan meeting di kantor. Project manager dan IT manager menjelaskan brief dan membahas konsep dari project yang akan dikerjakan bersama tim. Setelah brief selesai, pekerjaan dibagikan kepada masing-masing anggota tim termasuk penulis. Brief dan
7 pembagian tugas dicantumkan berupa spread sheets dan menggunakan website Jira untuk diperbarui seiring berjalannya project. Selama work from home, IT manager melakukan reiew terhadap pekerjaan penulis setiap hari kerja sebelum jam kerja berakhir via zoom. Review biasanya dilakukan pukul 16:00 WIB atau 16:30 WIB. Setiap minggu sekitar satu hingga dua kali, penulis akan mempresentasikan progress kerja kepada tim project via zoom untuk di-review dan revisi. Setelah tim produk menyelesaikan project tersebut, maka selanjutnya diserahkan kepada BOD untuk ditinjau kembali apakah project tersebut sudah layak untuk diberikan kepada klien.
Gambar 3.2. Bagan Alur Koordinasi
3.2. Tugas yang Dilakukan
Selama melakukan praktek kerja magang di B One Corporation, penulis melakukan satu project spesifik yaitu project aplikasi KOPDI untuk Koperasi Nasional. Berikut merupakan detail pekerjaan yang penulis lakukan selama melakukan praktek kerja magang di B One Corporation.
Tabel 3.1. Detail Pekerjaan Yang Dilakukan Selama Magang
No. Minggu Proyek Keterangan
1 1 Aplikasi KOPDI Briefing mengenai project aplikasi KOPDI secara tatap muka.
8
Perancangan UI aplikasi pada Find products:
- Halaman Lihat produk. - Halaman detail produk. - Halaman Tambah keranjang. - Halaman Chat penjual. - Halaman Lapor produk.
- Halaman Filter (filter berdasarkan kategori, provinsi, harga, dan rating).
Perancangan UI aplikasi pada Find toko:
- Halaman Filter (filter berdasarkan nama dan provinsi).
- Halaman Lihat toko.
Membuat asset berupa icon untuk aplikasi KOPDI
Presentasi dan review progress dari tim.
2 2 Aplikasi KOPDI Perancangan UI aplikasi pada Find toko:
- Follow
- Cari produk toko. - Lihat produk terjual. - Lihat statistik toko. - Share toko.
Membuat asset berupa icon untuk aplikasi KOPDI.
9 Review dan revisi sebelum
dipresentasikan oleh perusahaan kepada klien.
Menunggu kelanjutan project setelah dipresentasikan secara garis besar kepada klien.
Review dan revisi setelah project dipresentasikan kepada klien. 3 3 Aplikasi KOPDI Mengerjakan prototype aplikasi
KOPDI
Presentasi dan review dari tim. Menunggu konfirmasi setelah
dipresentasikan oleh perusahaan kepada klien secara detail. 4 4 Aplikasi KOPDI Mengerjakan revisi
Review setelah presentasi progress 5 5 Aplikasi KOPDI Mengerjakan revisi
Review setelah presentasi progress
6 6 Belum diberikan project
7 7 Digital Promotional Marketing
Brief secara tatap muka.
8 8 Brief project belum diberikan secara
detail dan belum mendapat instruksi lanjutan.
3.3. Uraian Pelaksanaan Kerja Magang
Selama melakukan peaktek kerja magang di perusahaan B One Corporation, penulis ditugaskan untuk ikut andil dalam project spesifik yaitu project aplikasi KOPDI sebagai tim UI design.
10
3.3.1. Proses Pelaksanaan
Berikut merupakan proses pelaksanaan penulis dalam pengerjaan project UI design untuk aplikasi KOPDI.
3.3.1.1. Perancangan UI Aplikasi KOPDI 1. Brief
Brief diberikan secara langsung melalui rapat tatap muka pada tanggal 8 Maret 2021 di kantor perusahaan. Brief diberikan oleh IT manager dan project manager kepada seluruh tim. Brief menjelaskan mengenai aplikasi KOPDI yaitu aplikasi serupa e-commerce yang diperuntukan untuk koperasi nasional dan ditargetkan untuk menyelesaikan fitur utama agar dapat dipresentasikan gambaran kasar kepada klien. Selain menjelaskan mengenai aplikasi KOPDI seperti fitur, kegunaan, dan target, brief juga berisi pembagian tugas kepada setiap kepada anggota tim project menggunakan google spread sheets.
Gambar 3.3. Brief Gambaran Posisi Aplikasi KOPDI
Selain menjelaskan mengenai aplikasi KOPDI seperti fitur, kegunaan, dan target, brief juga berisi pembagian tugas kepada setiap kepada anggota tim project menggunakan google spread sheets.
11
Gambar 3.4. Pembagian Tugas Anggota Tim
Fitur yang ditandai dengan prioritas “high” menandakan fitur harus diselesaikan sebelum dipresentasikan kepada klien di minggu ke-2. Pengerjaan yang diutamakan adalah pengerjaan pada kolom features, baru kemudian dilanjut pengerjaan pada kolom sub features 1.
2. Brainstorming
Proses brainstorming telah dilakukan oleh project manager, IT manager, coder, dan UI designer, sehingga penulis tidak ikut andil dalam brainstorming kecuali untuk brainstorming mengenai fitur-fitur tambahan yang belum dicantumkan dalam spread sheets.
12
3. Konsep
Konsep diberikan kepada penulis setelah ditentukan oleh project manager dan UI designer. Konsep dari aplikasi KOPDI adalah aplikasi yang terus berputar seperti roda seiring dengan perkembangan jaman dan terus beroperasi mengelilingi setiap stakeholder dari aplikasi KOPDI. Aplikasi KOPDI memiliki tampilan modern dan minimalis demi menjangkau target sasaran usia yang luas dari remaja hingga lansia.
Gambar 3.6. Logo Aplikasi KOPDI
Referensi yang dipakai oleh aplikasi KOPDI yaitu Instagram, Tokopedia, dan Shopee. Aplikasi KOPDI menggunakan 3 warna utama yaitu turquoise, putih, dan dark grey yang mendekati hitam.
4. Sketsa
Setelah menerima brief, brainstorming, dan konsep, penulis mulai membuat skesta untuk beberapa halaman aplikasi KOPDI yang juga berdasarkan referensi yaitu Instagram, Tokopedia, dan Shopee. Penulis melakukan proses sketsa secara tradisional dengan kertas dan pensil sebelum melakukan digitalisasi di Figma.
13
Gambar 3.7. Sketsa UI Aplikasi Kopdi
5. Proses Digitalisasi
Setelah membuat sketsa untuk UI, selanjutnya penulis memulai proses digitalisasi yaitu membuat icon dan merancang interface. Perancangan icon yang penulis lakukan menggunakan software Figma. Berikut merupakan beberapa icon untuk aplikasi yang penulis rancang:
Gambar 3.8. Perancangan Icon Aplikasi KOPDI
Penulis melanjutkan ke tahap perancangan halaman bersamaan dengan pengerjaan icon. Sesuai dengan brief, halaman yang penulis kerjakan adalah halaman find products, find toko, chat, dan info toko. Sama seperti perancangan icon, software yang digunakan untuk seluruh proses digitalisasi halaman aplikasi adalah Figma.
14
Gambar 3.9. Perancangan UI Aplikasi KOPDI
Setelah menyelesaikan perancangan halaman, penulis menggabungkan halaman yang penulis kerjakan dengan halaman yang dikerjakan oleh anggota tim lainnya untuk membuat prototype sebelum dipresentasikan. Pengerjaan prototype aplikasi KOPDI juga dilakukan menggunakan Figma. Berikut merupakan gambaran wireframe setelah semua halaman digabungkan untuk protoype.
Gambar 3.10. Wireframe Prototype
6. Asistensi dan Revisi
Setelah melakukan digitalisasi, progress diasistensikan kepada IT manager yang merupakan supervisor setiap hari kerja pukul 16:00 WIB atau 16:30 WIB, dan dengan presentasi sebanyak satu sampai 2 kali seminggu kepada tim KOPDI via zoom. Penulis mendapatkan review dari seluruh tim terutama project manager dan UI designer. Berikut merupakan catatan yang perlu direvisi oleh penulis:
15
Gambar 3.11. Catatan Revisi
Selain dari catatan yang ada pada gambar, revisi lainnya adalah seluruh icon dibuat menjadi 24px x 24px, round pada corner button berukuran kecil diubah menjadi 6px, sedangkan pada button berukuran besar menjadi 8px. Jarak pada setiap fitur dan komponen pada halaman adalah genap, yaitu kelipatan 4 dan kelipatan 8. Selain mengerjakan revisi dari jobdesc penulis, penulis juga membantu mengerjakan revisi halaman lain milik anggota tim lain.
7. Finalisasi
Setelah melakukan revisi selama 2 minggu, berikut hasil final UI aplikasi KOPDI yang penulis kerjakan dan diserahkan kepada project manager dan IT manager.
Gambar 3.12. Hasil Final Find Products dan Filter Products
Pada halaman Find Products, penulis merevisi margin antara kiri dan kanan menjadi 24px sesuai arahan UI designer. Untuk Halaman Filter Products, warna pada button filter dibuat lebih solid dan diperbaiki jarak antar komponen.
16
Tampilan pada range harga juga diubah menjadi bar yang dapat digeser untuk mengubah range harga.
Gambar 3.13. Hasil Final Halaman Setelah Filter Products
Perbaikan pada halaman setelah Filter Products yaitu button filter dan jarak margin kanan dan kiri, juga icon toko yang diubah menjadi outline.
Gambar 3.14. Hasil Final Halaman Detail Produk dan Lapor Produk
Revisi paling banyak dilakukan pada halaman Detail Produk, pada bagian deskripsi dan detail produk diubah menjadi bentuk tabel, ukuran button follow dan button lihat toko diperlebar dengan round courner yang dikurangi dari 8px menjadi 6px. Leading antara setiap font diperbaiki menjadi genap, selain itu button keranjang diubah menjadi outline.
17
Gambar 3.15. Hasil Final Halaman Chat Penjual
Perbaikan pada halaman Chat Penjual yaitu jarak atara bubble chat, dan ukuran icon menjadi 24px x 24px.
Gambar 3.16. Hasil Final Halaman Find Toko dan Filter Toko
Hasil final pada halaman Find Toko dan Filter Toko setelah melakukan revisi pada jarak margin kanan dan kiri, ukuran icon, warna button yang dibuat menjadi warna solid, dan icon yang dibuat menjadi outline.
18
Gambar 3.17. Hasil Final Halaman Info Toko
Perbaikan pada halaman Info Toko hanya pada jarak margin dan jarak antara komponen.
Gambar 3.18. Hasil Final Halaman Info Toko
Sama seperti halaman Info Toko sebelumnya, perbaikan lebih banyak pada jarak margin dan jarak antara komponen, selain itu, ukuran icon pada fitur bagikan toko juga diubah menjadi 24px x 24px. Terdapat perbaikan yang sama pada semua halaman yaitu fitur dan icon menu bar feeds menjadi find koperasi, juga semua icon button yang dibuat menjadi outline.
3.3.2. Kendala yang Ditemukan
Kendala yang dihadapi penulis ketika melakukan kerja magang yaitu alur pengerjaan project UI/UX yang berbeda dengan yang biasa dilakukan penulis ketika
19 praktek saat masa perkuliahan. Saat pengerjaan project, analisis mengenai target sasaran, persona dan user journey dilakukan setelah perancangan sehingga penulis sedikit kesulitan merancang tampilan yang disesuaikan untuk menjangkau target sasaran yang luas. Selain itu, penulis juga sedikit mengalami kendala dalam hal komunikasi dengan pembimbing lapangan dikarenakan pembimbing lapangan bukan bagian UI designer namun berada di tim IT.
3.3.3. Solusi Atas Kendala yang Ditemukan
Solusi atas kendala yang penulis alami adalah penulis menanyakan mengenai target sasaran, dan persona sebagai gambaran konsep dalam perancangan aplikasi kepada project manager sehingga diberikan referensi dan desain dan konsep yang sesuai dengan target sasaran project. Solusi untuk kendala kedua yaitu ketika terjadi miskomunikasi atau penulis masih kurang mengerti dengan brief yang diberikan, penulis akan bertanya kepada project manager atau teman magang yang juga berada di tim design.
