## Jurnal Teknologi Terpadu
https://journal.nurulfikri.ac.id/index.php/jtt ISSN : 2477-0043 ISSN ONLINE : 2460-7908

## DESIGN SYSTEM PADA PERANCANGAN ANTAR MUKA PERANGKAT LUNAK SISTEM AKSES DIGITAL
Apriansyah Rizqi Setiawan 1 , Marsani Asfi 2 , Agus Sevtiana 3 , Sudadi Pranata 4 , Willy Eka Septian 5
1,2,3,5 Fakultas Teknologi Informasi, Universitas Catur Insan Cendekia
4 Fakultas Ekonomi dan Bisnis, Universitas Catur Insan Cendekia Kota Cirebon, Jawa Barat, 45133
apriansyahrizs@gmail.com , marsani.asfi@cic.ac.id , agus.sevtiana@cic.ac.id , sudadi.pranata@cic.ac.id , willy.eka.septian@cic.ac.id

## Abstract
In developing software systems, there were no rules for making interface patterns in web base applications. The problem is the inconsistency of design styles between software, and the interface design development process takes a long time. This study aims to produce a design framework called Access Digital Design System. The system development method approach used in this research is Atomic Design which has several stages adapted to the investigation. In this study, the design system built  is limited  to  product  elements  consisting  of  functional  patterns  and  perceptual  patterns.  This  research  will  produce  a  design system made up of perceptual and available marks as output artifacts in the form of code libraries, style guides, and pattern libraries.  Based  on  the  study,  the  designed  Design  System  can  reduce  time  spent  creating  user  interface  designs  by  using component  guidelines and  documentation  with  standardized  foundation  elements  to  increase  productivity.  Additionally,  the final interface design becomes more consistent and uniform .
Keywords: Consistency, Design System, Efficiency, User Interface , User Experience

## Abstrak
Dalam mengembangkan sistem perangkat lunak, selama ini belum ada aturan tentang pola standar interface pada perangkat lunak  berbasis  web.  Masalah  inkonsistensi  pada  gaya  desain  antar  perangkat  lunak  dan  waktu  yang  dibutuhkan  dalam pengembangan desain interface cenderung menghabiskan waktu. Penelitian ini bertujuan untuk menghasilkan kerangka kerja desain bernama Akses Digital Design System . Pendekatan metode perancangan desain sistem yang digunakan dalam penelitian ini adalah Atomic Design . Pada penelitian ini design system yang dibangun dibatasi berupa elemen product yang terdiri dari functional pattern dan perceptual pattern .  Adapun  hasil  atau  artefak  keluaran  menghasilkan design  system yang  terdiri perceptual pattern dan functional pattern dalam bentuk pattern library , style guide dan code library . Dari hasil penelitian, design system dapat meningkatkan produktivitas dalam mendesain antarmuka pengguna sehingga waktu yang diperlukan dapat dikurangi.  Hal  ini  dikarenakan  adanya  dokumentasi  sebagai  panduan  terkait  komponen-komponen  yang  akan  digunakan sebagai elemen dasar standar. Selain itu, desain user interface yang dihasilkan lebih menyatu dan konsisten.
Kata kunci: Design System, Efisiensi, Konsistensi, User Experience , User Interface

