Penerapan Metode Design Thinking dalam Perancangan Website Kuis Online Menggunakan Figma di SMP Negeri 39 Semarang
Farrel Nathanael 1 , Jeffri Alfa Razaq 2* , Dwi Budi Santoso 3
1,2*,3 Program Studi Teknik Informatika, Fakultas Teknologi Informasi dan Industri, Universitas Stikubank, Kota Semarang, Provinsi J awa Tengah, Indonesia.

## a r t i c l e  i n f o
Article history: Received 25 May 2024 Received in revised form 29 June 2024 Accepted 1 August 2024
Available online October 2024.
DOI: https://doi.org/10.35870/jti k.v8i4.2591.

## Keywords:
Design Thinking; Figma; Quiz Website; UI/UX.
Kata Kunci: Design Thinking; Figma; Quiz Website; UI/UX.
ACM Computing Classification System (CCS) Communication and Mass Media Complete (CMMC)

## a b s t r a c t
In early 2020 the world received a disaster where a new virus was discovered that could cause death if exposed to the virus. So that many activities are disrupted, one of which is teaching and learning. So that makes teaching and learning activities carried out online using a quiz website. The purpose of this research is to identify user needs in using an online quiz website. The Design Thinking  method  is  a  method  for  understanding  users  and  defining  problems  and  finding solutions to design. The result of the research that has been carried out is a quiz website design that can be used by teachers and students. The method used to test the results of the quiz website design is the System Usability Scale by giving questionnaires to teachers and students. From the results of the calculation of the questionnaire that has been distributed, it gets a value of  72, which means that the design results made are quite good.

## a b s t r a k
Pada awal tahun 2020 dunia mendapatkan musibah dimana ditemukan sebuah virus baru  yang dapat  menyebabkan  kematian  jika  terkena  virus  tersebut.  Sehingga  banyak  aktifitas  terganggu salah  satunya  belajar  mengajar.  Sehingga  membuat  aktifitas  belajar  mengajar  dilakukan  secara online  menggunakan  website  kuis.  Tujuan  dari  penelitian  ini  adalah  untuk  mengidentifikasi kebutuhan pengguna dalam menggunakan website kuis online. Metode Design Thinking adalah metode untuk memahami pengguna dan mendefinisikan masalah dan mencari solusi terhadap design. Hasil dari penelitian yang telah dilaksanakan adalah sebuah rancangan website kuis yang dapat digunakan oleh guru dan siswa. Metode yang digunakan untuk testing hasil perancangan design website kuis adalah System Usability Scale dengan cara memberikan soal kuisioner kepada guru dan siswa. Dari  hasil perhitungan kuisioner yang telah dibagikan memendapatkan nilai 72 yang artinya hasil design yang dibuat sudah cukup baik.
*Corresponding Author. Email: mrjf@edu.unisbank.ac.id 2* .
© E-ISSN: 2580-1643.
Copyright @ 2024 by the authors of this article. Published by Lembaga Otonom Lembaga Informasi dan Riset Indonesia (KITA INFO dan RISET). This work is licensed under a Creative Commons Attribution- NonCommercial 4.0 International License.

## Jurnal JTIK (Jurnal Teknologi Informasi dan Komunikasi)
Journal Homepage: http://journal.lembagakita.org/index.php/jtik

