Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis

## Pembuatan Design System Menggunakan Pendekatan
Atomic Design dan A/B Testing
Reyhan Adinata Kurniawan
Informatika, Fakultas Teknologi Industri, Universitas Islam Indonesia, 19523173@students.uii.ac.id
Submitted: 23-03-2024, Reviewed: 22-04-2024, Accepted 21-05-2024 https://doi.org/10.47233/jteksis.v6i3.1346

## Abstract
Digital product presence has become an integral aspect of modern human life, where User Interface (UI) plays a crucial role in determining the acceptance and success of products. The main challenge lies in creating a consistent and coherent UI,  especially  for  complex  digital  products.  To address  this  challenge,  this  study aims  to  examine  the application of the Atomic Design approach and A/B testing techniques in the development of a Design System. A case study is conducted on the  Astra  Buana  Insurance  company,  using  qualitative  and  quantitative  analysis  methodologies  involving  observation, interviews, and A/B testing. The findings of this research are expected to provide theoretical insights and practical solutions in the development of an effective and efficient Design System, particularly in the context of the insurance industry. Keywords: Design System, atomic design, A/B testing, consistent, efficient.

## Abstrak
Antarmuka pengguna (UI) Kehadiran produk digital telah menjadi aspek integral dari kehidupan manusia modern, di mana UI memainkan peran krusial dalam menentukan penerimaan dan keberhasilan produk. Tantangan utama adalah penciptaan UI  yang  konsisten  dan  koheren,  terutama  untuk  produk  digital  yang  kompleks.  Dalam  rangka  mengatasi  tantangan  ini, penelitian ini bertujuan untuk mengkaji penerapan pendekatan Atomic Design dan teknik A/B testing dalam pengembangan Design System. Studi kasus diterapkan pada perusahaan Asuransi Astra Buana, dengan menggunakan metodologi analisis kualitatif  dan  kuantitatif  yang  melibatkan  observasi,  wawancara,  dan  A/B testing .  Hasil  penelitian  ini  diharapkan  dapat memberikan wawasan teoritis dan solusi praktis dalam pengembangan Design System yang efektif dan efisien, khususnya dalam konteks industri asuransi.
Keywords: Design System, atomic design, A/B testing , konsistensi, efisien.
This work is licensed under Creative Commons Attribution License 4.0 CC-BY International license

