## REDESIGN USER INTERFACE WEBSITE PORTAL MENGGUNAKAN METODE ATOMIC DESIGN (STUDI KASUS : BADAN PENGAWAS OBAT DAN MAKANAN)
Muhammad Yusuf Matra* 1) , Tien Fabrianti Kusumasari 2) , Faishal Mufied Al-Anshary 3)
1. Telkom University, Indonesia
2. Telkom University, Indonesia
3. Telkom University, Indonesia
Article Info ABSTRAK
Kata Kunci: BPOM, Website, Atomic Design
Keywords: BPOM, Website, Atomic Design
Article history: Received 14 January 2023 Revised 21 January 2023 Accepted 16 February 2023 Available online 1 June 2023
DOI : https://doi.org/10.29100/jipi.v8i2.3502
* Corresponding author. Corresponding Author E-mail address: muhammadyusufm@student.telkomuniversity.ac.id
Akses  informasi  menjadi  sangat  penting  bagi  masyarakat  untuk mendapatkan informasi dari BPOM. Saat ini BPOM telah memiliki sebuah  website  resmi  pada  laman  https://www.pom.go.id/.  Meng- ingat BPOM sendiri membawahi sub unit layanan yang sangat ban- yak, maka informasi yang tersedia  dalam website ini  semakin  ber- tambah seiring berjalannya waktu Akibatnya informasi menjadi san- gat banyak dan pengunjung website mengalami kesulitan untuk men- cari informasi yang sesuai.  Tanpa sebuah struktur maupun pengel- olaan tertentu, maka website akan memiliki nilai kegunaan yang san- gat rendah dan infor-masi cenderung overload. Untuk menghindari permasalahan  ini  terjadi,  dapat  dilakukan  penyortingan  informasi dan  perbaikan  desain  website  agar  informasi  yang  terdapat  dalam website tersebut lebih tertata dan website nyaman untuk dilihat, se- hingga  masyarakat  lebih  mudah  menemukan  informasi  yang  dibu- tuhkan. Atomic Design adalah sebuah metodologi desain yang terdiri dari lima tahap yang saling beker-jasama untuk membuat sebuah sis- tem desain antarmuka dengan cara yang hierarkis mulai dari atom, molekul, organisme,  template, hingga menjadi pages / laman. Ber- dasarkan penelitian yang dilakukan mengenai desain ulang halaman utama  website  BPOM  menggunakan  atomic  design,  maka  kes- impulan yang dapat diambil dari penelitian ini adalah rancangan user interface terlihat lebih modern dan selaras, arsitektur informasi lebih jelas, navigasi website menjadi lebih mudah user lebih mudah men- cari dan menemukan informasi yang user butuhkan.

## ABSTRACT
Access to information is very important for the public to get infor- mation from BPOM. Currently, BPOM has an official website on the https://www.pom.go.id/ page. Because BPOM itself oversees a large number of service sub-units, the information available on this web- site  is  increasing  over  time,  resulting  in  a  large  amount  of  infor- mation and site visitors having difficulty finding appropriate infor- mation. Without a certain structure or management, the website will have very low usability value and information is an advantage.  To avoid this problem from happening, it can be done sorting the infor- mation and improving the website design so that the information con- tained in the website is more organized and comfortable to view, so that it is easier for people to find the information they need. Atomic Design is a design methodology that con-sists of five stages that com- municate  with  each  other  to  create  an  interface  design  system  in  a hierarchical  way  from  atoms,  molecules,  organisms,  templates,  to pages. Based on research conducted on the redesign of the main page of the BPOM website using atomic design, the conclusions that can be drawn from this research are that the user interface design looks more  modern  and  aligned,  the  information  architecture  is  clearer, website navigation becomes easier for users. search and find infor- mation ordered by users.

