## JASIKA (Jurnal Sistem Informasi Akuntansi)

## PERANCANGAN DESAIN UI/UX MENGGUNAKAN METODE DESIGN THINKING PADA WEBSITE PT. VIRAMA KARYA (PERSERO)

## Wisella Andiani, Asri Wahyui
Sistem Informasi, Universitas Nusa Mandiri 11220398.ac.id, asri.awx@nusamandiri.ac.id
Abstract: This research discusses the UI/UX design of the PT Website. Virama Karya involves processes from the Empathize, Define, Ideate, to Prototype stages. The Empathize process is carried out through data collection using questionnaires and observations to determine user problems and needs. The questionnaire results showed a number of user problems, such as an unattractive display and confusion for novice users. The Define stage involves breaking down the problems found in the Empathize stage into pain points, with a focus on UI and UX aspects. This process also involves the How Might We method to formulate questions as a basis for solutions. At the Ideate stage, research produces  a  sitemap  to  clarify  website  navigation.  Wireframes  created  for  the  Home  page,  Dashboard  Menu,  and Report  Page.  This  process  is  carried  out  with  the  aim  of  creating  innovative  solutions  that  suit  user  needs.  The Prototype  stage  involves  creating  a  High-Fidelity  interface  design,  following  a  style  guide  that  includes  visual components such as colors and fonts. The resulting appearance for the Home Page, Dashboard Menu, and Report Page integrates improvements based on user feedback, such as adding images to improve aesthetics and changes to menu icons. Thus, this thesis presents the steps for designing the UI/UX of the PT Website. Virama Karya, starting from problem identification to concrete solutions in the form of prototypes with designs that are more attractive and suit user needs.

## Keywords: Empathize, Define, Ideate, Prototype, dan UI/UX
Abstrak : Penelitian ini membahas perancangan UI/UX Website PT. Virama Karya yang melibatkan proses dari tahap Empathize, Define, Ideate, hingga Prototype. Proses Empathize dilakukan melalui pengumpulan data menggunakan kuesioner  dan  observasi  untuk  mengetahui  permasalahan  dan  kebutuhan  pengguna.  Hasil  kuesioner  menunjukkan sejumlah permasalahan pengguna, seperti tampilan yang kurang menarik dan kebingungan bagi pengguna pemula. Tahap  Define  melibatkan  penjabaran  permasalahan  yang  ditemukan  pada  tahap Empathize menjadi pain  points , dengan  fokus  pada  aspek  UI  dan  UX.  Proses  ini  juga  melibatkan  metode  How  Might  We  untuk  merumuskan pertanyaan  sebagai  dasar  solusi.  Pada  tahap  Ideate,  penelitian  menghasilkan  sitemap  untuk  memperjelas  navigasi website. Wireframe dibuat untuk halaman Beranda, Dashboard Menu, dan Halaman Laporan. Proses ini dilakukan dengan  tujuan  menciptakan  solusi  inovatif  dan  sesuai  dengan  kebutuhan  pengguna.  Tahap  prototipe  melibatkan pembuatan desain antarmuka yang bersifat High-Fidelity, dengan mengikuti style guide yang mencakup komponen visual seperti warna dan font. Tampilan yang dihasilkan untuk Halaman Beranda, Dashboard Menu, dan Halaman Laporan  mengintegrasikan  perbaikan  berdasarkan  feedback  pengguna,  seperti  penambahan  gambar  untuk meningkatkan  estetika  dan  perubahan  pada  icon  menu.  Dengan  demikian,  skripsi  ini  menyajikan  langkah-langkah perancangan  UI/UX  Website  PT.  Virama  Karya,  mulai  dari  identifikasi  masalah  hingga  solusi  konkret  berupa prototipe dengan desain yang lebih menarik dan sesuai kebutuhan pengguna.
Kata kunci: Empathize, Define, Ideate, Prototype, dan UI/UX

