KOMPUTA : Jurnal Ilmiah Komputer dan Informatika

19
19
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

PENERAPAN DESAIN SISTEM MENGGUNAKAN

METODE ATOMIC DESIGN DI UNIVERSITAS
MUHAMMADIYAH SUKABUMI
Hari kurniawan1, Fakhrian Fadlia Adiwijaya2
1,2
Universitas Komputer Indonesia
Jl. Dipati Ukur No.112-116, Lebakgede, Coblong, Kota Bandung, Jawa Barat 40132
E-mail : hariniawa127@[Link].id1, fakhrian@[Link].id2

ABSTRAK yang di dalamnya ada sekumpulan komponen-

komponen antarmuka dan kode yang saling
Universitas Muhammadiah Sukabumi terhubung kemudian dikategorikan oleh suatu
(UMMI) merupakan instansi yang bergerak di standarisasi yang jelas dan terintegrasi dalam
bidang pendidikan, khususnya perguruan tinggi. suatu sistem, Desain Sistem ini dapat digunakan
Ummi memiliki berbagai website yang digunakan berulang kali oleh desainer ataupun pengembang
sebagai perantara antara mahasiswa dengan pihak dalam pengembangan produk, Desain Sistem
universitas yang memiliki karakteristik dan disesuaikan dengan kebutuhan organisasi[2].Saat
kebutuhan yang berbeda. Dalam pengembangan merancang dalam suatu sistem, sangat penting
websitenya terdapat perbedaan pendapat antara bagi perancang produk untuk mengadopsi pola
pihak universitas sebagai pemangku keputusan pikir gambaran besar yang diperlukan untuk
dengan pihak pengembang websitenya yang pengambilan keputusan [3].
menyebabkan ketidak konsistenan tampilan Saat ini, perkembangan teknologi di internet
antarmuka dan lamanya proses pembuatan desain menyediakan fasilitas desain seperti template
karena desainer selalu membuat konsep desai dari yang dapat memudahkan desainer, tetapi desainer
awal. design system merupakan guidline dan juga harus menyesuaikan dengan kebutuhan
dokumentasi yang terdiri dari kumpulan organisasi, karena setiap organisasi mempunyai
komponen user interface (UI) yang saling ciri khas yang berbeda-beda dan suatu organisasi
terhubung, metode yang digunakan menggunakan mempunyai identitas tersendiri, maka dari itu
atomic design. dengan menggunakan design desain sistempun mengalami perkembangan
system diharapkan ketidak konsistenan dalam dengan adanya metode atomic design sebagai
mengembangkan produk dan lamanya proses metode yang digunakan pada Desain Sistem[4].
desain di Ummi dapat diatasi. Berdasarkan hasil Universitas Muhammadiyah Sukabumi
pengujian waktu keseluruhan yang dibutuhkan merupakan universitas yang terletak di Kota
dalam menyelesaikan tugas setelah design system Sukabumi Provinsi Jawa Barat. Universitas
diterapkan adalah 1 jam 30 menit 48 detik, hal Muhammadiyah Sukabumi memiliki 7 Fakultas
tersebut berkurang dari hasil pengujian pra riset aktif, saat ini Universitas Muhammadiyah
yang membutuhkan waktu 2 jam 26 menit 44 Sukabumi memiliki beberapa produk seperti
detik. dalam menyelesaikan tugas mencapai 88% Siakad, E-Complaint, PMB dan lainya. Dalam
dari target 80% dan efisiensi waktu keseluruhan pembuatan sistemnya, tim pengembang dari
mencapai 86% dari target 80%. sehingga dengan Universitas Muhammadiyah Sukabumi masih
dibuatnya design system merupakan solusi yang menggunakan metode SDLC (System
tepat diimplementasikan di UMMI sukabumi. Development Life Cycle). Saat ini sudah banyak
aplikasi yang di gunakan di UMMI, Setiap sistem
Kata kunci : Design System, Atomic Design, di kembangkan oleh satu tim develover dan secara
Usability Matrics aspek pada bagian desainnya masih mengikuti
standar masing-masing developer.
Berdasarkan wawancara dengan tim
1. PENDAHULUAN pengembang di Universitas Muhammadiyah
DESAIN adalah aktivitas kreatif, akibatnya Sukabumi, ditemukan fakta ternyata selama
tidak ada proses yang akan menjamin desain yang mengembangkan sistem di Universitas
bagus, tetapi ada beberapa prinsip yang akan Muhammadiyah Sukabumi, tim desain di sana
meningkatkan kemungkinan mendapatkan desain belum ada yang membuat desain pada sistemnya,
yang bagus[1]. Desain Sistem merupakan tim desain di sana hanya membuat antarmuka
petunjuk dalam proses pembuatan desain produk
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
20
20
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

