## Perancangan Design UI/UX pada Website Mactiv dengan Menggunakan Metode Design Thinking
Frisca Martha Veronica 1 , Nina Fadilah Najwa 2
1 Magister Terapan Teknik Komputer, Politeknik Caltex Riau
2 Teknologi Informasi, Politeknik Caltex Riau
1 frisca22mttk@mahasiswa.pcr.ac.id * , 2 nina@pcr.ac.id

## Abstract
Education is an important life process for humans. Currently, Indonesia is facing the phenomenon of low quality education caused by the lack of efforts of teachers in exploring the potential of students. Another phenomenon that occurs is the number of Indonesian students who choose the wrong major. According to research by the Indonesia Career Center Network, 87% of students admitted that the major they chose did not match their interests. The results of interviews with teachers and students show that many students do not realize the importance of interests and talents to continue to the college level. This problem requires a solution in the form of an information system that can provide information about students' interests and talents, namely the MACTIV website. This research aims to design the user interface and user experience on the MACTIV website according to the needs of end users and design the calculation of determining talent interest on the MACTIV website using the AHP method. The methods used in designing UI/UX on the website are the Design Thinking approach, Interviews, and Usability analysis. The results of this study are the design of the MACTIV high fidelity website interface, activity diagram, and calculation of talent interest using AHP. Based on usability testing, the results show that 82% of users accept the UI/UX design that has been made.
Keywords: user interface, user experience, design thinking, usability testing, analytical hierarchy process

## Abstrak
Pendidikan adalah proses kehidupan yang penting bagi manusia. Saat ini, Indonesia menghadapi fenomena rendahnya kualitas pendidikan yang disebabkan oleh kurangnya upaya pengajar dalam menggali potensi siswa. Fenomena lain yang terjadi adalah banyaknya mahasiswa Indonesia yang salah jurusan. Menurut penelitian Indonesia Career Center Network , 87% mahasiswa mengaku jurusan yang mereka pilih tidak sesuai dengan minat mereka. Hasil wawancara dengan guru dan siswa menunjukkan bahwa  banyak  siswa  yang  tidak  menyadari  pentingnya  minat  dan  bakat  untuk  melanjutkan  ke  jenjang  perguruan  tinggi. Permasalahan ini memerlukan solusi berupa sistem informasi yang dapat memberikan informasi tentang minat bakat siswa, yaitu website MACTIV. Penelitian ini bertujuan untuk merancang user interface dan user experience pada website MACTIV sesuai dengan kebutuhan pengguna akhir dan merancang perhitungan penentuan minat bakat pada website MACTIV dengan menggunakan  metode  AHP.  Metode  yang  digunakan  dalam  perancangan  UI/UX  pada website adalah  pendekatan Design Thinking , Wawancara, dan analisis Usability . Hasil penelitian ini adalah perancangan interface website MACTIV high fidelity , activity diagram , dan perhitungan minat bakat menggunakan AHP. Berdasarkan pengujian usability , diperoleh hasil bahwa 82% pengguna menerima perancangan UI/UX yang telah dibuat.
Kata kunci: user interface, user experience, design thinking, usability testing, analytical hierarchy process
©This work is licensed under a Creative Commons Attribution - ShareAlike 4.0 International License

