View
stories

Menghadirkan Pengalaman Baru di Website ASEAN Energy Center

ui ux portfolio web

BIDANG

Bisnis

DURASI PROYEK

1 Bulan

Cakupan

Penelitian, Desain

TIM

Prolog

ASEAN Centre for Energy (ACE) adalah organisasi antar pemerintah dalam struktur Association of Southeast Asian Nations (ASEAN) yang mewakili kepentingan 10 Negara Anggota ASEAN (AMS) di sektor energi.

Melayani perannya sebagai pusat data dan pengetahuan untuk sektor energi ASEAN, ACE telah aktif menggunakan situs web www.aseanenergy.org sebagai wadah untuk berbagi kegiatan dan publikasinya.

Pada kesempatan kali ini, kami membantu ACE mendesain ulang website dengan menghadirkan informasi yang lebih ramah dan mudah digunakan.

Kerangka Kerja Kami

Untuk mendapatkan pemahaman yang lebih baik tentang masalah dan menghasilkan solusi terbaik, kami akan mengikuti kerangka Pemikiran Desain untuk proyek ini.


The Design Thinking steps, developed by IDEO Design Agency, USA.

Memang jauh lebih mudah untuk terjun ke fase perancangan, tetapi kemungkinan besar, hasilnya hanya memuaskan selera desainer dan mungkin tidak dapat menyelesaikan masalah.

Mengapa Design Thinking?

  1. Kolaborasi yang lebih baik antara pemangku kepentingan, konsultan, dan pengembang.
  2. Temukan masalah nyata yang dimiliki pengguna
  3. Pemahaman yang lebih baik tentang visi pemangku kepentingan
  4. Menghasilkan solusi yang lebih baik dan tervalidasi yang sejalan dengan visi pemangku kepentingan dan kebutuhan pengguna.

Dengan paket kerangka kerja ini, kita dapat memperoleh manfaat seperti:

Beginilah cara kami menerapkan kerangka Pemikiran Desain untuk menyelesaikan proyek perombakan ini.

Mengerti

Dengan pemahaman yang jelas dan tepat tentang masalah tersebut, kita akan dapat menemukan peluang dan kemudian menghasilkan solusi jangka panjang. Memahami fase memiliki lima langkah:

Wawancara Pemangku Kepentingan

Ini adalah langkah di mana tim kami menggali lebih dalam kebutuhan proyek. Menemukan wawasan dari perspektif klien. Waktu yang dibutuhkan: 2-3 jam diskusi.

Survei

Untuk membandingkan dengan perspektif klien, kami mensurvei untuk mendapatkan pandangan lain dari pengguna situs web ACE, seperti:

  • Seberapa sering pengguna mengunjungi situs web ACE?
  • Untuk tujuan apa pengguna mengunjungi situs web ACE?
  • Bagaimana kepuasan pengguna secara keseluruhan dalam menggunakan situs ini?
  • Masalah apa yang sering dihadapi pengguna saat menggunakan situs web ACE?

Berdasarkan survei, data yang diperoleh adalah:

  • 18 orang mengatakan berusaha keras untuk mengakses informasi spesifik saat menggunakan situs web ACE
  • 15 orang mengatakan ACE memiliki desain dan navigasi yang buruk di seluruh situs.

Hampir semua pengunjung mencari artikel/publikasi di website ACE untuk mencari informasi terkini tentang sektor energi daerah. Juga, beberapa pengunjung mencari lowongan pekerjaan


Contoh hasil survei (1)


Contoh hasil survei (2)

Lokakarya Penelitian dengan pengguna situs web

Selanjutnya, untuk memastikan kegunaan website diperlukan evaluasi / riset dengan melibatkan pengguna secara langsung untuk mengetahui apa yang dibutuhkan dan diinginkan oleh pengguna suatu produk.

Oleh karena itu kami kemudian melakukan Usability Testing dengan 7 peserta yang mewakili pengunjung atau pengguna website ACE. Data peserta diperoleh dari hasil survei. Dengan aktivitas ini, Kami telah menemukan celah dan alasan di balik mengapa pengguna gagal memenuhi harapan pemangku kepentingan.


Proses penerapan pengujian kegunaan (1)


Proses penerapan pengujian kegunaan (2)

Hasil yang kami dapatkan adalah:


Situs Web lama sebelum desain ulang.

  • Pengguna bingung harus fokus ke mana karena ada begitu banyak konten di Beranda.
  • Berita, Publikasi, Laporan & AED adalah tautan yang paling banyak diklik selama pengujian. Tapi sekarang, pengunjung perlu mengklik terlalu banyak tautan untuk mencapai konten.
  • Bilah sisi terlalu sempit. Kami menemukan bahwa teks isi juga rendah dan tidak ramah bagi warga lanjut usia.

Tes Penyortiran Kartu