## I. P ENDAHULUAN
POM (Badan Pengawas Obat dan Makanan) merupakan lembaga yang memiliki tugas yang sama dengan European Medicines Agency (EMA), dan Food and Drug Administration (FDA), yaitu untuk mengawasi seluruh  peredaran  obat-obatan  dan  makanan  yang  ada  di  seluruh  wilayah  Indonesia.  BPOM  juga memberikan berbagai layanan terkait pengawasan obat dan makanan antara lain registrasi obat, obat tradisional, pangan, sertifikasi kosmetika, obat dan pangan, dan masih banyak lagi[1].
Akses informasi  menjadi  sangat  penting  bagi  masyarakat  untuk mendapatkan informasi  dari  BPOM.  Saat  ini BPOM telah memiliki sebuah website resmi pada laman https://www.pom.go.id/. Website ini dikelola langsung oleh  BPOM  yang memberikan informasi  resmi  dan  terbaru langsung dari  BPOM[1].  Mengingat  BPOM sendiri membawahi  sub  unit  layanan  yang  sangat  banyak,  maka  informasi  yang  tersedia  dalam  website  ini  semakin bertambah  seiring  berjalannya  waktu.  Akibatnya  informasi  menjadi  sangat  banyak  dan  pengunjung  website mengalami kesulitan untuk mencari informasi yang sesuai.
Defining Goog Desain, dimana mendefinisikan desain yang baik terdapat dua sudut pandang untuk menentukan apakah  website  dinilai  “baik”  atau  “buruk”.  Ada  juga  sudut  pandang  kegunakaan  yang  berfokus  pada  fungsi peyajian  informasi yang efektif  dan  efisien.  Tanpa  sebuah  struktur  maupun  pengelolaan  tertentu, maka  website akan  memiliki  nilai  kegunaan  yang  sangat  rendah  dan  informasi  cenderung  overload.  Untuk  menghindari permasalahan ini terjadi, dapat dilakukan penyortingan informasi dan perbaikan desain website agar informasi yang terdapat dalam website tersebut lebih tertata dan website nyaman untuk dilihat, sehingga masyarakat lebih mudah menemukan informasi yang dibutuhkan[2].
Salah satu metode yang dapat digunakan untuk penyortiran informasi adalah Card Sorting. Card Sorting adalah metode riset UX (User Experience) Research di mana partisipan mengelompokkan label yang ditulis pada kartu sesuai dengan kriteria yang masuk akal bagi mereka. Metode ini mengungkapkan bagaimana pengetahuan audiens target terstruktur dan berfungsi untuk membuat arsitektur informasi yang sesuai dengan harapan pengguna[3][4][5].
Sedangkan  untuk  perbaikan  desain  menggunakan metode  Atomic  Design.  Matt Rae,  Designer  Advocate  dari Adobe XD mengatakan bahwa metode Atomic Design terinspirasi dari tabel periodik dalam kimia, yang berarti segala sesuatu di sekitar kita merupakan kumpulan dari elemen-elemen yang membentuk sebuah pondasi, begitu juga  dalam  desain.  Atomic  Design  adalah  sebuah  metodologi  desain  yang  terdiri  dari  lima  tahap  yang  saling bekerjasama untuk membuat sebuah sistem desain antarmuka dengan cara yang hierarkis mulai dari atom, molekul, organisme, template, hingga menjadi pages / laman[6][7].
Menurut Ekarini (2017), Tanpa struktur atau manajemen tertentu, website akan memiliki nilai kegunaan yang sangat rendah dan informasi cenderung overload. Untuk menghindari hal tersebut terjadi, maka dapat dilakukan pemilahan informasi dan perbaikan desain website agar informasi yang terdapat dalam website lebih tertata dan website nyaman untuk dilihat, sehingga memudahkan masyarakat dalam mencari informasi yang mereka butuhkan [2].
Oleh karena itu, penelitian ini berfokus pada perancangan ulang halaman utama website BPOM menggunakan metode riset UX (User Experience) yaitu Card sorting untuk menyortir informasi agar lebih terstruktur, di mana hasil penyortiran tersebut akan digunakan dalam perancangan website menggunakan metode Atomic Design untuk menghasilkan desain interface pengguna yang terlihat lebih modern dan selaras, arsitektur informasi lebih jelas, navigasi  website  menjadi  lebih  mudah  bagi  pengguna  untuk  mencari  dan  menemukan  informasi  yang  user inginkan/butuhkan.
Hasil dari penelitian ini akan bermanfaat bagi Badan Pengawas Obat dan Makanan (BPOM) yaitu design website menggunakan Atomic Design untuk membantu meningkatkan nilai kegunaan website dan pengelolaan informasi yang terstruktur menggunakan metode card sorting sehingga menghasilkan arsitektur informasi website yang lebih jelas dan user lebih mudah mencari dan menemukan informasi yang mereka (user) butuhkan.