## 1. Pendahuluan
Fenomena yang terjadi pada saat ini rendahnya kualitas pendidikan  Indonesia  yang  disebabkan  oleh  kualitas pengajar  yang  kurang  menggali  potensi  yang dimiliki oleh  siswa.  Pendidik  masih  memaksakan  kehendak murid untuk mempelajari semua hal tanpa memperhatikan  kebutuhan,  minat  dan  bakat  yang dimiliki  oleh  masing-masing  siswa.  Tidak  hanya  itu, fenomena  lainnya  terjadi  pada  mahasiswa  Indonesia yang  mengalami  salah  jurusan  diambil  dari  berita, fenomena  tersebut  diperkuat  oleh  hasil  penelitian Indonesia Career Center Network menunjukkan bahwa sebanyak  87%  mahasiswa  mengakui  jurusan  yang diambil  tidak  sesuai  dengan  minatnya  dan  hal  ini disadari  ketika  telah  menjalani  proses  perkuliahan selama dua hingga tiga semester .
Berdasarkan  hasil  wawancara  yang  telah  dilakukan kepada  guru  SMK  yaitu  Ibu  Dame  yang  berasal  dari sekolah SMK Negeri 03 Pekanbaru dan dua orang guru SMA Negeri 07 Pekanbaru yaitu Ibu Fanye dan Bapak Reza  yaitu  banyak  siswa  yang  tidak  mengetahui pentingnya  suatu  minat  dan  bakat  untuk  kelanjutan pada  jenjang  perguruan  tinggi  ataupun  kerja.  Siswa juga  banyak  yang  tidak  ingin  tahu  akan  pentingnya informasi  mengenai  syarat-syarat  jurusan  pada perguruan  tinggi.  Oleh  karena  itu,  guru  yang  telah diwawancarai  membutuhkan  website  yang  dapat memberikan  informasi  mengenai  minat  bakat  siswa, poin  pelanggaran  siswa  dan  informasi  tugas  untuk siswa.
Selanjutnya,  hasil  wawancara  yang  dilakukan  kepada Olivia  siswa  dari  (SMAN  02  PEKANBARU)  dan Misericordias yang siswa dari (SMKN 04
PEKANBARU)  dengan  membahas  minat  dan  bakat menurut kedua siswa minat dan bakat sangat penting, kedua  siswa  telah  mengetahui  minat  bakat  namun teman-teman  sekitarnya  masih  ada  beberapa  yang belum sadar akan minatnya. Menurut siswa upaya yang dapat  dilakukan  yaitu  adanya  website  yang  dapat memberikan  informasi  mengenai  minat  bakat  siswa dan  juga  memberikan  informasi  mengenai  nilai-nilai semester atau rata-rata sebelum akhir semester.
Oleh  karena  itu,  dari  permasalahan  yang  telah dijelaskan maka dapat diselesaikan dengan menggunakan website MACTIV. MACTIV merupakan website yang dapat memberikan informasi mengenai  nilai  rata-rata  siswa  dari  rata-rata  sekolah, rata-rata  semester,  rata-rata  mata  pelajaran,  kemudian MACTIV juga dapat memberikan informasi mengenai minat  bakat  siswa,  informasi poin pelanggaran  siswa, informasi  tugas  dan  informasi  lainnya.  Website MACTIV  dapat  digunakan  oleh  guru  mata  pelajaran, guru wali kelas, guru bimbingan konseling dan siswa.
Guru  mata  pelajaran  dapat  menambahkan  mata pelajaran, menambah materi pelajaran, catatan evaluasi siswa, melihat daftar siswa, menambah daftar tugas dan memberikan nilai. Guru wali kelas hanya dapat melihat daftar mata pelajaran, melihat materi pelajaran, melihat catatan  evaluasi  dari  guru  mata  pelajaran,  melihat daftar  nilai,  melihat  daftar  tugas,  menambahkan  poin pelanggaran,  menambahkan  minat  bakat  dan  melihat catatan  bimbingan  konseling  dari  guru  bimbingan konseling.  Guru  bimbingan  konseling  hanya  dapat melihat daftar siswa, melihat catatan evaluasi, melihat catatan  minat  bakat,  melihat  poin  pelanggaran  dan dapat  menambahkan  catatan  bimbingan  konseling. Siswa  dapat  mengambil  kelas  sesuai  mata  pelajaran, melihat catatan minat bakat, melihat poin pelanggaran, mengirim tugas sekolah dan tugas untuk menambahkan poin  pelanggaran  dan  melihat  nilai  tugas  dan  melihat rata-rata nilai.
Dalam  pembangunan  website  MACTIV  terdiri  dari beberapa  bagian  yaitu frontend , backend dan  UI/UX designer . Frontend bertugas  untuk  melakukan slicing dari design UI/UX  ke  dalam  bentuk  tampilan  sebuah website. Backend bertugas  untuk  membuat  sistem untuk  mengolah database dan  juga  server.  UI/UX designer bertugas untuk menentukan tampilan website yang menarik dan menentukan rancangan website agar dapat  beroperasi  dengan  mudah  agar  pengguna  dapat menggunakan website dengan baik [1].
Penelitian  ini  berfokus  kepada  perancangan  UI/UX pada  website  MACTIV  dengan  pendekatan Design Thinking .  Metode design  thinking memiliki  tahapan yang diantaranya Empathize , Define , Ideate , Prototype , dan Test . Observasi yang akan dilakukan yaitu dengan mencari  5  user  persona  yang  bertujuan  untuk memudahkan, menemukan dan menyimpulkan permasalahan yang terjadi. Oleh karena itu pentingnya perancangan user  interface yang  baik  pada  tampilan website agar user experience dalam menjelajahi sistem
MACTIV  dan  informasi  yang  diberikan  oleh  sistem dapat diterima dengan baik oleh pengguna.