## 1. PENDAHULUAN
Pada saat mengembangkan sistem perangkat lunak tidak ada aturan untuk membuat pola user interface pada sistem. Oleh karena  itu designer dalam  pembuatan user  interface dari sistem  perangkat  lunak  selama  ini  berdasarkan  eksplorasi. Masalah dalam gaya yang berbeda dalam mendesain antar muka  sistem  yang  dibangun  oleh developer menyebabkan inkonsistensi tampilan user interface. Hal ini tentu saja akan mempengaruhi user  experience .  Ketika  dalam  proses perancangan user  interface , designer cenderung  terlalu fokus pada detail visual, yang membutuhkan waktu. Selain
itu, hasil user interface yang dibuat tidak konsisten selama development , developer juga  melakukan  upaya  yang berlebihan karena ketidakkonsistenan dalam desain. Desain harus  memiliki  konsep  atau  jenis  informasi  yang  sama, tetapi menggunakan pendekatan yang berbeda.
Berdasarkan permasalahan tersebut, maka diperlukan suatu framework desain  agar  adanya  dokumentasi  dan design language. Salah metodenya adalah design system . “ Design system merupakan seperangkat pola yang saling berhubungan serta langkah sistematis dan kolaboratif yang
57 | Jurnal Teknologi Terpadu Vol. 9 No. 1 Juli 2023
diatur secara koheren untuk mempercepat dan mempermudah  proses  desain  dan development dalam mencapai  tujuan  produk  digital”  [1].  Dalam  perspektif pengalaman  pengguna adanya konsistensi  merupakan salah satu    faktor  penting      yang    berpengaruh      terhadap kemudahan  dalam  menggunakan    desain.    Konsistensi dalam mendesain menghindari pengguna dari kebingungan serta  diperolehnya  nilai    baik  pada  kepuasan    pengguna. Oleh  karena  itu, design    system berperan  penting  bagi startup khususnya di Indonesia [2].
Beberapa penelitian tentang interface perangkat lunak yaitu digunakan  untuk  mengevaluasi  kualitas  suatu website . Prinsip heuristic    evaluation digunakan  untuk  evaluasi. Dari  hasil  penelitian  diperoleh  lima    prinsip    yang memenuhi  aturan heuristic    evaluation yaitu  visibilitas status sistem, kesesuaian antara sistem dengan dunia nyata, standar  dan  konsisten,  memahami  lebih  baik    dari mengingat, flexibilitas dan    efisien.    Sedangkan  lima prinsip  yang  tidak  terpenuhi  yaitu kendali  dan  kebebasan pengguna,  estetika,  pencegahan  kesalahan,  desain  secara minimalis,  bantuan  untuk  pengguna  dalam  mengenali, berdialog    serta    memperbaiki    kesalahan,    serta    adanya dokumentasi.  Pengujian    terhadap  performa website menunjukkan nilai 75, hal ini berarti sudah cukup baik [3].
Penelitian  lainnya  [4]  tentang  UI/UX  pada online shop . Hasil penelitian menunjukkan pengaruh dari User Interface (UI)  dan User  Experience (UX)  dalam  merancang  desain prototype suatu  website.  Proses  perancangan  yang digunakan  adalah  metode Design  Thinking dengan emphatize, define, ideate, prototype dan test [4] . Penelitian lainnya  terkait  dengan  perancangan web  mobile  prototype desain untuk sistem jual beli. Desain menggunakan Figma. Penelitian  lainnya  [13]  tentang  rancang  bangun  sistem informasi  agroindustri.  Hasil  dari  desain    antarmuka memudahkan  pengembangan    sistem  selanjutnya  dan kemudahan  bagi  pengguna  terhadap  tampilan  yang user friendly .    Hasil  penelitian  berupa  desain  tampilan  web mobile [5].  Begitu  juga  penelitian  yang  dilakukan  [6] penggunaan metode design thinking serta pengujian dengan system  usability  Scale. Sedangkan  penelitian  yang dilakukan  [7]  penggunaan  metode atomic  design dalam desain sistem di suatu website perguruan tinggi.
Penelitian  lainnya  dilakukan  [8]  adalah  menggunakan metode User  Centered  Design (UCD).  Dalam  penelitian tersebut  dilakukan  sketsa  perancangan  antarmuka  aplikasi serta komponen-komponen antarmuka. Perancangan sketsa menggunakan  sistem  desain material design sedangkan untuk merancang antarmuka dengan high  fidelity dilakukan menggunakan perangkat  lunak Figma [8].
Penelitian terkait desain user interface untuk aplikasi virtual tour pengenalan  lingkungan  kampus  dirancang  dengan aplikasi balsamiq [9].  Hasil  penelitian  menghasilkan tampilan menjadi lebih menarik dan interaktif [9], penelitian lainnya terkait design system adalah melalui design system
untuk  mempermudah  masinis  untuk  mengetahui  kondisi kereta api [10].
Dari uraian di atas permasalahan dalam penelitian ini yaitu belum adanya aturan dalam menerapkan pola user interface pada sistem, designer user interface sistem perangkat lunak masih  berdasarkan  eksplorasi.  Selain  itu  permasalahan dalam  gaya  yang  berbeda  dalam  mendesain  antar  muka sistem  yang  menyebabkan  inkonsistensi  tampilan user interface, designer juga cenderung terlalu fokus pada detail visual, yang membutuhkan waktu.
Tujuan  dari  penelitian  ini  adalah  bagaimana  menerapkan konsep  atau  jenis  informasi  yang  sama  dalam  proses perancangan  aplikasi  berdasarkan  pendekatan  yang berbeda.  Manfaat  yang  akan  diperoleh  dari  penelitian  ini adalah:  (1)  adanya  konsistensi  dalam  perancangan user interface ,  (2)  adanya  standar  yang  seragam  dalam mendesain antar muka sistem, (3) memiliki panduan utama dalam merancang desain antar muka sistem, karena objek- objek  yang  digunakan  memiliki  konsistensi  serta keseragaman  dalam  merancang interface sistem.  Metode yang  digunakan  dalam  perancangan  antarmuka  adalah design  system dengan  pendekatan atomic  system. Design system digunakan dalam penelitian ini untuk menyelesaikan permasalahan  dalam  perancangan  desain  tampilan  karena menerapkan pola yang saling berhubungan dengan langkah- langkah yang sistematis dan kolaboratif. Langkah-langkah ini  diatur  secara  koheren  agar  dapat  mempercepat  dan mempermudah  proses  desain  dan development dalam mencapai tujuan produk digital.