## PENDAHULUAN
Dalam perkembangan teknologi hingga saat ini, peran  produk  digital  telah  menjadi  tak  terelakkan dalam  kehidupan  sehari-hari  manusia.  Kehadiran produk  digital  memerlukan  antarmuka  pengguna (UI) yang tidak hanya efektif tetapi juga konsisten untuk menentukan tingkat keberhasilan dan adopsi oleh  pengguna.  Pentingnya  konsistensi  dan koherensi  dalam  desain  UI  menjadi  kunci  untuk memastikan  pengguna  dapat  dengan  mudah memahami dan menggunakan produk secara efisien [10].  Meskipun  begitu,  menciptakan  UI  yang harmonis,  terutama  untuk  produk  digital  yang kompleks, bukanlah tugas yang mudah. Inilah latar belakang munculnya Design System sebagai solusi inovatif. “Design  system  merupakan  seperangkat pola  yang  saling  berhubungan  serta  langkah sistematis  dan  kolaboratif  yang  diatur  secara koheren  untuk  mempercepat  dan  mempermudah proses  desain  dan  development  dalam  mencapai tujuan produk digital” [4]
Dari perspektif pengalaman pengguna, konsistensi  dianggap  sebagai  faktor  krusial  yang mempengaruhi kemudahan pengguna dalam berinteraksi  dengan  suatu  desain.  Konsistensi
dalam  proses  desain  tidak  hanya  dapat  mencegah kebingungan  pengguna  tetapi  juga  menciptakan tingkat  kepuasan  yang  tinggi.  Signifikansi  peran sistem  desain,  terutama  bagi  startup  di  Indonesia, menjadi semakin nyata [1].
Sejumlah penelitian sebelumnya terkait antarmuka  perangkat  lunak  telah  dilakukan  untuk menilai  kualitas  situs  website.  Metode  evaluasi yang digunakan, seperti prinsip heuristic evaluation ,  menghasilkan  temuan  menarik  yang mematuhi  atau  tidak  mematuhi  kriteria  heuristic tertentu.  Selain  itu,  uji  performa  situs  website memberikan  gambaran  bahwa  situs  tersebut  telah mencapai tingkat kualitas yang memadai [2].
Penelitian  lain  menerapkan  metode User Centered  Design (UCD)  dengan  membuat  sketsa desain antarmuka aplikasi dan komponen- komponen  antarmukanya  [3].  Pendekatan  ini menggunakan  sistem  desain  material  design  dan perangkat lunak Figma untuk merancang antarmuka  dengan  tingkat  detail  tinggi  ( high fidelity ) [6].
Penelitian  lainnya  [21]  mengenai  UI/UX  pada platform online shop telah menunjukkan pengaruh yang  signifikan  dari  User  Interface  (UI)  dan  User
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis
Experience  (UX)  dalam  merancang  desain prototype sebuah website. Proses perancangan yang diadopsi  menggunakan  metode  Design  Thinking, dengan  langkah-langkah  dari emphatize,  define, ideate,  prototype, hingga test [21].  Sementara  itu, penelitian lain terfokus pada perancangan prototipe desain untuk sistem jual-beli melalui platform web mobile,  dengan  menggunakan  aplikasi  Figma. Hasil  dari  penelitian  ini  [5]  menunjukkan  bahwa desain antarmuka yang dikembangkan memudahkan pengembangan sistem berikutnya dan memberikan  pengalaman  pengguna  yang  ramah (user-friendly).  Demikian  pula,  penelitian  lainnya
[4]  menghasilkan  desain  tampilan  website mobile yang  sesuai  dengan  kebutuhan  pengguna,  dengan penerapan metode design thinking serta pengujian menggunakan  System  Usability  Scale.  Sementara penelitian  lainnya  [7]  menyoroti  penggunaan metode atomic design dalam merancang sistem di sebuah website perguruan tinggi, yang memperkuat konsistensi dan koherensi antarmuka pengguna.
Dari rangkuman penelitian sebelumnya, terlihat bahwa  permasalahan  utama  yang  dihadapi  adalah ketidakadaan aturan yang jelas dalam menerapkan pola user  interface pada  sistem.  Desainer user interface perangkat  lunak  cenderung  bergantung pada  metode  eksplorasi  dalam  pendekatan  desain, dan  variasi  gaya  dalam  proses  desain  antarmuka sistem menyebabkan inkonsistensi dalam tampilan antarmuka.  Situasi  ini  juga  menyoroti  fokus  yang berlebihan  pada  detail  visual,  mengakibatkan proyek  desain  memakan  waktu  yang  signifikan [11].
Penelitian  lainnya  [13]  membahas  tentang implementasi  dan  uji  penerimaan  pengguna  (User Acceptance Test/UAT) terhadap sebuah aplikasi e- learning. Dalam penelitian ini, peneliti mengevaluasi  berbagai  aspek  dari  aplikasi  e- learning tersebut, termasuk kemudahan penggunaan,  ketersediaan  fitur,  dan  responsifitas sistem. Hasil dari penelitian ini dapat memberikan pemahaman  yang  lebih  baik  tentang  bagaimana pengguna  berinteraksi  dengan  aplikasi  e-learning dan  sejauh  mana  aplikasi  tersebut  memenuhi kebutuhan pengguna. Sementara itu, penelitian lain [14]  membahas  penerapan  usability  testing  untuk mengukur  tingkat  kebergunaan  sebuah  situs  web yang  berfokus  pada  media  pengetahuan  (Web Media  of  Knowledge).  Penelitian  ini  bertujuan untuk mengevaluasi sejauh mana situs web tersebut dapat  digunakan  dengan  efektif  oleh  pengguna, serta  untuk  mengidentifikasi  area-area  yang memerlukan perbaikan agar tingkat kebergunaannya dapat ditingkatkan.
Inilah
latar belakang mendesaknya implementasi Design  System.  Design  System bukan hanya memberikan pedoman yang konsisten dalam  penerapan  pola user  interface ,  melainkan
juga  mengurangi  ketergantungan  pada  eksplorasi yang tidak terstruktur. Dengan demikian, tantangan seputar variasi gaya dalam desain antarmuka dapat diatasi,  menciptakan  tampilan  yang  konsisten  dan dapat diandalkan [8]. Lebih dari itu, Design System dapat  meningkatkan  efisiensi  desainer  dengan menyediakan  kerangka  kerja  yang  terorganisir, memungkinkan  fokus  pada  detail  visual  tanpa mengorbankan  waktu  yang  berlebihan.  Dengan penerapan Design System, diharapkan kualitas dan konsistensi  desain  user  interface  pada  sistem perangkat lunak dapat meningkat.
Design  System,  sebagai  kumpulan  komponen antarmuka pengguna, prinsip desain, dan panduan gaya,  memiliki  peran  sentral  dalam  mencapai pengalaman  pengguna  yang  intuitif,  familiar,  dan konsisten.  Salah  satu  pendekatan  yang  digunakan dalam membangun Design System adalah pendekatan atomic design. Pendekatan ini memecah  desain  menjadi  elemen  terkecil,  disebut atom,  dan  membangunnya  menjadi  elemen  yang lebih  kompleks  seperti  molekul,  organisme, template, hingga halaman lengkap [8]. Keuntungan utama  dari  pendekatan  ini  adalah  konsistensi  dan skalabilitas,  di  mana  komponen-komponen  yang terdefinisi dengan baik. Sehingga, dapat digunakan secara  berulang,  mengurangi  redundansi,  dan mempercepat pengembangan produk [1].
Namun,  membangun  Design  System  yang efektif tidak hanya tentang konsistensi, melainkan juga  tentang  efektivitas  dan  optimalisasi  elemen antarmuka.  Inilah  mengapa  A/B testing ,  teknik eksperimen  statistik,  menjadi  penting.  Dengan menerapkan A/B testing pada komponen- komponen Design System, dapat dipastikan bahwa penggunaan  komponen  tersebut  memberikan pengalaman pengguna terbaik dan mencapai tujuan bisnis yang diinginkan.
Penelitian  ini  bertujuan  untuk  mengkaji penerapan  pendekatan atomic  design dan  A/B testing secara bersamaan dalam pembuatan Design System  dengan  studi  kasus  pada  perusahaan Asuransi  Astra  Buana.  Kajian  ini  bertujuan  untuk mengeksplorasi manfaat sinergis kedua pendekatan ini  dalam  meningkatkan  konsistensi,  koherensi, efektivitas,  dan  optimalisasi  Design  System perusahaan. Selain itu, penelitian ini akan menguji hipotesis  bahwa  penerapan  kedua  pendekatan tersebut  secara  bersamaan  dapat  meningkatkan konsistensi  dan  koherensi  antarmuka  pengguna, produktivitas tim desain dan pengembangan, serta kepuasan dan pengalaman pengguna [19].
Melalui  penelitian  ini,  diharapkan  dapat diperoleh  kontribusi  teoritis  dan  praktis  dalam pengembangan  Design  System  yang  efektif  dan efisien.  Temuan  penelitian  ini  diharapkan  dapat menjadi  panduan  bagi  praktisi  desain  dan pengembangan  untuk  membangun  produk  digital
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis
dengan  antarmuka  pengguna  yang  optimal, meningkatkan adopsi dan kesuksesan produk.

