## Jurnal Teknologi Terpadu
https://journal.nurulfikri.ac.id/index.php/jtt ISSN : 2477-0043 ISSN ONLINE : 2460-7908

## PERANCANGAN UI/UX PADA WEBSITE LABORATORIUM ENERGY MENGGUNAKAN APLIKASI FIGMA
Seila Tazkiyah 1 , Aridhanyati Arifin 2
1, 2 Informatika, Universitas Islam Indonesia Sleman, Daerah Istimewa Yogyakarta, Indonesia 55584 18523169@students.uii.ac.id , aridhanyati@uii.ac.id

## Abstract
Information technology is a technology that serves to help various jobs become more effective and efficient. Making the Energy Laboratory website is one of  the applications in information technology. The Energy Laboratory website is an information system  used  to  recapitulate  reports  and  comparative  tests  and  store  website-based  calibration  data  for  measuring instruments . The user interface is created to make the technology accessible for users to use . A good user interface design and experience will keep visitors on the website. But on the other hand, poor interface design and user experience of a website will make users uncomfortable and leave the website. In designing the UI/UX of the Energy Laboratory website, the creation of the interface  prototype  uses  the  Figma  application.  The  method  used  in  creating  the  UI/UX  design  on  the  Energy  Laboratory website uses the Design Thinking method. The Design Thinking method has five stages: empathize, define, ideate, prototype, and test. The conclusion from this study is that Figma is good and helps in the process of designing the appearance of the Energy Laboratory website with an attractive and easy-to-use User Interface .
Keywords: Design Thinking, User Experience, User Interface, Prototype, Website

## Abstrak
Teknologi  informasi  merupakan  teknologi  yang  berfungsi  untuk  membantu  berbagai  pekerjaan  menjadi  lebih  efektif  dan efisien.  Pembuatan website Laboratorium  Energy  menjadi  salah  satu  penerapan  pada  bidang  teknologi  informasi. Website Laboratorium  Energy  merupakan  sebuah  sistem  informasi  yang digunakan  untuk  rekapitulasi  laporan dan  uji  banding  serta menyimpan  data  kalibrasi  alat  ukur  berbasis website .  Antarmuka  pengguna  dibuat  dengan  tujuan  agar  teknologi  tersebut menjadi mudah digunakan oleh pengguna. Desain antarmuka pengguna dan pengalaman pengguna yang baik pada sebuah situs web  akan  membuat  pengunjung  tetap  berada  di  situs  web  tersebut.  Namun  disisi  lain,  desain  antarmuka  dan  pengalaman pengguna  yang  buruk  dari  sebuah  situs  web  akan  membuat  pengguna  tidak  nyaman  dan  meninggalkan  situs  web  tersebut. Dalam  perancangan  UI/UX website Laboratorium  Energy,  pembuatan  desain prototype antarmuka  menggunakan  aplikasi Figma.  Adapun  metode  yang  digunakan  dalam  melakukan  perancangan  desain  UI/UX  pada website Laboratorium  Energy menggunakan metode Design Thinking . Metode Design Thinking memiliki 5 tahapan yaitu empathize, define, ideate, prototype dan test .  Kesimpulan  yang  didapatkan  dari  kajian  ini  bahwa  Figma  baik  dan  membantu  dalam  proses  mendesain  tampilan website Laboratorium Energy dengan User Interface yang menarik dan mudah digunakan.
Kata kunci: Design Thinking, User Experience, User Interface, Prototype, Website