## 1. PENDAHULUAN
Sistem  manajemen  kinerja  berbasis  teknologi  membantu  perusahaan  dalam  memberikan  umpan  balik berkelanjutan,  menyusun  tujuan  karyawan,  dan  menyelenggarakan  penilaian  kinerja  secara  lebih  efisien.  Akses teknologi  kini  banyak  membantu  dalam  kinerja  karyawan.  Dengan  adanya  web  Perusahaan  dinilai  mampu memberikan  informasi  dan  profil  perusahaan.  Seperti  membuka  informasi  ke  public  mengenai  laporan  tahunan. Hampir  kebanyakan  sektor  usaha  kini  mempunyai  layanan  informasi  berbasis Web .  (Sinaga,  2022).  Hal  ini mengurangi beban pekerjaan administratif HR.
JASIKA (Jurnal Sistem Informasi Akuntansi) Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
( Company_Profile_VK_2023.Pdf ,  n.d.)  Berdasarkan  Permen  (PP)  No.  56/1961  perusahaan  ini  dinasionalisasi dan  beroperasi  dibawah  Binaan  Kementerian  Tenaga  Listrik  dan  Pekerjaan  Umum.  Selanjutnya  pada  tahun  1970, perusahaan ini diakui menjadi Persero dengan nama PT Virama Karya sesuai PP No. 38/1970, dengan pembinaan dari Departemen Pekerjaan Umum dan Departemen Keuangan. Lalu sejak tahun 1971 hingga sekarang PT. Virama Karya telah banyak melakukan pekerjaan yang dipercayakan baik untuk pekerjaan tata ruang, pemetaan, jalan dan jembatan maupun  pekerjaan  bendungan  dan  irigasi.juga  pada  PT.  Virama  Karya  (Persero)  dengan  website  perusahaan  yang sudah  ada  mampu  menampilkan  profil  serta  kegiatan  Perusahaan.  Namun  demikian  untuk  kegiatan  terutama  pada kolom  login  dan  laporan  Tahunan  masih  ditemukanya  informasi  yang  tidak up  to  date sehingga  menyebabkan kurangnya informasi yang ditampilkan.
Berdasarkan latar belakang yang telah dipaparkan diatas, maka rumusan pada penelitian ini adalah bagaimana membangun  design  website  yang  sesuai  dengan  design  UI/UX  dengan  basis Design  Thinking ,  sehingga  dapat memudahkan dan menunjang informasi serta nilai kinerja pengguna (karyawan) untuk melakukan interaksi dengan website tersebut (Perusahaan).

## 2. METODE PENELITIAN
Transformasi  antarmuka  pengguna  (UI)  melibatkan  proses  mengubah  kerangka  dasar  (wireframe)  menjadi antarmuka yang menarik secara visual dan intuitif.  Antarmuka pengguna merupakan tempat pengguna  berinteraksi dengan produk yang mereka gunakan. (Wang & Erandaru, 2022).
Design Thinking adalah suatu metode pendekatan design yang berfokus pada manusia untuk mengatasi masalah dan  menciptakan  inovasi  baru.  Metode  ini  terdiri  dari  beberapa  tahapan,  dimulai  dengan  pengumpulan  informasi tentang pengguna. Setelah memahami kebutuhan pengguna, tahap selanjutnya adalah membuat solusi kreatif untuk memenuhi kebutuhan tersebut. Kemudian, solusi yang dihasilkan direpresentasikan dan diuji agar dapat memperoleh umpan balik.
Terdapat proses-proses dalam Design Thinking diantaranya sebagai berikut:
1. Empathize
Merupakan  tahap  awal  yang  sangat  penting.  Design  thingking  adalah  suatu  pendekatan  terhadap  pemecahan masalah  yang  fokus  pada  kebutuhan  pengguna  akhir.  Tahap  inibertujuan  untuk  memahami  pengguna  secara mendalam, melibatkan diri secara aktif dengan mereka, dan meresapi pengalaman mereka untuk mendapatkan wawasan yang lebih baik.
2. Define
Merupakan tahap awal yang sangat penting. Desain berpikir adalah suatu pendekatan kreatif terhadap pemecahan masalah  yang  fokus  pada  kebutuhan  pengguna  akhir. Tahap  ini  bertujuan  untuk  memahami  pengguna  secara mendalam, melibatkan diri secara aktif dengan mereka, dan meresapi pengalaman mereka untuk mendapatkan wawasan yang lebih baik.
3. Ideate
Tahapan  "Ideate"  dalam  proses  Design  Thinking  adalah  langkah  yang  di  dalamnya  tim  desain  menghasilkan sebanyak mungkin ide atau gagasan kreatif yang dapat dijadikan solusi untuk permasalahan atau tantangan yang telah didefinisikan sebelumnya.
4. Prototype
Pada tahap ini, tim desain menciptakan model atau prototipe fisik atau digital dari ide-ide yang telah dihasilkan sebelumnya.  Tujuannya  adalah  untuk  menguji  dan  mendapatkan  umpan  balik  lebih  konkret  mengenai  solusi yang diusulkan.
5. Test
Tahap ini bertujuan untuk mengumpulkan umpan balik dari pengguna atau pemangku kepentingan, memvalidasi solusi, dan memastikan bahwa hasilnya dapat memberikan nilai yang diinginkan.
(Ariani et al., 2022) Penelitian selanjutnya dilakukan oleh Dea Salsa Bila dan Dwi Rosa Indah yang berjudul “Perancangan Ulang UI-UX Desain Website BKKBN Provinsi Sumatera Selatan dengan Metode Design Thinking” pada tahun 2023.
(Ardiansyah  &  Rosyani,  2023)  Adapun  penelitian  yang  dilakukan  oleh  Kiki  Haerani,  Maulana  Ashari, Mohammad  Taufan  Asri  Zaen,  dengan  judul  “Desain  UI/UX  pada  Website  DISPERKIM  Lombok  Tengah Menggunakan Metode Design Thinking” pada tahun 2023. Hasil Prototipe sudah melewati proses pengujian kepada

