Akses Digital [DS]—UI/UX Case Study

Hi Perkenalkan nama saya Apriansyah Rizqi Setiawan. Pada tulisan ini saya akan membagikan tentang proses pembuatan dari Akses Digital [DS] yang pernah saya kerjakan.

Berikut detail dari studi kasus:

Deskripsi Produk: Akses Digital [DS] merupakan sebuah kerangka kerja desain berbentuk Design System.

**Metode: **Atomic Design

Timeline: Maret-Agustus 2022

Alat: Figma

Latar Belakang

Proyek ini dibangun dilatar belakangi karena pada Akses Digital belum tersedia sebuah design language yang membuat dari setiap proyek yang ada akan dikerjakan dari nol dan membuat saya sebagai UI/UX Designer sering sekali berekplorasi. Masalah yang muncul adalah pada tahap perancangan dan pengembangan dari proyek tersebut menjadi memakan waktu yang lebih lama.

Design Process

Dalam kasus ini saya menggunakan metode pendekatan Atomic Design dengan beberapa tahap yang disesuaikan.

1. Audit Design

Pada tahapan ini saya melakukan Audit Design dari sistem yang sudah pernah dikembangkan. Salah satu alat bantu saya untuk audit design dengan menggunakan CSS Stats. CSS Stats ini adalah aplikasi berbasis web untuk membantu melihat data analitik dari sebuah sistem disisi desain, dapat digunakan untuk membantu meningkatkan konsistensi dalam desain.

CSS Stats

2. Conduct Interface Inventory

Pada tahap ini saya mengumpulkan semua data terkait desain yang saya dapat kemudian saya masukan kedalam sebuah tempat yang dinamankan Conduct Interface Inventory. Pada tahap ini saya juga menghimpun data desain yang di dapat dari proses Audit Design.

Conduct Interface Inventory Button

3. Pendefinisian Standar

Pada Tahap ini saya mendefinisikan standar dari design system yang akan dibangun. Pada standar desain yang akan dibangun dipecah kedalam 2 elemen produk yaitu Perceptual Pattern dan Functional Pattern.

Perceptual Pattern

Tahap ini dilakukan untuk mengetahui elemen paling dasar pembentuk visual pada komponen seperti warna dan jenis huruf.

Penentuan komponen warna, pada proses conduct interface inventory warna ditemukan penggunaan warna dengan varian yang sama sehingga dilakukan seleksi warna sebagai bahan warna dasar.

Warna Dasar

Sedangkan untuk penentuan komponen jenis huruf saya menggunakan jenis huruf sistem untuk memberikan pengalaman terbaik di setiap Sistem Operasi (OS). Karena mengikuti standart jenis huruf dari setiap Sistem Operasi (OS) masalah kinerja juga berkurang.

Jenis Huruf

Functional Pattern

Pada tahap ini dilakukan penentuan jenis kelompok functional pattern pada Design System berdasarkan hirarki yang dapat memisahkan komponen berdasarkan fungsi dari setiap komponen.

Hirarki Komponen Functional Pattern

4. Implementasi

Pada tahap ini saya mengimplementasikan pendefinisian standar yang telah dilakukan kedalam figma untuk membuat pattern libary meliputi perceptual pattern dan functional pattern.

Pattern Library Akses Digital [DS]

Selain itu saya juga melakukan implementasi kedalam bentuk code library agar hifi yang dibuat menggunakan akses digital [ds] dapat mudah di implementasikan juga ke dalam proyek berbasis web dengan menggunakan code library yang sudah disediakan.

Akses Digital Design System — Perceptual Pattern and Functional Pattern (aksesdigital-ds.herokuapp.com)

Kesimpulan

Berdasarkan dari tahap-tahap yang telah dilakukan hingga proses implementasi, disimpulkan bahwa design system yang dibangun ini menghasilakn 2 elemen produk yaitu perceptual pattern dan functional pattern.

Rekomendasi Selanjutnya

Design system yang dibangun ini belum sempurna masih banyak yang harus diperbaiki dan disesuaikan kembali.