## METODE PENELITIAN
Metode  penelitian  yang  digunakan  dalam penelitian  ini  sesuai  dengan  struktur  diagram penelitian seperti yang tergambar pada Gambar 1

## Gambar 1. Kerangka Penelitian
Pada Gambar 1. kerangka penelitian dapat dilihat alur penelitian yang dilakukan, seperti:
2.1. Pendefinisian Masalah dan Metode Tahap  pertama,  pendefinisian  masalah  dan metode, dimulai dengan identifikasi permasalahan utama dalam desain antarmuka pengguna (UI). Tim penelitian  melakukan  sesi  brainstorming  internal antara anggota UX untuk merumuskan pertanyaan penelitian  yang  jelas  dan  mendalam.  Ide  dan perspektif dari berbagai disiplin UX menjadi dasar bagi  rumusan  masalah  [15].  Selain  itu,  metode interview  dengan  pengguna  diimplementasikan untuk  mendapatkan  wawasan  langsung  tentang pengalaman  pengguna,  kebutuhan,  dan  harapan mereka  terhadap  antarmuka  produk  digital  [18]. Pendekatan  ini  memastikan  pemahaman  yang holistik  terhadap  tantangan  yang  dihadapi  oleh pengguna sehari-hari.
2.2 Pembagian Tugas dan Alur Tahap kedua melibatkan pembagian tugas dan pengaturan alur kerja yang  efisien. Setiap anggota tim UX ditugaskan peran dan tanggung jawab yang sesuai dengan keahliannya masing-masing. Rincian alur  kerja,  termasuk  proses  komunikasi  antar  tim dan penjadwalan kegiatan, disusun secara terperinci.  Hal  ini  bertujuan  untuk  memastikan kolaborasi  yang  harmonis  dan  pencapaian  tujuan penelitian  sesuai  dengan  jadwal  yang  telah ditentukan [9].
2.3 Standarisasi dan Pembuatan Komponen
Tahap  ketiga  fokus  pada  standarisasi  desain dan  pembuatan  komponen-komponen  yang  akan menjadi  bagian  integral  dari  Design  System.  Di sini,  prinsip-prinsip atomic  design diterapkan, memecah  desain  menjadi  elemen-elemen  terkecil hingga  elemen  kompleks  [8].  Setiap  komponen dirancang  dengan  teliti,  memastikan  konsistensi dan  keoptimalan  fungsionalnya.  Pada  langkah  ini juga,  standar  desain  dan  panduan  gaya  dijelaskan secara  mendetail  untuk  memastikan  kohesivitas seluruh system [22].
2.4 Pengujian Komponen dengan A/B Testing Langkah selanjutnya adalah pengujian komponen  menggunakan  metode  A/B testing .
Setiap  elemen  desain  yang  terintegrasi  dalam Design System dikenakan pada eksperimen statistik ini untuk membandingkan dua versi atau fitur [10]. Tujuannya  adalah  memastikan  bahwa  setiap komponen memberikan kontribusi optimal terhadap tujuan bisnis dan memberikan pengalaman  pengguna  terbaik.  Hasil  dari  A/B testing menjadi  dasar  penentuan  apakah  suatu elemen  perlu  dimodifikasi  atau  dipertahankan dalam implementasi.
2.5 Implementasi Design System Tahap  terakhir  adalah  implementasi  Design System yang telah teruji melalui tahap sebelumnya. Pada  fase  ini,  Design  System  diterapkan  secara menyeluruh dalam lingkungan perusahaan Asuransi  Astra  Buana.  Proses  implementasi melibatkan pelatihan tim desain dan pengembangan,  serta  integrasi  sistem  ke  dalam produk-produk  digital  yang  ada  serta  melakukan usability  testing  untuk  memastikan  bahwa  desain yang  dibuat  memberikan  kepuasan  kepada pengguna [5]. Langkah ini menandai penyelesaian penelitian dan penerapan konsep desain yang telah diuji coba ke dalam praktik Perusahaan [13].