dengan cara mereka masing-masing, sehingga 2.1.2 Atomic Design

membuat proses pengembangan menjadi Atomic desain merupakan pendekatan
terhambat dan lama. Selain itu, dilakukan uji pra desain yang di kembangkan dan di populerkan
riset kepada desainer disana dan memberikan oleh Brad Frost, metode ini elemen aplikasi
tugas-tugas untuk merancang suatu tampilan user website di pecah menjadi bagian-bagian modular
interface, lalu di temukannya masalah. Masalah hingga yang terkecil. Elemen-elemen yang sudah
yang muncul adalah kurangnya keseragaman di pecal dibagi menjadi beberapa level atau
desain style yang dibangun oleh tim desain disana, hirarki: atoms, moleculs, organism, templates dan
sehingga mengakibatkan ketidak konsistenan pages. Tujuan dari dipecahnya semua elemen
tiap-tiap komponen antar muka yang akan untuk mereduksi kode berulang, setup dan
mempengaruhi user experience. Pada tahap mengkonsistensikan antar komponen dari
perancangannya, desainer terlalu berfokus ke website. [4]. Desain atom adalah metodologi
visual desain pada tiap-tiap element dan untuk membuat design system. Ada lima tingkat
komponennya serta mengatur jarak dan ukuran berbeda dalam desain atom:
setiap masing-masing element, sehingga 1. Atoms (level 1)
membuat proses perancangannya memakan Atom adalah elemen-elemen dasar yang paling
waktu. Itu di sebabkan karena tidak adanya kecil dari sebuah antarmuka contohnya label,
standar desain atau panduan desain yang di input field, warna, typography dan elemen kecil
terapkan, sehingga proses perancangannya lainya.
terhambat. Selain itu, desainer akan terus
merancang ulang dari awal secara manual karena 2. Moleculs (level 2)
tidak konsistennya dari tiap-tiap komponennya. Moleculs adalah kumpulan-kumpulan atoms yang
Dalam suatu perusahaan yang memiliki banyak di satukan sehingga membuat 1 moleculs, elemen-
sistem diperlukan perancangan desain yang baik elemen yang terikan bersama merupakan unit dari
yaitu dengan cara membuat framework atau yang suatu senyawa. Misalnya label formulir, search,
disebut dengan Design system. Design system tombol dan yang lainya di gabungkan menjadi
adalah seperangkat standar untuk mengelola bersama sebagai formulir dan sekarang mereka
desain dalam skala besar dengan mengurangi benar-benar satu kumpumpulan.
redundansi sekaligus menciptakan bahasa
bersama dan konsistensi visual di berbagai 3. Organism (level 3)
halaman dan saluran serta mempercepat dan Moleculs yang sudah di buat memberi kita
mempermudah proses desain dan beberapa blok terpisah untuk di kerjakan, dan
development[4]. sekarang di organism dapat menggabungkannya
Berdasarkan permasalahan diatas maka di bersama untuk membentuk suatu organism.
ajukan sebuah solusi untuk membangun sebuah Organism adalah kelompok moleculs yang
desain sistem, dimana nantinya akan menjadi digabung bersama untuk membentuk bagian
rujukan untuk tim IT Universitas Muhammadiyah komponen dan berbeda.
Sukabumi dalam pengembangan aplikasinya.
4. Templates (level 4)
2. ISI PENELITIAN Pada tahap templates ini kita membuat tata letak
2.1 Landasan Teori layout sehingga terlihat suatu halaman desain ,
2.1.1 Design System namun hanya berisi tata letak saja berbentuk
Design system adalah seperangkat standar struktur dari halaman website. Di sinilah kita akan
desain atau panduan desain untuk mendesain mulai melihat desain Bersatu.
sebuah produk yang di maksudkan untuk
mengelola desain antar muka dengan 5. Pages (level 5)
mengumpulkan komponen-komponen antar muka Pages adalah contoh spesifiknya dari template
dalam skala besar, komponen dan pola tersebut yang sudah dibuat sebelumnya. Di sini konten
dapat digunakan kembali secara berulang oleh kosong diganti dengan konten representatif nyata
desainer UMMI sukabimi, bisa disimpulkan untuk memberikan gambaran akurat tentang apa
bahwa design system merupakan kumpulan yang pada akhirnya akan dilihat pengguna
komponen desain yang terkumpul sebagai contohnya pewarnaan dan lain sebagainya.
panduan yang konsisten, Tujuannya adalah
mengurangi redundansi sekaligus menciptakan 2.1.3 Usability Matrics
bahasa Bersama untuk para desainer UMMI Usability metrics adalah kita melakukan
sukabumi dan konsistensi visual dan komponen di pengujian untuk mengukur kinerja desainer saat
berbagai halaman [5]. melakukan tugas yang diberikan. Metrik sangat
berguna untuk mengukur kegunaan selama
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
21
21
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