## II. M ETODE P ENELITIAN
Seperti yang terlihat pada Figure 1, terdapat empat langkah dalam metode penelitian ini, yaitu tahap workshop dan cardsorting, interview, Atomic design, Implementasi dan pengujian, Feedback/evaluasi, dan Kesimpulan.
B

## Figure I Research Method
A. Workshop dan Cardsorting, dimana pada tahap ini dilakukan workshop dan juga cardsorting dimana peserta diberikan card secara online menggunakan perangkat lunak/software sebagai media board[8].
B. Interview,  Setelah  sesi  workshop  dan  card  sorting  dilakukan,  tahap  selanjutnya  adalah  interview  internal BPOM dan pelaku usaha, terhadap pengelompokan menu yang mereka lakukan, tujuan dari interview ini adalah untuk melihat kebutuhan pengguna dalam mencari dan menemukan informasi yang tepat pada website BPOM
C. Atomic design, Pada tahap ini, setelah workshop dan interview dilaksanakan, selanjutnya adalah melakukan identifikasi  komponen user  interface  dengan melakukan  observasi  pada  website lama  BPOM,  guna melihat penggunaan komponen pada setiap bagian website sesuai dengan metode/konsep atomic design.
D. Implementasi dan pengujian,
a. Implementasi, Pada tahap ini desain user interface website BPOM yang telah dibuat disampaikan kepada pihak  BPOM.  Kemudian  dari  pihak  BPOM  memberikan  feedback.  Jika  feedback  menyatakan  desain sudah sesuai maka proses desain selesai, namun jika feedback yang diberikan menyatakan ada yang harus diperbaiki,  maka  kembali  ke  proses  membuat  desain  user  interface  hingga  pihak  BPOM  menyatakan telah sesuai.
b. Pengujian,  dimana  dilakukan  untuk  melihat  hasil  dari  rancangan  yang  telah  dibuat,  pengujian  ini melibatkan internal BPOM dan pelaku usaha yang memiliki lisensi produk di BPOM.
 User  Acceptance  Test  (UAT),  merupakan  pengujian  yang  dilakukan  langsung  oleh  end-user dimana  user  tersebut  merupakan  staff/karyawan  perusahaan  yang  langsung  berinteraksi  dengan system dan dilakukan verifikasi apakah fungsi berjalan semestinya dengan kebutuhan/fungsinya[9].
 Usability Testing (UT), merupakan pengujian untuk mengukur seberapa mudah penggunaan suatu interface. “usability” juga merujuk pada metode yang digunakan untuk meningkatkan kemudahan pemakaian selama proses desain. Dalam usability testing peneliti meminta user mengerjakan task dengan  skenario  yang  telah  peneliti  buat.  Pada  saat  user  mengerjakan  task,  maka  peneliti mengamati dan mencatat hasil umpan balik user[10].
 System  Usability  Scale  (SUS),  merupakan  salah  satu  metode  yang  dapat  digunakan  dalam melakukan  evaluasi  keguanaan  sebuah  sistem  website.  SUS  dapat  digunakan  untuk  evaluasi berbagai produk ataupun layanan, termasuk didalamnya hardware, software, mobile, website, dan aplikasi lainnya [11].