## 1. Latar Belakang
Pendidikan merupakan salah satu kunci utama dalam pembentukan  potensi  individu  dan  masyarakat. Tetapi  pada  awal  tahun  2020  dunia  mengalami sebuah  musibah,  dimana  terdapat  sebuah  virus corona  yang  mampu  menyebabkan  ganguan pernafasan  sampai  penderita  tersebut  meninggal dunia. Sehingga banyak orang melakukan pekerjaan dari  rumah  ( WHO )  supaya  tidak  terkena  virus tersebut.  Pada  saat  itu  sekolah  melakukan pembelajaran online dikarenakan situasi yang belum memungkinkan  untuk  melaksanakan  pembelajaran tatap  muka.  Tetapi  transisi  pembelajaran  ke  online tidak  terlalu  mulus,  dimana  semua  aktvitas pembelajaran  menjadi  online  seperti  aktifitas mengajar menggunakan video conference, pembagian  materi  pembelajaran  secara  digital,  kuis online,  dan  sampai  ujian  yang  dilakukan  secara online.  Jadi  sekolah  mencari  cara  untuk  membuat sistem  pembelajaran  yang  ringan  dan  mudah digunakan seperti website kuis online. Dengan adanya website kuis  online  pembelajaran  dapat  dijalankan secara  online  dan  para  siswa  dapat  mengerjakan dimana saja dan kapan saja.
Website adalah  sebuah  media  yang  mempunyai halaman yang banyak dan saling terhubung atau yang biasa  disebut hyperlink , website mempunyai  fungsi untuk  memberikan  sebuah  informasi  berbentuk gambar, teks, suara, animasi, dan vidio atau gabungan dari semuanya [1]. Website kuis online yang sudah ada sekarang  tampilannya  sudah  sangat  interaktif  dan menarik akan tetapi karena terlalu banyak fitur yang ada  membuat website tersebut  sedikit  berat  untuk digunakan  sehingga  membutuhkan  proses  yang sedikit lebih lama untuk mengakses website kuis online tersebut. Untuk itu diperlukan dalam pengembangan platform website kuis online, aspek User Interface (UI) dan User  Experience (UX)  memiliki  peranan  penting dalam menjamin antarmuka yang interaktif, menarik dan juga dapat diakses dengan cepat sehingga akan memberikan  pengalaman  yang  menyenangkan  bagi para siswa. Pada penelitian yang dilaksanakan oleh [2] dengan  judul  “Penggunaa n  Aplikasi  Figma  Dalam Membangun UI/UX Yang Interaktif Pada Program Studi  Teknik  Informatika  STMIK  Tasikmalaya” bertujuan untuk memberitahukan kepada orang yang sedang  belajar  mendesain  aplikasi  mobile  atau website  wajib  mengetahui  terlebih  dahulu  dasarnya
yaitu user  interface dan user  experience .  Software  Figma hadir dengan fungsi untuk membantu para pengguna supaya dapat berkolaborasi dalam project dan bekerja sama dalam satu tim dimanapun dan kapanpun. Hasil dari  penelitian  ini  yaitu  memberikan  wawasan  dan pemahaman  tentang  penggunaann  Figma  dalam membuat  desain  UI/UX  yang  interaktif  bagi mahasiswa dalam mengembangkan minat dan bakat.
Penelitian  kedua  yang  dilaksanakan  oleh  [3]  dengan judul  “Perancangan  Ulang  UI  &  UX  Menggunakan Metode  Design  Thinking  Pada  Aplikasi  Siakadu Maha siswa Berbasis Mobile” yang membahas tentang perancangan  ulang  ui/ux  pada  aplikasi  siakadu berbasis mobile. Perguruan tinggi UNESA membuat aplikasi mobile yang diberi nama Siakadu yang akan mempunyai  fungsi  sebagai  media  informasi  untuk mahasiswa  dalam  aktifitas  perkuliahan.  Dengan adanya  kegiatan  perancangan  ulang  pada  aplikasi siakadu  berharap  supaya  lebih  memudahkan mahasiswa  untuk  mendapatkan  informasi  akademik. Hasil  dari  penelitian  ini  berupa prototype desain  yang baru dari aplikasi Siakadu dengan adanya perubahan pada font, tata letak konten, warna dan desain konten.
Pada  penelitian  ketiga  yang  dilaksanakan  oleh  [4] dengan  judul  “Perancangan  UI/UX  Menggunakan Metode  Design  Thinking  Berbasis  Web  Pada Laportea  Company”  yang  membahas  tentang pembuatan  model  perancangan user  interface dan user experience dengan  membuat  sebuah  inovasi  yang berbentuk website  e-commerce menggunakan  metode design  thinking .  Hasil  dari  penelitian  ini  berupa perancangan,  pembuatan,  dan  pengujan  dari merancang  UI/UX  menggunakan Design  Thinking berbasis web pada Laportea Company. Adapun tujuan dari penelitian ini adalah untuk menerapkan metode design thinking dalam merancang antarmuka web kuis online.  Penelitian  ini  juga  bertujuan  untuk mengidentifikasi kebutuhan pengguna dalam menggunakan  web  kuis  online.  Penelitian  ini  juga dapat  memberikan  dampak  positif  dalam  dunia pendidikan  digital  yang  lebih  efektif.  Dengan dilaksanakannya  penelitian  ini  penulis  berharap perancangan  website  kuis  dapat  digunakan  oleh sekolah untuk melaksanakan quis tanpa harus mencari website yang cocok terlebih dahulu.