## HASIL DAN PEMBAHASAN
3.1 Masalah dan Hasil Interview Pada tahap pendefinisian masalah dan metode, identifikasi permasalahan utama dilakukan melalui sesi  brainstorming  internal  di  antara  anggota  tim UX. Hasilnya adalah rumusan masalah yang lebih holistik  dan  terkait  langsung  dengan  kebutuhan pengguna.  Metode  interview  dengan  pengguna menghasilkan data kualitatif yang mendalam yang dapat dilihat pada Tabel 1. Sehingga, memberikan wawasan yang lebih kontekstual terhadap tantangan  pengguna  dalam  menggunakan  produk digital. Dengan pendekatan ini, penelitian berhasil memperoleh pemahaman mendalam tentang kebutuhan dan harapan pengguna.
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis
Tabel 1. Hasil Interview
No . Keterangan 1. Kesulitan pengguna terkait konsistensi desain antarmuka di berbagai halaman.
2. Bingung navigasi karena perbedaan tata letak dan struktur antarmuka.
3. Terdapat komponen yang berbeda penampilan tetapi memiliki fungsi yang sama.
4. Beberapa ikon dan simbol kurang konsisten, menyebabkan kebingungan pengguna.
5. Warna yang tidak konsisten di antarmuka menyulitkan pengguna untuk memahami.
3.2 Alur dan Pembagian Tugas Dalam  tahap  ini,  dilakukan  perancangan  alur kerja yang terstruktur untuk meningkatkan efisiensi tim  dalam  penelitian  ini.  Masing-masing  anggota tim  UX  diberikan  peran  yang  sesuai  dengan keahlian dan keunggulan setiap individu. Alur kerja disusun  dengan  memastikan  bahwa  setiap  tahap untuk  melakukan  pembuatan  sebuah  komponen lebih terstruktur yang dapat dilihat pada Gambar 2. Proses  komunikasi  antar  tim  diperjelas  dan  diatur sedemikian  rupa  untuk  meminimalkan  potensi hambatan.

