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-Anshary3)
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:
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. PENDAHULUAN
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. METODE PENELITIAN
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. HASIL IMPLEMENTASI DAN PENGUJIAN
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 II Card sebelum di sortir
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.
Figure V Daftar Icon
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.
Figure VII Molekul
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
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.
DAFTAR PUSTAKA
[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.