## 2. Metode Penelitian
Penelitian  ini  menggunakan  metode design  thinking . Design  thinking  adalah  sebuah  metode  yang berfokus  terhadapa  inovasi  yang  menggunakan  alat desain  untuk  mengintegrasikan  kebutuhan  orang- orang,  persyaratan  untuk  kesuksesan  bisnis,  dan kemungkinan teknologi [5]. Metode design thinking memiliki  5  tahapan  yaitu emphatize , define , ideate , prototype ,  dan testing .  Pada  setiap  tahapan  dibuat berdasarkan kebutuhan pengguna. Untuk memberikan sebuah gambaran yang lebih jelas dapat dilihat  alur  atau  tahapan  penelitian  dengan  gambar flowchart dibawah.
Gambar 1. Alur Penelitian
Alur  penelitian  diatas  menggunakan  metode design thinking . Design  thinking mempunyai  5  tahapan diantaranya:
Emphatize Tahapan emphatize adalah tahap pertama pada metode design  thinking yang  merupakan  suatu  proses  yang utama  [6].  Pada  tahap  ini  dilakukan  pencarian terhadap  permasalahan  yang  berhubungan  dengan penelitian  atau  mencari  letak  kesulitan  yang  dialami oleh pengguna website kuis [7].
Teknik  pengumpulan  data  yang  penullis  gunakan adalah  observasi  dan  wawancara.  Observasi dilaksanakan  dengan  cara  penulis  melihat  secara langsung  kegiatan  belajar  mengajar  di  sekolah. Sedangkan  untuk  metode  wawancara,  penulis  akan bertanya  kepada  beberapa  guru  dan  siswa  terkait website online.
Dengan  menggabungkan  hasil  dari  observasi  dan wawancara,  penulis  dapat  memperoleh  pemahaman yang  komprehensif  tentang  kebutuhan  dan permasalahan pengguna. Tahap emphatize ini sangat penting  karena  menjadi  dasar  untuk  tahapan berikutnya  dalam  metode  design  thinking,  yaitu define, ideate, prototype, dan test. Tujuan utamanya adalah  untuk  memastikan  bahwa  solusi  yang dikembangkan benar-benar relevan dan efektif dalam mengatasi  permasalahan  yang  dihadapi  oleh pengguna.
Tabel 1. Daftar Pertanyaan Wawancara No Daftar Pertanyaan
1  Apakah sebelumnya pernah mengadakan pembelajaran dengan menggunakan sebuah aplikasi kuis?
2  Bagaimana sistem pembelajaran menggunakan kuis kepada para murid sebelumnya?
Jika belum menggunakan sistem aplikasi kuis
3  Bagaimana cara pemberian soal kuis sebelumnya?
4  Apakah pernah terjadi kesalahan dalam mengkoreksi jawaban sebelumnya?
5  Apakah ada rencana untuk mengadopsi sistem pembelajaran menggunakan aplikasi kuis di sekolah?
6  Sistem seperti apa yang dibutuhkan?
Jika sudah menggunakan sistem aplikasi kuis
7  Apakah pernah mengalami kesulitan saat pertama kali menggunakan aplikasi kuis?
8  Apakah  ada  pelatihan  atau  bimbingan  khusus  yang  dilaksanakan  untuk  guru  dan  siswa  dalam menggunakan aplikasi kuis pada saat pertama kali?
9  Bagaimana respon siswa terhadap penggunaan aplikasi kuis?
10  Apakah ada yang perlu diperbaiki dari aplikasi kuis yang pernah digunakan?
Define Tahapan define adalah  tahapan  yang  dilaksanakan setelah  mengetahui  masalah  yang  dialami  oleh pengguna website kuis [8]. Dari hasil observasi dan wawancara pada tahap emphatize , dapat menemukan masalah  utama  yang  dihadapi  oleh  pengguna sehingga  masalah  tersebut  dapat  terselesaikan  [9]. Pada tahap ini penulis akan mendefiniskan masalah berdasarkan point  of  view dari  pengguna  yang didapatkan dari bagian emphatize .
Ideate Tahapan ideate adalah tahapan untuk mencari solusi. Setelah mengetahui permasalahan yang dialami oleh pengguna maka, langkah selanjutnya adalah mencari solusi  dari  permasalahan  yang  telah  didapat  pada tahap define [10].  Pada  tahap  ini  penulis  akan membuat  sebuah user  flow yang  menggambarkan langkah-langkah  yang  harus  dilakukan  pengguna untuk menggunakan website kuis. User flow akan ada 2 jenis yang terdiri dari user flow untuk siswa, dan user flow untuk guru.
Gambar 2. User Flow Siswa
Gambar 2 adalah tampilan user flow yang dibuat untuk siswa.  Gambar  diatas  menjelaskan  langkah  yang harus diambil oleh siswa yaitu masuk ke website lalu login , setelah berhasil login siswa akan memilih menu mata  pelajaran  kemudian  siswa  akan  mengerjakan kuis  yang  ada  pada  menu  mata  pelajaran.  Setelah selesai mengerjakan kuis maka siswa akan keluar dari
halaman pengerjaan kuis. Setelah selesai mengerjakan soal  siswa  tidak  dapat  mengerjakan  kembali  soal dikarenakan total point yang didapatkan sudah terlihat dan  tersimpan  ketika  siswa  memilih  selesai mengerjakan soal kuis. User flow untuk guru berbeda dengan siswa dikarenakan guru akan membuat sebuah soal kuis yang akan diberikan ke siswa dan juga guru akan melihat nilai tiap siswa.
Gambar 3. User Flow Buat Soal
Gambar 3 adalah tampilan user flow untuk membuat sebuah  soal  baru.  User  flow  tersebut  menjelaskan langkah-langkah  yang  harus  diambil  ketika  ingin membuat  soal  baru  dengan  langkah  pertama  adalah masuk terlbih dahulu ke halaman website, kemudian login, setelah login berhasil maka akan tampil menu home, setelah itu guru akan memilih menu buat soal, setelah itu akan tampil berbagai macam bentuk soal yang dapat dibuat. Setelah memilih bentuk soal yang diinginkan  selanjutnya  guru  akan  memasukan  soal, waktu  pengerjaan,  point  tiap  soal,  dan  memasukan jawaban  yang  tepat  pada  tiap  soal.  Setelah  selesai semua maka guru akan memilih tombol save. Setelah selesai  di  save  maka  guru  harus  mengatur  kembali untuk  judul  kuis,  waktu  dan  tanggal  kuis  dapat dikerjakan,  dan  kelas  yang  akan  mengerjakan  kuis tersebut.
Gambar 4. User Flow Lihat Nilai
Gambar 4 adalah tampilan user flow untuk melihat nilai.  Jika  guru  ingin  melihat  nilai  siswa  yang  telah selesai mengerjakan kuis maka guru harus masuk ke dalam website terlebih dahulu, lalu melakukan login, setelah berhasil untuk login guru akan memilih menu kelas,  pada  menu  kelas  selanjutnya  guru  memilih salah satu kelas yang ingin dilihat nilainya, setelah itu guru  akan  memilih  salah  satu  judul  kuis  yang  ada, setelah memilih judul kuis maka akan tampil daftar siswa beserta nilainya.
Prototype Pada  tahap protoype akan  dibuat  sebuah wireframe sederhana  yang  dibuat  untuk  memperlihatkan tampilan kepada pengguna. Wireframe adalah sebuah bentuk  penggambaran  rancangan  desain  awal  dari tampilan website kuis yang akan dibuat nantinya [11].
Gambar 5. Wireframe Website Kuis Siswa
Gambar  5  adalah  tampilan wireframe untuk  website kuis yang digunakan oleh siswa. Tampilannya terdiri dari  halaman  landing  page,  login  untuk  masuk  ke dalam website, lalu tampilan halaman home yang berisi informasi  penting  nantinya,  mata  pelajaran  akan menampilkan kuis yang tersedia tiap mata pelajaran, halaman  sebelum  mulai  mengerjakan  kuis,  tampilan soal saat mengerjakan, tampilan hasil pada kuis yang dikerjakan, informasi, dan pengaturan.
Gambar 6. Wireframe Website Kuis Guru Gambar  6  adalah  tampilan wireframe untuk  website kuis  yang  digunakan  oleh  guru.  Tampilannya  terdiri dari halaman home, lalu halaman kelas yang dimana menampilkan  kelas  yang  pernah  diberikan  soal  kuis sebelumnya, lalu ada halaman kuis yang berisikan kuis yang  pernah  diberikan  pada  satu  kelas  tersebut, kemudian ada daftar siswa yang dimana berisi siswa yang  telah  mengerjakan  kuis  tersebut.  Hasil  dari penelitian ini adalah berupa tampilan sebuah mockup dengan penambahan warna dan beberapa detail dari wireframe yang  akan  lebih  terlihat  jelas.  Nantinya tampilan mockup ini  dapat  diuji  coba  oleh  siswa  dan guru  dikarenakan  akan  diberikan  sebuah  interaksi yang  saling  terhubung  antar mockup .  Sehingga terbentuk propotype yang  dapat  berinteraksi  dengan pengguna.