## Gambar 2. Alur Pembagian Tugas dan Pembuatan Komponen
3.3 Standarisasi dan Pembuatan Komponen
Pada  tahap  ini,  dilakukan  standarisasi  desain untuk memastikan konsistensi antarmuka pengguna. Setiap komponen yang dihasilkan harus mengikuti  prinsip-prinsip  desain  yang  telah ditetapkan sebelumnya. Prinsip-prinsip ini mencakup elemen-elemen seperti warna, tipografi, dan tata letak yang diatur secara konsisten. Selain itu,  diterapkan  pula  hirarki  yang  jelas  untuk memandu  desainer  dalam  penggunaan  dan pembuatan komponen.
Dalam  pembuatan  komponen,  metodologi penelitian  mengadopsi  pendekatan  yang  sejalan dengan  tahapan atomic  design .  Tahap  pertama, yaitu  "Atoms",  berfokus  pada  identifikasi  elemen desain  paling  dasar  seperti  warna,  tipografi,  dan ikon.  Standar  ditetapkan  untuk  setiap  atom, termasuk  palet  warna,  ukuran font ,  dan  elemen grafis  kecil  lainnya.  Selanjutnya,  pada  tahap
"Molecules", kombinasi atoms membentuk komponen  yang  lebih  kompleks  seperti  header, formulir,  atau  tombol.  Standar  juga  diterapkan untuk  kombinasi  atoms  dalam  molekul  tertentu. Tahap  selanjutnya  adalah  "Organisms",  di  mana molekul digabungkan membentuk komponen yang dapat  berdiri  sendiri,  seperti  header  dengan  menu navigasi  atau  card  yang  berisi  konten.  Standar ditentukan  untuk  susunan  dan  interaksi  molekul dalam  organisme.  Pada  tahap  "Templates",  layout dan  struktur  keseluruhan  halaman  diatur  dengan menggabungkan  berbagai  organisme.  Standar ditetapkan untuk tata letak halaman dan hubungan antar  organisme.  Akhirnya,  pada  tahap  "Pages", desain  diterapkan  pada  desain  halaman  dengan mengintegrasikan  berbagai template .  Standar dijelaskan untuk implementasi desain pada tingkat halaman,  memastikan  konsistensi  antar  halaman. Dengan  mengikuti  pendekatan  ini,  tercapai standarisasi  yang  terstruktur  dan  mudah  dikelola dalam pengembangan desain secara keseluruhan.
Seperti  contoh  pada  Gambar  3,  dapat  dilihat bentuk prinsip dan penggunaan button yang sesuai.
Button  disusun  dengan  konsisten  dalam  ukuran, warna,  dan  penempatan.  Pedoman  tersebut memberikan  panduan  bagi  setiap  desainer  dalam menciptakan  button  yang  sejalan  dengan  estetika keseluruhan  produk  digital.  Dengan  adanya standarisasi yang ketat dan contoh konkret seperti ini,  setiap  desainer memiliki referensi  visual yang jelas,  memastikan  bahwa  setiap  komponen  yang dibuat  memenuhi  standar  kualitas  dan  kohesivitas yang telah ditetapkan sebelumnya.
Gambar 3. Contoh Pembuatan Prinsip, Hirarki, dan Tampilan Button
3.4 Pengujian Komponen dengan A/B Testing
Pengujian  komponen  menggunakan  A/B  testing membawa  pemahaman  empiris  terhadap  kinerja
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis
masing-masing  elemen  desain.  Hasil  A/B  testing memberikan  panduan  konkret  dalam  memilih komponen  yang  memberikan  dampak  positif terhadap  tujuan  bisnis  dan  pengalaman  pengguna. Ini membuktikan efektivitas pendekatan ini dalam menilai performa desain sebelum diimplementasikan secara menyeluruh.
Tabel 2. Indikator A/B Testing No. Kode Indikator Keterangan 1. I1 Tingkat Keterlibatan Pengukuran sejauh mana pengguna berinteraksi dengan komponen dan fitur baru dalam Design System. 2. I2 Tingkat Konversi Menilai seberapa berhasil komponen dalam mendorong pengguna untuk melakukan tindakan konversi yang diinginkan, seperti pendaftaran atau pembelian 3. I3 Waktu Interaksi Menunjukkan lama waktu yang dihabiskan pengguna dalam berinteraksi dengan komponen. 4. I4 Tingkat Kesalahan Penghitungan frekuensi kesalahan atau masalah yang dialami pengguna saat menggunakan komponen. 5. I5 Kegunaan Penilaian subjektif tentang seberapa mudah dan nyaman pengguna menggunakan komponen. 6. I6 Kecepatan Penyelesaian Pengukuran seberapa lama waktu yang diperlukan pengguna untuk menyelesaikan tugas dengan komponen. 7. I7 Tingkat Kepuasan Pengguna Penilaian keseluruhan pengalaman pengguna dengan komponen dan tingkat kepuasan mereka.
Melalui  evaluasi  indikator-indikator  pada Tabel  2,  proses  A/B testing membantu  dalam mengambil  keputusan  yang  lebih  baik  terkait perbaikan dan pengembangan Design System yang sedang dibuat. Contoh penerapan dalam penggunaan  A/B testing pada  proyek  Design System dapat dilihat pada Tabel (3).
Tabel 3. Contoh hasil pengujian A/B testing No. Kode Variasi A Variasi B 1. I1 Tinggi Lebih Tinggi 2. I2 Tinggi Lebih Tinggi 3. I3 Sama Sama 4. I4 Rendah Lebih Rendah 5. I5 Lebih Mudah Lebih Mudah 6. I6 Lebih Cepat Lebih Cepat 7. I7 Puas Lebih Puas
Melalui evaluasi indikator pada Tabel 3, proses A/B testing memberikan  pemahaman  yang mendalam  terkait  perbaikan  dan  pengembangan Design  System.  Pengujian  melibatkan  200 karyawan  dari  berbagai  divisi  perusahaan  dengan kebutuhan  penggunaan  yang  beragam.  Hasil  A/B testing menunjukkan  bahwa  Variasi  B  (desain revisi)  memiliki  tingkat  keterlibatan  dan  konversi yang  lebih  tinggi  dibandingkan  Variasi  A  (desain asli)  berdasarkan  pengalaman  200  karyawan  yang terlibat.  Variasi  B  juga  menunjukkan  waktu interaksi  yang  setara  dengan  Variasi  A  tetapi dengan  tingkat  kesalahan  yang  lebih  rendah, menunjukkan peningkatan efisiensi tanpa mengorbankan akurasi. Dari perspektif pengalaman pengguna, Variasi B dinilai lebih mudah digunakan dan  lebih  cepat  dalam  menyelesaikan  tugas  oleh 200  karyawan  yang  terlibat.  Tingkat  kepuasan pengguna  yang  lebih  tinggi  pada  Variasi  B menegaskan  bahwa  perubahan  desain  berhasil memenuhi atau melebihi harapan pengguna secara konsisten. Dengan melibatkan 200 karyawan, hasil A/B testing memberikan  landasan  kuat  bagi pengambilan keputusan, mendukung adopsi Variasi B  sebagai  perbaikan  dan  pengembangan  lebih lanjut pada Design System.
3.5 Implementasi Design System
Tahap implementasi Design
System melibatkan  penerapan  secara  menyeluruh  hasil- hasil  yang  diperoleh  dari  A/B testing ,  terutama Variasi  B  yang  terbukti  memberikan  keterlibatan, konversi, dan kepuasan pengguna yang lebih tinggi. Desain  sistem  yang  telah  disempurnakan  akan diterapkan pada seluruh produk digital perusahaan, memastikan konsistensi antarmuka dan pengalaman pengguna yang optimal.
Selanjutnya, untuk memvalidasi implementasi tersebut,  dilakukan usability  testing secara menyeluruh.  Pengujian  ini  melibatkan  pengguna
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis
aktif dalam menguji fungsionalitas, kegunaan, dan responsivitas  Design  System  di  berbagai  skenario penggunaan.  Melalui usability  testing ,  tim  dapat mengidentifikasi  potensi  masalah  atau  kebutuhan penyesuaian  yang  mungkin  terlewat  selama  tahap pengembangan sebelumnya. Usability testing juga memberikan  wawasan  langsung  dari  pengguna terkait navigasi, pemahaman, dan interaksi dengan Design  System.  Dengan  mendengarkan  umpan balik dan melacak kinerja pengguna dalam situasi kehidupan  nyata,  tim  dapat  terus  meningkatkan Design  System  untuk  memastikan  kesesuaian dengan kebutuhan pengguna dan tujuan bisnis.
Pada  Tabel  4  tercantum  indikator  penilaian usability testing yang melibatkan sejumlah kriteria kinerja,  seperti  navigasi  antarmuka,  ketersediaan informasi,  konsistensi  desain,  keterbacaan  teks, efisiensi  tugas,  responsivitas antarmuka,  kejelasan instruksi,  interaksi  dengan  komponen,  estetika desain,  dan  keseluruhan  pengalaman  pengguna.
Setiap  indikator  akan  dinilai  oleh  200  karyawan terpilih menggunakan skala penilaian dari 1 hingga 5, di mana 5 mencerminkan tingkat kepuasan yang sangat tinggi.