evaluasi kegunaan perangkat [Link] 1. Studi Literatur

umumnya diukur dengan menggunakan sejumlah Pada penelitian ini dilakukan studi dengan
metrik yang dapat diamati dan diukur yang beberapa literatur seperti buku dan jurnal yang
mengatasi kebutuhan untuk mengandalkan intuisi berkaitan dengan masalah pada penelitian ini
sederhana[14]. Adapun aktivitas yang dilakukan untuk mengetahui teori dasar penelitian.
adalah peneliti memberi desainer sekumpulan
tugas yang harus mereka selesaikan dengan 2. b. Wawancara
menggunakan design system yang diuji. Selama Wawancara merupakan salah satu teknik
pengujian berlangsung, peneliti mengamati setiap pengumpulan data yang dilakukan Melalui tatap
tindakan desainer. muka langsung dengan narasumber dengan cara
Berdasarkan rekomendasi ISO / IEC 9126-4 tanya jawab Langsung, Wawancara dilakukan
usability metrics mencakup: dengan Tim IT Universitas Muhammadiyah
1. Ektivitas Sukabumi yang berhubungan dengan data yang
Efektivitas dapat dihitung dengan mengukur terkait.
tingkat penyelesaian yaitu nilai keakuratan dan
kelengkapan yang digunakan pengguna untuk 2.2.2 Tahap Perancangan Desain
mencapai tujuan tertentu. Pada tahapan perancangan Design System
menggunakan pendekatan metode Atomic Design
2. Efisiensi adapun tahapan yang dilakukan disesuikan
Efisiensi relatif keseluruhan menggunakan rasio dengan penelitian. Tahapan perancangan design
waktu yang dibutuhkan oleh pengguna yang system tersebut sebagai berikut:
berhasil menyelesaikan tugas dalam kaitannya 1. Audit Desain
dengan total waktu yang diambil oleh semua Pada tahap Audit Desain dilakukan pengumpulan
[Link] nilai yang dihasilkan dengan semua komponen antarmuka pengguna perangkat
keakuratan dan kelengkapan yang digunakan lunak UMMI yaitu website Universitas
pengguna untuk mencapai waktu tertentu. Muhammadiyah Sukabumi.

2.2 Metode Penelitian 2. Interface Inventory

Pada penelitian kali ini penulis akan Pada tahap Interface Inventory dilakukan
menggunakan metode analisis kuantitatif yaitu pengumpulan komponen yang berfokus pada
metode untuk meneliti status sekelompok pengalaman pengguna.
manusia, suatu objek, suatu set kondisi suatu
sistem pemikiran ataupun suatu kelas peristiwa 3. Pendefinisian standarisasi Desain
pada masa sekarang. Tujuan dari penelitian Pada tahap pendefinisian standarisasi desain
deskriptif ini adalah untuk membuat deskripsi, dilakukan pengumpulan komponen lebih detail
gambaran atau lukisan secara sistematis, faktual, berdasarkan kategori dan nantinya ditentukan
dan akurat mengenai fakta-fakta, sifat-sifat serta beberapa komponen yang sudah di standarisasi
hubungan antar fenomena yang diselidiki. dan di buatkan Framework Design system.

2.3 Hasil dan Pembahasan

