e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com

## IMPROVING USER EXPERIENCE THROUGH GREENPEACE WEBSITE UI/UX REDESIGN WITH THINKING DESIGN METHOD
Meningkatkan Pengalaman Pengguna Melalui Perancangan Ulang UI/UX Website Greenpeace Dengan Metode Design Thinking
Mohamad Saefudin 1 , Sudjiran 2 ,
Meilyana Anisa Mawarti 3
Program Studi Sistem Informasi 1 , Program Studi Manajemen Informatika 2 , Program STudi Sistem Informasi 3 STMIK Jakarta STI&K 1,2,3 ,  Jakarta saefudin@gmail.com 1 , ontosenosudjiran@gmail.com 2 , meliyana@gmail.com 3
Received: November 11 . Revised: November  25, 2023 . Accepted: December 4, 2023 Issue Period: Vol.7 No.2 (2023), Pages 419-435
Abstrak: Greenpeace,  sebuah  organisasi  yang  berdedikasi  untuk  mengatasi permasalahan  lingkungan,  khususnya  Krisis  Iklim,  mendesak  pemerintah  dan perusahaan  untuk  mengambil  tanggung  jawab  atas  pembukaan  lahan  secara  luas untuk tujuan bisnis tanpa menerapkan tindakan pencegahan. Kurangnya tindakan ini berpotensi  menimbulkan  dampak  negatif  bagi  Indonesia,  khususnya  di  sektor perekonomian. Meskipun permasalahan  yang timbul akibat Krisis Iklim  masih terus berlangsung,  inisiatif  pemerintah  dan  dukungan  masyarakat  masih  kurang.  Untuk mengatasi  hal  ini,  Greenpeace  menggunakan  situs  webnya  sebagai  platform informasi,  yang  memberikan  rincian  tentang  wilayah  yang  terkena  dampak  dan tindakan  yang  diperlukan  untuk  memperbaiki  kondisi  Bumi.  Dalam  upaya meningkatkan  pengalaman  pengguna  dalam  menavigasi  aktivitas  Greenpeace, penulis  dan  tim  melakukan  desain  ulang  situs  web  dengan  menggunakan  metode Design Thinking. Design Thinking, sebuah proses pemecahan masalah yang berpusat pada minat dan inovasi pengguna, melibatkan tahapan seperti empati, pendefinisian, pembuatan  ide,  pembuatan  prototipe,  dan  pengujian.  Penulis  memetakan  masalah selama tahap empati berdasarkan pengalaman pengguna, mendefinisikan masalah inti pengguna pada tahap penentuan, menyatakan solusi pada tahap ide, mengimplementasikan  desain  web  pada  tahap  prototipe,  dan,  pada  tahap  pengujian, menilai  keberhasilan  sistem.  desain  dalam  menyelesaikan  masalah  dan  memenuhi kebutuhan  pengguna.  Hasil  penelitian  disajikan  dalam  bentuk  prototype  dengan desain  UI/UX,  dikembangkan  dengan  menyelaraskan  kebutuhan  pengguna  melalui metode  Design  Thinking  untuk  memberikan  solusi  tantangan  pengguna  saat berinteraksi dengan website Greenpeace.
Kata kunci: UI/UX; Website; Antarmuka; Greenpeace
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Abstract: Greenpeace,  an  organization  dedicated  to  addressing  environmental concerns,  particularly  the  Climate  Crisis,  urges  both  the  government  and corporations to take responsibility for extensive land clearing for business purposes without  implementing  preventive  measures.  This  lack  of  action  poses  potential negative  consequences  for  Indonesia,  especially  in  the  economic  sector.  Despite ongoing issues arising from the Climate Crisis, there is still a dearth of government initiatives and community support. To address this, Greenpeace employs its website as an informational platform, providing details about areas impacted and the actions it  takes  to  improve  the  Earth.  In  an  effort  to  enhance  the  user  experience  in navigating Greenpeace's activities, the author and their team undertook a redesign of the website using Design Thinking as a method. Design Thinking, a problem-solving process  centered  on  user  interests  and  innovation,  involves  stages  such  as empathizing,  defining,  ideating,  prototyping,  and  testing.  The  author  mapped  out problems  during  the  empathize  stage  based  on  user  experiences,  defined  core  user issues in the define  stage, expressed  solutions in the ideate stage, implemented web design  in  the  prototype  stage,  and,  in  the  testing  stage,  assessed  the  success  of  the design  in  resolving  problems  and  meeting  user  needs.  The  research  outcomes  are presented in the form of a prototype with a UI/UX design, developed by aligning with user  needs  through  the  Design  Thinking  method  to  provide  a  solution  for  user challenges when interacting with the Greenpeace website.
Keywords: UI/UX; Website; Interface; Greenpeace