## 1. PENDAHULUAN
Pesatnya perkembangan teknologi, menimbulkan pengaruh besar  terhadap  kemajuan  industri  di  perusahaan  maupun masyarakat.  Salah  satunya  teknologi  informasi.  Teknologi informasi  yaitu  teknologi  yang  digunakan  dalam pengolahan  data,  perolehan,  dan  manipulasi  data  untuk menghasilkan informasi yang berkualitas dengan relevansi dan akurasi serta tepat waktu [1]. Teknologi informasi biasa
dipergunakan  untuk  kepentingan  pribadi,  bisnis,  serta pemerintahan dalam pengambilan keputusan.  Pemanfaatan teknologi  informasi  pada  bidang  bisnis  juga  memberikan dampak  positif  yang  besar  untuk  jalannya  bisnis  yang dibangun [2].
Pembuatan website Laboratorium  Energy  menjadi  salah satu  penerapan  pada  bidang  teknologi  informasi  sehingga
73 | Jurnal Teknologi Terpadu Vol. 8 No. 2 Desember 2022
informasi  yang  ada  pada  perusahaan  dapat  terintegrasi dengan  baik  serta  dapat  membantu  pengelolaan  proses bisnis. Website Laboratorium  Energy  adalah  sebuah  web yang  digunakan  untuk  pembuatan  laporan,  rekapitulasi laporan dan rekapitulasi uji banding, serta menyimpan data sertifikat  kalibrasi  alat  ukur  berbasis  web.  Selama  ini Laboratorium  Energy  yang  ada  pada  DDB  Telkom melakukan rekapitulasi laporan dan uji banding, menyimpan  data  sertifikat  kalibrasi  alat  ukur,  serta melakukan  perhitungan  pada  isi  data  baterai  yang  ada  di laboratorium,  masih  semi  komputasi  menggunakan Microsoft  Excel .  Hal  tersebut  memungkinkan  adanya duplikasi dan kehilangan data. Karena, dalam proses peng- inputan data masih dilakukan secara manual. Hal-hal yang menjadi kendala seperti duplikasi dan kehilangan data dapat terjadi  karena  kesalahan  kita  sendiri  ( human  error ).  Oleh karena  itu  perlu  sistem  informasi  yang  terintegrasi  dan mudah di aplikasikan.
Masing-masing  dari  teknologi  informasi  mempunyai interface yang  berfungsi  untuk  mengubungkan  pengguna dengan  teknologi  itu  sendiri  sesuai  dengan kebutuhan dan fungsinya  [3].  Seperti  halnya  penggunaan  teknologi informasi  pada  sebuah  perusahaan.  Tiap-tiap  teknologi informasi tersebut memiliki desain interface yang berbeda- beda antara satu dengan lainnya. Seperti contoh penggunaan teknologi  informasi  pada  perusahaan  pada  bidang laboratorium  dengan  kebutuhan  pengguna  untuk  efisiensi waktu dalam menyelesaikan pekerjaan akan berbeda dengan teknologi  informasi  pada  pemerintahan  dengan  kebutuhan untuk memudahkan masyarakat dalam mengakses kebijakan pemerintah.
Antarmuka pengguna ( user interface ) dibuat dengan tujuan agar  teknologi  tersebut  menjadi  mudah  digunakan  oleh pengguna  atau  yang  sering  dikenal  dengan  istilah user friendly [3].  Adapun  maksud  dari  antarmuka  pengguna ( user interface ) yaitu, dimana pengguna dapat melihat dan berinteraksi dengan sistem informasi itu sendiri. Salah satu ciri sistem informasi yang baik adalah desain antarmukanya user friendly . Desain antarmuka pengguna dan pengalaman pengguna yang baik pada sebuah situs web akan membuat pengunjung tetap berada di situs web tersebut. Namun disisi lain,  desain  antarmuka  dan  pengalaman  pengguna  yang buruk dari sebuah situs web akan membuat pengguna tidak nyaman  dan  meninggalkan  situs  web  tersebut  [4].  Suatu sistem  informasi  yang  baik,  desain  antarmuka  dan pengalaman  penggunanya  harus  sesuai  dengan  kebutuhan pengguna,  menarik,  serta  diterima  pengguna.  Oleh  karena itu  desain  antarmuka  yang  sesuai  dengan  kebutuhan pengguna penting untuk di kaji.
Ada beragam tools yang digunakan untuk membuat desain antarmuka dan pengalaman pengguna, salah satunya adalah aplikasi Figma. Menurut M. Agus Muhyidin dkk [5] Figma adalah tool yang  biasa  digunakan  untuk  membuat  desain tampilan  aplikasi mobile , website ,  desktop  dan  lainnya. Secara  umum,  Figma  banyak  digunakan  oleh  orang-orang
untuk  membuat  desain  UI/UX,  desain  web,  dan  bidang serupa  lainnya.  Menariknya  keunggulan  yang  dimiliki aplikasi Figma selain kelengkapan fitur seperti Adobe XD, yaitu  Figma  memiliki  fitur  kolaborasi  yang  dapat  bekerja secara  bersama-sama  dengan  tim  dalam file desain  yang sama, meskipun anggota tim berada di tempat yang berbeda- beda,  serta  setiap  anggota  tim  dapat  memberikan  saran, komentar, melihat pengeditan yang dilakukan anggota tim, dan dapat mengubah desain dalam waktu yang bersamaan. Hal itu menjadi keunikan yang membuat aplikasi Figma ini digunakan  banyak  desainer  UI/UX  dalam  pembuatan prototipe  desain website ataupun  desain  aplikasi  lainnya secara  praktis.  Figma  juga  bekerja  secara real  time , perubahan-perubahan  yang  terjadi  akan  tersimpan  secara otomatis oleh Figma [6].
Melihat  masalah  tersebut,  makalah  ini  akan  mengangkat perancangan  UI/UX  pada website Laboratorium  Energy menggunakan aplikasi Figma. Adapun tujuan dari penulisan ini yaitu memaparkan perancangan tampilan UI/UX dengan menerapkan  metode Design  Thinking. Metode Design Thinking merupakan  proses  dengan  tahapan  seperti mengidentifikasi,  memahami  masalah  pengguna,  serta memecahkan  sebuah  masalah  menjadi  solusi  yang memungkin penulis menghasilkan ide-ide yang inovatif [7]. Harapannya  dengan  dibuatnya  desain  UI/UX  dapat memudahkan pengguna dalam menggunakan sebuah sistem informasi laboratorium.
Penelitian  terdahulu  terkait  perancangan  UI/UX  dengan judul  “Perancangan  UI/UX  Aplikasi  My  CIC  Layanan Informasi  Akademik  Mahasiswa  Menggunakan  Aplikasi Figma.  Penulis  menuturkan,  aplikasi  Figma  dapat merancang  desain website atau  aplikasi  My  CIC  dengan antarmuka pengguna yang menarik, modern , dan minimalis. Dalam penelitian tersebut penulis berhasil membuat sebuah prototipe aplikasi yang  kompetibel dengan mobile device ” [5].  Penelitian  lain  yang  pernah  dilakukan  dengan  judul “Rancangan  UI/UX  Aplikasi Analytics Pada  Toko Online Wao.Sneakers Menggunakan Aplikasi Figma. Penulis juga menuturkan, software editing Figma dapat digunakan untuk membuat  rancangan  tampilan  aplikasi Analytics yang modern , minimalis, dan mudah digunakan untuk toko online Wao.Sneakers” [8]. Penelitian lain yang pernah dilakukan dengan  judul  “Pengembangan  UI/UX  pada  Aplikasi iDompet  dengan  Menggunakan  Metode Design  Thinking . Penulis  menggunakan  aplikasi  Figma  dalam  membuat perancangan  desain  UI/UX  aplikasi  iDompet,  dan menuturkan  bahwa  dengan  menggunakan  aplikasi  Figma, pengembangan  iDompet  lebih  cepat  dan  efisien”  [9]. Penelitian  lain  yang  pernah  dilakukan  dengan  judul “Perancangan  Aplikasi Money  Box dengan  Menggunakan Figma. Penulis menggunakan juga Figma untuk merancang prototype aplikasi Money Box ” [10]. Penelitian lain dengan judul  “Perancangan  UI/UX  Aplikasi  Perangkat  Bergerak Ivent  Menggunakan  Pendekatan  HDC  ( Human  Centered Design ). Penulis membuat perancangan UI/UX menggunakan tools Figma,  penulis  juga  menuturkan
74 | Jurnal Teknologi Terpadu Vol. 8 No. 2 Desember 2022
kolaborasi  tim  pengembangan  sangat  dibutuhkan  untuk mendapatkan  umpan  balik  dari  tim,  maka tools Figma memungkinkan pengembang untuk saling kolaborasi dalam sebuah  proyek  ini”  [11].  Penelitian  lain  dengan  judul “Perancangan Prototype Layanan  Pada  Pusat  Kesehatan Masyarakat  Menggunakan  Metode Double  Diamond . Penulis  menggunakan  aplikasi  Figma  untuk  merancang desain atau prototyping , serta menuliskan keunggulan dari Figma  yaitu multiplatform atau  aplikasi  yang  dapat dijalankan  di  sistem  operasi  apa  saja  yang  berbasis cloud sehingga  penyimpanan  desain  tersimpan  secara  otomatis, dan  juga multiuser sehingga  efektif  dalam  pengerjaan projek”  [12].  Berdasarkan  penelitian  terdahulu  yang berkaitan  dengan  perancangan  UI/UX  menggunakan aplikasi  Figma,  terdapat  peluang  untuk  membuat perancangan  UI/UX  pada website Laboratorium  Energy menggunakan  aplikasi  Figma  guna  membantu  pegawai Laboratorium  Energy  dalam  pekerjaannya.  Meskipun penelitian terkait UI/UX sudah banyak, tetapi tetap penting hadir yang baru.