2.3.1 Pengujian Pra-riset
Pengujian Pra-riset dilakukan untuk
mengetahui masalah yang ada pada penelitian.
Pengujian Pra-riset dilakukan dengan cara
Gambar 1. Metode Penelitian memberikan tugas-tugas dan di selesaikan oleh
Tim Desain Universitas Muhammadiyah
Sukabumi dengan tujuan untuk mengevaluasi
2.2.1 Tahap Pengumpulan Data masalah dan kesulitan yang dialami Desainer.
Pengumpulan data dilakukan untuk Pengujian Pra-riset melibatkan dua partisipan
mendapatkan suatu informasi yang dibutuhkan yang merupakan Desainer dari seluruh website
dalam mencapai tujuan penelitian. Dalam Universitas Muhammadiyah Sukabumi. Tugas
penyusunan tugas akhir ini penulis mengambil yang di berikan adalah membuat 2 halaman
objek penelitian pada Tim IT di Universitas website yang harus di selesaikan oleh Tim desain
Muhammadiyah Sukabumi, Pengumpulan data Universitas Muhammadiyah Sukabumi. Tugas
dalam penelitian ini menggunakan 3 cara berikut dan waktu penyelesaian saat Prariset yang di
merupakan uraian yang di gunakan. berikan dapat di lihat di Tabel 3.1 yaitu sebagai
berikut :
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
22
22
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

Wawancara dilakukan dengan melibatkan 2

Tabel 1. Waktu Penyelesaian Tugas partisipan Desainer dari Tim IT Universitas
Skenario Waktu yang di gunakan Muhammadiyah [Link] dibawah ini
Tugas Designer 1 Designer 2 adalah kesimpulan dari tahapan wawancara.
Tugas 1 12 menit 22 detik 14 menit 08 detik

Tugas 2 13 menit 08 detik 16 menit 23 detik Tabel 2. Karakteristik Yang Didapat

Tugas 3 19 menit 43 detik 21 menit 12 detik

Tugas 4 17 menit 12 detik 18 menit 59 detik

Tugas 5 13 menit 11 detik 15 menit 23 detik

Tugas 6 14 menit 09 detik 15 menit 11 detik

Tugas 7 14 menit 55 detik 15 menit 44 detik

Tugas 8 9 menit 45 detik 11 menit 04 detik

Tugas 9 14 menit 23 detik 15 menit 48 detik

Total 2 jam 8 menit 48 2 jam 23 menit 52

waktu detik detik

Setelah dilakukannya pengujian pra-riset

didapatkan masalah yang di alami oleh desainer
terlihat saat melakukan perancangan tugas pra-
riset, Desainer terlalu berfokus ke visual detail
sehingga membuat proses perancangannya
memakan waktu. Desainer juga tidak mengetahui
component library dari figma sehingga ketika
membuat komponen yang sama di buat dengan
terus menerus dari awal secara manual. selain itu
ketika didapatkan nya warna yang tepat, desainer 2.3.3 Audit Design
tidak di buatkannya color style yang ada dalam Audit desain pada website merupakan
fitur figma sehingga ketika melakukan pewarnaan bagian penting dari evaluasi desain dan proses
di buat ulang secara manual dan hasilnyapun penataan pada website. Audit desain di lakukan
kuranganya konsistensi dalam tiap-tiap oleh peneliti yang bermaksud untuk
komponennya. Dalam pembuatanya pada saat mengidentifikasi masalah dalam desain pada
Pra-riset Designer 1 memerlukan waktu website yang menyebabkan kesulitan bagi
penyelesaian dengan waktu 134 menit dan pengguna saat berinteraksi dengan website.
designer 153 menit. Selain itu membuat Tujuannya adalah untuk mendefinisikan identitas
komponen antar muka. Masalah yang terjadi suatu perusahaan secara baik. Ketika mengtahui
seperti antar komponen dan tiap-tiap elemennya ketidak konsistensi dalam desain visual, maka ini
kurangnya konsisten, Tim Desain kesulitan ketika dapat melemahkan sebuah merek perusahaan.
menentukan komponen seperti Tata letak, Card, Ketidak konsistensi menyebabkan melemahnya
Button, Navbar dan yang lainya karena dalam pondasi. Sehingga, dalam melakukan audit,
proses mendesain tidak adanya panduan desain konsistensi merupakan pemeran utama untuk
dan hanya mengandalkan Internet saja sebagai dapat memastikan keseluruhan kekuatan atau
inspirasi. brand merek dari suatuperusahaan.