## Testing
Pada tahap testing ini adalah tahap untuk menguji coba desain yang dilakukan oleh guru dan siswa terhadap desain  yang  telah  dibuat  [12].  Tahap testing yang digunakan menggunakan metode System Usability Scale (SUS). System  Usability  Scale memiliki  10  pertanyaan
1108 dan  mempunyai  skor  minimal  0  dan  maksimal  100 point  [13].  Menggunakan  metode  SUS  tidak  terlalu
rumit  dikarenakan  hanya  memberikan  sebuah  soal kuisioner kepada beberapa guru dan siswa.
Tabel 2. Daftar Pertanyaan Kuisioner SUS No Pertanyaan 1 Saya berpikir akan menggunakan sistem ini lagi
2 Saya merasa tata letak dari sistem ini rumit untuk dilihat
3 Saya merasa sistem ini mudah digunakan
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini
5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya
6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi dalam sistem ini)
7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat
8 Saya merasa sistem ini membingungkan
9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini
10  Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini
Tabel  diatas  adalah  daftar  pertanyaan  dari  metode SUS  yang  akan  diberikan  ke  guru  dan  siswa  untuk mendapatkan jawaban dari perancangan desain yang telah  dibuat.  Akan  ada  5  pilihan  jawaban  dan  tiap jawaban mempunyai point yang berbeda.
Tabel 3. Keterangan Nilai Point SUS Nilai Point Jawaban 1 Sangat Tidak Setuju 2 Tidak Setuju 3 Ragu-Ragu 4 Setuju 5 Sangat Setuju
Tabel  diatas  adalah  point  yang  didapat  pada  tiap pilihan  jawaban.  Nantinya  pilihan  jawaban  akan dihitung  skor  yang  didapat.  Rumus  untuk menghitung skor adalah:
Skor  SUS  =  ((S1-1)+(5-S2)+(S3-1)+(5-S4)+(S5- 1)+(5-S6)+(S7-1)+(5-S8)+(S9-1)+(5-S10))*2.5
Setelah menghitung skor yang didapat tiap responden selanjutnya akan  dilakukan  penghitungan skor  rata- rata. Rumus skor rata-rata SUS adalah:
𝑋̅ = 𝑛 ∑ 𝑥 𝑥̅ = Skor rata-rata ∑ 𝑥 = Skor perhitungan akhir SUS 𝑛 = Total responden
Jika  dari  hasil  perhitungan  skor  rata-rata mendapatkan nilai dibawah 68 maka harus dilakukan perubahan  terhadap  rancangan design ,  tetapi  jika
mendapatkan skor rata-rata diatas 68 maka rancangan design tersebut  sudah  baik  dan  tidak  perlu  dilakukan perubahan.

