e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 Saefudin1.
Sudjiran2.
Meilyana Anisa Mawarti3 Program Studi Sistem Informasi1.
Program Studi Manajemen Informatika2.
Program STudi Sistem Informasi3 STMIK Jakarta STI&K1,2,3.
Jakarta saefudin@gmail.
com1, ontosenosudjiran@gmail.
meliyana@gmail.
Received: November 11.
Revised: November 25, 2023.
Accepted: December 4, 2023 Issue Period: Vol.
7 No.
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 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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 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 .
ser interfac.
dibutuhkan untuk meningkatkan pengalaman pengguna .
ser experienc.
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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 .
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
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.
Website Website menjadi sebuah karakteristik untuk mendiskripsikan suatu ciri khas dari sebuah perusahaan atau 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 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.
Antarmuka (User Interfac.
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 .
User Experience Pengalaman Pengguna (User Experienc.
dengan syarat pertama untuk pengalaman pengguna yang patut dicontoh adalah memastikan pemenuhan kebutuhan pelanggan dengan tepat dan tanpa kesulitan yang tidak 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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
solusi berdasarkan kebutuhan pengguna.
Aspek yang dibutuhkan dalam membangun User Experience bagaimana pengalaman seorang pengguna dalam menggunakan sebuah produk yaitu .
C Seberapa mudah cara kerjanya untuk dipahami C Bagaimana perasaan pengguna ketika menggunakan produk C Bagaimana pengguna mencapai tujuannya melalui produk.
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 Empathize merupakan suatu proses menggali masalah, mengetahui apa yang dibutuhkan, dan memahami siapa saja yang menjadi target.
Define merupakan tahapan mendefinisikan permasalahan pengguna yang didapatkan pada tahap empathize agar ditemukan permasalahan inti.
Ideate adalah tahapan penuangan ide untuk sebuah solusi permasalahan kebutuhan pengguna berdasarkan hasil tahap define.
Prototype, adalah rancangan purwarupa sebuah design yang direalisasikan pada system atau aplikasi.
Prototype dibentuk menyesuaikan UI style guidelines membantu penulis proses perancangan.
Test, pengujian prototype dengan pengguna nyata untuk mendapatkan umpan balik dan mengetahui kekurangan dan kelebihan dari prototype.
Gambar 1.
Diagram Desain Thinking PRD (Product Recruitment Documen.
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 Selain itu.
PRD berperan sebagai sumber yang menghubungkan semua divisi, termasuk engineer, desain, dukungan, penjualan, pemasaran, dan tim lainnya.
Usability Testing DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 .
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 .
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 Wireframe Wireframe merupakan representasi awal desain yang digunakan untuk menyusun atau menata elemenelemen 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.
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.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 3.
Diagram Low Fidelity Wireframe 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 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, 2.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 5.
Diagram Style guideline 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 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 Figma Figma merupakan salah satu alat desain berbasis cloud yang gratis dan dapat diakses melalui Browser (Web Base.
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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
diperlukan untuk berbagai tahap proyek desain, termasuk alat vektor, ilustrasi, serta prototyping untuk memfasilitasi proses hand-off .
PEMBAHASA DAN HASIL
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 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 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.
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.
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.
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.
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 Ae laki maupun perempuan, dimulai usia 12 tahun sampai 56 tahun.
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:
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 7.
Diagram Empathy Map 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 (Dikataka.
Pengambilan riset dari sebuah permasalahan untuk dikatakan.
Seperti apa yang akan disampaikan pengguna untuk menyampai aspirasi mereka dari akibat permasalahan terjadi.
- Thinks (Dipikirka.
Permasalahan yang ditimbulkan kepada pengguna akan memberikan banyak 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 (Dirasaka.
Riset pada Feels sendiri sesuatu menjadikan pengguna merasakan dari dampak permasalahan.
Perasan pengguna memunculkan sebuah kekhawatiran dan menjadi ketakutan hal tersebut terjadi dalam jangka yang panjang.
- Does (Dilakuka.
Sebuah tindakan yang harus dilakukan dan menentukan beberapa solusi.
Apabila hal tersebut di realisasikan diharapkan kedepan akan mengurangi bahkan mencegah dari permasalahan yang terjadi.
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 Hasil yang didapatkan penulis setelah melakukan pencarian website competitor antara lain sebagai - 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.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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.
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.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 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 (Basi.
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 (Satisfie.
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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
features (Delighte.
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 (Basi.
memperbaiki bentuk tampilan artikel website dari website yang sebelumnya dibentuk oleh Greenpeace Indonesia.
Crazy 8 Merupakan salah satu metode untuk brainstorming design dengan mengumpulkan ide sebanyakbanyaknya.
Membentuk 8 kuantitas model tata letak komponen konten dalam waktu singkat yaitu 8 menit.
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 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.
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:
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:
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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.
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 .
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 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 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
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.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 20.
Wirefreame Artikel.
IV.
KESIMPULAN
Berdasarkan hasil perancangan ulang UI/UX pada website Greenpeace didapatkan sebuah kesimpulan sebagai berikut:
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.
Hasil pengembangan ide pada define maupun ideate, tidak semuanya dapat diimplementasikan.
mengingat apakah hal tersebut diimplementasikan akan menghambat kinerja website atau tidak.
Serta keterbatasan waktu dalam perancangan menjadi pertimbangan untuk mengimplementasikan ide yang Hasil prototype sederhana tidak memungkinkan product tersebut gagal, hasil prototype dibentuk untuk memudahkan pengguna memahami alur serta isi website sehingga dibuat sesederhana mungkin DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
REFERENASI
Satzinger.
Jackson.
, & Burd.
System Analysis And Design in A Charging World.
Boston: Course Technology.
Vossen.
Schynthaler.
, & Dillon.
The Web at Graduation and Beyond.
Springer Cham Rouse.
Margaret.
Mobile UI (Mobile User Interfac.
TechTarget.
Marsh.
Joel.
UX for Beginners.
Sebastopol: O'Reilly Media.
Inc.
Nielsen.
Jakob, dan Don Norman.
The Definition of User Experience.
Nielsen.
, & Mack.
Heuristic Evaluation.
In Usability Inspection Methods.
Bevan.
Nigel.
International Standards for HCI and Usability.
London UK Ridho Nastainullah.
Panduan Figma Desain Website .
Ii.
DonAot Make A Wave Committee ,.
September, 36Ae55.
Al-Faruq.
NurAoaini.
, & Aufan.
Perancangan UI/UX Semarang Virtual Tourism Dengan Figma.
Walisongo Journal of Information Technology, 4.
, 43Ae52.
Fariyanto.
, & Ulum.
Perancangan Aplikasi Pemilihan Kepala Desa Dengan Metode Ux Design Thinking (Studi Kasus: Kampung Kuripa.
Jurnal Teknologi Dan Sistem Informasi (JTSI), 2.
, 52Ae60.
http://jim.
id/index.
php/JTSI.
Fitri.
Sulistiya.
Azizah.
Setyorini.
, & Herlina.
Perancangan Aplikasi Money Box Dengan Menggunakan Figma.
Jurnal Ilmiah Teknologi Informasi Dan Robotika, 3.
, 11Ae22.
Julianto.
Perancangan Ulang Desain Antarmuka Aplikasi Berbasis Web Dengan Menggunakan Metode User Centered Design (Studi Kasus : Petshopgrosi.
Elibrary UNIKOM, 1.
Kurniawan.
, & Romzi.
Perancangan UI/UX Aplikasi Manajemen Penelitian Dan Pengabdian Kepada Masyarakat Menggunakan Aplikasi Figma.
Jurnal Sistem Informasi Mahakarya, 05.
, 1Ae7.
Nadhif.
Jati.
Hussein.
, & Widiati.
Perancangan UI/UX Aplikasi Penjualan Dengan Pendekatan Design Thinking.
Jurnal Ilmiah IT CIDA, 7.
, 44Ae55.
Shirvanadi.
, & Idris.
Perancangan ulang UI/UX situs e-learning aminkom center metode design thinking .
tudi kasus: amikom cente.
Automata, 2, 1Ae8 Sommerville.
Ian .
AuSoftware EngineeringAy 9th Edition.
Published by Addison-Wesley.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.