## I. PENDAHULUAN
Indonesia  menjadi  salah  satu  negara  yang  menjadi  perhatian  untuk  melakukan  perubahan,  kenapa  hal tersebut dilakukan. Banyaknya musibah terjadi akibat kerusakan alam salah satu dampak paling terlihat adalah Krisis  Iklim,  perubahan  cuaca  secara  ekstrim  tak  menentu  dan  buruknya  kualitas  udara  serta  kualitas  air terutama daerah area pemukiman warga yang dekat dengan kawasan industri. Krisis Iklim apabila tidak tangani dengan  cepat  dan  tepat  maka  bumi  akan  menjadi  buruk  yang  berdampak  pada  ekosistem  kehidupan  bahkan ketidaklayakan  tempat  tinggal.  Kurangnya  edukasi  dan  penggerak  terhadap  lingkungan  serta  solusi  dari pemerintah menjadikan Krisis Iklim semakin memburuk.
Krisis  Iklim  menyadarkan  aktivis  pecinta  lingkungan  dari  Indonesia  untuk  memperluas  Visi  Misi  dari Greenpeace. Suatu lembaga internasional dibentuk pada tahun 1971 oleh Bill Darenell, seorang pekerja sosial, bersama  dengan  rekan-rekannya  di  Vancouver,  Kanada.  Sejak  berdirinya,  Greenpeace  selalu  berupaya  untuk memotivasi masyarakat agar lebih memperhatikan lingkungan, meningkatkan kesadaran akan perlindungan dan pelestarian alam, serta melakukan tindakan bersama dengan masyarakat yang berhasil mereka galang.
Greenpeace melakukan perluasan tujuannya dengan membentuk sebuah Website. Pengaksesan historical sampai  day  to  day  kegiatan  sehari  Greenpeace  seberapa  banyak  perubahan  dilakukan  untuk  mencapai  bumi menjadi  lebih  baik.  Pembentukan  website  Greenpeace  menggunakan  smartphone,  tablet,  pc  sebagai  media interaksi  dan  internet  sebagai  penghubung.  Pembentukan  perancangan  tampilan  (user  interface)  dibutuhkan untuk  meningkatkan  pengalaman  pengguna  (user  experience).  Kemudahan  penggunaan  sebuah  website meningkatkan peluang tercapainya inti kegiatan secara online.
Sebagai salah satu upaya meningkatkan kenyamanan pengguna dalam memakai website Greenpeace dan memperluas keanggotaan dalam menjaga, melindungi, dan melestarikan lingkungan hidup tersebut menyebar ke negara-negara lain. Penulis melakukan perancangan ulang terhadap platform website Greenpeace. Perancangan ulang  dilakukan  dengan  menggunakan  metode  Design  Thinking,  pendekatan  dilakukan  yang  berpusat  pada pengguna bertujuan  menemukan  masalah,  menyelesaikan  masalah dan  menghadirkan sebuah inovasi baru dari permasalahan  yang  terjadi.  Penemuan  solusi  dibentuk  dalam  Prototype  hasil  design  yang  dapat  berinteraksi
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
dengan  menyesuaikan  kaidah  user  interface  (UI)  demi  menghasilkan  kenyamanan  pengguna  user  experience (UX) sebagai solusi dari permasalahan.
User Interface adalah input dan output yang langsung melibatkan system pengguna akhir. User Interface dan User Experience merupakan sebuah komponen yang saling berkaitan, kemudahan seorang pengguna dalam berinteraksi berdasarkan hasil design user interface dengan mengkomunikasikan fitur-fitur system yang tersedia agar  pengguna  mudah  memahami  [1].  Penggunakan  Design  Thinking  akan  menentukan  hasil  dari  sebuah perancangan  user  interface  dan  user  experience.  Metode  Design  Thinking  memiliki  beberapa  tahapan  yaitu Empathize,  Define,  Ideate,  Prototype,  dan  Test.  Design  Thinking  mampu  memberikan  memberikan  solusi terhadap permasalahan pengguna dalam menggunakan website Greenpeace.

## II. METODE DAN MATERI

## 2.1. Metode Penelitian
Metode Penelitian yang digunakan dalam rangka mengumpulkan data untuk menyelesaikan penulisan ini adalah Studi Pustaka, Melakukan pencarian sumber-sumber data dukungan, landasan teori yang mendukung data informasi sebagai acuan dalam melakukan perencanaan, percobaan, pembuatan, dan penyusunan laporan.

## 2.2. Website
Website menjadi sebuah karakteristik untuk mendiskripsikan suatu ciri khas dari sebuah perusahaan atau organisasi.  Pembentukan  Website  dapat  meningkatkan  kepercayaan  diri  bagi  perusahaan  untuk  konsumennya, membentuk  Website  dapat  mengenalkan  product  secara  digital  kepada  seluruh  konsumen.  Teknologi  yang berkembang  dengan  sangat  cepat  serta  hampir  seluruh  lapisan  masyarakat  telah  merasakan  manfaat  teknologi menjadikan  Website  sebagai  sarana  yang  tepat  dijadikan  untuk  wadah  promosi  dan  informasi.  Seperti  pada Website  ini  sangat  berperan  menyampaikan  informasi  mengenai  dampak  Krisis  Iklim  dari  kerusakan lingkungan. Sejak awal tahun 1990, world wide web atau situs web telah mengubah cara kehidupan pribadi dan profesional  kita.  Web  menjadi  suatu  domain  yang  terus  berkembang  dan  berfungsi  sebagai  perpustakaan informasi yang dapat diakses dari berbagai tempat melalui mesin pencari dan portal. Web juga menjadi tempat penyimpanan media yang memudahkan hosting dan berbagi sumber daya, seringkali tanpa biaya, serta berfungsi sebagai  pendukung  layanan  do-it-yourself.  Selain  itu,  web  telah  menjadi  platform  utama  bagi  usaha  dan perusahaan untuk menjalankan kegiatan bisnisnya. [2].