## 2. METODE PENELITIAN
Metodologi penelitian yang dilakukan dalam penelitian ini sesuai dengan diagram penelitian seperti pada Gambar 1.
Gambar 1 . Kerangka Penelitian
Gambar 1 kerangka penelitian yang dilakukan adalah :

## 2.1. Uji Test Perancangan Pra-riset pada Desainer
Pada  tahap  ini  pengujian  pra-riset  dilakukan  untuk mengetahui  masalah  apa  yang  ditemukan  dan  juga  waktu yang  dibutuhkan  untuk  menyelesaikan  tugas  pengujian. Tugas yang diberikan berupa case study yang mengharuskan  desainer  membuat  tampilan user  interface. Kemudian  hasil  dari  pengujian  ini  akan  dijadikan pembanding sebagai acuan dalam pengujian design system.
2.2 Bedah  Masalah  pada  Desainer  dengan  Metode  In- depth Interview
Pada tahap ini dilakukan pengumpulan tentang data perilaku dan pengalaman desainer ketika merancang user interface. Teknik in-depth  interview melibatkan  wawancara  intensif dengan  responden  untuk  mengeksplorasi  perspektif  ide, program atau situasi tertentu [11].

## 2.3. Audit Desain Perangkat Lunak
Di tahapan ini dilakukan desain audit pada salah satu desain perangkat  lunak  yang  telah  dikembangkan  di  perusahaan. Audit dilakukan untuk mencatat dan mengumpulkan semua komponen user  interface yang  terdapat  pada  perangkat lunak. Selanjutnya dilakukan kategorisasi berdasarkan jenis komponennya  sehingga  diperoleh  daftar-daftar  komponen yang tidak konsisten [12].

## 2.4. Pendefinisian Standarisasi Desain
Pada  tahap  ini  dilakukan  pengumpulan  untuk  semua komponen  yang  ter-kategorisasi.  Di  tahapan  ini  juga ditentukan satu atau beberapa style yang dijadikan standar untuk  setiap  komponen.    Selanjutnya  ditentukan pattern library dan style guideline sebagai brand atau identitas dari desain  serta  dibuatkan  panduan study  case dalam menggunakan komponen desain [12].

## 2.5. Implementasi Design System
Pada  tahapan  ini  dilakukan  proses  implementasi design system dengan melakukan pembentukan pattern library dari hasil  perancangan  model  konseptual.  Dalam  tahapan  ini akan dibangun juga dokumentasi berupa framework desain sebagai  bentuk deliverables berupa  dokumentasi  panduan desain.
3. HASIL DAN PEMBAHASAN
3.1. Pengujian Pra Penelitian
Hasil  dari  pengujian  pra-penelitian  diperoleh  lamanya waktu  dalam  membuat user  interface oleh designer .  Hasil pengujian  dari designer dilakukan  dengan  skenario  tugas yang  dibagi  dalam  beberapa  tugas  untuk  membuat  satu halaman website .
Tabel 1. Pengujian Pra Penelitan
Deskripsi Durasi Tugas 1 26 menit 45 detik Tugas 2 45 menit 10 detik Tugas 3 48 menit 20 detik Total 2 jam 15 detik Rata-rata 40 menit 5 detik
Dari  perolehan  waktu  pada  Tabel  1  rata-rata  waktu penyelesaian tugas pra-penelitian adalah 40 menit 5 detik. Data  pra-penelitian  ini  selanjutnya  dijadikan  dasar perbandingan dengan pengujian pasca-penelitian.