## 2. Metode Penelitian
Metode design  thinking yang  akan  digunakan  untuk membuat rancangan tampilan pada website MACTIV. Adapun  tahapan  dari  metode design  thinking pada penelitian  ini  terdiri  dari Emphatize,  Define,  Ideate, Prototype, dan Testing.
Gambar 1. Tahapan Design Thinking
2.1. User Interface
User  Interface menurut  Lastiansah  pada  [2] merupakan  cara  program  dan  pengguna  untuk berinteraksi. User Interface berfungsi untuk menghubungkan informasi pengguna sistem, sehingga dapat  digunakan.  Sedangkan  menurut  [3], user interface adalah  penghubung  atau  penerjemah informasi antara pengguna dan sistem informasi. User interface terdiri dua komponen yaitu input dan output. Output adalah  komputer  menyatakan  respon  berupa hasil  dari  kebutuhan  sesuai  perintah  pengguna, sedangkan Input ketika pengguna memberikan perintah kepada  komputer . Berdasarkan  pernyataan  tersebut, dapat  disimpulkan  bahwa user  interface adalah tampilan  visual  dari  sistem  yang  menghubungkan pengguna atau user dengan sistem.
2.2. User Experience
User  Experience adalah  pengalaman  yang  diciptakan oleh  produk  untuk  pengguna  produk  dalam  dunia nyata. User Experience berbeda dengan User Interface. UX  bukan  tampilan  antarmuka,  namun  keseluruhan proses yang dilewati pengguna saat berinteraksi dengan
sistem.  Untuk  mendapatkan  UX  yang  baik,  terdapat beberapa  elemen  yaitu;  memiliki  kesesuaian  antara fitur  sistem  dengan  kebutuhan  pengguna,  kapabilitas sistem  untuk  membantu  pengguna  menyelesaikan pekerjaannya,  serta  kemudahan  saat  digunakan terutama  saat  pertama  kali  digunakan  sehingga mendapatkan  kesan  yang  bagus  [4].  Menurut  definisi dari  ISO  9241-210, User  Experience adalah  persepsi seseorang  dan  respon  dari  pengguna  sebuah  produk, sistem atau jasa.
2.3. Design Thinking
Design Thinking dipopulerkan oleh David Kelley dan Tim  Brown.  Secara  etimologis design yang  berarti gambar  dan design  thinking yang  berarti  “pemikiran desain”. Design  Thinking merupakan  alat  yang digunakan dalam problem solving, problem design dan problem  forming .  Tidak  hanya  menyelesaikan  suatu permasalahan, design  thinking dirancang  untuk membentuk  dan  merancang  suatu  permasalahan. Design  thinking memiliki  proses  komprehensif  yang berkonsentrasi untuk menciptakan solusi yang diawali dengan proses empati yang berpusat pada manusia atau human centered [5].
Tahapan design thinking terdiri dari beberapa tahapan yang terdiri dari:
a. Emphatize
Emphatize merupakan  proses  yang  berfokus  untuk memahami pengguna dengan menempatkan diri secara mendalam berdasarkan posisi yang dirasakan [6].
b. Define
Mengumpulkan  semua  data  dari  tahapan emphatize untuk mengklarifikasi masalah dan melakukan analisis data  untuk  menghasilkan  konsep  dalam  mengatasi permasalahan  dengan  menggunakan  wawancara  atau survei [7].
c. Ideate
Pada  tahapan  ini  akan  menghasilkan  ide  dari  hasil brainstorming. Tujuan tahapan ini akan menghasilkan gagasan dan Solusi untuk menyelesaikan masalah [7].
d. Prototype
Setelah  mendapatkan  ide,  maka  dibentuklah  sebuah prototipe  dari  hasil  tahapan ideate dari  solusi  yang diusulkan [6].
e. Testing Menguji  hasil prototype untuk  mengidentifikasi bagaimana  pengguna  berinteraksi  dengan  solusi  yang telah diusulkan [6].
2.4. User Persona
User  Persona merupakan  dokumen  representasi  dari pengguna yang paling penting. User persona bertujuan untuk  menganalisis  pengguna  agar  mendapatkan tujuan,  kebutuhan  dan  minat  pengguna.  Tujuan  dari user  persona  ini untuk  membuat  keputusan  sebuah desain  dari  perilaku,  psikologi  dan  demografi pengguna. User  persona dapat  membantu  dalam
menganalisis target user seperti mengetahui user goals, perilaku user , dan pain point dari pengguna[8].
2.5. Usability
Usability adalah  analisa  kualitatif  untuk  menentukan seberapa  mudah  pengguna  menggunakan  antarmuka dari  aplikasi  atau  website. Usability adalah  tingkat kualitas dari sistem yang mudah dipelajari, digunakan dan  pengguna  dapat  menggunakan  sistem  untuk mencapai tujuannya. Tujuan dari usability yaitu efektif dan  efisien  ketika  digunakan,  aman  saat  digunakan, mudah dipelajari, dan mudah diingat [9].
2.6. AHP
AHP  merupakan  salah  satu  metode  untuk  mengambil keputusan dalam memecahkan masalah yang melibatkan  variabel-variabel  dan  memiliki  beberapa sifat  yang  tidak  dapat  diukur  secara  langsung  atau kualitatif. AHP memiliki prinsip dasar yang terdiri dari penyusunan  hirarki,  penelitian  kriteria  dan  alternatif, menentukan prioritas, dan konsistensi yang logis [10].