## 2. METODE PENELITIAN
Metode  yang  digunakan  dalam  perancangan  UI/UX  pada website Laboratorium  Energy  adalah  metode Design Thinking .  Pendekatan Design  Thinking berfokus  pada pengguna  yang  mengedepankan  inovasi,  dibuat  untuk keperluan  desainer  yang  menyatukan  kebutuhan  orang, teknologi,  dan  kebutuhan  bisnis  [13].  Pendekatan Design Thinkin g  mempunyai  lima  tahapan,  yaitu: Empathize, Define, Ideate, Prototype, Test , terlihat seperti pada Gambar 1.
Gambar 1. Tahapan Metode Design Thinking
2.1 Empathize
Emphatize (Empati)  merupakan  tahap  pertama  dari pendekatan Design  Thinking ,  tahapan  ini  [9]  mengatakan empati  adalah  bagaimana  kita  memahami  dan  berbagi perasaan  orang  lain  dari  sudut  pandang  pengguna. Kemudian  benar-benar  fokus  memahami  keinginan  dan kebutuhan  pengguna,  mencari  tahu  keluhannya,  apa  yang menjadi  keinginannya  dan  lain  sebagainya,  sehingga mendapatkan  apa yang menjadi harapan dan tujuannya.

## 2.2 Define
Tahap  berikutnya  yaitu define ,  setelah  mengumpulkan informasi dari tahap empati kemudian mengidentifikasi apa masalah utama yang mereka miliki dan yang ingin dibantu pecahkan, serta perlu mendefinisikan masalah tersebut dari sudut  pandang  pengguna.  Dengan  melakukan  tahap emphatize dan define ini,  kita  memiliki  pemahaman  yang mendalam  terkait  permasalahan  yang  dialami  oleh pengguna.