## 2.3. Antarmuka (User Interface)
Sebuah  hasil  yang  memprioritaskan aspek  visual.  Antarmuka pengguna  menyediakan sarana bagi input, memungkinkan  pengguna  untuk  mengontrol  sistem,  dan  output,  memungkinkan  sistem  memberikan  informasi kepada  pengguna  melalui  umpan  balik.  User  Interface  juga  dapat  diartikan  sebagai  representasi  visual  dari mesin  atau  komputer  yang  berinteraksi  langsung  dengan  pengguna.  User  Interface  menekankan  pada  aspek warna dan bentuk, serta menyediakan alat-alat yang sesuai untuk membantu pengguna mencapai tujuan mereka. User  Interface  yang  efektif  mampu  menjaga  keseimbangan  yang  sempurna  antara  daya  tarik  estetika  dan interaktivitas tanpa memerlukan usaha berlebihan, sehingga menciptakan pengalaman yang membuat pengguna ingin berinteraksi lebih lama [3].

## 2.4. User Experience
Pengalaman Pengguna (User Experience) dengan syarat pertama untuk pengalaman pengguna yang patut dicontoh  adalah  memastikan  pemenuhan  kebutuhan  pelanggan  dengan  tepat  dan  tanpa  kesulitan  yang  tidak perlu.  User  Experience  berperan  sebagai  penghubung  antara  tujuan  bisnis  dan  harapan  yang  diinginkan  oleh pengguna,  menciptakan  keseimbangan  yang  harmonis  antara  keefektifan  operasional  dan  kepuasan  pengguna. Fitur  yang  disediakan  banyak  dari  sebuah  system  apabila  user  tidak  menemukan  atau  menyeselesaikan  setiap fitur  maka  dapat  disimpulkan  bahwa  User  Experience  masih  dalam  tingkat  rendah.  Memberikan  User Experience yang baik dibutuhkan pengukuran terkait berbagai macam aspek dari system dengan tujuan mencari
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
solusi  berdasarkan  kebutuhan  pengguna.  Aspek  yang  dibutuhkan  dalam  membangun  User  Experience bagaimana pengalaman seorang pengguna dalam menggunakan sebuah produk yaitu [4]:
 Seberapa mudah cara kerjanya untuk dipahami
 Bagaimana perasaan pengguna ketika menggunakan produk
 Bagaimana pengguna mencapai tujuannya melalui produk.

## 2.5. Design Thinking
Pada penelitian ini menggunakan metode Design Thinking merupakan pendekatan secara sudut pandang pengguna suatu proses diawali dengan proses empati bertujuan memecahkan masalah dan menciptakan sebuah inovasi  baru.  Metode  ini  melibatkan  integrasi  elemen-elemen  beragam  untuk  mengubah  suatu  ide  menjadi produk  yang  berkualitas  dan  memberikan  solusi  yang  efektif  untuk  mengatasi  masalah  yang  adaMetode  ini melibatkan integrasi elemen-elemen beragam  untuk  mengubah suatu ide  menjadi produk  yang berkualitas dan memberikan solusi yang efektif untuk mengatasi masalah yang ada. Proses Design Thinking terdiri lima tahapan yaitu:
a. Empathize  merupakan  suatu  proses  menggali  masalah,  mengetahui  apa  yang  dibutuhkan,  dan  memahami siapa saja yang menjadi target.
b. Define merupakan tahapan mendefinisikan permasalahan pengguna yang didapatkan pada tahap empathize agar ditemukan permasalahan inti.
c. Ideate adalah tahapan penuangan ide untuk sebuah solusi permasalahan kebutuhan pengguna berdasarkan hasil tahap define.
d. Prototype,  adalah  rancangan  purwarupa  sebuah  design  yang  direalisasikan  pada  system  atau  aplikasi. Prototype dibentuk menyesuaikan UI style guidelines membantu penulis proses perancangan.
e. Test,  pengujian  prototype  dengan  pengguna  nyata  untuk  mendapatkan  umpan  balik  dan  mengetahui kekurangan dan kelebihan dari prototype.

## Gambar 1. Diagram Desain Thinking
2.6. PRD (Product Recruitment Document)
Berdasarkan Silicon Valley Product Group, Product Requirements Document (PRD)  memiliki beberapa fungsi  kunci.  Pertama,  PRD  digunakan  untuk  menjelaskan  tujuan  dari  suatu  produk.  Selain  itu,  PRD  juga berfungsi  sebagai  alat  komunikasi  yang  penting  untuk  para  stakeholder,  menyajikan  rincian  fitur  dari  segi fungsional  dan  perilaku.  Dokumen  ini  membantu  pengembang  dalam  memahami  pengalaman  yang  harus diciptakan.  Selain  itu,  PRD  berperan  sebagai  sumber  yang  menghubungkan  semua  divisi,  termasuk  engineer, desain, dukungan, penjualan, pemasaran, dan tim lainnya.
2.7. Usability Testing
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Usability  sebagai  atribut  kualitas  suatu  produk  seberapa  mudah  untuk  digunakan.  Terdapat  lima komponen  usability  yaitu,  learnability,  efficiency,  memorability,  errors,  dan  satisfaction.  Komponen  tersebut lebih  mudah  diukur  dibandingkan  keramahan  pengguna  [5].  Usability  terdiri  dari  efektivitas,  efisiensi,  dan kepuasan  pengguna.  Efisiensi  dan  efektivitas  sangat  berkaitan  satu  sama  lain  karena  seberapa  baik  pengguna menyelesaikan suatu task selaras pada sumber daya yang dikeluarkan seperti waktu, tenaga dan biaya. Usability dilakukan  agar  mendapatkan  feedback  dari  responden.  dan  perubahan  tersebut  menjadi  sebuah  iterate  design berdasarkan saran perbaikan yang telah didapat [6].