## 3.   Hasil dan Pembahasan
3.1. Emphatize
Pada tahapan emphatize menggunakan fishbone untuk mengetahui  akar  masalah  yang  terjadi  pada  salah jurusan saat siswa masuk ke perkuliahan. Berdasarkan gambar dibawah, maka didapatlah permasalahan yang terjadi  dari  salah  jurusan . Kategori  yang  digunakan pada  analisis  ini  terdiri  dari  metode,  lingkungan, personil  dan  pengukuran.  Sehingga  didapatlah kesimpulan  bahwa  Minat  bakat  dan  informasi  sangat penting  untuk  memasuki  atau  memilih  jurusan  ketika kuliah.  Jika  mengalami  salah  jurusan  akan  membuat siswa  tidak  nyaman  dalam  mengikuti  proses  belajar mengajar  sehingga  menyebabkan  prestasi  akademik menjadi  sulit  untuk dicapai,  tidak  bersemangat  ketika ke kampus sehingga menyebabkan malas untuk datang dan tidak mengerjakan tugas-tugas, tidak percaya diri, stress  dan  tertekan  ketika  menjalani  perkuliahan sehingga menjadi sulit dalam berkonsentrasi. Kemudian,  pada  tahapan  ini  juga  membentuk  sebuah pertanyaan  wawancara  untuk  user  persona.  Dimana, user persona terdiri dari 3 guru dan 2 siswa.
Pada tahapan wawancara pengguna, perlu menentukan target user yang akan diwawancara. Kriteria user dapat dilihat pada Gambar 3.
Gambar 3. User Target
User Persona  merupakan  dokumen  representasi  dari pengguna yang paling penting. User persona bertujuan untuk  menganalisis  pengguna  agar  mendapatkan tujuan,  kebutuhan  dan  minat  pengguna  terhadap  ide atau  solusi  yang  sedang  dirancang  untuk  website. Setelah melakukan pendefinisian profil pengguna dan wawancara,  maka  akan  membuat user  persona dari responden  yang  telah  diwawancara.  Berikut  ini merupakan salah satu gambar dari user persona .
Gambar 4. User Persona
3.2. Define
Berdasarkan hasil wawancara, maka dilakukan proses seleksi untuk melihat apakah ada masalah yang sama, jika  ada  maka  masalah  tersebut  dapat  disatukan. Sehingga, hasil dari define ini terdapat tujuh masalah..
Setelah  melakukan  tahap  definisi  dari  masalah  maka, langkah  selanjutnya  membuat  apa  yang  dibutuhkan oleh  pengguna.  Gambar  6  merupakan  proses  definisi dari  kebutuhan . Hasil  dari  kebutuhan  ini  didapatkan dari  harapan  pengguna.  Setalah  itu  maka  membuat insight yang  diperlukan  dari  penggunaa  berdasarkan hasil  identifikasi  masalah  dan  kebutuhan  pengguna yang dapat dilihat dari Gambar 7.
Gambar 6. Mendefinisikan Kebutuhan