## 2.3 Ideate
Tahap  ini  berfokus  mencari  solusi  untuk  memecahkan permasalahan  yang  sudah  di  definisikan  sebelumnya  dan dalam  tahap  ini,  membebaskan  sesama  tim  untuk  berpikir luas  dan  kreatif  yang  nantinya  akan  menciptakan  ide-ide inovatif.  Setelah  terkumpul  banyak  ide,  dilakukan penyaringan  solusi  sehingga  dapat  fokus  dengan  satu  atau dua  bahkan  tiga  ide  yang  terbaik.  Ide  solusi  yang  dipilih, kemudian akan dikembangkan pada tahapan prototype .

## 2.4 Prototype
Tahap ini dilakukan realisasi dari ide yang dipilih, ide yang terpilih  dikembangkan  menjadi prototype .  Pembuatan prototype menggunakan aplikasi Figma. Setelah prototype dibuat,  interaksi  nyata  akan  di  tambahkan  di  dalamnya sehingga dapat di uji coba.
2.5 Test
Tahapan test ini, prototype yang  telah  dibuat  pada  tahap sebelumnya  akan  di  uji  coba  kan  kepada  pengguna.  Dari pengalaman pengguna dalam menggunakan prototype , akan diperoleh masukkan dan umpan balik untuk hasil yang lebih baik lagi.

## 3. HASIL DAN PEMBAHASAN
Berikut hasil dari penerapan metode Design Thinking dalam perancangan UI/UX pada website Laboratorium Energy.