## 2.8. User Flow
Merupakan  sebuah  alur  yang  dilalui  seorang  pengguna.  Bagaimana  pengguna  menyelesaikan  tujuannya didalam  website.  Dibentuk  berdasarkan  apa  yang  sering  dilakukan  user,  Langkah-langkah  agar  user  nyaman menjalankan  suatu  task.  Perancangan  User  Flow  memudahkan  pengguna  memahami  menggunakan  produk dengan baik. Contoh sederhana dari user flow adalah bagaimana pengguna mencari rekomendasi tempat makan pada sebuah aplikasi. Langkah 1 User membuka aplikasi, Langkah 2 user memasukkan kata kunci atau kriteria, Langkah  3  User  melihat  hasil  pencarian,  Langkah  4  User  melihat  detail  tempat  makan,  Langkah  5  user menyimpan rekomendasi tempat makan, Scenario ini dibuat gambaran user flow sebagai berikut.

## Gambar 2. Diagram User Flow

## 2.9. Wireframe
Wireframe  merupakan  representasi  awal  desain  yang  digunakan  untuk  menyusun  atau  menata  elemen- elemen situs web. Proses wireframing dilakukan dengan tujuan untuk menentukan dengan detail mengenai fitur, konten,  antarmuka,  dan  elemen-elemen  penting  lainnya.  Penggunaan  wireframe  memudahkan  perancangan dengan  lebih  terarah  dan  memberikan  kemudahan  dalam  melakukan  revisi  atau  perbaikan.  Terdapat  dua  jenis wireframe,  yaitu  low-fidelity  wireframe  dan  high-fidelity  wireframe,  yang  keduanya  menjadi  dasar  dalam pembuatan rancangan desain prototipe.
a. Low Fidelity Wireframe, sebuah gambaran rancangan sederhana komponen apa saja yang ingin ditampilkan dibentuk tanpa adanya warna, ukuran teks dan elemen lainnya, tampilan yang diberikan masih hitam putih. Seperti pada contoh gambar 3.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 3. Diagram Low Fidelity Wireframe
b. High Fidelity Wireframe, gambaran rancangan yang sudah mendekati produk aslinya.  sehingga hasil final yang diberikan sudah memiliki warna, jarak dan bentuk elemennya dibuat sesuai dengan presisi dan akurasi yang detail. Seperti pada contoh gambar 4.

## Gambar 4. Diagram High Fidelity Wireframe
2.10. Style Guideline
Style Guideline  merupakan panduan  yang  merinci gaya setiap elemen pada sebuah situs  web. Pembuatan style guideline bertujuan untuk menjaga konsistensi dari setiap elemen di dalam website. Beberapa elemen yang diatur dalam style guideline meliputi Palet Warna, Jenis Huruf, Tombol, Simbol dan Ikon, Alert atau Informasi, Margin atau Padding, dan Visualisasi Elemen. Meskipun style guideline umumnya fokus pada identitas merek seperti warna, tipografi, merek dagang, logo, dan media cetak, panduan gaya juga memberikan petunjuk terkait konten, desain visual, dan interaksi (Fessenden, 2021).
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 5. Diagram Style guideline 2.11. Crazy 8 Pengeluaran ide gila sebanyak 8  menit dalam pengembangan product digital dalam  website. Cracy 8 berorientasi pada kuantitas bukan kepada kualitas, tujuan penggunaan Crazy 8 diharapkan terbentuk banyak ide yang dapat diaplikasikan. Hasil ide Crazy 8 beberapa tidak dapat digunakan, dan beberapa dapat di duplikasikan menjadi  sesuatu  halaman  yang  jauh  lebih  baik.  Pembuatan  Crazy  8  pun  sangat  mudah  diperlukan  hanya selembar  kertas  A4  dilipat  menjadi  8  bagian,  pulpen  dan  timer.  Setiap  kotak  dikerjakan  dalam  satu  menit, apabila timer berbunyi maka lanjut ke kotak selanjutnya sampai seluruh kotak terisi dengan ide.
Gambar 6. Desain Crazy 8
2.12. Prototype
Menurut  Kamus  Besar  Bahasa  Indonesia,  Prototype  yaitu  model  menjadi  contoh.  Prototype  dibentuk dengan  dasar  Low-Fidelity  Wireframe  dan  High  Fidelity  Wireframe.  Prototype  diujikan  untuk  mendapatkan respond  dari  user  dari  model  yang  dibentuk.  Apabila  sudah  sesuai  dengan  user  dan  mudah  memahaminya, prototype tersebut akan di development oleh programmer website
2.13. Figma
Figma  merupakan  salah  satu  alat  desain  berbasis  cloud  yang  gratis  dan  dapat  diakses  melalui  Browser (Web Based) atau aplikasi desktop di OS Windows dan MAC OS. Alat ini mirip dengan Sketch atau Adobe XD dalam  hal  fungsionalitas  dan  fitur,  tetapi  Figma  menonjol  karena  memiliki  fitur  kolaborasi  tim  yang membedakannya  secara  signifikan.  Sebagai  aplikasi  desain  UI/UX,  Figma  menyediakan  semua  alat  yang
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
diperlukan  untuk  berbagai  tahap  proyek  desain,  termasuk  alat  vektor,  ilustrasi,  serta  prototyping  untuk memfasilitasi proses hand-off [7].

## III. PEMBAHASA DAN HASIL