## 3.2 In-Depth Interview
Hasil In-Depth  Interview bertujuan  untuk  mengetahui masalah  secara  dalam  tentang  apa  saja  yang  dialami  oleh designer . Kesimpulan hasil wawancara seperti terlihat pada Tabel 2.
Tabel 2. Hasil In-Depth Interview
No. Kesimpulan 1. Desainer mengalami kebingungan akan konsep user interface.
2. Pada user  interface , designer elemen  untuk  setiap  komponen dibuat dari awal sehingga membutuhkan waktu.

## 3.3. Audit Interface
Hasil audit  interface seperti  terlihat  pada  Gambar  2 merupakan  komponen-komponen  yang  tidak  konsisten. Komponen  antarmuka  yang  tidak  konsisten  tersebut meliputi elemen-elemen umum. Tabel 3 adalah hasil audit website CV  Akses  Digital.  Pada  Tabel  3  tersebut  terlihat beberapa jenis elemen button yang digunakan pada website .
Gambar 2 . Hasil Audit Interface
3.4. Interface Inventory
Hasil dari interface inventory diperoleh melalui identifikasi perilaku dari pengguna, uraian aksi spesifik yang dihasilkan serta  pengumpulan  dari  komponen.  Hasil  dari interface inventory menjadi  pengalaman  bagi  pengguna  ketika berinteraksi dengan website .
Tabel 3 . Hasil Interface Inventory
Kategori Komponen Basic Button Button Icon Button Link
3.5. Perancangan Design System
1. Struktur Komponen
Perancangan design system dilakukan dengan menguraikan struktur pada tiap komponen. Tiap suatu komponen terdiri dari  bagian  elemen  elemen  terkecil  sesuai  dengan Atomic Design Methodology .
Gambar 3. Struktur Komponen Perancangan Design System
Pada  Gambar  3  merupakan  komponen button yaitu container , label serta icon .  Komponen-komponen button merupakan  bentuk  lain  dari  komponen button .  Varian komponen button terlihat pada Tabel 4.
Tabel 4. Varian Komponen Button
Varian Keterangan Basic Button Digunakan  sebagai  suatu  tindakan  pada antarmuka. Contoh : berpindah antar halaman atau melakukan submit pada suatu form .
Button dengan icon Digunakan  sebagai  label  untuk  menjelaskan maksud interaksi pada button . Icon yang ada dapat  memberikan  kejelasan  interaksi  pada button . Button Icon Digunakan  sebagai  fungsi  dalam  interaksi
menggunakan  button  yang  terdapat icon.
Button  icon merupakan button dengan icon sebagai interaksi pada suatu antarmuka.
2. Perceptual Pattern
Perancangan Perceptual  Pattern merupakan  perancangan pada  elemen  yang  mendasar  sebagai  bentuk  visual komponen  utama.  Perancangan perceptual pattern terdiri dari  warna,  spasi  dan  jenis  huruf  sebagai  penyusun  antar muka.

## A. Identifikasi Warna
Identifikasi warna terdiri dari kumpulan warna pada Audit antarmuka.  Identifikasi  warna  dapat  berupa  warna  yang dikelompokkan, penentuan pola serta fungsi dari warna, dan pemberian building block warna. Gambar 4 merupakan hasil identifikasi warna yang dilakukan pada website yang telah ada di CV Digital Akses.
Gambar 4. Identifikasi Warna
Pada proses pengumpulan warna, jika terdapat penggunaan varian  warna  yang  memiliki  kesamaan  selanjutnya  akan dilakukan seleksi warna menjadi warna dasar. Selanjutnya seperti  Gambar  5  merupakan  hasil  identifikasi  proses pembentukan  warna  dilakukan  dengan  penambahan shade dan tints . Hasilnya diperoleh level turunan dari warna yang lebih fokus dan tepat.

## Gambar 5. Pembentukan Blok Warna
Setelah  mengidentifikasi  komponen  warna,  dilakukan perancangan  untuk  mengelompokkan  penggunaan  warna. Tabel 5 merupakan analisis pengelompokan design system untuk warna yang diusulkan.
Tabel 5 . Penggunaan Warna
Kode Hex Warna Penggunaan #4E9F50 Primary #71C423 Success #00A7D1 Info #F9A004 Warning #FF353C Danger #181C32 Neutral