2.3.2 Wawancara
Tahapan wawancara merupakan teknik
penelitian dengan melakukan wawancara kepada
Tim Desain Universitas Muhammadiyah
Sukabumi untuk mengetahui bagaimana
karakteristik dan tujuan Tim Desain ketika
mendesain antar muka. Bertujuan untuk
mengumpulkan data kualitatif dan kemudian data
tersebut digunakan untuk di analisis
permasalahannya terhadap Tim desain.
Gambar 2. Audit Desain Font Colors
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
23
23
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

Tujuannya untuk menentunkan apakah

komponen tersebut termasuk komponen general
atau komponen spesifik.

2. Struktur komponen
Pada tahap ini melakukan pengguraian desain
menentukan varian dari setiap komponen yang
akan dilakukan selanjutnya, yaitu menentukan
struktur komponen dengan cara menguraikan
elemen yang ada pada setiap komponen yang ada
pada sebuah halaman website.

Gambar 3. Audit Desain Kumpulan Warna Biru

2.3.4 Interface Inventory

Pada tahap ini, dilakukan aktivitas untuk
memulai sistemasi user interface. Dalam tahap
prosesnya, peneliti melakukan pengambilan
screenshot elemen user interface pada sistem
website UMMI Sukabumi, Lalu dilakukannya Gambar 5. Struktur Komponen Button
pengelompokan komponen yang memiliki pola
yang sama dan di simpan pada system yang 3. Organize Perceptual Pattern
disebut interface inventory. Tujuanya adalah Identifikasi pada elemen-elemen perceptual
untuk menentukan pola desain yang paling pattern pada sistem, elemen-elemen ini terdiri dari
penting, meneliti konsisten tidaknya dan unsur atom pada atomic design metode yang
bagaimana pola tersebut harus di merupakan mulai dari elemen paling dasar dan
[Link] ini adalah beberapa contoh kecil dari elemen website sebagai bahan
interface inventory dari UMMI sukabumi. pembangunan pondasi pada design system seperti
color palettes, typographic, spacing, icon dan lain
sebagainya.

4. Organize Functional Pattern

Mengidentifikasi Functional pattern dilakukan
dengan mengadaptasi dari metode atomic design
yang digunakan untuk membuat dokumentasi,
guideline, component library dan komponen-
komponen atom, moleculs, organism, templates
dan pages dengan elemen-elemen dasar yang di
ambil dari perceptual pattern yang sudah di
identifikasi sebelumnya.

Gambar 4. Identifikasi Behaviour

2.3.5 Perancangan Design System

1. Menentukan skala spesifik

Tahapan ini dilakukan penentuan komponen
dengan pola tertentu yang terdapat pada setiap
elemen komponen yang sudah di identifikasi.
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
24
24
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

2.3.6 Implementasi Design System

Pada tahap implementasi ini dilakukan
dengan cara menerapkan model konseptual
perceptual pattern yang didalamnya terdapat
warna, typography, spacing dan layout,
component library yang dapat di publikasikan
yang berkolaborasi ke beberapa anggota team
pada local style library tools figma.

2.3.7 Pengujian Design System

Tahap selanjutnya yang di lakukan adalah
pengujian kepada Designer Ummi sukabumi
dengan menggunakan Design System yang telah
di buat, Adapun harapan dan tujuan yang ingin di
capai oleh peneliti adalah untuk mengetahui
bagaimana designer dapat menggunakan design
system dengan baik dan benar pada saat
melakukan perancangan antar muka pada system
UMMI. Selain itu pengujian ini dilakukan apakah
penggunaan pattern library dan style library yang
telah di bangun sesuai harapan dan kebutuhan
designer atau sama saja. Metode yang di gunakan
pada saat melakukan pengujian adalah metode
usability matrics. Berikut di bawah ini adalah
tujuan pengujian dan harapan penelitian.

Gambar 7. Component Library Yang

Terkumpul

Tabel 3. Tujuan Pengujian

No Tujuan Pengujian
1 Nilai Efektivitas penyelesaian tugas pada pengujian
mencapai 80%
2 Nilai rata-rata efisien waktu relatif keseluruhan
penyelesaian tugas dari pengujian mencapai 80%.

1. Efektivitas
Gambar 6. Hasil Functional Pattern Berdasarkan tugas-tugas yang dilakukan
oleh desainer menghasilkan varian perolehan
durasi waktu penyelesaian tugas berdasarkan
tugas-tugas yang diberikan kepada desainer dan di
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
25
25
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