E. Feedback/evaluasi,  Feedback  merupakan masukan dan  saran  dari internal  BPOM  dan  pelaku  usaha tentang rancangan website yang sudah dibuat.
F. Kesimpulan,  Pada  tahap  ini,  desain  user  I  nterface  sudah  final,  sehingga  dapat  ditarik  kesimpulan  terkait penelitian ini dan saran agar penelitian berikutnya lebih baik

## III. H ASIL I MPLEMENTASI DAN P ENGUJIAN

## A. Workshop dan Cardsorting
[12]
Dimana pada tahap ini telah dilakukan card sorting workshop dan wawancara internal pada Jum’at, 13 November 2020 secara virtual melalui zoom meeting  yang diikuti  oleh 21 orang peserta internal  dan wawancara eksternal pada Senin, 16 November 2020 secara virtual melalui zoom meeting yang diikuti oleh 4 orang peserta eksternal, dimana  pada saat melakukan  cardsorting peserta  diberikan  sejumlah  card  yang berisi menu-menu  pada  website Badan POM sebanyak 128 card pada sebuah board seperti figure II dan III.

## Figure III Hasil Cardsorting

## B. Interview,
Pada  tahap  wawancara,  topik  -  topik  yang  ditanyakan  berkaitan  dengan  pemahaman  peserta  mengenai  website BPOM  sebelumnya,  termasuk  frekuensi  atau  seberapa  sering  peserta  mengakses  halaman  web  tersebut, pembahasan hasil card sorting meliputi urutan informasi dari yang paling penting hingga tidak penting, informasi card-card  tertentu  yang  belum  atau  tidak  familiar  bagi  peserta  serta  hal-hal  yang  diharapkan  peserta  terhadap pengembangan website BPOM selanjutnya.

## C. Perancangan / Identifikasi Komponen UI dengan metode Atomic design,
Pada tahap perancangan dilakukan perancangan desain user interface website BPOM menggunakan data eksisting (misalnya penggunaan warna brand) dan menggunakan data dari hasil analisis kegiatan workshop dan interview (untuk pengelompokan menu dan tata letak).
1) Warna : Pada rancangan user interface website BPOM akan digunakan beberapa warna yang akan dikategorikan menjadi 3, yaitu warna brand, warna alert dan error, dan warna teks. Sebagaimana yang akan dijelaskan pada Tabel I.
Table I table warna Warna Brand Warna Kode Deskripsi # 009b4c
Primary green, warna berdasarkan logo, dimana warna ini harus ada # 51cd79
Light green, digunakan ketika dalam kondisi
hover state
# 90A4AE Primary blue , warna berdasarkan logo, dimana warna ini harus ada
# CFD8DC
Light blue , digunakan ketika hover state Warna Alert dan Error
# 90A4AE Untuk semua error dan status negatif # CFD8DC
Untuk peringatan ( caution )
Warna Teks
# 121A22 Teks judul, ikon, caption , bidang input dan dimanapun warna hitam diperlukan
# 38404A Body Teks dan deskripsi komponen
# 9099A5 Teks default di text field , status nonaktif tombol, ikon & komponen lainnya # ECEEFO Dividers dan borders # F7F8FA Background # FFFFFF Putih
2) Tipografi : pada perancangan UI BPOM akan diguanakan 2 font, yaitu :
a) Poppins
Font poppins adalah jenis font modern, fun, dan flexible. Font ini sangat balance kualitasnya sehingga cocok digunakan sebagai heading, karena karakternya menonjol. Dan font ini cocok dikombinasikan dengan jenis font serif (font yang memiliki kaki-kaki) seperti PT Serif, Roboto Slab dan lainnya.
b) PT Serif
Pemilihan  font  jenis  serif  memungkinkan  pembaca  untuk  lebih  mudah  menelusuri  teks  ketika sedang membaca sebuah tulisan atau artikel karena strukturnya terlihat lebih rapih. Font jenis serif juga banyak digunakan oleh website-website berita seperti Medium, Kumparan dan lain-lain. Dimana daftar typography yang digunakan dijelaskan pada Figure IV.
Figure IV Daftar Tipografi
D. Icon , berikut adalah icon yang digunakan pada rancangan ui yang ada pada figure V.