## Gambar 7. Mendefinisikan Insight
Setelah  melakukan  tahap  definisi  dari  masalah  maka, langkah  selanjutnya  membuat  apa  yang  dibutuhkan Setelah melakukan tahap definisi pada problem , needs dan insight, tahap  selanjutnya  adalah  membuat How Might  We .  HMW  berisi  mengenai  solusi  bagaimana mengatasi  permasalahan  yang  telah  ditemukan  pada tahapan define diatas  dengan  mengubah  pertanyaan menjadi  pernyataan.  Berikut  ini how  might  we yang telah dibuat.
Gambar 8. How Might We
3.3. Ideate
Setelah  melewati  tahap empathize dan define, maka tahap  selanjutnya  yaitu ideate .  Pada  tahapan  ini  akan melakukan  brainstorming ide  berdasarkan how  might we . Kemudian mengumpulkan seluruh ide yang dapat menjadi solusi terbaik untuk memecahkan masalah. Ide yang  dikumpulkan  berdasarkan  hasil brainstorming dengan  pengguna  yang  telah  dijadikan user  target. Setelah  melakukan voting pada  ide,  maka  tahap selanjutnya  melakukan  pengelompokkan  ide  menjadi beberapa  kategori  yang  disebut  dengan affinity diagram. Hasil  pengelompokan  ide  yang  terdiri  dari kategori  tampilan ui, fitur dashboard, fitur  poin pelanggaran,  fitur  minat  bakat,  fitur  tugas,  fitur  mata pelajaran,  fitur  daftar  siswa  untuk  guru  dan landing page.
Tahap  selanjutnya  yaitu  membuat  prioritas  diagram, prioritas  yang  akan  dimasukkan  ke  dalam  diagram prioritas berdasarkan hasil voting. Ide yang mendapatkan voting terbanyak  maka  akan  masuk  ke dalam  kategori  prioritas.  Diagram  prioritas  ini  terdiri dari yes do it now, do next, do last, dan later . Hasil dari diagram prioritas yang akan dikerjakan terlebih dahulu yaitu  fitur  minat  bakat,  fitur  mata  pelajaran  guru  dan siswa, fitur poin pelanggaran, fitur dashboard guru dan siswa,  fitur  tugas  guru  dan  siswa,  serta  fitur  daftar siswa.  Setelah  itu  membuat  tampilan  ui,  dan  yang dikerjakan  terakhir  adalah  pembuatan landing  page . Berdasarkan hasil ini juga ada beberapa fitur yang tidak dikerjakan yaitu fitur raport, fitur motivasi, menampilkan informasi syarat dan jalur serta tampilan testimoni .
Pada tahapan ideate ini juga terdapat perhitungan minat bakat.  Pada  perhitungan  minat  bakat  penelitian  ini menggunakan metode perhitungan Analytical
Hierarchy Process (AHP) dan hanya sampai  simulasi perhitungan  AHP.  Hal  yang  dilakukan  yaitu menentukan  kriteria  dan  alternatif.  Berikut  ini merupakan gambar struktur hirarki yang dikembangkan  untuk  menu  perhitungan  minat  bakat siswa.

## Gambar 10. Hirarki AHP
Berikut ini merupakan penjelasan dari kriteria ahp pada minat bakat.

## Gambar 11. Hirarki AHP
Berikut  ini  simulasi  perhitungan  minat  bakat  dari penelitian ini:
Menentukan  bobot  dan  keterangan  untuk  nilai  setiap mata  pelajaran.  Keterangan  bobot  ini  dibuat  untuk memberikan  nilai  matriks  perbandingan  berpasangan untuk  menghasilkan  prioritas  dari  setiap  kriteria  dan sub kriteria.
Kategori Keterangan Tujuan Minat Bakat dan Rekomendasi Jurusan Kriteria Nilai Rapor Minat Bakat Sub Kriteria 1 Mata Pelajaran Umum
Mata Pelajaran IPA
Mata Pelajaran IPS Minat Bakat Sub Kriteria Mata  Pelajaran Umum Nilai Matematika Wajib Nilai Bahasa Indonesia Nilai Bahasa Inggris
Nilai PKN Nilai Agama Nilai Sejarah Wajib Nilai Seni Budaya Nilai Kewirausahaan/Prakarya Nilai Olahraga
Sub Kriteria Mata  Pelajaran IPA Nilai Biologi Nilai Fisika Nilai Kimia Nilai Matematika Peminatan Sub Kriteria Mata  Pelajaran IPS Nilai Sosiologi Nilai Geografi Nilai Ekonomi Nilai Akuntansi Nilai Sejarah Peminatan
Sub Kriteria Minat Ekstrakurikuler Sub Kriteria Bakat Intelektual Umum Kreatif dan Produktif Olahraga Keterampilan Teknik
Alternatif MIPA Kesehatan Humaniora