## B. Perancangan Jenis Huruf
Pada penelitian ini dalam mengidentifikasi font yang akan digunakan  pada design  system menggunakan font sistem seperti  pada  Gambar  6    untuk  memberikan  pengalaman terbaik di setiap Sistem Operasi. Karena mengikuti standar jenis huruf dari setiap Sistem Operasi masalah kinerja juga berkurang.
Gambar 6. Perancangan Jenis Huruf
3. Functional Pattern
Perancangan functional  pattern dilakukan  berdasarkan hirarki  pemisahan  antar  komponen.  Pemisahan  dilakukan
berdasarkan jenis dan fungsi dari setiap komponen. Tabel 6 merupakan hasil pengelompokan.
Tabel 6. Perancangan Functional Pattern
Hirarki Komponen Gambar Form Button Checkbox Date Picker
Number Input Radio Searchbar Select Switch Text Area Form Text Input Time Picker Toogle Data Display Badge Separator
Table Feedback Alert Navigation Pagination Media Symbol Disclosure Accordion Tabs Overlay Modal 3.6. Implementasi Perancangan

## 1. Implementasi Perceptual Pattern
Implementasi perceptual pattern mencakup warna dan font. Adapun penjelasannya adalah sebagai berikut :

## A. Warna
Implementasi  sistem  warna  yang  terlihat  pada  Gambar  7 memiliki  kesenjangan  logis  antara  satu  sama  lain.  Hal  ini dilakukan untuk memastikan adanya kontras yang baik dan aksesibilitas yang sempurna.
Gambar 7 . Implementasi Sistem Warna
B. Typography
Implementasi typography seperti pada Gambar 8 dilakukan untuk mendapatkan konsistensi di seluruh pengalaman dan platform.  Adanya  aturan  dalam  penentuan  tipografi  akan memberikan sajian konten dengan jelas dan efisien.
Gambar 8. Implementasi Sistem Typography

## 2. Implementasi Functional Pattern
Implementasi  dari functional  pattern dari  setiap  hasil rancangan yang telah dilakukan terdiri dari :
A. Accordion
Accordion merupakan  komponen  yang  dapat  melakukan collapse atau memperlihatkan dan menyembunyikan bagian tertentu, seperti terlihat pada Gambar 9.
Gambar 9. Implementasi Accordion pada FP
B. Alert
Alert diimplementasikan  berupa  notifikasi  pesan  umpan balik  kontekstual  untuk  tindakan  pengguna  biasa  dengan
beberapa  pesan  peringatan  yang  tersedia  dan  fleksibel, seperti terlihat pada Gambar 10.
Gambar 10. Implementasi Allert pada FP

## C. Badge
Implementasi Badge berupa  komponen  untuk  membuat label,  dan  perhitungan  kecil.  Komponen badge akan digunakan  untuk  membuat  label,  dan  menampilkan  angka dalam  bentuk  label. Badge diterapkan  pada  berbagai elemen  HTML,  seperti  dalam element  heading ,  tombol, table dan  lain-lain.  Elemen Badge seperti  terlihat  pada Gambar 11.
Gambar 11. Implementasi Badge pada FP

## D. Breadchumb
Sebuah komponen penunjuk lokasi halaman saat ini dalam hierarki  navigasi  yang  secara  otomatis  menambahkan pemisah. Elemen breadchumb terlihat pada Gambar 12.
Gambar 12 . Implementasi Breadchumb pada FP