## 3.1 Empathize
Tahap  empati  ini,  keinginan,  kebutuhan  pengguna,  serta keluhannya akan dilihat dan dipahami melalui observasi dan wawancara.  Wawancara  dilakukan  kepada supervisor magang  yang  juga  merupakan  calon  pengguna website Laboratorium  Energy  yang  akan  diimplementasikan nantinya.  Selain  itu,  observasi  dilakukan  terhadap  bentuk model website yang  akan  digunakan  sesuai  dengan keinginan dan kebutuhan pengguna.
Kemudian untuk wawancara dilakukan dengan mengajukan beberapa  pertanyaan  untuk  mencari  tahu  dan  memperkuat kebutuhan  yang  akan  diimplementasikan  pada website Laboratorium  Energy  sesuai  keinginan  calon  pengguna. Tabel  1  berisi  beberapa  pertanyaan  wawancara  terkait website Laboratorium Energy.
Tabel 1. Daftar Pertanyaan Wawancara

## No. Daftar Pertanyaan Wawancara
1 Bagaimana  proses  pembuatan  laporan  untuk  pengujian perangkat sebelumnya?
2 Bagaimana cara pengolahan data pada excel sebelumnya?
3 Apakah pernah terjadi kekeliruan dalam input data?
4 Sistem seperti apa yang dibutuhkan?

## 3.2 Define
Tahap define merupakan tahap dalam mendapatkan ide atau pandang  pengguna  serta  memahami  kebutuhan  pengguna. Setelah  proses empathize ,  dilakukan  penentuan  kebutuhan dari  ulasan  permasalahan  pengguna  yang  akan  menjadi dasar  pembuatan website Laboratorium  Energy.  Tabel  2 berisi daftar kebutuhan pengguna.
Tabel 2. Daftar Kebutuhan Pengguna
No.

## Daftar Kebutuhan Pengguna
1 Website dengan sistem yang otomatis
2 Pengolahan data secara langsung ke kalkulasi
3 Menampilkan data bantuan perhitungan (Data Kalibrasi)
4 Semua data yang ada pada excel harus dapat disimpan sesuai dengan identitas
5 Rekap laporan yang dapat melihat langsung file laboran yang berbentuk pdf, word , dan excel
6 Data kalibrasi bagian DC Voltage Check dapat di update setahun sekali

## 3.3 Ideate
Proses  penggambaran  solusi  dari  kebutuhan  yang  telah  di definisikan pada tahap sebelumnya, tahap define. Pada tahap ini dilakukan brainstorming dengan tim untuk menghasilkan  ide-ide  solutif  yang  sesuai  dengan permasalahan  yang  ada.  Dari brainstorming yang  telah dilakukan,  menghasilkan  beberapa  gambaran wireframe mockup dengan tujuan untuk memudahkan pembuatan pada proses desain tampilan website . Berikut beberapa tampilan wireframe yang  dihasilkan  dari  proses ideate ini menggunakan  aplikasi  Figma  yang  dapat  dilihat  pada Gambar 2, 3, dan 4.
Gambar 3. Wireframe 2
Gambar 4. Wireframe 3