## Gambar 12. Keterangan Bobot
Pada saat ini akan melakukan perhitungan untuk salah satu  siswa,  disini  akan  melakukan  perhitungan berdasarkan kriteria nilai rapor pada sub kriteria mata pelajaran IPA. Berikut ini simulasinya :
Nama : Joshua Valerio
Kelas : XII MIPA 2

## Gambar 13. Nilai Mata Pelajaran dan Bobot
Selanjutnya  melakukan  perbandingan  kriteria  dengan mengisi nilai bobot berdasarkan kepentingan kriteria.

## Gambar 14. Matriks Perbandingan Kriteria
Selanjutnya mencari eigen vektor normalisasi. Berikut ini tabel dari pencarian eigen vektor normalisasi:
Gambar 15. Pencarian Eigen Vektor Normalisasi 1
Gambar 16. Pencarian Eigen Vektor Normalisasi 2
Gambar 17. Pencarian Eigen Vektor Normalisasi 3
Gambar 18. Pencarian Eigen Vektor Normalisasi 4

## Gambar 19. Eigen Vektor Normalisasi
Sebelum melakukan perhitungan nilai konsistensi, hal yang  dicari  terlebih  dahulu  yaitu  menentukan  nilai eigen maksimal dengan mengalikan hasil penjumlahan setiap baris pada matriks perbandingan dengan vektor eigen  normalisasi  berikut  ini  perhitungan  dari  eigen maksimal :
λmaks=(4,53*0,264)+(16*0,052)+(1,67*0,567)+(9,33 *0,114) = 4,061
Selanjutnya  menghitung  indeks  konsistensi  (CI), dibawah  ini  merupakan  perhitungan  dari  indeks konsistensi :
CI = (λmaks – n)/n-1 = 4,061- 4/ 4-1 = 0,061 / 3 = 0,020
Kemudian  melakukan  perhitungan  untuk  rasio konsistensi (CR), untuk nilai IR diambil dari Tabel 2. 5 nilai  random  consistency  index.  Untuk  IR  dari  dari matriks  4  x  4  adalah  0,90  sehingga  diperoleh  hasil sebagai berikut :
CR = CI/IR = 0,020/ 0,90 = 0,022
Hasil dari rasio konsistensi dari kriteria nilai rapor pada mata  pelajaran  IPA  yaitu  0,022  yang  berarti  masih berada  dibawah  0,1  sehingga  preferensi  pembobotan adalah konsisten.
Gambar 20. Bobot Subkriteria Mata Pelajaran IPA