## E. Button
Komponen  pada design  system yang  berguna  untuk melakukan action atau aksi dalam form pada sistem. Elemen button terlihat seperti pada Gambar 13.
Gambar 13. Implementasi Button pada FP
F. Card
Card merupakan  tempat  konten  yang  fleksibel  dan  dapat diperluas  dengan  berbagai  varian  dan  opsi.  Elemen Card terlihat seperti pada Gambar 14.
Gambar 14. Implementasi Breadchumb pada FP
G. Carousel
Carousel merupakan hasil implementasi berupa komponen slideshow .  Elemen Carousel terlihat  seperti  pada  Gambar 15.
Gambar 15 . Implementasi Carousel pada FP
H. Form, Modal, serta Pagination
Implementasi form , modal, dan pagination juga dilakukan dalam implementasi hasil dari perancangan design system.
I. Rating
Alert dapat  digunakan  untuk  pesan  umpan  balik  secara kontekstual  melelalui  beberapa  pesan  peringatan  yang tersedia  dan fleksibel .  Implementasi rating terlihat  seperti pada Gambar 16.
Gambar 16 . Implementasi Rating pada FP
J. Ribbon
Ribbon merupakan komponen yang dapat digunakan untuk memberikan  informasi  atau  sentuhan  tipis  untuk  kartu. Implementasi Ribbon terlihat seperti pada Gambar 17.
Gambar 17. Implementasi Rating pada FP
K. Separator
Separator berupa komponen khusus untuk digunakan pada blok  halaman  perangkat  dengan  ruang  dan  garis  visual. Implementasi Separator terlihat seperti pada Gambar 18.
Gambar 18. Implementasi Separator pada FP
L. Symbol
Symbol adalah  komponen  khusus  untuk  avatar  atau  label dengan warna konten. Implementasi Symbol terlihat seperti pada Gambar 19.

## M. Table
Tabel berupa daftar yang berisi susunan informasi atau data yang  ditampilkan  dalam  bentuk  baris  dan  kolom,  Secara umum suatu tabel terdiri atas beberapa elemen antara lain: baris,  kolom,  sel,  dan  garis.  Implementasi  Tabel  terlihat seperti pada Gambar 20.
Gambar 20 . Implementasi Tabel pada FP

## N. Tabs
Tab adalah bagian dari program atau halaman HTML yang digunakan  untuk  menampilkan  satu  bagian  tertentu  dan menyembunyikan bagian lain yang tidak diperlukan. Untuk menampilkan  tab  dan  isinya,  pertama  kita  harus  membuat tombol tabnya dengan div atau bisa juga button . Kita bisa memilih  isi  tab  yang  akan  ditampilkan  dengan  tombol tersebut. Implementasi Tab terlihat seperti pada Gambar 21.
Gambar 21. Implementasi Tab pada FP

## 3.7. Implementasi Code Library
Setelah  implementasi perceptual  pattern dan functional pattern pada desaign  system .  Di-eksekusi  ke  dalam code library menggunakan HTML dan CSS dan disimpan pada https://aksesdigital-ds.herokuapp.com
1. Code Library Typography
Hasil dari implementasi perceptual pattern typography pada design  system yang  dibuat  menjadi code  library dimana didalamnya  terdapat  cara  untuk  menerapkan  pada class html.  Implementasi Code Library Typography terlihat seperti pada Gambar 22.
Gambar 22 . Implementasi Code Library Typography

## 2. Code Library Color
Hasil  dari  implementasi perceptual  pattern color pada design  system yang  dibuat  menjadi code  library dimana didalamnya  terdapat  cara  untuk  menerapkan  warna  latar belakang  pada  class  html.    Implementasi Code Library Color terlihat seperti pada Gambar 23.
Gambar 23 . Implementasi Code Library Color

## 3.8 Pengujian Fungsional
Pengujian  fungsional  dilakukan  dengan  metode test  case dengan  menerapkannya  menggunakan  HTML  dan  CSS yang sudah dibangun elemen product- nya. Metode test case merupakan  pengujian  dengan  melakukan  verifikasi  fitur atau fungsionalitas tertentu dari hasil implementasi aplikasi.
Tabel 7. Pengujian Fungsional Hasil Desain Sistem Skenario Data Uji Hasil Uji Kesimpulan Mendisain sebuah halaman auth yang tediri dari halaman login, register, lupa password , dan password baru.
Halaman login dengan menggunakan pattern library mencakup perceptual pattern dan functional pattern Hasil slicing yang dilakukan software engineer mengikuti hifi halaman password baru yang terlah dibuat oleh desainer 100% sesuai dengan hasil rancangan Hifi (High fidelity) halaman register di slicing oleh software engineer kedalam HTML Hifi (High fidelity) halaman lupa password di slicing oleh software engineer kedalam HTML
Hifi (High  fidelity) halaman password baru di slicing oleh software engineer kedalam HTML
Dari Tabel 7, hasil pengujian terhadap masing-masing objek hasil perancangan dengan desain sistem menunjukkan hasil 100%. Dalam artian konsep dan penerapan hasil rancangan telah  sesuai  dengan framework yang  dibangun  dengan desain sistem.