Pada workshop yang sama, setelah peserta menjajal website yang ada, kami melakukan Uji Sortir Kartu. Prosesnya adalah sebagai berikut, kami memberi mereka kartu yang berisi menu navigasi situs dan menanyakan bagaimana mereka mengaturnya berdasarkan keinginan mereka.

Dengan tes ini, kami akan menemukan pola dan pola pikir para peserta ini, dan hasilnya akan membantu kami merancang Arsitektur Informasi yang lebih baik.

Pada bagian ini, kami menggunakan aplikasi penyortiran kartu online Optimal sort, Layanan web ini menyediakan fitur analisis hasil yang berguna sehingga memudahkan kami untuk segera mengetahui hasil analisis setelah penyortiran kartu.


Peserta menyortir kartu secara online


Kami menyediakan kartu yang berisi nama fitur/menu dan meminta peserta untuk mengelompokkan kartu-kartu ini.

Berikut adalah hasil penyortiran kartu untuk Beranda:

Riset Kompetitif

Mengikuti saran pemangku kepentingan untuk meninjau bagaimana pesaing atau lembaga serupa lainnya merancang situs web mereka, kami menemukan keunikan apa dan elemen hak apa yang dapat kami gunakan sebagai inspirasi.

Sintesis Data

Ini adalah salah satu bagian penting dari fase Memahami. Pada langkah ini, kami akan mengekstrak semua data yang kami miliki (hasil pengujian kegunaan, penyortiran kartu, dan riset kompetitif) dan menghubungkan titik-titik tersebut untuk mengungkap akar masalahnya. Memahami wawasan dari kedua perspektif tersebut.


Kita mulai melakukan sintesis dengan mengelompokkan masalah atau isu yang sama.


Proses sintesis untuk memahami hubungan antara wawasan dan memiliki gambaran yang lebih jelas tentang masalah yang sebenarnya.

Ide

Setelah kami memiliki pemahaman yang jelas tentang masalah dan mendapatkan wawasan. Kami beralih ke fase solusi atau ide. Kita akan melalui langkah-langkah ini:

Wireframing dan Desain Interaksi

Pada langkah ini, tim Giza akan membuat prototipe dengan tingkat ketelitian yang rendah. Menerapkan Metode Crazy 8


Hasil dari crazy 8

Kreasi Kolaboratif dengan para pemangku kepentingan

Ini adalah lokakarya ringan yang dilakukan oleh Giza dan Tim ACE. Bersama-sama kami menghasilkan konsep solusi dalam satu atau dua hari. Jika tidak, tim Giza sendiri sudah cukup dengan tinjauan dari para pemangku kepentingan.

Kami berkolaborasi menggunakan alat Figma; alat ini membantu kami, memecahkan masalah, atau bertukar ide dengan cepat dan langsung di satu halaman.


Bekerja sama dalam mendesain menggunakan alat Figma

Desain UI dengan Ketelitian Tinggi

Pada langkah ini, tim Giza akan membangun Desain Antarmuka Pengguna yang lebih halus dan sesuai dengan merek dan pedoman desain ASEAN.

Validasi

Selanjutnya, kami memvalidasi situs web menggunakan metode pengujian kegunaan lagi, dan teknik ini dirancang untuk membantu tim mengidentifikasi bagian-bagian antarmuka yang paling sering membuat orang frustrasi dan bingung sehingga dapat diprioritaskan, diperbaiki, dan diuji ulang sebelum diluncurkan. Kami menggunakan pengujian kegunaan karena metode ini berguna untuk menemukan kekurangan dalam desain kami saat ini.

Pada sesi ini, kami merekrut peserta yang berbeda untuk membantu kami memvalidasi situs web yang telah didesain ulang, hal ini dilakukan untuk mendapatkan reaksi yang jujur dari orang-orang yang tidak terbiasa menavigasi situs web ACE.

Jika hasilnya tidak sesuai dengan kebutuhan pengguna, kami akan membuat sketsa lagi. tetapi jika hasilnya sesuai, maka kami melanjutkan ke langkah berikutnya.

Pengembangan Web

Langkah selanjutnya adalah mengembangkan aplikasi sesuai dengan desain yang telah divalidasi.

Pastikan tidak ada perubahan pada desain, karena itu akan memakan waktu lebih lama lagi, dan kita tidak akan pernah tahu kapan kita akan selesai.

Dari desain yang telah dibuat, kami mengembangkan aplikasi menggunakan WordPress. Selain itu, kami juga membuat aplikasi dalam mode situs web dan juga membuatnya responsif untuk perangkat seluler.

Pada saat membangun aplikasi kita tentunya ada beberapa kendala, terutama pada desain yang sulit untuk diimplementasikan oleh developer, yang kita lakukan adalah dengan mengkomunikasikannya untuk didiskusikan, desainer harus memiliki desain perencanaan yang lain.

Setelah aplikasi dibuat, kami kemudian melakukan migrasi data dengan mengintegrasikan data yang ada di website ACE lama ke website ACE yang baru.

    Bagikan Proyek ini

    Pekerjaan Lainnya