## Tabel 4. Indikator Penilaian
Nilai Keterangan 1 Sangat Tidak Puas 2 Tidak Puas 3 Biasa Saja 4 Puas 5 Sangat Puas
Hasil  penilaian  ini  terdokumentasi  pada  Tabel  5, yang memperlihatkan sejauh mana perubahan yang terjadi pada Design System telah memengaruhi dan memenuhi  harapan  pengguna  dari  berbagai  divisi perusahaan.  Penilaian  yang  diberikan  oleh  200 karyawan  ini  menjadi  landasan  utama  untuk mengukur  keberhasilan  implementasi  perubahan desain,  memberikan  gambaran  holistik  terkait efektivitas  dan  penerimaan  Design  System  di lingkungan  perusahaan.  Tingkat  kepuasan  akan dikonversi menjadi persentase dengan rumus
𝑃𝑒𝑟𝑠𝑒𝑛𝑡𝑎𝑠𝑒 𝐾𝑒𝑝𝑢𝑎𝑠𝑎𝑛 =   (
𝑇𝑜𝑡𝑎𝑙 𝑆𝑘𝑜𝑟 𝐾𝑒𝑝𝑢𝑎𝑠𝑎𝑛
𝐽𝑢𝑚𝑙𝑎ℎ 𝑅𝑒𝑠𝑝𝑜𝑛𝑑𝑒𝑛  × 𝑆𝑘𝑜𝑟 𝑀𝑎𝑘𝑠𝑖𝑚𝑢𝑚 )  × 100%
(1) Tabel 5. Tingkat kepuasan No. Nama Aplikasi Tingkat Kepuasan 1 My Garda 97% 2 Website Asuransi Astra 94% 3 Otosales 91% 4 Dashboard Management 93%
Dengan  menggabungkan  hasil  A/B testing yang kuat dengan usability testing yang mendalam, tahap implementasi ini bukan hanya tentang menerapkan perubahan,  tetapi  juga  mengukur  dampak  nyata pada kenyamanan dan produktivitas pengguna. Ini menciptakan  siklus  umpan  balik  yang  terus- menerus,  memungkinkan  perbaikan  dan  iterasi yang berkelanjutan pada Design System.