selesaikan oleh desainer memperoleh waktu 2. Efektivitas penyelesaian tugas

durasi waktu penyelesaian tugas pengujian pasca- Dari 18 tugas keseluruhan menggunakan
penelitian. dibawah ini adalah hasil dari pengujian design system yang dilakukan oleh semua
dengan menggunakan design system yang telah di desainer menghasilkan total 16 tugas berhasil dan
bangun. 1 tugas gagal, Sehingga efektivitas penyelesaian
Dari hasil perolehan waktu yang didapatkan tugas yang diapatkan oleh semua desainer pada
pada saat melakukan pengujian pasca penelitian saat pengujian pasca-penelitian yaitu 88%.
menghasilkan rata-rata penyelesaian tugas dengan Sehingga bisa simpulkan pengujian efisiensi ini
perolehan waktu 1 jam 24 menit 29 detik. sudah mencapai tujuan pengujian. Kemudian dari
Efektivitas dihitung dengan mengukur tingkat perolehan waktu yang didapatkan sebelumnya
penyelesaian tugas yang menggunakan design pada pengujian pasca-penelitian didapatkan rata-
system. Pengujian awal ini sebagai metrik rata efisiensi penyelesaian relatif keseluruhan
dengan menggunakan metode usability matrics
sesuai dengan metode yang dilakukan. Berikut
Tabel 4. Waktu Penyelesaian Tugas dibawah ini adalah hasil Efisiensi waktu.

Tabel 6. Efesiensi Waktu

Jumlah
Tugas
Efisiensi waktu
Tugas 1 100%
Tugas 2 42%
Tugas 3 100%
Tugas 4 100%
Tugas 5 100%
Tugas 6 100%
Tugas 7 100%
Tugas 8 100%
Tugas 9 40%

kegunaan dasar, tingkat penyelesaian Berdasarkan nilai efisiensi waktu

dihitung dengan menetapkan nilai biner '1' jika menghasilkan perolehan rata-rata nilai efisiensi
desainer berhasil menyelesaikan tugas dan biner waktu relatif keseluruhannya yaitu memperoleh
'0' jika desainer tidak berhasil. Lalu dari 86%. Sehingga dapat disimpulkan rata-rata
perolehan waktu tersebut diuraikan keberhasilan efisiensi waktu keseluruhan penyelesaian tugas
penyelesaian tugas. Berikut adalah hasil yang yang dilakukan oleh desainer UMMI sukabumi
dapat dilihat pada tabel Tabel 5. pada pasca-pengujian sudah memenuhi tujuan
pengujian.

Tabel 5. Keberhasilan Penyelesaian Tugas 3. Evaluasi Hasil Pengujian

Tahap evaluasi hasil pengujian dilakukan
apakah tujuan pengujian sudah tercapai atau tidak,
dengan cara membandingkan hasil yang didapat
pada pengujian pra-riset penelitian dan hasil
pengujian pasca-penelitian menggunakan design
system. Pengujian pra-riset penelitian dilakukan
untuk mengetahui seberapa besar efektivitas dan
efisiensi keberhasilan peneyelesaian tugas oleh
desainer UMMI sukabumi dalam melakukan
perancangan antar muka sebelum menggunakan
design system. Berikut adalah Perbandingan
waktu penyelesaian tugas dari hasil pra-riset
penelitian dan pengujian kepada desainer
menggunakan design system.
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
26
26
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

Tabel 7. Perbandingan Pengujian DAFTAR PUSTAKA