## 3.4 Prototype
Tahapan  ini, wireframe  mockup yang  sudah  dibuat  pada tahap ideate akan  direalisasikan  menjadi prototype yang dapat  diuji  coba.  Berikut  merupakan  beberapa  tampilan gambar prototype yang menggunakan aplikasi Figma.
Gambar 5. Prototype Landing Page Website Lab. Energy
Gambar 5 merupakan tampilan pertama yang pengguna lihat setelah  melakukan login pada website menggunakan username dan password .  Pada  halaman  ini  terdapat Navigation Bar yang terdiri dari 7 CTA (call to action) Link yaitu Lab. Energy, rekap laporan, templete DHU, rekap uji banding,  pembuatan  laporan, username dan  data  baterai yang di dalamnya terdapat CTA Link untuk isian dan data
76 | Jurnal Teknologi Terpadu Vol. 8 No. 2 Desember 2022
kalibrasi.  Navigasi bar diletakkan  pada  posisi  yang  sudah umum  digunakan  pada  kebanyakan website ,  hal  tersebut akan mempermudah pengguna untuk menemukan halaman yang ingin diakses.
Gambar 6. Prototype Halaman Rekap Laporan Website Lab. Energy
Gambar  6  merupakan  halaman  rekap  laporan website Laboratorium  Energy.  Halaman  ini  akan  tampil  ketika pengguna  memilih  menu  rekap  laporan  yang  terdapat  di navigasi bar pada  sisi  kiri  halaman,  terdapat CTA  Button tambah  rekap  laporan,  tabel  rekap  laporan  yang  berisi nomor,  nomor  SPK, file  PDF,  word,  excel ,  terdapat CTA Link lihat file dalam  bentuk PDF,  word ,  dan excel . Navigation  Bar pada  halaman  ini  juga  sama  seperti  pada halaman landing page.
Gambar 7. Prototype Halaman Rekap Uji Banding Website Lab. Energy
Gambar  7  merupakan  halaman  rekap  uji  banding website Laboratorium  Energy.  Halaman  ini  akan  tampil  ketika pengguna memilih menu rekap uji banding yang terdapat di navigasi bar pada sisi tengah halaman, terdapat CTA Button tambah  rekap  uji  banding,  tabel  rekap  uji  banding  yang berisi nomor, nama file , tahun, file dan terdapat CTA Link lihat file dalam bentuk PDF, word , serta excel . Navigation Bar pada  halaman  ini  juga  sama  seperti  pada  halaman landing page.
Gambar 8. Prototype Halaman Data Baterai Isian Website Lab. Energy
Gambar  8  merupakan  halaman  data  baterai  isian website Laboratorium  Energy.  Halaman  ini  akan  tampil  ketika pengguna  memilih  menu  data  baterai  yang  terdapat  di navigasi bar pada sisi kanan halaman, terdapat CTA Button tambah data untuk isian. Navigation Bar pada halaman ini juga  sama  seperti  pada  halaman landing  page. Ketika pengguna  menekan button tambah  data, website akan menampilkan input data  isian  yang  akan  diisi  oleh pengguna.  Setelah  pengguna  melakukan  penginputan  data isian  akan  dilanjutkan  ke  halaman  data  baterai  isian  yang kedua  seperti  pada  Gambar  9  terlihat  dari  tabel  data  yang sudah di input.
Gambar 9. Prototype Halaman Data Baterai Isian Website Lab. Energy
Gambar  9  merupakan  halaman  data  baterai  isian website Laboratorium  Energy.  Halaman  ini  akan  tampil  setelah pengguna mengisi data isian pada halaman data baterai isian pertama. Pada halaman ini akan menampilkan yang terdapat tabel  rekap  isian  yang  berisi  nomor,  nomor  SPK,  merek, type ,  nomor  seri,  kapasitas  (AH),  nomor module  bitrode , kapasitas nyata 1 (arus), kapasitas nyata 1 (waktu), kapasitas nyata  1  ( temperature ),  dan  beberapa  kolom  berikutnya, terdapat CTA  Button tambah  data  isian, CTA  Link untuk download dan  hapus  semua  data  isian,  serta search  bar . Setiap baris terdapat 3 CTA Button dengan label lihat, ubah, dan  hapus. Button dengan  label  yang  jelas  sangat  penting untuk memperjelas fungsi dari button tersebut. Sebaliknya button dengan  label  yang  tidak  jelas  akan  menyesatkan pengguna. Navigation  Bar pada  halaman  ini  juga  sama seperti pada halaman landing page.
Gambar 10. Prototype Halaman Data Kalibrasi Website Lab. Energy
Gambar  10  merupakan  halaman  data  kalibrasi website Laboratorium Energy. Pada halaman ini data alat kalibrasi alat  ukur  di  tampilkan,  masing-masing  alat  memiliki  4 model  data  kalibrasi.  Terdapat CTA  Button tambah  data model, hapus dan ubah serta memiliki CTA Link pada tiap bagian model 1 hingga 4. Navigation Bar pada halaman ini juga sama seperti pada halaman landing page.