## SIMPULAN
A. Konsistensi dan Koherensi Desain:
Penerapan pendekatan atomic design membantu  meningkatkan  konsistensi  dan koherensi  desain  antarmuka  pengguna  (UI). Dengan  memecah  desain  menjadi  elemen terkecil hingga elemen yang lebih kompleks,
Design  System  dapat  memberikan  panduan yang konsisten dalam penerapan pola UI.
B. Efektivitas  A/B  Testing: Penggunaan  A/B testing pada  komponen-komponen  Design
System  memberikan  pemahaman  mendalam mengenai dampak perubahan desain terhadap respons  pengguna.  Analisis  melibatkan indikator-indikator
seperti tingkat
keterlibatan, tingkat konversi, waktu interaksi, tingkat  kesalahan,  kecepatan  penyelesaian, dan tingkat kepuasan pengguna.
C. Peningkatan Kualitas dan Efisiensi:
Implementasi  Design  System  tidak  hanya meningkatkan  kualitas  desain  UI,  tetapi  juga meningkatkan efisiensi dalam pengembangan produk  digital.  Design  System  memberikan panduan  yang  terorganisir,  mengurangi ketergantungan  pada  eksplorasi  yang  tidak terstruktur.
D. Rekomendasi  Perbaikan: Hasil  penelitian memberikan  landasan  bagi  perbaikan  dan pengembangan  lebih  lanjut  pada  Design System.  Dengan  memahami  kekuatan  dan kelemahan desain, perusahaan dapat mengambil langkah-langkah
untuk
meningkatkan  pengalaman  pengguna  dan kesuksesan produk.
Keseluruhan,  penerapan  pendekatan  atomic design  dan  A/B testing menunjukkan  dampak positif  terhadap  konsistensi,  efektivitas,  dan efisiensi Design System. Rekomendasi perbaikan yang dihasilkan dari penelitian ini dapat menjadi panduan  berharga  bagi  praktisi  desain  dan pengembangan  dalam  upaya  meningkatkan adopsi dan kesuksesan produk digital.
Jurnal Teknologi Dan Sistem Informasi Bisnis Vol. 6 No. 3 Juli 2024 Hal. 543-549 http://jurnal.unidha.ac.id/index.php/jteksis

## UCAPAN TERIMAKASIH
Dengan  tulus,  saya  ingin  mengucapkan terima  kasih  yang  mendalam  kepada  Asuransi Astra  Buana  atas  kesempatan  yang  diberikan kepada  saya  untuk  melakukan  penelitian  dan pembimbingan  dalam  menyusun  makalah  ini. Kehadiran  dan  dukungan  penuh  dari  tim Asuransi  Astra  Buana  telah  memberikan landasan yang kokoh bagi kelancaran penelitian saya. Saya sangat bersyukur atas bimbingan yang berharga  dan  wawasan  yang  diberikan,  yang telah memperkaya pemahaman saya dalam topik yang  dibahas.  Tanpa  kerjasama  dan  dukungan yang  luar  biasa  dari  pihak  perusahaan,  makalah ini  tidak  akan  mencapai  titik  kesuksesan  yang saya  rasakan  saat  ini.  Semoga  kerjasama  yang baik ini dapat terus berlanjut di masa mendatang. Sekali lagi, terima kasih atas segala bantuan dan kesempatan yang telah diberikan.