## 3.1. Proyek Pengembangan
Memanfaatkan sebuah Website untuk meluaskan visi misi organisasi, Greenpeace memperluas jangkauan koneksi  antar  aktivis  pencinta  lingkungan  untuk  dapat  bergabung  dan  menyelaraskan  tujuan  organisasi  demi bumi kembali damai. Perubahan dilakukan melakukan perancangan ulang Website Greenpeace bertujuan untuk meningkatkan  pengalaman  baik  pengguna  dalam  menggunakan  Website.  Design  Thinking  dipilih  sebagai metode  pengembangan  dikarenakan  berorientasi  berpusat  kepada  pengguna,  dalam  penemuan  masalah  dan solusi untuk Website. Scope perancangan ulang UI/UX sebatas tampilan, fungsionalitas dan target audience.
Pengembangan  website  pertama  dilakukan  dengan  melakukan  riset  terhadap  kompetitor  untuk mendapatkan pemahaman atas permasalahan yang dialami pengguna serta mengetahui target dan produk milik kompetitor.  Temuan  dari  hasil  riset  akan  membantu  untuk  menemukan  permasalahan  dari  pengguna  dengan mengelompokkan  permasalahan  agar  mempermudah  pendefinisian  tiap  masalah.  Penemuan  masalah  berhasil didefinisikan  akan  dilanjutkan  ke  tahap  berikutnya  melalui  brainstorming  project  dengan  menuangkan  seluruh ide ide yang dapat dijadikan solusi sebuah permasalahan.
Pengembangan  langkah  selanjutnya  merealisasikan  hasil  ide  ide  untuk  sebuah  solusi  dalam  bentuk prototype. Pengerjaan dilakukan berdasarkan fungsi wireframe low-fidelity dan high-fidelity. Hasil design akan diujikan  berdasarkan  scenario  uji  untuk  mendapatkan  tanggapan  dari  pengguna.  Pengujian  langsung  dengan stakeholder  atau  lead  instruktur  sekaligus  sebagai  responden  untuk  mengcheck  dan  menguji  kelayakan komponen dalam website Greenpeace. Hasil pengujian akan mendapatkan feedback sebagai bahan evaluasi atau final design yang akan masuk ke tahap coding development.

## 3.2. Product Recruitment Produk
Dokumen PRD digunakan sebagai penghubung komunikasi antar divisi dalam pengembangan maupun di luar divisi pengembangan. Bertujuan untuk memberitahu tujuan business, target pengguna, penanggung jawab, serta  kompetitor  yang  diambil  sebagai  contoh  pengambilan  solusi.  Dengan  PRD  seluruh  divisi  mengetahui informasi apa yang sedang dikerjakan sehingga mengurangi kesalahan komunikasi selama pengembangan. Serta pengerjaan tidak diluar dari scope ruang lingkup pengembangan komponen website. Scope website Greenpeace dalam perancangan ulang antara lain sebagai berikut.
a. Tampilan Tampilan dalam website sudah dibentuk baik, sudah bagus dan up to date. Namun ada yang harus dirubah agar tidak  memberikan kesan berantakan dalam  memberikan informasi. Tampilan  yang  minimalis serta tertuju pada tujuan membuat pengguna mudah memahami isi konten tersebut.
b. Fungsionalitas  Scope  fungsionalitas  untuk  website  dilakukan  beberapa  perubahan,  fungsionalitas sebelumnya  masih  memiliki  template  design  yang  perlu  diubah.  Fungsionalitas  tersebut  dari  template sebelumnya membuat pengguna membutuhkan waktu lebih lama menggunakan website Greenpeace.
c. Target Pengguna Target pengguna dari website disesuaikan agar semua lapisan masyarakat dapat mengikuti kegiatan  kedepannya.  Target  dari  website  dari  usia  remaja  sampai  orang  tua  baik  laki  –  laki  maupun perempuan, dimulai usia 12 tahun sampai 56 tahun.