## 3. Hasil dan Pembahasan
Pada tahap pertama pada metode design thinking yaitu empathize ,  peneliti  menggunakan  dua  metode  yaitu observasi dan wawancara. Observasi yang dilakukan oleh  penulis  dengan  melakukan  kunjunga  secara langsung  ke  sekolah  untuk  melihat  proses  belajar mengajar  dan  mencatat  kegiatan  yang  sedang dilakukan.  Sedangkan  untuk  wawancara  penulis melakukan  wawancara  ke  beberapa  siswa  dan  guru. Berikut  adalah  jawaban  dari  siswa  dan  guru  yang diwawancarai.
Tabel 4. Daftar Jawaban Siswa Pertama
No Daftar Jawaban Siswa Pertama 1  Pernah 2  Hanya digunakan untuk pengganti ulangan
3  - 4  - 5  - 6  -
7  Tidak  ada  kesulitan,  tetapi  hanya bermasalah  pada  jaringan  error  yang mengakibatkan kembali ke halaman awal
8  Ada
9  Tidak ada, Karena mudah digunakan 10  Tidak ada
Tabel 5. Daftar Jawaban Siswa Kedua No Daftar Jawaban Siswa Kedua 1  Pernah menggunakan Quiziz 2  Digunakan  untuk  pembelajaran  dan ulangan
3  -
4  - 5  -
6  -
7  Sering nyasar ke website lain 8  Pernah,  diajarin  cara  masukin  kode  dan join room
9  Sangat  membantu  dan  membuat  lebih mudah siswa
10  Pointnya bermasalah Tabel 6. Daftar Jawaban Guru No Daftar Jawaban Guru 1  Pernah menggunakan Quiziz 2  Kadang digunakan untuk ulangan, kadang kuis, kadang materi pembelajaran
3  -
4  -
5  -
6  -
7  Pernah kesulitan karena harus memahami website  terlebih  dahulu,  karena  tiap website berbeda alur
8  Ada  pelatihan  Quiziz  tetapi  ikut  secara mandiri
9  Senang karena berbeda pembelajaran dari berbagai  aplikasi  dan  sangat  antusias, dibanding  diberikan  tugas  secara  offline atau tertulis
10  Ada,  Karena  setiap  aplikasi  masih membutuhkan  sesuatu  yang  baru  karena keinginan  pengguna  pasti  berbeda  seperti analisis hasil yang kurang lengkap
Berdasarkan dari hasil wawancara dapat disimpulkan bahwa  guru  dan  siswa  sudah  pernah  menggunakan website  kuis  dan  masih  terdapat  beberapa  masalah pada  website  kuis  yang  pernah  digunakan  seperti jaringan error , dan analisis hasil yang kurang lengkap. Tahap  yang  kedua  adalah define pada  tahap  ini mendefinisikan  masalah  dari  hasil  wawancara terhadap  siswa  dan  guru.  Hasil  dari  mendefinisikan masalah  berdasarkan point  of  view narasumber  yang didapat pada tahap emphatize . Tabel 7. Kebutuhan Pengguna dan Masalah Fitur Pengguna Kebutuhan Pengguna Masalah Fitur Siswa Pertama Ingin  menggunakan  website  kuis  dengan  lancar tanpa ada masalah jaringan error Jaringan  yang  mengakibatkan  sering kembali ke halaman awal Siswa Kedua Ingin  fitur  point  tidak  bermasalah  karena  jika bermasalah sangat merugikan siswa Fitur point yang kadang tidak berubah Guru Ingin  menggunakan  website  yang  mempunyai filter analisis yang lengkap Fitur analisis yang kurang lengkap
Tabel diatas adalah hasil dari mendefinisikan masalah dari wawancara siswa dan guru masalah terdapat pada jaringan yang error, point yang tidak berubah, dan fitur analisis  yang  kurang  lengkap.  Tahap  yang  ketiga adalah ideate yang bertugas untuk mengumpulkan ide dan mencari solusi dari masalah yang dihadapi oleh pengguna. Sehingga penulis membuat user flow untuk menggambarkan  ide  dari  definisi  masalah  yang  ada pada tahap sebelumnya. Disini penulis mendapatkan tiga  bentuk user  flow ,  yang  pertama user  flow untuk siswa,  yang  kedua user  flow untuk  guru  yang  ingin membuat soal kuis baru, dan yang terakhir user flow untuk guru yang ingin melihat hasil siswa yang sudah mengerjakan soal kuis.
Tahap yang keempat adalah hasil prototype yang dibuat menggunakan tools Figma  dengan  menerapkan metode design  thinking . Design yang  dibuat  berfokus pada  keinginan user dan  kebutuhan user berdasarkan dari  beberapa  tahap  sebelumnya.  Hasil  dari prototype untuk  siswa  dan  guru  dapat  dilihat  pada  gambar dibawah:
Gambar 7. Tampilan Website Kuis Siswa Gambar 7 adalah tampilan website kuis untuk siswa. Pada  tampilan  tersebut  berisi  halaman landing  page yang  berisi  informasi  tentang  kemampuan  website kuis, lalu halaman login untuk siswa masuk kedalam website, selanjutnya ada halaman home yang berisikan menu  dan  informasi  yang  dapat  membantu  siswa, selanjutnya pada menu mata pelajaran berisi berbagai kuis  dari  tiap  mata  pelajaran,  lalu  ada  tampilan halaman  kuis  yang  berisi  judul  kuis  dan  mata pelajaran  kuis  yang  ingin  dikerjakan,  selanjutnya tampilan  soal  kuis,  lalu  tampilan  hasil  kuis  dimana akan  berisi  informasi  seperti  nilai  dari  kuis  yang dikerjakan,  lalu  ada  menu  informasi  yang  akan menampilkan  informasi  penting,  dan  yang  terakhir menu  pengaturan  yang  berfungsi  untuk  mengatur data diri siswa.
Gambar 8. Tampilan Website Kuis Guru Gambar 8 adalah tampilan website kuis untuk guru. Tampilan design ini berisi halaman home dimana akan menampilkan  informasi  terkait  kuis  yang  sedang berlangsung, nama siswa, berbagai menu dan tanggal. Selanjutnya  adalah  tampilan  halaman  kelas  yang menampilkan kelas yang sudah pernah diberikan soal
kuis, lalu pada halaman kuis berisi kuis yang pernah diberikan pada kelas yang berada pada halaman kelas, selanjutnya  adalah  tampilan  daftar  siswa  yang menampilkan  nama  siswa  yang  telah  mengerjakan kuis,  selanjutnya  pada  menu  buat  soal  maka  akan tampil  bentuk  soal  yang  dapat  dibuat  pada  website kuis.  Pada  tampilan  buat  soal  akan  menampilkan bentuk  tampilan  ketika  sedang  membuat  soal  kuis dimana  guru  harus  memasukan  soal,  jawaban  yang benar,  waktu  pengerjaan  tiap  soal,  dan  point  yang didapat  pada  tiap  soal.  Selanjutnya  tampilan konfirmasi soal berisi soal yang telah dibuat dan guru juga harus mengisi beberapa informasi kembali seperti judul kuis, kelas yang dapat mengerjakan kuis tersebut, waktu mulai dan waktu selesai pengerjaan kuis. Dan yang terakhir adalah tampilan menu pengaturan yang dimana guru dapat mengatur informasi pribadinya.
Tahap  yang  kelima  adalah testing . Testing dilakukan dengan  cara  penulis  membagikan  kuisioner  kepada beberapa siswa dan guru. Tahap testing menggunakan metode SUS dimana siswa dan guru akan menjawab 10 pertanyaan yang diberikan oleh penulis. Dan hasil dari kuisioner tersebut adalah sebagai berikut.
Tabel 8. Hasil Kuisioner 16 Responden N o S 1 S 2 S 3 S 4 S 5 S 6 S 7 S 8 S 9 S1 0 1 4  1  4  3  3  4  4  3  3 3 2 3  2  4  2  4  3  4  2  4 4 3 4  3  3  4  4  2  4  3  2 4 4 4  2  4  3  4  2  4  2  4 3 5 4  3  3  4  4  2  4  3  3 4 6 4  2  1  2  3  3  4  2  4 2 7 5  4  5  4  3  3  3  3  3 5 8 4  2  5  2  4  2  5  2  4 3 9 5  2  5  2  5  1  5  1  5 2 10  4  1  4  4  4  2  4  2  4 5 11  5  2  5  2  5  2  5  2  5 5 12  4  2  4  2  4  2  5  2  5 4 13  5  2  4  3  4  2  4  2  4 4 14  5  1  5  1  5  1  5  1  5 1 15  5  1  5  1  5  1  5  1  5 1 16  5  2  5  2  4  2  4  1  4 4
Tabel  8  adalah  hasil  dari  16  responden  yang mengerjakan kuisioner. Kemudian hasil dari kuisioner tiap responden dijumlahkan lalu dikalikan dengan 2,5 dan mendapatkan hasil sebagai berikut.
Tabel 9. Total Nilai No Jumlah Jumlah * 2,5 1 24 60 2 26 65 3 21 52,5 4 28 70 5 22 55 6 25 62,5 7 20 50 8 31 77,5 9 37 92,5 10 26 65 11 32 80 12 30 75 13 28 70 14 40 100 15 40 100 16 31 77,5 Setelah  menghitung skor SUS  selanjutnya  adalah menghitung skor rata-rata. Rumus untuk menghitung skor rata-rata  adalah skor akhir  dikali  dengan  total responden. Jika dijumlahkan skor akhir mendapatkan nilai 1152,5 kemudian dibagi jumlah total responden yaitu 16 maka mendapatkan hasil 72. Dari hasil rata- rata yang mendapatkan nilai 72 maka rancangan design website kuis sudah cukup baik.