## 3.9 Pengujian User Acceptance Test.
User  Acceptance  Test (UAT)  merupakan  pengujian  yang dilakukan  secara  objektif  dengan  cara  rancangan komponen-komponen untuk  aplikasi  diuji  secara  langsung oleh pihak yang menggunakan aplikasi penilaian kinerja ini secara  langsung.  Bobot  nilai  pengujian  UAT  dapat  dilihat pada Tabel 8 berikut.
Tabel 8. Bobot Nilai Pengujian UAT
Nilai Keterangan 4 Sangat Baik 3 Baik
2 Cukup 1
Kurang
Pengujian  aplikasi  ini dilakukan  oleh 26 user (termasuk  1 administrator), dengan hasil sebagai berikut :
Tabel 9. Rekapitulasi Penilaian
No Pertanyaan Presentase Penilaian (Skor) 4 3 2 1 1 Apakah aplikasi mudah digunakan? 80 (77%) 18 (23%) 0 (0%) 0 (0%) 2 Apakah fungsi dan menu pada aplikasi sudah sesuai? 72 (69%) 24 (31%) 0 (0%) 0 (0%) 3 Apakah menu pada aplikasi dapat dimengerti dengan baik? 72 (69%) 24 (31%) 0 (0%) 0 (0%) 4 Apakah fungsionalitas aplikasi sudah menggambarkan kegiatan pelaporan kegiatan yang dilakukan oleh Mahasiswa? 60 (58%) 27 (34%) 4 (8%) 0 (0%) 5 Apakah tampilan antarmuka aplikasi cukup menarik? 72 (69%) 21 (27%) 2 (4%) 0 (0%)
Dari hasil pengujian pada Tabel 9, hasil persentase tingkat kesesuaian  sistem  yang  dihasilkan  dari  pembagian  skor penilaian dengan skor ideal, sebagai berikut :
𝐾𝑒𝑠𝑒𝑠𝑢𝑎𝑖𝑎𝑛   = 𝑇𝑜𝑡𝑎𝑙 𝑆𝑘𝑜𝑟 𝑆𝑘𝑜𝑟 𝐼𝑑𝑒𝑎𝑙 𝑥 100% =
((20𝑥4)+(6𝑥3)+⋯+(18𝑥4)+(7𝑥4)) (26𝑥4)𝑥5 = 476 520 𝑥 100 = 91,54%
Berdasarkan hasil pengujian menggunakan User Acceptance  Test (UAT)  dengan  total  26  responden, diperoleh  persentase  tingkat  kesesuaian  sebesar  91,54%. Hasil  tersebut  menunjukkan  bahwa  aplikasi  yang  telah dibangun telah sesuai dengan perancangan dan kebutuhannya.

## 4. KESIMPULAN
Dari  hasil  pembahasan  dan  implementasi design  system yang  telah  dilakukan,  dapat  disimpulkan  bahwa  elemen product yang dibangun design system ini adalah perceptual pattern dan functional  pattern . Perceptual  pattern yang dihasilkan  mencakup  warna  dan typograhpy. Sedangkan functional  pattern yang  dihasilkan  mencakup accordion, alert,  badge,  breadchumb,  alert,  button,  card,  carousel, form, modal, pagination, rating, ribbon, separator, symbol, table,  dan  tabs. Artefak  atau  keluaran  yang  dihasilkan berupa pattern library, style guide, dan code library.
Selain  itu  untuk  pengembangan  selanjutnya  yaitu:  (1) membangun pattern  library pada  platform mobile baik Android maupun IOS, (2) membuat perceptual pattern yang mencangkup  panduan  pembuatan icon ,  ilustrasi  dan copywriting pada design  system, (3) melanjutkan  integrasi dari functional  pattern yang  tersedia  menjadi  sebuah template atau halaman.

## 5. UCAPAN TERIMAKASIH
Terima  kasih  kepada  Allah  SWT.  Yang  telah  memberkati dalam penyelesaian jurnal ini, kepada kedua orang tua yang selalu mendukung penulis, kepada kedua dosen pembimbing yang selalu memberikan arahan dengan cermat dan  sabar,  dan  kepada  seluruh  teman-teman  yang  selalu memberikan semangat kepada penulis.