## 3.3. Tahap Empathize
Tahapan  empathize  dilakukan  untuk  melakukan  pemetaan  permasalahan  yang  kemungkinan  terjadi  dari setiap  pengguna.  Tahapan  dimana  penulis  ikut  berperan  sebagai  pengguna  yang  memahami  kondisi permasalahan  yang  terjadi.  Mentor  divisi  UI/UX  menjelaskan  tujuan  perancangan  ulang  UI/UX  website Greenpeace.  Perancangan  dilakukan  untuk  membuat  pengguna  mudah  mengenal  Greenpeace  website  yang nyaman  digunakan.  Empathize  dilakukan  pemetaan  permasalahan  dan  competitive  analysis.  Adapun  proses pemetaan dilkukan dijelaskan pada gambar 7 Empathy Map:
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 7. Diagram Empathy Map
a. Empathy  Map  Empathy  Map  atau  Peta  Empati  merupakan  sebuah  tool  atau  dokumen  dimana  untuk membantu memahami pengguna dari produk. Emphaty Map dihasilkan dari proses evaluasi tahap pertama. Empathy  Map  dilakukan  dengan  membagi  empat  bagian,  hal  tersebut  dilakukan  agar  penulis  memahami perilaku  pengguna  dan  mendefinisikan  permasalahan  dari  beberapa  aspek.  Empathy  Map  dilakukan  oleh tim  inti  dan  stakeholder.  Hasil  Gambar  7.  Empathy  Map  yang  diperoleh  dari  peta  empati  disusun  untuk diproses ketahap berikutnya. Bagaimana hal tersebut dijelaskan sebagai berikut:
- Says (Dikatakan) Pengambilan riset dari sebuah permasalahan untuk dikatakan. Seperti apa yang akan disampaikan pengguna untuk menyampai aspirasi mereka dari akibat permasalahan terjadi.
- Thinks  (Dipikirkan)  Permasalahan  yang  ditimbulkan  kepada  pengguna  akan  memberikan  banyak pertanyaan.  Thinks  disampaikan  sekilas  mirip  dengan  Says,  namun  Thinks  sendiri  lebih  kenapa permasalahan  tersebut  terjadi,  sesuatu  ketidaknyamannya  dari  pengguna  dan  pemikiran  yang ditimbulkan diharapkannya terjadi sebuah solusi kedepannya.
- Feels  (Dirasakan)  Riset  pada  Feels  sendiri  sesuatu  menjadikan  pengguna  merasakan  dari  dampak permasalahan,  Perasaaan  pengguna  memunculkan  sebuah  kekhawatiran  dan  menjadi  ketakutan  hal tersebut terjadi dalam jangka yang panjang.
- Does (Dilakukan) Sebuah tindakan yang harus dilakukan dan menentukan beberapa solusi. Apabila hal tersebut  di  realisasikan  diharapkan  kedepan  akan  mengurangi  bahkan  mencegah  dari  permasalahan yang terjadi.
b. Competitive  Analysis  Pengumpulan  beberapa  produk  milik  kompetitor  proses  ini  dilakukan  bertujuan melihat perbedaan antara website Greenpeace dengan website kompetitor dari user interface. Hasil analisa produk  dari  kompetitor  dijadikan  sebagai  referensi  dalam  merancang  solusi  untuk  design  website  yang baru.  Hasil  yang  didapatkan  penulis  setelah  melakukan  pencarian  website  competitor  antara  lain  sebagai berikut:
- Kompetitor  memiliki tujuan sama dengan Greenpeace peduli terhadap bumi dan  melakukan beberapa aksi damai. Kompetitor memilih warna netral dan terang untuk meningkat branding dalam website.
- Tempat pendaftaran maupun berlangganan milik kompetitor tidak memakan tempat.
- Peletakan card informasi berita terbaru milik kompetitor tidak memerlukan banyak scroll down.
- Penulisan  informasi  milik  organisasi  kompetitor  rapih  dan  tidak  monoton.  Sehingga  membuat pengguna nyaman saat membacanya.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 8. Competitor Dashboard
Empathize  sudah  selesai  dilakukan,  hasil  riset  dalam  empathy  map  akan  dilanjutkan  ketahap selanjutnya  yaitu  Define.  Dan  untuk  Competitive  Analysis  hasil  tahapannya  akan  dibentuk  untuk  design  yang dikeluarkan idenya dalam Ideate.

## 3.4. Tahap Define
Tahapan  ini  untuk  pendefinisian  kembali  hasil  riset  dalam  proses  empathy  map  sehingga  lebih  jelas agar  dapat  fokus  kepada  inti  permasalahaan.  Pendefinisian  kembali  dilakukan  bertujuan  untuk  menemukan solusi  dari  permasalahan  yang  ditemukan  pada  tahap  empathize  dan  menjabarkan  setiap  kemungkinan permasalahan yang dialami pengguna berdasarkan empathy map. Berikut hasil tahapan define dilakukan untuk mengetahui inti permasalahan yaitu:
Gambar 9. Hasil Define
Hasil pendefinisian permasalahan dari tahap empathize membentuk 5 Why point sebagai berikut:
- Permasalahan  disebabkan  aktivitas  yang  dilakukan  masyarakat  sendiri  sehingga  paling  besar kemungkinannya terjadi.
- Kesadaran kepedulian lingkungan dari masyarakat masih minim.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
- Tidak adanya edukasi masyarakat mengenal lingkungan dan mengetahui dampak kerusakan lingkungan.
- Minimnya media informasi yang menyampaikan artikel kepedulian dan kerusakan lingkungan.
- Pemerataan teknologi di Indonesia belum semuanya merasakan. Sehingga menjadi penyebab permasalahan lingkungan.
3.5. Tahap IdeateTahap Ideate
Merupakan  proses  pengumpulan  dan  menuangkan  berbagai  ide  solusi  bagi  masalah-masalah  yang sudah  ditemukan  dan  didefinisikan  sebelumnya.  Proses  brainstorming  dilakukan  bersama  tim  UI/UX. Penuangan ide dilakukan menggunakan sticky notes yang sudah disediakan oleh figma. Jumlah yang diberikan tidak  terbatas  jumlahnya  namun  masih  sesuai  dengan  tujuan  utama  dari  sebuah  permasalahan.  Semua  solusi diberikan  dapat  dikembangkan  dalam  design  pertama  ataupun  berikutnya.  Ide  yang  sudah  dikumpulkan  akan dilakukan penyaringan  kembali  menyesuaikan dengan aspek  kepentingan pengguna, sehingga designer UI/UX dapat  memilih  hal  pertama  apa  yang  akan  dikembangkan  terlebih  dahulu  untuk  sistem.  Semua  ide  yang dituangkan tersedia pada gambar 10.

## Gambar 10. Hasil Ideate
Brainstorming  ide  sudah  dilakukan,  penulis  dan  tim  mengkomunikasikan  temuan  atau  hasil  proses ideate  bersama  mentor  mengenai  apakah  ide  yang  diberikan  sudah  sesuai  dengan  tujuan  pembuatan  design. Berikutnya  melakukan  pemilihan  ide  yang  dikelompokan  ke  dalam  Kano  Model,  Sebuah  model  untuk mengkategorikan  atribut  produk  atau  jasa  berdasarkan  prioritas  fitur  seberapa  Gambar  11  Hasil  Ideate  besar kemungkinan untuk menyenangkan pengguna dengan menyesuaikan tututan pengguna.