## JASIKA (Jurnal Sistem Informasi Akuntansi)
pengguna dengan hasil yang baik. Sehingga rancangan yang diusulkan telah memenuhi kebutuhan pengguna dan dapat terus diimplementasikan.
Adapun penelitian yang dilakukan oleh Kiki Haerani, Maulana Ashari, Mohammad Taufan Asri Zaen, dengan judul “Design UI/UX pada Website DISPERKIM Lombok Tengah Menggunakan Metode Design Thinking” pada tahun  2023.  Hasil  Prototipe  sudah  melewati  proses  pengujian kepada  pengguna  dengan  hasil  yang  baik.  Sehingga rancangan yang diusulkan telah memenuhi kebutuhan pengguna dan dapat terus diimplementasikan.
Kemudian  penelitian  yang  dilakukan  oleh  Adhe  Ronny  Julians,  Eko  Sediyono,  Hendry  yang  berjudul “Perancangan UI/UX Aplikasi Forum Diskusi Informatika Berbasis Web Menggunakan Metode Design Thinking” (Julians,  Soediyono  and  Hendry  2023).  Hasil  penelitian  mendapatkan  rata-rata  nilai  akhir  Perancangan  UI/UX Aplikasi Forum Diskusi Informatika Menggunakan Metode Design Thinking yaitu 83 sehingga pengujian prototype ini diperoleh baik.

## JASIKA (Jurnal Sistem Informasi Akuntansi)
Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973

## 3. HASIL DAN PEMBAHASAN
Pada proses perancangan design UI/UX Website PT. Virama Karya ini dapat diharapkan lebih dikembangkan kembali dari sisi fitur serta tampilan agar lebih menarik. Hasil dari sebuah penelitian ini peneliti menghasilkan sebuah rancangan prototype yang dikembangkan melalui pendekatan dengan design thinking.
Kuesioner ini digunakan untuk mengidentifikasi permasalahan yang dirasakan pengguna dari segi pengalaman menggunakan  Website  PT.  Virama  Karya.  Penulis  membuat  tiga  bagian  pada  kuesioner  ini  yaitu  Bagian  identitas responden, Bagian pernyataan dan Bagian pertanyaan terbuka.

## 1. Pernyataan Umum
a. Web PT. Virama Karya mudah saya gunakan
Gambar 4.1 Grafik Jawaban Pernyataan 1
Sumber : Kuesioner Google Form
b. Menu - Menu yang terdapat pada Web PT. Virama Karya mudah saya pahami
Gambar 4.2 Grafik Jawaban Pernyataan 2
Sumber : Kuesioner Google Form
c. Navigasi setiap menu Web PT. Virama Karya mudah dimengerti Gambar 4.3 Grafik Jawaban Pernyataan 3
Sumber : Kuesioner Google Form
JASIKA (Jurnal Sistem Informasi Akuntansi) Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
d. Setiap bagian atau konten dari Web PT. Virama Karya jelas dan tidak membingungkan pada saat digunakan Gambar 4.4 Grafik Jawaban Pernyataan 4
Sumber : Kuesioner Google Form
e. Web PT. Virama Karya sudah memenuhi kebutuhan informasi saya dalam bekerja
Gambar 4.5 Grafik Jawaban Pernyataan 5