## 3.4. Prototype
Setelah  melewati  tahap idea,  brainstorming  idea, prioritizing  idea,  crazy  8’s dan  brainstorming  ide desain  dari crazy 8’s, maka  langkah  selanjutnya  akan masuk  kepada  tahapan  prototyping.  Pada  tahapan  ini akan  membuat user  flow,  style  guideline,  design interface low fidelity .
Berdasarkan hasil brainstorming yang telah dilakukan pada  tahapan crazy  8’s ,  maka  dibuatlah  tampilan
Bobot Keterangan 5 Utama 4 Menengah Utama 3 Menengah 2 Rendah Menengah 1 Rendah Biologi Fisika Kimia Matematika Peminatan Nilai 82 75 86 79 Bobot 4 2 5 3 Kriteria Biologi  Fisika  Kimia  Matematika Peminatan Biologi 1 5 0,33 3 Fisika 0,2 1 0,14 0,33 Kimia 3 7 1 5 Matematika Peminatan 0,33 3 0,2 1 4,53 16 1,67 9,33
Biologi 1 1 0,99 0,99 3,98 Fisika 5 5 2,31 9 21,31 Kimia 0,33 0,7 0,33 0,6 1,96 Matematika Peminatan 3 1,65 1,65 3 9,3 Baris ke-1 36,55 Biologi 0,2 0,2 0,42  0,1089  0,9289 Fisika 1 1 0,98 0,99 3,97 Kimia 0,066  0,14 0,14 0,066 0,412 Matematika Peminatan 0,6 0,33 0,7 0,33 1,96 Baris ke-2 7.2709 Biologi 3 1,4 3 1,65 9,05 Fisika 15 7 7 15 44 Kimia 0,99 0,98 1 1 3,97 Matematika Peminatan 9 2,31 5 5 21,31 Baris ke-3 78,33
Biologi 0,33 0,6 0,6 0,33 1,86 Fisika 1,65 3 1,4 3 9,05 Kimia 0,1089 0,42 0,2 0,2 0,9289 Matematika Peminatan 0,99 0,99 1 1 3,98 Baris ke-4 15,8189 Kriteria Biologi  Fisika Kimia Mat Peminatan Total EVN Biologi 3,98 21,31 1,96 9,3 36,55 0,264913 Fisika 0,9289 3,97 0,412 1,96 7,2709  0,052699 Kimia 9,05 44 3,97 21,31 78,33 0,567733 Mat Peminatan 1,86 9,05 0,9289 3,98 15,818 9 0,114655 Keseluruhan 137,97
Subkriteria Mata Pelajaran IPA Bobot Biologi 0,264913 Fisika 0,052699 Kimia 0,567733 Matematika Peminatan 0,114655
wireframe yang  akan  menjadi  kerangka design untuk dilanjutkan pada hasil wireframe high-fidelity .
Gambar 21. Wireframe Low Fidelity Guru
Gambar 22. Wireframe Low Fidelity Siswa
3.5. Testing
Tahapan  terakhir  dari  metode Design  Thinking yaitu melakukan  tahap  testing. Testing dilakukan  dengan menggunakan  salah  satu  pengujian  yaitu usability testing.  Usability testing  akan  dilakukan  bersama responden  dari user  target untuk  melihat  apakah rancangan  sistem  yang  dibuat  telah  sesuai  dan memenuhi  keinginan  pengguna  dan  mengetahui kepuasan  pengguna  terhadap  hasil  rancangan  yang telah dibangun.
3.6. Hasil
Pada sistem ini terdiri dari tampilan atau interface pada setiap  halaman  perancangan low  fidelity yang  telah dibuat  menjadi high  fidelity .  Berikut  ini  merupakan salah satu gambar dari high fidelity.
Gambar 24. Halaman Dashboard Siswa
Kemudian,  pengujian  usability  merupakan  pengujian untuk  mengetahui  apakah  sistem  telah  sesuai, mengetahui  kepuasaan  pengguna  dan  memenuhi keinginan  pengguna  terhadap  perancangan yang  telah dibuat. Pada pengujian usability ini diuji melalui empat kriteria yaitu efficiency, learnability, memorability dan satisfaction .  Pengujian  ini  dilakukan  oleh  lima  (5) responden terdiri dari satu orang guru SMK NEGERI 03 PEKANBARU, dua orang guru SMA NEGERI 07 PEKANBARU,  satu  siswa  dari  SMA  NEGERI  02 PEKANBARU dan satu siswa dari SMK NEGERI 04 PEKANBARU.  Berikut  ini  hasil  rekapitulasi  hasil pengujian usability.
57
Gambar 26. Rekapitulasi Perhitungan Usability
Gambar 27. Hasil Presentase Usability.
Pengujian usability pada proses perancangan UI/UX ini dilakukan  kepada  lima  (5)  responden  dan  memiliki empat  (4)  kategori  serta  empat  belas  (14)  butir pertanyaan yang akan diisi oleh responden. Berdasarkan  hasil  dari  pengujian  ini  maka  dapatlah hasil dari efficiency sebesar 91%, learnability sebesar 75%, memorability sebesar  79%,  dan satisfaction
sebesar 81%. Berdasarkan hasil rekapitulasi pengujian ini didapatkan bahwa guru dan siswa bahwa 82% guru dan  siswa  sangat  setuju  dengan  hasil  Perancangan UI/UX pada website.