## DAFTAR PUSTAKA
[1] M. Faizal, “PERANCANGAN SIMPLE DESIGN SYSTEM CANVAS SEBAGAI PEDOMAN ANTARMUKA PENGGUNA  UNTUK  STARTUP  INDONESIA”,  SRJD, vol. 5, no. 1, pp. 108–121, Feb. 2021.
[2]  I.  Hidayanti  et  al.,  “Analisis  Usability  Website  Sekolah Menengah  Atas,”  Jurnal  Ilmiah  Binary  STMIK  Bina Nusantara Jaya Lubuklinggau, vol. 4,
[3] 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.
[4]  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.
[5]  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  B.  Frost,  Atomic Design. Brad Frost, 2016
[6]  R.  A.  and  D.  Kurniawan,  “Perancangan  User  Experience Aplikasi  Android  Konsultasi  Skripsi  dengan  Metode  User Centered Design”, JTEKSIS, vol. 5, no. 3, pp. 183-189, Jul. 2023.
[7] Huldan, S., & Finandhita, A. (2021). Pengembangan Design System Pada Perangkat Lunak Ibid Design System in Ibid’ S  Software  With  an  Atomic  Design  Approach.  JUPITER: Jurnal  Penelitian  Mahasiswa  Teknik  Dan  Ilmu  Komputer,
1(1).
[8]  Lamine,  Y.,  &  Cheng,  J.  (2022).  Understanding  and supporting the design systems practice. Empirical Software Engineering,  27(6). https://doi.org/10.1007/s10664-022- 10181-y
[9] Mountstephens, J., & Teo, J. (2020). Progress and challenges in  generative  product  design:  A  review  of  systems.  In
Computers (Vol. 9, Issue 4).
https://doi.org/10.3390/computers9040080
[10]  Novák,  J.  Š.,  Masner,  J.,  Vaněk,  J.,  Šimek,  P.,  &
Hennyeyová,  K.  (2019).  User  experience  and  usability  in agriculture-selected  aspects  for  design  systems.  Agris  On- Line  Papers  in  Economics  and  Informatics,  11(4). https://doi.org/10.7160/aol.2019.110407
[11] Yang, C., Zhang, L., & Wei, W. (2022). The Influence of Introducing  the  Concept  of  Sustainable  System  Design
Thinking  on  Consumer  Cognition:  A  Designer’s
Perspective. Systems, 10(4).
https://doi.org/10.3390/systems10040085
[12] A. A. Tejamukti, H. M. Az-zahra, and R. I. Rokhmawati, “Pengembangan Antarmuka Website PPPA Daarul Qur ’ an Malang  Dengan  Menggunakan  Metode  Goal  Directed Design,” Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 2, no.  12,  pp.  6277–6285,  2018,  [Online].  Available: http://jptiik.ub.ac.id .
[13] R. Supriatna, “Implementasi Dan User Acceptnace Test ( UAT)  Terhadap  Aplikasi  E-Learning,”  J.  Chem.  Inf. Model., vol. 53, no. 9, pp. 1689– 1699, 2018.
[14]  A.  Supriyatna,  “Penerapan  Usability  Testing  Untuk Pengukuran  Tingkat  Kebergunaan  Web  Media  of Knowledge,” Teknois J. Ilm. Teknol. Inf. dan Sains, vol. 8, no. 1, pp. 1–16, 2019, doi: 10.36350/jbs.v8i1.17.
[15] N. Huda, “Implementasi Metode Usability Testing Dengan System Usability Scale Dalam Penilaian Website Rs Siloam Palembang,” Klik - Kumpul. J. Ilmu Komput., vol. 6, no. 1, p. 36, 2019, doi: 10.20527/klik.v6i1.177.
[16]  N.  Triastuti,  L.  D.  Krisnawati,  and  A.  Riyono, “Implementasi  Card  Dalam  Perancangan  Program  Bantu Pembelajaran Membaca,” J. Inform., vol. 6, no. 2, 2011, doi: 10.21460/inf.2010.62.87.
[17] A. W. Soejono, A. Setyanto, A. F. Sofyan, and W. Anova, “Evaluasi  Usability  Website  UNRIYO  Menggunakan  S ystem Usability Scale ( Studi Kasus : Website UNRIYO ),” vol. XIII, pp. 29–37, 2018.
[18]  V.  S.  S.  R.  I.  Rokhmawati  and  A.-Z.  Hanifah  Muslimah, Perbaikan  User  Interface  dan  Analisis  Perbandingan  Hasil pada Website Lazada.co.id dengan menggunakan Usability Testing  dan  System  Usability  Scale  (SUS)  Questionnaire, vol. 4, no. 4. 2019.
[19] G. Bintang and H. Ashshidhiqi, “Rekomendasi rancangan Information  Architecture  Website  Institusi  Pendidikan Tinggi  Menggunakan  Metode  Card  Sorting  pada  Metode Goal-Directed Design Design Recomendation of Information  Architecture  Education  Institution  Website Using  Card  Sorting  Method  on,”  vol.  2,  no.  2,  pp.  6155– 6164, 2015.
[20] F. Sujito, R. Arifudin, and F. Arini, “An Analysis of User Interface and User Experience Using System Usability Scale and GOMS Method,” J. Adv. Inf. Syst. Technol., vol. 1, no. 1  SE-Articles,  pp.  65–73,  2019.  [Online].  Available: https://journal.unnes.ac.id/sju/index.php/jaist/article/view/3 6503 .
[21] 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.
[22] B. Frost, Atomic Design. Brad Frost, 2016.