## Sumber : Kuesioner Google Form
2. Pernyataan Halaman Home / Beranda Web
a. Tampilan informasi pada Web PT. Virama Karya sudah terperinci dan terspesifikasi sesuai kebutuhan
Gambar 4.6 Grafik Jawaban Pernyataan 6
Sumber : Kuesioner Google Form
b. Tampilan warna pada halaman Web PT. Virama Karya menarik
Gambar 4.7 Grafik Jawaban Pernyataan 7
JASIKA (Jurnal Sistem Informasi Akuntansi) Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
c. Tata letak menu dan icon pada tampilan halaman Home jelas
Gambar 4.8 Grafik Jawaban Pernyataan 8
Sumber : Kuesioner Google Form
d. Tampilan keseluruhan isi pada halaman Home/Beranda tidak monoton
Gambar 4.9 Grafik Jawaban Pernyataan 9
Sumber : Kuesioner Google Form
e. Jenis font dan ukuran font yang digunakan pada halaman Home jelas terbaca
Gambar 4.10 Grafik Jawaban Pernyataan 10

## Sumber : Kuesioner Google Form
3. Pernyataan Dashboard Menu
a. Tampilan pada Dashboard Menu sudah terperinci dan terspesifikasi sesuai kebutuhan
Gambar 4.11 Grafik Jawaban Pernyataan 11

## JASIKA (Jurnal Sistem Informasi Akuntansi)
Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
b. Setiap menu atau icon di Dashboard Menu terlihat jelas dan menarik
Gambar 4.12 Grafik Jawaban Pernyataan 12
Sumber : Kuesioner Google Form
c. Menu Report pada Dashboard Menu mudah ditemukan
Gambar 4.13 Grafik Jawaban Pernyataan 13
Sumber : Kuesioner Google Form
d. Tampilan warna pada Dashboard Menu sudah sesuai dan menarik
Gambar 4.14 Grafik Jawaban Pernyataan 14
Sumber : Kuesioner Google Form
e. Tampilan keseluruhan isi pada Dashboard Menu tidak monoton
Gambar 4.15 Grafik Jawaban Pernyataan 15
Sumber : Kuesioner Google Form
JASIKA (Jurnal Sistem Informasi Akuntansi) Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
f. Jenis font dan ukuran font yang digunakan pada Dashboard Menu jelas terbaca
Gambar 4.16 Grafik Jawaban Pernyataan 16
Sumber : Kuesioner Google Form
4. Pernyataan Halaman Report
a. Tampilan halaman Report sudah terperinci dan terspesifikasi sesuai kebutuhan
Gambar 4.17 Grafik Jawaban Pernyataan 17
Sumber : Kuesioner Google Form
b. Icon Menu pada halaman Report sudah menarik
Gambar 4.18 Grafik Jawaban Pernyataan 18
Sumber : Kuesioner Google Form
c. Tampilan warna pada halaman Report sudah sesuai dan menarik
Gambar 4.19 Grafik Jawaban Pernyataan 19

## JASIKA (Jurnal Sistem Informasi Akuntansi)
Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
d. Fitur yang ditampilkan pada halaman Report sudah lengkap dan jelas
Gambar 4.20 Grafik Jawaban Pernyataan 20
Sumber : Kuesioner Google Form
e. Jenis font dan ukuran font yang digunakan pada halaman Report jelas terbaca
Gambar 4.21 Grafik Jawaban Pernyataan 21

## Sumber : Kuesioner Google Form
Wireframe dapat dibuat setelah proses emphatize hingga define. Dari hasil emphaty map penulis menyimpulkan bahwa pengguna sudah puas menggunakan Website Virama Karya namun ada catatan pada tampilan, fitur dan warna yang  kurang  menarik.  Maka  rancangan  harus  dibuat  lebih  menarik  sehingga  pengguna  nyaman  menggunakanya. Wireframe ini akan menjadi dasar pembuatan perancangan Website Virama Karya .
Sebelum memulai pembuatan design, peneliti membuat komponen visual design aplikasi yaitu style guide . Style guide adalah suatu pustaka pola yang digunakan sebagai acuan antarmuka dan visualisasi elemen mulai dari color, typography, menu, button, iconography dari sistem yang digunakan.