## 4. Kesimpulan
Berdasarkan dari penelitian yang telah dilaksanakan, pada perancangan design UI/UX pada website kuis online  dapat  disimpulkan  bahwa  perancangan website kuis menggunakan figma mendapatkan hasil yang  cukup  baik  dengan  skor  rata-rata  72  pada metode system usability scale (SUS). Hal ini menunjukan bahwa  perancangan  website  kuis  berhasil  dengan hasil yang baik. Hal ini disebabkan juga pada, sudah banyaknya  siswa  yang  terbiasa  dengan  tampilan website kuis dan tidak membutuhkan bantuan orang lain  untuk  menggunakan  website  kuis.  Walaupun sudah mendapatkan hasil yang cukup baik masih ada beberapa siswa yang belum terbiasa dengan tampilan dari website kuis dan masih membutuhkan bantuan orang lain untuk menggunakan kembali website kuis yang telah dirancang. Dikarenakan ada beberapa tata letak  tampilan  yang  kurang  sesuai  untuk  dilihat sehingga membuat siswa sedikit mengalami kesulitan
untuk menggunakan website kuis. Sehingga membuat siswa perlu bantuan orang lain untuk membantunya menggunakan website kuis.

## 5. Daftar Pustaka
[1] Elgamar, B. U. K. U. (2020). AJAR KONSEP DASAR PEMROGRAMAN WEBSITE DENGAN PHP. Ahlimedia Book .
[2] Pramudita,  R.,  Arifin,  R.  W.,  Alfian,  A.  N., Safitri,  N.,  &  Anwariya,  S.  D.  (2021). Penggunaan aplikasi figma dalam membangun ui/ux yang interaktif pada program studi teknik informatika  stmik  tasikmalaya. Jurnal  buana pengabdian , 3 (1), 149-154. DOI: https://doi.org/10.36805/jurnalbuanapengabd ian.v3i1.1542. [3] Wardana,  F.  C.,  &  Prismana,  I.  G.  L.  P.  E. (2022).  Perancangan  Ulang  UI  &  UX Menggunakan  Metode  Design  Thinking  Pada Aplikasi Siakadu Mahasiswa Berbasis Mobile. Journal of Emerging Information System and Business Intelligence (JEISBI) , 3 (4), 1-11.
[4] Haryuda, D., Asfi, M., & Fahrudin, R. (2021). Perancangan  UI/UX  Menggunakan  Metode Design Thinking Berbasis Web Pada Laportea Company. Jurnal  Ilmiah  Teknologi  Infomasi Terapan , 8 (1), 111-117. [5] HARYANTO,
M. T. (2021). IMPLEMENTASI DESIGN THINKING  UNTUK  MENINGKATKAN USABILITY  ISO  9241-11  DI  WEBSITE FAKULTAS TEKNIK UNIMMA (UNIVERSITAS MUHAMMADIYAH MAGELANG) (Doctoral dissertation, UNIVERSITAS MUHAMMADIYAH MAGELANG). [6] Firdausi, F. A. (2021). Analisa dan Desain Kembali UI/UX  Aplikasi  Marketplace  UMKM  Digidesa Menggunakan  Metode  Design  Thinking (Doctoral dissertation, UNIVERSITAS ISLAM NEGERI SULTAN SYARIF KASIM RIAU).
[7] Oktaviani, B. (2023). Desain Sistem Pemasaran produk  UMKM  Dengan  KONSEP  UI/UX menggunakan  metode  design  thinking. Desain Sistem  Pemasaran  Produk  UMKM  dengan  Konsep UI/UX Menggunakan Metode Design Thinking , 4 (3), 980-987.
[8] Putra,  W.,  Affandes,  M.,  Vitriani,  Y.,  &
Iskandar,  I.  (2022).  Analisa  dan  Desain Kembali Aplikasi Galeri Lembaga Adat Melayu Riau Menggunakan Metode Design Thinking. JURIKOM (Jurnal Riset Komputer) , 9 (6), 1883-1892. DOI: http://dx.doi.org/10.30865/jurikom.v9i6.530
6.
[9] Sari,  I.  P.,  Kartina,  A.  H.,  Pratiwi,  A.  M., Oktariana, F., Nasrulloh, M. F., & Zain, S. A.
(2020).  Implementasi  metode  pendekatan design  thinking  dalam  pembuatan  aplikasi happy  class  di  kampus  UPI  Cibiru. Edsence: Jurnal Pendidikan Multimedia , 2 (1), 45-55.
[10] Surachman,  C.  S.,  Andriyanto,  M.  R., Rahmawati,  C.,  &  Sukmasetya,  P.  (2022). Implementasi  Metode  Design  Thinking  Pada Perancangan UI/UX Design Aplikasi Dagang. in. TeIKa , 12 (02), 157-169.
DOI:
https://doi.org/10.36342/teika.v12i02.2922.
[11] Ravelino,  C.,  &  Susetyo,  Y.  A.  (2023). Perancangan UI/UX untuk Aplikasi Bank Jago menggunakan Metode User Centered Design. Jurnal JTIK (Jurnal Teknologi Informasi dan Komunikasi) , 7 (1), 121-129. DOI: https://doi.org/10.35870/jtik.v7i1.697.
[12] Widiatmoko,  D.  T.,  &  Utami,  B.  S.  (2022). Perancangan  UI/UX  Purwarupa  Aplikasi Penentu Kualitas Benih Bunga Berbasis Mobile Menggunakan Metode Design Thinking (Studi Kasus PT Selektani). Aiti , 19 (1), 120-136. DOI: https://doi.org/10.24246/aiti.v19i1.120-136.
[13] Fariyanto,  F.,  Suaidah,  S.,  &  Ulum,  F.  (2021). Perancangan  aplikasi  pemilihan  kepala  desa dengan metode ux design thinking (Studi kasus: kampung  kuripan). Jurnal  Teknologi  Dan  Sistem Informasi , 2 (2), 52-60. DOI: https://doi.org/10.33365/jtsi.v2i2.853.