## E. Atomic Design
1) Atom, Berikut  adalah  elemen  atom  yang  digunakan  dalam  mendesain  ulang  halaman  website  BPOM, sebagaimana digambarkan pada Figure VI.

## Figure VI Atom
2) Molekul, dalam desain interface, molekul disini merupakan kelompok elemen user interface sederhana yang berfungsi  bersama  sebagai  satu  unit.  Contoh  Molekul  disini  adalah  gabungan  dari  icon-icon  dan  teks  menjadi navlink, sebagaimana digambarkan pada Figure VII.
3) Organisme, merupakan komponen UI yang lebih kompleks, gabungan dari atom  dan molekul yang berbeda fungsi tapi masih pada petak yang sama. Misalkan pada navigation bar, terdapat beberapa label, satu input, dan beberapa button, sebagaimana digambarkan pada Figure VIII.

## Figure VIII Organisme
4) Template, merupakan penggabungan dari atom, molekul dan organisme menjadi sebuah contoh halaman, sebagaimana digambarkan pada Figure IX.

## Figure IX Template
5) Pages, Implementasi  contoh  template  dengan  konten  nyata  (baik  dari  segi  warna,  ukuran  font,  konten,  dan gambar  pendukung)  untuk  memberikan  gambaran  akurat  tentang  hasil  akhir  yang  akan  dilihat  dan  dirasakan pengguna Ketika berinteraksi dengan sistem, sebagaimana digambarkan pada Figure X.

## Figure X Pages