## 3.5 Test
Tahapan  ini, prototype yang  telah  dibuat  diuji  coba  oleh calon  pengguna.  Pengujian  dilakukan  kepada supervisor magang  yang  juga  merupakan  calon  pengguna website Laboratorium Energy dengan menggunakan aplikasi Figma. Fitur present pada Figma digunakan untuk me-simulasikan hasil  desain  UI/UX website yang  telah  dibuat  pada  tahap sebelumnya.  Pengujian  dilakukan  dengan  cara zoom meeting bersama  calon  pengguna,  kemudian  calon pengguna  mencoba  langsung  tautan  ( link ) prototype yang sudah disiapkan.
Menurut  [14]  dalam  tahapan testing tidak  selalu  menjadi ujung  dari  bagian  perancangan,  hal  tersebut  dapat  terjadi ketika  pengujian prototype yang  dijalankan  oleh  calon pengguna,  ada  pertimbangan  desain  dan  fungsional  yang perlu diperbaharui atau bahkan diperbaiki. Berdasarkan test yang  dilakukan  pada  tanggal  28  Desember  2021,  calon pengguna memberikan umpan balik secara langsung berupa komentar  dan  masukkan  yang  perlu  diperbaiki  terhadap desain prototype seperti yang terlihat pada Tabel 3.  Calon pengguna  secara  langsung  menuturkan  bahwa  tampilan desain  pada website Laboratorium  Energy  menarik  dan mudah untuk digunakan. Berikut pada Tabel 3 merupakan hasil pengujian prototype yang telah disusun.
Tabel 3. Hasil Pengujian No. Tampilan Desain Hasil Pengujian 1 Landing Page Berikan lebih banyak typography pada landing  page ,  tidak  hanya  tulisan selamat datang 2 Halaman Rekap Laporan Penempatan button tambah  diberi sedikit  jarak  dari  tulisan  Rekap Laporan 3 Halaman Rekap Uji Banding Penempatan button tambah  diberi sedikit  jarak  dari  tulisan  Rekap  Uji Banding 4 Halaman Data Baterai Isian - Pemilihan  warna button pada kolom aksi sebaiknya diperhatikan Kembali - Beri  jarak  tiap button pada kolom aksi 5 Halaman Data Kalibrasi Tulisan  model  pada  alat  sebaiknya berwarna hitam
Setelah  mendapatkan  umpan  balik  dari  calon  pengguna bahwa  perancangan prototype yang  diujikan  masih memiliki  kekurangan  yang harus  diperbaiki.  Berikut  salah satu  tampilan  perancangan  desain prototype yang  telah diperbaiki.
Gambar 11. Perbaikan Prototype Halaman Data Kalibrasi Website Lab.

## Energy
Gambar  11  merupakan  salah  satu  tampilan  halaman  yang sudah  di  perbaiki.  Gambar  di  atas  merupakan  hasil  akhir desain  perancangan  berdasarkan  komentar  dan  masukkan yang diperoleh dari pengguna pada tahapan tes.

## 4. KESIMPULAN
Berdasarkan uraian dari makalah di atas terkait perancangan UI/UX  pada website Laboratorium  Energy  menggunakan aplikasi Figma, disimpulkan bahwa aplikasi Figma baik dan membantu  penulis  dalam  proses  mendesain  tampilan website Laboratorium Energy dengan User Interface yang
78 | Jurnal Teknologi Terpadu Vol. 8 No. 2 Desember 2022
menarik dan mudah digunakan. Fitur kolaborasi serta dapat bekerja  secara real  time ,  menjadi  keunggulan  Figma yang banyak digunakan oleh Desainer UI/UX dalam pembuatan prototype desain website dan bidang serupa lainnya.
Selain  itu,  perancangan  desain website menggunakan Design Thinking dapat digunakan untuk pembuatan desain UI/UX  yang  berfokus  kepada  kebutuhan  pengguna. Penerapan  metode  yang  dimulai  dari  tahapan Empathize, Define,  Ideate,  Prototype ,  dan Test pada  perancangan UI/UX website Laboratorium  Energy  dirasakan  sangat membantu  dalam  pembuatan  desain  dan  menghasilkan prototype yang  sesuai  dengan  harapan  pengguna.  Hasil desain prototype yang  dibuat  juga  telah  melawati  proses pengujian  langsung  oleh supervisor magang  yang  juga merupakan calon pengguna website Laboratorium Energy.
Penerapan  metode Design  Thinking dalam  perancangan UI/UX pada website Laboratorium Energy pada tahapan test hanya berupa test uji coba prototype kepada calon pengguna ( supervisor magang). Rencana selanjutnya untuk pengembangan  proses test dapat  menerapkan  metode Usability Testing untuk mengetahui apakah website tersebut memberikan  hasil  yang  memuaskan  atau  tidak,  yang kemudian  akan  dilakukan  evaluasi  dan  perbaikan  desain kembali pada UI/UX website Laboratorium Energy.

