Desain Website ALZI Conference 2022

 

Cover_Alzi.jpg

 

Alzheimer Indonesia adalah organisasi non-profit yang bertujuan untuk meningkatkan kualitas hidup penderita Demensia/Alzheimer, keluarganya, dan pengasuhnya di Indonesia. ALZI akan menjadi tuan rumah Konferensi tingkat Nasional ke-2 pada September 2022, acara ini akan berjalan secara hybrid dengan peserta langsung dan virtual. Konferensi ini akan menampilkan sesi webinar, campuran sesi paralel langsung dan rekaman, seminar offline & workshop offline.

Masalah kesehatan global ini menuntut pendekatan yang komprehensif & multidisiplin, mulai dari upaya kesehatan masyarakat preventif untuk mempromosikan pengurangan risiko dan gaya hidup sehat hingga memasukkan perawatan yang berpusat pada orang dalam proses diagnosis, pengobatan, rehabilitasi, dan perawatan baik di fasilitas maupun di rumah. Juga sangat penting untuk memberikan dukungan tepat waktu dari saat diagnosis untuk mempersiapkan Orang dengan Demensia (PWD) dan pengasuh mereka sehingga mereka dapat merencanakan, menanggapi dan mengelola situasi di rumah, atau bekerja dengan mitra masyarakat untuk intervensi perawatan yang sesuai.

 

Role

UI/UX Designer

Platform

Website

Years

2022

Collaboration

Hamdan Nurachid

 

Alzi_Header_Image.png

 

Ringkasan Proyek

Alzheimer's Indonesia akan mengadakan acara yang akan diadakan pada tahun 2022. Client meminta untuk membuat website khusus yang akan memuat informasi penting dari semua kegiatan acara. Website ini nantinya akan ditayangkan pada subdomain utama milik Alzheimer's Indonesia, yaitu conference.alzi.or.id. Proses desain untuk proyek ini memakan waktu sekitar 1 bulan untuk diselesaikan dengan baik. Beberapa halaman yang dibuat pada desain website ini adalah halaman arahan, tentang acara, harga tiket, dan beberapa halaman penting lainnya. Setelah memahami semua brief dari customer, saya langsung melalui beberapa tahapan sebelum melakukan desain UI, diantaranya melakukan design sprint, dan juga mendeskripsikan kebutuhan website atau project yang akan dibuat.

 

Lingkup dan tanggung jawab:

Dalam project ini, saya memiliki peran dan tanggung jawab sebagai UI/UX Designer dengan tugas mendesain website Alzheimer's Indonesia. Kemudian menerjemahkan brief yang telah divalidasi oleh client dan kemudian menuangkanya kedalam bentuk visual atau desain UI agar mudah dipahami oleh user. Berikut ini adalah halaman-halaman yang saya buat diantaranya:

  • Landing Page
  • Halaman tentang acara ALZI
  • Halaman Program & Pembicara
  • Halaman Registrasi
  • Halaman Sponsor
  • Halaman Abstrak
  • Halaman FAQs
  • Desain Versi Mobile

 

Proses Desain

Dalam proyek ini, saya menggunakan metode desain Sprint. Tahapan ini dilakukan dengan membagi proses menjadi 5 tahap yaitu Empathize, Define, ideate, Prototype, dan terakhir test customer. Setelah itu saya lanjutkan dengan membuat sitemap terlebih dahulu, kemudian membuat wireframe atau desain lo-fi, dan pada tahap terakhir membuat desain UI.

Design_sprint_alzi.png

 

 

Peta Situs (Sitemap)

Sebagai langkah awal, saya melakukan pemetaan apa yang akan saya buat. hal ini bertujuan untuk membantu saat melakukan proses desain, kemudian setelah sitemap selesai langkah selanjutnya adalah tahap wireframe.

Sitemap_alzi.png

 

 

Sketsa (Wireframe)

Pada tahap wireframing hal pertama yang saya buat adalah wireframe untuk mode desktop, setelah saya selesai membuat wireframe saya melakukan validasi project manager untuk memvalidasi bahwa semua kebutuhan customer sudah terealisasi. setelah disetujui, saya melanjutkan ke tahap desain UI.

Wireframe_Alzi.png

 

Tahapan proses wireframing juga dilakukan pada versi mobile. dengan memiliki fungsi yang sama yaitu sebagai acuan saat membuat desain hi-fi.

Wireframe_Alzi_mobile_.png

 

 

Panduan Gaya (Style Guide)

Agar semua elemen dalam desain tetap konsisten, pertama-tama saya membuat panduan gaya yang nantinya akan menjadi elemen mentah dalam proses desain. Dokumentasi panduan gaya saya ditunjukkan pada gambar di bawah ini.

Base_Style_Alzi.png

 

 

Mockup / UI Design

Pada tahap desain UI, disini saya menggunakan komponen atau elemen yang sudah saya definisikan pada style guide, dan pada layout, desain UI yang dibuat mengacu pada wireframe yang telah dibuat sebelumnya, sehingga semua tahapan yang telah dilakukan dibuat memiliki hubungan atau ketergantungan. Ada dua mode atau versi yang telah dibuat pada wireframe, yaitu desktop dan mobile.

UI_Design_Alzi_desktop.png
UI_Design_Alzi_Mobile.png

 

 

Hasil

Pada tahap ini semua proses desain telah selesai, kali ini saya membuat beberapa preview yang berfungsi sebagai tampilan jika website telah dikembangkan dan dibuka di laptop atau perangkat mobile.

Mockups_alzi_tabble.png
Mockups_alzi_laptop.png

 

Anda dapat mengunjungi situs web di alamat: conference.alzi.or.id

Lates Projects