## 4. Kesimpulan
Berdasarkan  penelitian  yang  telah  dilakukan  dan  telah  menyelesaikan  setiap  tahapan  pada Design  Thiking, didapat  hasil  berupa prototype rancangan design  baru  UI/UX  pada Website Virama  Karya . Terdapat  perubahan  –  perubahan  dasar  seperti font, warna  dan  tata  letak. Perancangan  dan  analisis User  Interface (Antarmuka)  dan User  Experience (Pengalaman Pengguna) dapat menggunakan metode Design Thinking mampu menghasilkan design prototype Website Virama Karya yang sesuai dengan kebutuhan pengguna.
Website  PT.  Virama  Karya  saat  ini  telah  menyediakan  fitur-fitur  seperti Login  User , penginputan Annual Report , dan melihat hasil perkembangan proyek. Selain itu, memungkinkan seluruh  transaksi  manual  dilakukan  secara  online,  mempermudah  proses  bisnis.  Design  UI/UX perlu pengembangan lebih lanjut dari segi fitur dan tampilan agar lebih menarik.
JASIKA (Jurnal Sistem Informasi Akuntansi) Vol. 04, No. 01, Mei 2024, pp. 1-10 E-ISSN: 2776 - 7973
Proses  Design  Thinking  pada  tahap Empathiz e  dilakukan  melalui  riset  pengguna menggunakan  kuesioner  untuk  mengidentifikasi  permasalahan  dan  kebutuhan  pengguna.  Hasil kuisioner  menunjukkan  sebagian  besar  responden  setuju  terhadap  penggunaan  dan  pemahaman fitur-fitur  Website  PT.  Virama  Karya. Empathy  Map digunakan  untuk  memahami  pengalaman, emosi, dan situasi pengguna.
Pada akhir penelitian, peneliti menyimpulkan bahwa dari perhitungan hasil akhir rata – rata nilai yaitu 76 (Good) yang menunjukan bahwa rancangan prototype dapat memenuhi kebutuhan acceptable sehingga dapat dinyatakan bahwa dapat diterima oleh pengguna.

## 5. Saran
Saran bedasarkan Prototype sebagai berikut : Wireframe dan design prototipe berdasarkan hasil permasalahan yang diidentifikasi, Penggunaan style guide untuk memandu elemen design seperti warna, font, dan komponen visual lainnya, Design antarmuka mencakup Halaman Beranda, Dashboard Menu, dan Halaman Report, Perubahan pada design mencakup penambahan gambar, perubahan icon, dan penyesuaian tata letak untuk meningkatkan estetika dan fungsionalitas.
Dengan demikian, penelitian ini memberikan rekomendasi untuk meningkatkan design dan fungsionalitas Website PT. Virama Karya agar lebih responsif terhadap kebutuhan pengguna dan lebih  menarik  secara  visual.  Implementasi  perubahan  yang  diusulkan  dapat  membawa  dampak positif pada pengalaman pengguna dan efisiensi dalam proses bisnis.

## UCAPAN TERIMA KASIH (10 pt)
Saya mengucapkan terimakasih pada seluruh pendukung terwujudnya dan selesainya penelitian ini.

## REFERENSI
Ardiansyah, M. F., & Rosyani, P. (2023). Perancangan UI/UX Aplikasi Pengolahan Limbah Anorganik Menggunakan Metode Design Thinking. LOGIC: Jurnal Ilmu Komputer … , 1 (4), 839–853. https://journal.mediapublikasi.id/index.php/logic/article/view/2193
Ariani, F., Taufik, A., & Arsanti, A. (2022). Application Of Design Thinking Method For Ui And Ux Design In Ngajiyuk Application. Journal of Information System, Informatics and Computing , 6 (2), 425–440. https://doi.org/10.52362/jisicom.v6i2.940
Company_Profile_VK_2023.pdf . (n.d.).
Sinaga, K. (2022). Implementasi Teknologi Untuk Pengembangan Sumber Daya Manusia pada Korporasi. Jurnal Ilmiah Universitas Batanghari Jambi , 22 (1), 42. https://doi.org/10.33087/jiubj.v22i1.2007
Wang, M. B. A., & Erandaru, E. (2022). Studi Perbandingan Teori Dan Praktek Perancangan Ui/Ux Saat Internship Di Atdawn. Jurnal DKV Adiwarna , 1 (121), 9.