## Gambar 11. Kano Model
Kano model berdasarkan gambar 11. terdapat 3 kategori untuk menyesuaikan penyusunan fitur untuk dibentuk  sebagai  design  selanjutnya.  Kategori  pertama  terletak  sebelah  kiri  Must-have  features  (Basic) merupakan  sebuah  fitur  pertama  dibentuk  kedalam  wireframe,  sebuah  fitur  menjadi  alasan  pengguna menggunakan  produk  digital  kita.  Apabila  fitur  basic  tidak  dibentuk  ketahap  selanjutnya  maka  tujuan  produk menjadi  tidak  terlihat.  Kategori  yang  berada  ditengah  sebagai  kategori  kedua  Performance  features  (Satisfier) merupakan fitur kelanjutan apabila fitur dalam kategori basic sudah dibentuk dengan penambahan sebuah fitur ditambahkan  akan  menjadi  point  tambahan  dari  pengguna  senang  menggunakan  produk  kita,  sebuah  fitur dibentuk  semakin  lebih  baik,  semakin  lebih  nyaman.  Kategori  terakhir  terletak  paling  kanan  Nice-to-have
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
features (Delighter) merupakan penambahan sebuah fitur dibentuk agar pengguna puas hal tersebut boleh saja, namun apabila tidak diberikan  fitur tersebut,  fitur utama dari sebuah produk digital kita tidak akan  hilang dan tidak  akan  berpengaruh  terhadap  kepuasan  pelanggan.  Penulis  dan  tim  memutuskan  untuk  mengembangkan menjadi  sebuah  design  yaitu  Must-Have  features  (Basic)  memperbaiki  bentuk  tampilan  artikel  website  dari website yang sebelumnya dibentuk oleh Greenpeace Indonesia.

## 3.5. Crazy 8
Merupakan  salah  satu  metode  untuk  brainstorming  design  dengan  mengumpulkan  ide  sebanyak- banyaknya. Membentuk 8 kuantitas model tata letak komponen konten dalam waktu singkat yaitu 8 menit. tidak mementingkan design yang bagus melainkan kuantitas dengan 8 model. Pembentukan ini langsung digambarkan dalam  aplikasi  figma.  Para  designer  UI/UX  saling  memberikan  saran  ide  komponen  untuk  diletakan  sebelah mana baiknya dan hasil yang dibentuk dalam Crazy 8 akan menjadi gambaran seperti apa design user interface dibentuk.  Dan  hasil  ide  tidak  terpilih  akan  digabungkan  dengan  model  lainnya.  Seperti  pada  gambar  12 didapatkan gambaran dashboard, dan ada beberapa letak card artikel. Kotak didalamnya terdapat tanda X berarti letak tersebut adalah gambar.
Gambar 12 Hasil Crazy 8.

## 3.5. Tahap Prototype
Brainstorming  telah  selesai  dihasilkan  dan  mengetahui  fitur  pertama  apa  untuk  dibentuk.  Tahapan Prototype  adalah  tahap  berikutnya  untuk  design  ulang  dengan  membuat  User  Flow,  Style  Guideline  dan Wireframe.  Hasil  tahap  akhir  dalam  bentuk  prototype  akan  diujikan  untuk  mendapatkan  feedback  untuk penyesuaian  design  apakah  sudah  sesuai  dengan  kebutuhan  pengguna  atau  belum.  Gambar  13  Hasil  Crazy  8 Tahap  ini  sangat  penting  dipresentasikan  dengan  baik  untuk  melakukan  perbaikan  atau  lanjut  ketahap development  design  ke  dalam  system.  Adapun  tahapan  dilakukan  melalui  beberapa  langkah  akan  dijelaskan sebagai berikut:
a. User Flow Alur kerja seorang pengguna dalam menggunakan website. Sebuah langkah yang akan dilakukan pengguna untuk mencapai tujuannya. User flow membantu pengguna memahami apa yang harus dilakukan dalam menggunakan website. Penjelasan bagian-bagian userflow sebagai berikut:
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 13. User Flow Homepage
User  Flow  Home  Page  User  Flow  ini  berdasarkan  gambar  13  memberikan  informasi  langkah-  langkah pengguna saat berada pada halaman home page pada website Greenpeace
Gambar 14 Flow Halaman About
Gambar 15. Flow Halaman Search
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
- User Flow Blog Page dan About Page User Flow ini berdasarkan gambar 14 pada bagian pertama atas alur pengguna saat akses halaman blog page ketika menggunakan website Greenpeace.
- Search Page User Flow untuk pencarian artikel pada website Greenpeace disediakan bagian kedua dibawah pada gambar 15.
b. Style Guideline
Style  Guideline  dibentuk  menyesuaikan  dengan  branding  Greenpeace  yaitu  berwarna  hijau,  sehingga penulis  tetap  menjaga  konsistensi  tiap  elemen  visual  yang  dibuat  dalam  perancangan  wireframe  dimulai dari  typography  (font)  yang  digunakan,  color,  icon,  grids  serta  shadow  dalam  design.  Dan  berikut  hasil pembuatan style guideline dapat dilihat pada gambar 16 pembuatan style guideline.
Gambar 16. Style Guideline
c. Wireframe
Perancangan  wireframe  berdasarkan  hasil  didapat  dari  empathize  sampai  ideate.  Perancangan  wireframe mementingkan  kebutuhan  pengguna  dan  menyesuaikan  karakteristik  website  Greenpeace  yang  sudah dipilih  dalam  pemilihan  style  guideline.  Wireframe  ini  akan  menjadi  dasar  terbentuknya  prototype  untuk diujikan  agar  mendapatkan  sebuah  feedback.  Berikut  penjelasan  hasil  jadi  wireframe  low-fidelity  dan wireframe high-fidelity sebagai berikut:
- Wireframe Homepage
Pada  halaman  ini  menjadi  halaman  pertama  untuk  pengguna  saat  membuka  website,  melihat  informasi tentang  Greenpeace  dan  artikel  terbaru  website  Greenpeace.  Rancangan  wireframe  low-fidelity  dan wireframe  high-fidelity  gambaran  dapat  dilihat  pada  gambar  17  wireframe  homepage.  Perancangan  yang dilakukan yaitu mengatur tata letak artikel terbaru dan tentang Greenpeace serta bagaimana menjadi aktivis digital.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 17. Wire Frame Halaman Homepage
- Wireframe Artikel
Tampilan  kumpulan  artikel  yang  dapat  difilter  berdasarkan  isi  konteks  artikel,  untuk  memudahkan pengguna mencari tujuan artikel. Rancangan gambaran wireframe low-fidelity dan wireframe high-fidelity dapat dilihat pada gambar 18 wireframe artikel.
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Gambar 20. Wirefreame Artikel.