## DAFTAR PUSTAKA
[1] R.  S.  Naibaho,  “Peranan  Dan  Perencanaan Teknologi  Informasi  Dalam  Perusahaan,” Warta Dharmawangsa , no. 52, 2017.
[2] C. A. Cholik, “Perkembangan Teknologi Informasi Komunikasi / Ict Dalam Berbagai Bidang,” 2021.
[3] A. Nurlifa and S. Kusumadewi, Prosiding SNATIF Ke-1 Tahun 2014 Analisis Pengaruh User Interface Terhadap Kemudahan
Penggunaan Sistem Pendukung  Keputusan  Seorang  Dokter .  2014.
[Online]. Available: www.dxmate.com
[4] A.  K.  Nisah  and  H.  Ajie,  “Perancangan  berbasis User  Experience pada  Modul  Admin  Sistem Informasi  Akademik  Universitas  Negeri  Jakarta,” PINTER:  Jurnal  Pendidikan  Teknik  Informatika dan Komputer , vol. 5, no. 2, pp. 56–64, 2021.
[5] M. Agus Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan  UI/UX  Aplikasi  My  CIC  Layanan Informasi  Akademik  Mahasiswa  menggunakan Aplikasi  Figma,”  2020.  [Online].  Available: https://my.cic.ac.id/.
[6] S.  Suryaningsih,  Y.  A.  Riandika,  A.  N.  Hasanah, and  S.  Anggraito,  “Aplikasi  Wakaf  Indonesia Berbasis Blockchain,” Edumatic: Jurnal Pendidikan  Informatika ,  vol.  4,  no.  2,  pp.  20–29, 2020.
[7] W.  S.  L.  Nasution  and  P.  Nusa,  “UI/UX  Design Web-Based  Learning  Application  Using  Design Thinking Method,” ARRUS Journal of Engineering and Technology , vol. 1, no. 1, pp. 18–27, 2021.
[8] A. Avindra, C. Metta Cahyani, and L. R. Ningsih, “Rancangan UI/UX Aplikasi Analytics Pada Toko Online  Wao.Sneakers  Menggunakan  Aplikasi Figma,” 2021.
[9] J. Lie and R. Wijaya, “Pengembangan UI/UX pada Aplikasi  iDompet  dengan  Menggunakan  Metode Design  Thinking,”  in MDP  Student  Conference , 2022, vol. 1, no. 1, pp. 504–511.
[10] D.  M.  A.  Fitri,  M.  Sulistiya,  N.  Azizah,  R.  I. Setyorini,  and  H.  Herlina,  “Perancangan  Aplikasi MONEY  BOX  Dengan  Menggunakan  Figma,” Jurnal  Ilmiah  Teknologi  Informasi  dan  Robotika , vol. 3, no. 1, pp. 11–22, 2021.
[11] M.  A.  Idris,  G.  P.  Mahardhika,  and  B.  Suranto, “Perancangan UI/UX Aplikasi Perangkat Bergerak Ivent  Menggunakan  Pendekatan  HCD  (Human Centered  Design),” AUTOMATA ,  vol.  2,  no.  1, 2021.
[12] P.  F.  Hapsari,  T.  Sagirani,  and  J.  Lemantara, “Perancangan  Prototype  Layanan  Pada  Pusat Kesehatan  Masyarakat  Menggunakan  Metode Double Diamond,” Proceeding KONIK (Konferensi Nasional  Ilmu  Komputer) ,  vol.  5,  pp.  300–306, 2021.
[13] H.  Ilham,  B.  Wijayanto,  and  S.  P.  Rahayu, “Analysis  and  Design  of  User  Interface/User Experience  With  the  Design  Thinking  Method  in the  Academic  Information  System  of  Jenderal Soedirman University,” Jurnal  Teknik  Informatika (JUTIF) , vol. 2, no. 1, pp. 17–26, 2021.
[14] I.  A.  Juliansyah  and  I.  V. Paputungan, “Perancangan  Tampilan  User  Interface  Dan  User Experience  Pada  Website  Penjualan  Kerajinan Tangan  JavaHands  Dengan  Metode  Design Thinking,” AUTOMATA , vol. 3, no. 1, 2022.