## F. Implementasi
Pada tahap ini desain user interface website BPOM yang telah dibuat disampaikan kepada pihak BPOM. Kemudian dari  pihak  BPOM  memberikan  feedback.  Jika  feedback  menyatakan  desain  sudah  sesuai  maka  proses  desain selesai,  namun  jika  feedback  yang  diberikan  menyatakan  ada  yang  harus  diperbaiki,  maka  kembali  ke  proses membuat desain user interface hingga pihak BPOM menyatakan telah sesuai. Sebagaiamana hasil implementasi akhir ada pada Table II.
Table II hasil akhir implementasi rancangan website BPOM Gambar ID User Interface Nama Mockup Deskripsi Home page 3 Rancangan 3 Rancangan UI Homepage yang ke 3 merupakan hasil akhir dari
kesepakatan bersama BPOM, home page  ke  3  merupakan  hasil  dari interview  kedua  dan  request  dari BPOM
G. Pengujian, dimana dilakukan untuk melihat hasil dari rancangan yang telah dibuat, pengujian ini melibatkan user BPOM, dimana dijelaskan pada Table III-VII [8][13][14][15].
1) User Acceptance Test (UAT) [9]
Table III kategori penilaian UAT Pertanyaan Kategori Penilaian Nilai 1 Sangat setuju 5 2 Setuju 4 3 Cukup setuju 3 4 Tidak setuju 2 5 Sangat tidak setuju 1 Table IV Daftar pertanyaan UAT Kode Pertanyaan P1 Website mudah dikenali? P2 Navigasi yang ditampilkan sesuai dengan kebutuhan? P3 Komponen dan warna yang digunakan konsisten? P4 Ukuran font yang digunakan mudah dibaca? P5 Posisi menu mudah dijangkau? P6 Memberikan detail informasi yang cukup ? P7 Tampilan website responsive? P8 Penempatan pencarian mudah digunakan? P9 Tataletak urutan daftar layanan mudah dipahami ? P10 Pengguna merasa nyaman saat mengakses website? Table V Data responden Responden P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 1 4 4 5 5 5 4 4 4 4 4 2 4 4 3 4 4 3 4 4 4 4 3 5 4 4 5 4 4 4 4 4 5 4 4 4 5 4 4 5 4 4 5 4 5 4 4 5 5 5 4 4 5 5 4 6 4 4 4 3 3 3 4 3 4 5 7 5 4 4 3 4 4 5 4 4 4 8 4 4 5 4 4 5 4 4 5 5 9 4 5 4 3 4 4 3 4 4 5 10 4 5 4 3 3 4 4 5 4 4
Perhitungan data dilakukan dengan cara menghitung data yang dapat dilihat dari respon user, yang dapat dilihat pada table berikut :
Table VI Perhitungan umpan balik responden Kode Umpan Balik Responden SS % S % CS % TS % STS % P1 2 20 8 80 0 0 0 0 0 0 P2 2 20 8 80 0 0 0 0 0 0 P3 4 40 6 60 0 0 0 0 0 0 P4 3 30 2 20 5 50 0 0 0 0 P5 2 20 6 60 2 20 0 0 0 0 P6 2 20 7 70 1 10 0 0 0 0 P7 1 10 7 70 2 20 0 0 0 0 P8 2 20 7 70 1 10 0 0 0 0 P9 3 30 7 70 0 0 0 0 0 0 P10 4 40 6 60 0 0 0 0 0 0 Total 25 250 64 640 11 110 0 0 0 0
Perhitungan dilakukan dengan menggunakan skala Likert untuk menentukan apakah desain yang diberikan dapat diterima  oleh  pengguna.  Setelah  mendapatkan  data  umpan  balik  dari  responden,  data  tersebut  diolah  untuk mendapatkan skor total, skor terendah, dan skor tertinggi.

## Formula Perhitungan
Total Skor        = (SS x 5  ) +  ( S x 4) + ( CS x 3) + ( TS x 2) + ( STS x 1)
 Skor terendah (x) = ( Skor terendah likert x jumlah responden)
 Skor tertinggi (y) = ( Skor tertinggi likert x jumlah responden) Maka hasil perhitungan yang didapatkan sebagai berikut,
Total Skor     = (25 x 5) + (64 x 4) + (11 x 3) + (0 x 2) + (0 x 1) = 414 Skor terendah  = 0 x 10 = 0 Skor tertinggi = 64 x 10 = 640
Tahap  lanjutannya  adalah  mengetahui  skala  likert  dengan  satuan  persen  (%)  agar  dapat  diketahui  bahwa rancangan antarmuka website dapat dikatakan baik atau tidak.
Formula yang digunakan untuk mengukur interval adalah : I =  (100%)/(Jumlah kategori (likert))
Maka didapatkan hasil jarak interval untuk mengukur hasil pengujian yaitu: I =  (100%)/5 I = 20%
Dengan menggunakan nilai terendah 0% dan nilai tertinggi 100%, maka dihasilkan skala interval seperti pada tabel berikut:
Table VII Umpan balik responden No Skala Nilai % 1 Sangat Baik 81-100 2 Baik 61-80 3 Rata-rata 41-60 4 Kurang baik 21-40 5 Buruk 0-20
Kemudian pada tahap terakhir yang dilakukan adalah perhitungan skor interpretasi, lalu hasil perhitungan tersebut dibandingkan dengan tabel interval penilaian sehingga dapat ditarik kesimpulan bagaimana hasil yang didapatkan dari user interface dengan menggunakan formula berikut:
= 100%
Maka didapatkan hasil sebagai berikut.
Skor interpretasi = 100%