## DAFTAR PUSTAKA
[1] A. Kholmatova, “Design Systems. A practical guide to creating design languages for digital products.,” Annals of the CIRP , vol. 46, no. 1, pp. 75–80, 2017.
[2] M.  Faizal,  “Perancangan  Simple  Design  System Canvas  sebagai  Pedoman  Antarmuka  Pengguna untuk  Startup  Indonesia,” Serat  Rupa  Journal  of Design , vol. 5, no. 1, pp. 108–121, Feb. 2021, doi: 10.28932/SRJD.V5I1.2100.
[3] I.  Hidayanti et  al. ,  “Analisis  Usability  Website Sekolah  Menengah  Atas,” Jurnal  Ilmiah  Binary STMIK Bina Nusantara Jaya Lubuklinggau , vol. 4,
no. 2, pp. 86–93, Oct. 2022, doi: 10.52303/JB.V4I2.81.
[4] D.  H.  Putra,  M.  Asfi,  and  R.  Fahrudin, “Perancangan  UI/UX  Menggunakan  Metode Design  Thinking  Berbasis  Web  Pada  Laportea Company,” Jurnal  Ilmiah  Teknologi  Infomasi Terapan , vol. 8, no. 1, pp. 111–117, Dec. 2021, doi: 10.33197/JITTER.VOL8.ISS1.2021.730.
[5] D.  D.  Aulia,  S.  Aminah,  and  D.  Sundari, “Perancangan  Prototype  Tampilan  Antarmuka Berbasis Web Mobile Pada Toko Amira Kosmetik,” Jurnal  Ilmiah   ILKOMINFO  -  Ilmu  Komputer  & Informatika , vol. 5, no. 1, pp. 29–40, Jan. 2022, doi: 10.47324/ILKOMINFO.V5I1.134.
[6] I. F. Ashari and R. R. Muharram, “Pengembangan Antarmuka Pengguna Kolepa Mobile App
Menggunakan  Metode  Design  Thinking  Dan System  Usability  Scale,” JSiI  (Jurnal  Sistem Informasi) ,  vol.  9,  no.  2,  pp.  168–176,  Sep.  2022, doi: 10.30656/JSII.V9I2.4993.
[7] H.  Kurniawan  and  F.  F.  Adiwijaya,  “Penerapan Desain  Sistem  Menggunakan  Metode  Atomic Design Di Universitas Muhammadiyah Sukabumi,” Komputa : Jurnal Ilmiah Komputer dan Informatika ,  vol.  10,  no.  1,  pp.  19–27,  Apr. 2021, doi: 10.34010/KOMPUTA.V10I1.6531.
[8] T. N. Amini, T. N. A. Amini, H. Fabroyir, and R. J. Akbar,  “Desain  dan  Evaluasi  Antarmuka  Mobile App MyITS Alumni pada Platform Android dan Ios Melalui Pendekatan User-Centered Design,” Jurnal Teknik  ITS ,  vol.  10,  no.  2,  pp.  A133–A139,  Dec. 2021, doi: 10.12962/j23373539.v10i2.63024.
[9] A. Fauzan, Z. M. Eka, Z. F. Akbar, and K. Fathoni, “Pengembangan  Aplikasi  Virtual  Tour  sebagai Media  Pengenalan  Lingkungan  Kampus  PENS berbasis Website,” Jurnal Teknologi Terpadu , vol. 7, no. 1, pp. 23–30, Jul. 2021, doi: 10.54914/JTT.V7I1.341.
[10] A.  P.  Wibiwo  and  F.  W.  Putra,  “Perancangan Visualisasi  ‘Driver  Machine  Interface  Display’ pada Kereta Api berbasis ATO/ATP menggunakan Aplikasi Visual Studio,” Jurnal Teknologi Terpadu , vol.  7,  no.  1,  pp.  45–50,  Jul.  2021,  doi: 10.54914/JTT.V7I1.311.
[11] C.  Boyce  and  P.  Neale, Conducting  in-depth interviews: a guide for designing and conducting in- depth  interviews  for  evaluation  input. ,  2nd  ed. Watertown: MA: Pathfinder international., 2006.
[12] B. Frost, Atomic Design . Brad Frost, 2016.
[13] F. R. Kautsar, “Rancang Bangun Sistem Informasi Agroindustri  Belimbing  Dewa  Pemerintah  Daerah Kota  Depok,”  S.TP.  skripsi,  Teknologi  Industri Pertanian,  IPB  (Bogor  Agricultural  University), Bandung, Indonesia, 2011.