## 4.   Kesimpulan
Adapun  kesimpulan  dari  penelitian  ini  adalah Perancangan  Design  UI/UX  pada website dilakukan dengan  menggunakan  metode Design  Thinking . Tahapan dari metode design thinking dimulai dari tahap empathize,  define,  ideate,  prototype dan testing . Berdasarkan  hasil  rekapitulasi  pengujian usability diperoleh hasil sebesar 82% untuk  perancangan design UI/UX  pada website bahawa  guru  dan  siswa  sangat setuju  dengan  hasil  perancangan  ui/ux  yang  telah dibuat untuk website .
Adapun saran yang dapat digunakan untuk pengembang penelitian selanjutnya adalah Melakukan perhitungan  AHP  lebih  detail,  karena  penelitian  ini keluarannya merupakan perancangan UI/UX sehingga perhitungan  yang  dilakukan  merupakan  gambaran besar  untuk  penentuan  minat  bakat  untuk  jurusa  dan Mengimplementasikan metode AHP ke dalam sistem, agar  sistem  dapat  melakukan  penentuan  pada  minat bakat siswa.

## Daftar Rujukan
[1] M.  Hamdandi,  R.  Chandra,  F.  Bachtiar,  N.  Lais,  D.  A. Sastika,  and M.  R.  Pribadi, “Perancangan  UI  /  UX  Pada Aplikasi  Bapakkost  Idemopet  dengan  Menggunakan Metode Design Thinking,” MDP Student Conf. 2022 , vol. 1, no. 1, pp. 504–511, 2022.
[2] F.  F.  Rahmawati,  R.  C.  Nugroho,  and  A.  Zaidiah, “Perancangan  Desain  User  Interface  Lost  and  Found,” Senamika , vol. 1, no. 1, pp. 312–318, 2020.
[3] W. O. Galitz, The essential guide to hydration , vol. 40, no.
5. 2010. doi: 10.1108/nfs.2010.01740eab.030.
[4] N. R. Wiwesa, “User Interface Dan User Experience Untuk Mengelola,” JSHT-Jurnal Sos. Hum. Terap. , vol. 3, no. 2, pp. 17–31, 2021.
[5] A.  A.  Razi,  I.  R.  Mutiaz,  and  P.  Setiawan,  “Penerapan Metode Design Thinking Pada Model Perancangan Ui/Ux
Aplikasi  Penanganan  Laporan  Kehilangan  Dan  Temuan
Barang Tercecer,” Desain Komun. Vis. Manaj. Desain dan Periklanan ,  vol.  3,  no.  02,  p.  219,  2018,  doi:
10.25124/demandia.v3i02.1549.
[6] Putri Balkis and N. Oktaviani, “Re-Design User Interface Website  PT.  Gozco  Menggunakan  Design  Thinking,” J. Fasilkom ,  vol.  13,  no.  02,  pp.  214–224,  2023,  doi: 10.37859/jf.v13i02.5528.
[7] Muhammad  Fiqri  Widiyantoro,  Taufik  Ridwan,  N. Heryana,  A.  Voutama,  and  Siska,  “Perancangan  UI/UX Prototype Aplikasi Dompet Digital Menggunakan Metode Design Thinking,” J.  Fasilkom , vol. 13, no. 02, pp.  121– 131, 2023, doi: 10.37859/jf.v13i02.5265.
[8] B.  Vallendito,  “Pemodelan  User  Interface  Dan  User Experience Menggunakan Design Thinking,” p. 82, 2020.
[9] S. Lestari, “Analisis Usability Web ( Studi Kasus Website Umkm  Binaan  Bppku  Kadin  Kota  Bandung  ),” J.  Ilm. Teknol. Inf. Terap. , vol. 1, no. 1, p. (halaman 46), 2014.
[10] A.  C.  Febryanti,  I.  Darmawan,  and  R.  Andreswari, “Pembobotan  Kriteria  Sistem  Pendukung  Keputusan Pemilihan  Bidang  Peminatan  Menggunakan  Metode
Analytic  Hierarchy  Process  Studi  Kasus:  Program  Studi Sistem  Informasi  Universitas  Telkom,” J.  Rekayasa  Sist.
Ind. , vol. 3, no. 04, p. 7, 2016, doi: 10.25124/jrsi.v3i04.272.