## Skor interpretasi = 64,69
Kesimpulan : hasil pengujian dengan jumlah 10 responden, mendapatkan skor interpretasi sebanyak 64,69% yang termasuk kategori baik. Sehingga antarmuka yang diberikan dapat diterima dengan baik oleh user.
2) Usability Testing (UT . Dimana hasil finding UT dijelaskan pada Table VIII [16]

## Table VIII Finding UT
No Task Finding Recommendation 1 Melihat informasi untuk cek product BPOM 5   Partisipan berhasil (average : 7 detik) Ditambah effect hover ketika memilih produk berlaku untuk card item lainnya agar lebih attractive 2 Menemukan fitur layanan izin Impor dan Ekspor 4     Partisipan berhasil 1 Partisipan berhasil namun kebingungan untuk menemukan fitur layanan karena banyak layanan yang lain (average : 24,2 detik) Memberikan icon yang bervariasi untuk merepresentasikan fitur layanannya
3 Membaca informasi berita tentang  BPOM
5   Partisipan berhasil (average : 20,4 detik)
-
4 Melihat Unit kerja BPOM 5   Partisipan berhasil (average : 4,8 detik) - 5 Melihat informasi data laporan kinerja BPOM 4     Partisipan berhasil 1 Partisipan berhasil namun kebingungan untuk melihat fitur laporan karena informasi mengacu pada fitur layanan publik (average : 13,2 detik) Mengubah kata "download" menjadi "unduh" untuk konsistensi bahasa
3) System Usability Scale (SUS), dimana hasil pengujian dengan SUS dijelaskan pada Table IX-XI [17]
Table IX Pengujian SUS pada website eksisting No Pengguna Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Jumlah Skor Score SUS ( jumlah skor * 2,5) 1. Anggi 1 4 2 4 2 5 2 4 2 5 7 17.5 2. Renita Marianty 3 4 2 5 3 3 3 3 4 5 8 20 3. Mita 3 4 3 4 3 2 3 3 3 4 15 37.5 4. Nenneng 4 1 5 2 5 1 4 1 4 2 18 45 5. Vransiska 1 4 2 4 1 4 2 4 1 3 16 40 Jumlah skor SUS 32 Grade F Acceptable Ranges Not Acceptable Table X Pengujian SUS pada website re-design No Pengguna Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Jumlah Skor Score SUS ( jumlah skor * 2,5) 1. Anggi 1 4 2 4 2 5 2
4 2 5 7 17.5 2. Renita Marianty 3 4 2 5 3 3 3 3 4 5 8 20 3. Mita 3 4 3 4 3 2 3
3 3 4 15 37.5 4. Nenneng 4 1 5 2 5 1 4 1 4 2 18 45 5. Vransiska 1 4 2 4 1 4 2 4 1 3 16 40 Jumlah skor SUS 77.5 Grade C Acceptable Ranges Acceptable
Setelah dilakukan pengujian dan pengukuran dengan metode SUS maka didapatkan hasil perbandingan pada table berikut :
Table XI Hasil Perbandingan SUS Perbandingan Skor SUS sebelum redesign (web eksisting) Skor SUS setelah redesign Total Skor SUS 32 77,5 Grade SUS F C Acceptability Ranges Not Acceptable Acceptable
H. Feedback/Evaluasi, merupakan  masukan  dan  saran  dari  user  BPOM  dan  pelaku  usaha  tentang  rancangan website yang sudah dibuat.