Hasil Waktu Hasil Waktu
Designer penyelesaian saat penyelesaian pasca- [1] A.T. Bahill, R. Botta, "Fundamental
pra-riset penelitian Principles of Good Design System,"
1. 2 jam 8 menit 48 1 jam 17 menit 18 Engineering Management Journal, Vol. 20
detik detik No. 4, Desember 2008.
2. 2 jam 23 menit 52 1 jam 32 menit 21
detik detik
[2] Janne Koivisto, The Building Blocks Of a UI
Rata-rata 2 jam 16 menit 21 1 jam 24 menit 29 Sandwich, ISBN-13:9781-4842-4938-3,
detik detik 2019.
[3] D. G. Fitzpatrick, "Understanding Design
Berdasarkan hasil evaluasi pengujian yang Systems and Patterns," [online]. Available:
dilakukan, didapatkannya rata-rata perolehan [Link]
waktu dalam penyelesaian tugas membuat system [Diakses 12 Mei 2021].
interface(UI) oleh masing-masing designer dari [4] B. Frost, Atomic Design, ISBN: 978-0-
UMMI Sukabumi sebelum menggunakan design 9982966-0-9, 2016.
system pada pengujian pra-riset penelitian [5] Therese Fessenden, "Design System,"
mendapatkan perolehan waktu rata-rata dengan 2 [online].Available:[Link]
jam 26 menit 44 detik dan setelah menggunakan m/articles/design-systems-101/ [Diakses 13
Framework Design System yang sudah di bangun Mei 2021].
mendapatkan perolehan waktu 1 jam 30 menit 48 [6] Theme Junkie, "What is Figma? (And How to
detik, Disini terlihat perolehan yang di dapatkan UseFigmaforBeginners),"[online].Available:
waktu penyelesaian tugas berkurang setelah [Link]
menggunakan Framework Design System pada figma/ [Diakses 13 Mei 2021].
pengujian pasca-penelitian. Dengan itu dapat di [7] Moultrie, J., Clarkson, P.J., Probert, D.,
simpulkan bahwa dengan menggunakan Design "DEVELOPMENT OF A DESIGN AUDIT
System di UMMI sukabumi dapat membantu TOOL FOR SMEs" Journal of Product
designer UMMI sukabumi mempercepat proses Innovation Management, Vol. 24 No. 4,
perancangan user interface(UI). 2007.
[8] Elaine Tran, “Everything you need to know
aboutDesignSystems,"
3 PENUTUP [online].Available:[Link]
Berdasarkan semua hasil penelitian yang hing-you-need-to-know-about-design-
sudah di lakukan sebelumnya, menghasilkan systems-54b109851969 [Diakses 29 Juli
efektivitas penyelesaian tugas dengan 88%, rata- 2021].
rata efisiensi waktu keseluruhan dengan 86% [9] Anton,Nikolov,“Designprinciple:Consistenc
sehingga peneliti dapat dapat mengambil y,"[online].Available:[Link]
kesimpulan bahwa Framework Design System ign-principle-consistency-6b0cf7e7339f
yang sudah dibangun merupakan Design Library [Diakses 29 Juli 2021].
yang sudah tepat untuk desainer UMMI [10] Jina Anne, " Designing your design
sukabumi, karena bisa menambah produktivitas system,"[online].Available:[Link]
penyelesaian perancangan inter face(UI) di [Link]/designsystemshandbook/designi
UMMI sukabumi sehingga perolehan waktu ng-design-system [Diakses 01 Agustus Mei
membuat desain antar muka setelah menggunakan 2021].
Framework Design System berkurang di [11] Makers Institute, " UI dan UX (User
bandingkan sebelumnya pada saat pra-riset Interface dan User Experience)," [online].
penelitian, selain itu hasil antar mukanya pun Available:[Link]
membuat tiap komponen yang ada didalamnya tute/ui-ux-705e37916934 [Diakses 9 Agustus
jadi konsisten dan telihat rapih dengan 2021].
memanfaatkan panduan desain dan dokumentasi [12] Inés carriery, " Sistem Desain: Interaksi
komponen dengan elemen fondasinya yang sudah yang lancar adalah moto baru untuk desainer
di standarisasi. dan pengembang GeneXus," [online].
Available:[Link]
us/design-systems-smooth-interaction-is-
the-new-motto-for-genexus-designers-and-
developers/ [Diakses 25 Mei 2021].
 KOMPUTA : Jurnal Ilmiah Komputer dan Informatika
27
27
Vol. 10, No. 1, April 2021, ISSN : 2089-9033, e- ISSN : 2715-7849

[13] Alla Kholmatova, A practical guide to

creating design languages for digital product,
ISBN (ePUB): 978-3-945749-60-9, 2017.
[14] Justin Mifsudo, " Usability Metrics – A
Guide To Quantify The Usability Of Any
System,"[online].Available:[Link]
[Link]/usability-metrics-aguidetoquantify-
system-usability/ [Diakses 02 agustus 2021].
[15] Selly Huldan, Alif Finandhita, "
Pengembangan design system pada
perangkat lunak ibid dengan pendekatan
atomic design," Engineering Journal, , Vol. 1
No. 1, Mei 2021.