Rapi Pangkal Indah: Begini Caranya File Management Desain UI

Photo by Marvin Meyer on Unsplash

Ada suatu inisiasi besar yang tengah berlangsung di masa awal saya bergabung Niagahoster. Inisiasi tersebut ialah dimulainya pengerjaan Design System.

Design system mengintegrasikan banyak tim di Niagahoster, terutama Tim UI/UX dan Developer.

Design System adalah kumpulan standar yang ditujukan untuk pengelolaan desain produk digital dalam skala besar, misalnya penggunaan komponen, pola, dan style guide.

Kelebihannya, Design System ini bisa digunakan berulang kali tanpa perlu membuat elemen desain dari awal.

Design System sudah lazim diterapkan di banyak tech company.

Ke depannya, Design System menjadi salah satu proyek jangka panjang dan berkelanjutan di Niagahoster.

Dengan menerapkan Design System, harapannya koordinasi pengembangan layanan antara Tim UI/UX dan Developer dapat lebih baik lagi di kemudian hari.

Masalah dan Gagasan Solusinya

Sebagai permulaan, sebelum menentukan rentetan standar dalam Design System, saya bersama rekan UI Designer melakukan inisiasi untuk merombak ekosistem digital tempat kami bekerja.

Berdasarkan review terkait manajemen file di Figma dan pengalaman selama bekerja menggunakan berbagai file di dalamnya, kami menemukan tiga masalah utama:

1. Pencarian desain di Figma membingungkan dan memakan waktu
2. Banyak file desain sudah tidak digunakan lagi
3. Belum adanya aturan baku untuk menentukan sebuah file akan masuk kategori apa dan folder project yang mana

Jika dirangkum, ketiga masalah tersebut mengerucut pada permasalahan manajemen file Figma yang belum berjalan baik. Dampaknya cukup serius terkait flow kerja dalam tim.

Dari sini, kami kemudian menggagas beberapa actionable items sebagai solusi permasalahan.

1. Menyusun ulang folder project, menyesuaikan kebutuhan tim dan pengerjaan Design System ke depannya
2. Menentukan kategori dari tiap file yang dibuat
3. Menuliskan rules di tiap folder project seperti desain apa saja yang bisa masuk ke dalamnya
4. Menentukan format penamaan tiap file yang sudah dan akan dibuat
5. Melengkapi cover file Figma dengan informasi status pengerjaan, kategori project, judul file, dan owner alias penanggung jawab atas file tersebut
6. Melakukan pengecekan menyeluruh file yang sudah tidak terpakai dan mengarsipkannya

Eksekusi Solusi

Setelah mendiskusikan isu yang kami temukan dan menyampaikan usulan solusi tersebut pada team leader, kami mendapatkan lampu hijau untuk segera mengeksekusinya.

1. Penyusunan Ulang Folder Project Figma

Langkah awal yang kami ambil adalah melakukan penyusunan ulang folder project di Figma tempat tiap file berada.

Setelah proses review dan memperkirakan kebutuhan kerja ke depan, maka kami sepakat untuk menggunakan penamaan dengan format baru.

[Nama Folder Project]: [Jenis file di dalamnya]

Beberapa contohnya adalah sebagai berikut.

• Design Language System: Komponen design system
• Guidelines: Panduan penggunaan file figma, template cover file, workflow
• Website New Version: Semua desain landing page dengan penerapan design system baru yang sudah selesai dikerjakan
• On Progress Task: Semua desain yang statusnya sedang dikerjakan
• Website Old Version: Semua desain landing page yang menggunakan desain versi lama

2. Menentukan Kategori File

Kami menentukan kategori suatu file berdasarkan desain (wireframe, komponen, high fidelity design, panduan) di dalamnya. Kategori ini nantinya akan dimasukkan ke dalam folder sesuai project masing-masing.

Kami menyepakati penamaan kategori berikut ini.

• WEB: Website, semua desain yang berkaitan dengan Landing Page
• MA: Member Area, semua desain yang berkaitan dengan Member Area
• OF: Order Flow, semua desain yang berkaitan dengan Order Flow
• DOC: Documentation, file berisi dokumentasi atau panduan

3. Pemberian Rules di Tiap Folder Project

Setelah folder yang berisi project selesai disusun ulang, selanjutnya adalah menetapkan rules atau aturan di dalamnya.

Rules ini berisi jenis file apa saja yang bisa masuk ke dalam folder project tersebut, lengkap dengan penjelasan dari kode penamaan masing-masing file.

4. Implementasi Format Penamaan File yang Baru

Untuk memudahkan pencarian, file yang ada disusun menggunakan format penamaan baru. Format penamaan ini menyesuaikan kategori dari tiap file. Berikut adalah format penamaan yang kami sepakati:

(Kode Kategori) [spasi] Nama Task

Contoh: (WEB) Redesign Landing Page About Us

Setelah menyepakati format penamaan file, kami membagi tugas untuk mulai mengubah nama tiap file.

5. Redesign Cover Tiap File

Salah satu hal yang cukup menyulitkan kami sebelumnya ketika mencari file di Figma adalah karena tidak adanya cover yang memberikan info cukup jelas mengenai apa isi dari file tersebut.

Padahal, cover file merupakan hal yang pertama dilihat. Cover bisa dirancang lebih baik agar dapat dengan mudah mengetahui isi suatu file.

Berdasarkan kesulitan yang ditemukan berikut informasi yang diperlukan demi kemudahan memahami isi suatu file, kami sepakat menerapkan informasi berikut pada desain cover file.

• Kategori file: seperti yang sudah dijelaskan di poin nomor 2
• Judul file: diambil berdasarkan desain apa yang sedang dikerjakan dan memiliki batasn karakter agar ringkas
• Owner: orang yang bertanggung jawab atas file tersebut
• Screenshot: potongan gambar yang mewakili desain yang dikerjakan

Setelah menyepakati format desain cover yang baru bersamaan dengan proses penamaan ulang tiap file, kami turut menerapkan desain cover yang baru untuk tiap file.

6. Mengarsipkan File yang Tidak Digunakan

Tahapan terakhir adalah melakukan pengecekan menyeluruh semua file yang sudah ada dan mengarsipkan file yang sudah tidak digunakan.

Pertama-tama, kami melakukan konfirmasi terlebih dahulu kepada stakeholder terkait. Tujuannya adalah menginformasikan bahwa file yang dimaksud akan kami arsipkan sekaligus memastikan bilamana masih digunakan atau tidak.

Langkah ini diharapkan dapat menghindari kebingungan jika suatu file akan digunakan kembali di kemudian hari.

Seluruh proses perombakan memakan waktu yang tidak sedikit. Saat ini, proses telah berjalan selama kurang lebih enam bulan. Saya dan rekan-rekan UI Designer tengah merasakan manfaat positifnya.

Melalui berbagai macam usaha yang dilakukan, kesulitan ketika mencari file desain nyaris tidak pernah terjadi lagi. Selain itu, dengan file yang tertata rapi, pekerjaan sehari-hari kini terasa lebih ringan.

Sebagai seorang UI Designer, saya merasa permasalahan yang muncul dalam pekerjaan dapat menjadi kesempatan mengasah kemampuan problem solving.

Saya percaya bahwa kemampuan ini, apabila terus-menerus diasah, mampu meningkatkan value kita sebagai profesional yang lebih baik.

Keep curious!