## IV. KESIMPULAN
Berdasarkan  hasil  perancangan  ulang  UI/UX  pada  website  Greenpeace  didapatkan  sebuah  kesimpulan sebagai berikut:
a. Telah berhasil melakukan perancangan ulang dilakukan dengan tidak menghilangkan ciri khas dari sebuah product  tersebut.  Greenpeace  merupakan  organisasi  lingkungan  memiliki  ciri  khas  akan  warna  hijau ataupun terang yang menandakan kedamaian.
b. Hasil  pengembangan  ide  pada  define  maupun  ideate,  tidak  semuanya  dapat  diimplementasikan.  karena mengingat  apakah  hal  tersebut  diimplementasikan  akan  menghambat  kinerja  website  atau  tidak.  Serta keterbatasan  waktu  dalam  perancangan  menjadi  pertimbangan  untuk  mengimplementasikan  ide  yang diberikan.
c. Hasil  prototype  sederhana  tidak  memungkinkan  product  tersebut  gagal,  hasil  prototype  dibentuk  untuk memudahkan pengguna memahami alur serta isi website sehingga dibuat sesederhana mungkin
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.2  (December 2023) JISICOM (Journal of Information System, Informatics and Computing)
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com

## REFERENASI
[1] Satzinger, J. W., Jackson, R. B., & Burd, S. D. (2010). System Analysis And Design in A Charging World. Boston: Course Technology.
[2] Vossen, G., Schönthaler, F., & Dillon, S. (2017). The Web at Graduation and Beyond. Springer Cham
[3] Rouse, Margaret. (2015). Mobile UI (Mobile User Interface). TechTarget.
[4] Marsh, Joel. (2015). UX for Beginners. Sebastopol: O'Reilly Media, Inc. Nielsen, Jakob, dan Don Norman. (2015). The Definition of User Experience.
[5] Nielsen, J., & Mack, R. (1994). Heuristic Evaluation. In Usability Inspection Methods.
[6] Bevan, Nigel. 2006. International Standards for HCI and Usability. London UK
[7] Ridho Nastainullah. 2020. Panduan Figma Desain Website
[8] Ii, B. A. B. (1971). Don’t Make A Wave Committee ,. September, 36–55.
[9] Al-Faruq,  M.  N.  M.,  Nur’aini,  S.,  &  Aufan,  M.  H.  (2022).  Perancangan  UI/UX  Semarang  Virtual  Tourism Dengan Figma. Walisongo Journal of Information Technology, 4(1), 43–52.
[10] Fariyanto, F., & Ulum, F. (2021). Perancangan Aplikasi Pemilihan Kepala Desa Dengan Metode Ux Design Thinking  (Studi  Kasus:  Kampung  Kuripan).  Jurnal  Teknologi  Dan  Sistem  Informasi  (JTSI),  2(2),  52–60. http://jim.teknokrat.ac.id/index.php/JTSI .
[11] Fitri, D. M. A., Sulistiya, M., Azizah, N., Setyorini, R. I., & Herlina, H. (2021). Perancangan Aplikasi Money Box Dengan Menggunakan Figma. Jurnal Ilmiah Teknologi Informasi Dan Robotika, 3(1), 11–22.
[12] Julianto,  A.  (2020).  Perancangan  Ulang  Desain  Antarmuka  Aplikasi  Berbasis  Web  Dengan  Menggunakan Metode User Centered Design (Studi Kasus : Petshopgrosir). Elibrary UNIKOM, 1.
[13] Kurniawan,  B.,  &  Romzi,  M.  (2022).  Perancangan  UI/UX  Aplikasi  Manajemen  Penelitian  Dan  Pengabdian Kepada Masyarakat Menggunakan Aplikasi Figma. Jurnal Sistem Informasi Mahakarya, 05(1), 1–7.
[14] Nadhif, A. K., Jati, D. T. W., Hussein, M. F., & Widiati, I. S. (2021). Perancangan UI/UX Aplikasi Penjualan Dengan Pendekatan Design Thinking. Jurnal Ilmiah IT CIDA, 7(1), 44–55.
[15] Shirvanadi,  E.  C.,  &  Idris,  M.  (2021).  Perancangan  ulang  UI/UX  situs  e-learning  aminkom  center  metode design  thinking  (studi  kasus:  amikom  center).  Automata,  2,  1–8  Sommerville.Ian  (2011)  “Software Engineering” 9th Edition, Published by Addison-Wesley.