## IV. KESIMPULAN
Berdasarkan hasil redesign user interface website portal menggunakan metode atomic design pada websidapat disimpulkan bahwa :
Setelah dilakukan metode riset UX Cardsorting dihasilkan 128 card pada board online yang dikelompokkan menjadi  7  kelompok  card  berdasarkan  kebutuhan  pengguna,  dimana  hasil  pengelompokan  tersebut  digunakan dalam perancangan ulang website BPOM menggunakan Atomic design sehingga menghasilkan arsitektur informasi website yang lebih jelas dan user lebih mudah mencari dan menemukan informasi yang mereka (user) butuhkan.
Setelah perancangan user interface menggunakan metode Atomic Design, dilakukan 3 metode pengujian yaitu dengan metode UAT (user acceptance test) dimana hasil tes dengan total 10 responden, diperoleh skor interpretasi 64,69% yang termasuk dalam kategori baik. Sehingga interface yang diberikan dapat diterima dengan baik oleh pengguna.  Yang  kedua  dengan  metode  UT  (Usability  testing)  dimana  hasil  pengujian  ditemukan  tiga perbaikan/rekomendasi  untuk  dikembangkan  pada  user  interface  website  yang  telah  dibuat.  Dan  menggunakan metode SUS (System usability scale) dimana setelah dilakukan pengujian dan pengukuran menggunakan metode SUS  pada  website  BPOM  berdasarkan  masukan  dari  pengguna,  hasil  skor  SUS  sebelum  redesign  adalah  32 mendapat Grade F yang artinya Rentang Akseptabilitas Tidak Dapat Diterima, dan setelah redesign skor SUS 77.5 mendapat Grade C. yang berarti Rentang Penerimaan Dapat Diterima. Dalam merancang menggunakan metode Atomic  design mengutamakan  konsistensi sehingga website  BPOM sehingga terlihat  lebih  modern,  selaras,  se- irama juga terlihat lebih menarik dan dapat memudahkan pelaku usaha maupun internal dalam menavigasi website dengan memperhatikan user experience pada bagian navigasi yang baru.

## D AFTAR P USTAKA
[1] F. Angriawa and D. Mutiarin, “Efektivitas Pengawasan Badan Pengawas Obat dan Makanan (BPOM) terhadap Peredaran Makanan Impor oleh Pedagang UMKM di Kota Pekanbaru Ferry,” J. Gov. Civ. Soc. , vol. 3, no. 1, p. 6, 2019.
[2] F. Ekarini, “Analisis Desain Website Bni, Bukopin, J.Co Donuts Dan Mcdonals Menurut Buku ‘the Principles of Beautiful Web Design,’” Elinvo (Electronics, Informatics, Vocat. Educ. , vol. 2, no. 1, pp. 8–20, 2017, doi: 10.21831/elinvo.v2i1.14489.
[3] P. Studi, T. Informatika, J. T. Informatika, F. I. Komputer, and U. Brawijaya, PERANCANGAN USER EXPERIENCE APLIKASI PELAPORAN KELUHAN MASYARAKAT MENGGUNAKAN METODE HUMAN-CENTERED DESIGN SKRIPSI memperoleh gelar Sarjana Komputer Disusun oleh : 2018.
[4] L. Vinet and A. Zhedanov, “A ‘missing’ family of classical orthogonal polynomials,” 2011. doi: 10.1088/1751-8113/44/8/085201.
[5] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit , vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.
[6] B. Frost, Atomic Design . 2016.
[7] S. Huldan and A. Finandhita, “Pengembangan Design System Pada Perangkat Lunak Ibid Design System in Ibid ’ S Software With an Atomic Design Approach,” vol. 1, 2021.
[8] 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://j- ptiik.ub.ac.id.
[9] R. Supriatna, “Implementasi Dan User Acceptnace Test ( UAT) Terhadap Aplikasi E-Learning,” J. Chem. Inf. Model. , vol. 53, no. 9, pp. 1689– 1699, 2018.
[10] 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.
[11] 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.
[12] 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.
[13] 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.
[14] Z. E. Ferdi, F. Putra, H. Ajie, I. A. Safitri, and U. N. Jakarta, “Designing A User Interface and User Experience from Piring Makanku Application by  Using  Figma  Application  for  Teens,” Int.  J.  Inf.  Syst.  Technol.  Akreditasi ,  vol.  5,  no.  3,  pp.  308–315,  2021,  [Online].  Available: https://www.figma.com/design/.
[15] 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.
[16] 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.
[17] 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/36503.