Yuk Vaksin: studi kasus desain web tentang edukasi vaksinasi

Overview Proyek

Pada tahun 2021, Politeknik Negeri Bali menyelenggarakan sebuah lomba desain web bertajuk Politeknik Negeri Bali Web Design Competition (PNBWDC) dalam rangkaian INTECH FEST 2021. Kompetisi ini bertujuan untuk mengajak generasi muda, khususnya siswa dan mahasiswa se-Indonesia, untuk mengembangkan kreativitas dan keterampilan di bidang desain web, serta mendorong mereka untuk membawa teknologi informasi ke level yang lebih tinggi.

Dengan tema “Bring the Information Technology to the Next Level” — kompetisi ini bertujuan untuk memperkenalkan dan mengembangkan peran generasi muda dalam dunia teknologi, khususnya dalam desain web. Disini saya memilih salah satu proyek yaitu “Yuk Vaksin”, sebuah konsep website yang bertujuan untuk mendukung program vaksinasi di Indonesia melalui informasi yang mudah diakses, menarik, dan edukatif.

Tujuan Proyek

Proyek “Yuk Vaksin” berfokus pada desain sebuah situs web yang menyampaikan informasi penting seputar vaksinasi COVID-19 di Indonesia. Website ini diharapkan dapat memberikan edukasi kepada masyarakat mengenai manfaat vaksin, proses vaksinasi, serta data terbaru terkait vaksinasi di seluruh wilayah Indonesia. Desain web ini juga bertujuan untuk memberikan pengalaman pengguna (UX) yang memadai dan mudah diakses oleh berbagai kalangan.

Tantangan Desain

Dalam kriteria penilaian lomba ini, mengharuskan peserta untuk merancang dan mengembangkan website dengan memperhatikan beberapa aspek penting:

• Interface dan Design: Website harus menarik dan mudah dinavigasi oleh pengguna dari berbagai usia dan latar belakang.
• Kreativitas dan Inovasi: Desain harus inovatif dalam menyampaikan informasi penting tentang vaksinasi dengan cara yang tidak hanya informatif, tetapi juga interaktif dan engaging.
• User Experience (UX) dan Accessibility: Website harus mudah diakses, termasuk bagi penyandang disabilitas, serta memiliki antarmuka yang responsif dan ramah pengguna.
• Struktur Kode dan Kerapihan File: Peserta harus memastikan bahwa struktur kode bersih, terorganisir, dan dapat dipelihara dengan mudah.

Proses Pengembangan

Proyek “Yuk Vaksin” dimulai dengan tahapan yang terstruktur, yang bertujuan untuk menghasilkan sebuah website fungsional dan user-friendly dalam waktu 15 hari. Selama periode ini, saya sebagai peserta diberikan kesempatan untuk merancang dan mengembangkan desain website dengan berbagai tahap pengerjaan, mulai dari riset hingga implementasi final. Berikut adalah langkah-langkah yang saya lakukan:

1. Riset dan Perencanaan Awal (Hari 1-2)

Mengingat waktu pengerjaan yang terbatas, saya memulai dengan riset mendalam mengenai kebutuhan pengguna. Saya menganalisis berbagai audiens potensial yang akan mengakses website ini, dari masyarakat umum yang membutuhkan informasi vaksinasi hingga tenaga medis yang mungkin membutuhkan data lebih teknis. Proses ini berlangsung selama dua hari pertama, guna memastikan bahwa konten yang disajikan sesuai dengan kebutuhan dan mudah dipahami oleh semua kalangan.

2. Desain Wireframe dan Mockup (Hari 3-5)

Setelah merumuskan kebutuhan pengguna, saya melanjutkan dengan pembuatan wireframe sebagai dasar struktur dan navigasi website. Desain awal ini sangat penting untuk memastikan bahwa alur pengunjung dapat berjalan lancar, dengan fokus utama pada kemudahan akses informasi. Setelah wireframe selesai, saya membuat desain mockup visual untuk memvisualisasikan antarmuka website dengan warna, tipografi, dan elemen grafis yang ramah pengguna.

3. Development Website (Hari 6-12)

Tahap pengembangan dimulai dengan implementasi kode untuk website menggunakan HTML, CSS, dan JavaScript. Mengingat waktu yang terbatas, saya memastikan bahwa pengembangan dilakukan dengan efisien namun tetap memperhatikan detail desain dan fungsionalitas. Website ini dirancang agar responsif dan dapat diakses dengan baik di berbagai perangkat, mulai dari desktop hingga smartphone. Selain itu, saya memastikan bahwa semua elemen UI (User Interface) berfungsi dengan baik dan memenuhi standar aksesibilitas.

4. Pengujian dan Perbaikan (Hari 13-14)

Setelah selesai mengembangkan website, saya melakukan pengujian pada berbagai perangkat dan browser untuk memastikan bahwa website berfungsi dengan baik di semua platform. Setelah proses pengujian singkat, saya langsung cek dan setup file proyek untuk dikumpulkan.

5. Finalisasi dan Pengumpulan Karya (Hari 15)

Pada hari terakhir, saya memastikan bahwa semua bagian dari website sudah final dan siap diunggah. Proses pengumpulan karya dilakukan melalui dashboard peserta di platform yang telah disediakan oleh penyelenggara lomba, sesuai dengan ketentuan yang berlaku. Website yang telah selesai kemudian diunggah dan siap untuk dinilai oleh para juri. Semua file dan kode yang diperlukan telah dipersiapkan dan disusun rapi sebelum akhirnya dikumpulkan pada hari terakhir.

Hasil

Berikut adalah hasil akhir dari pengembangan website Yuk Vaksin, yang telah dirancang selama 15 hari sesuai ketentuan lomba. Tampilan mockup dan demo website dapat dilihat pada potongan berikut:

1. Halaman Beranda

   Menampilkan informasi utama terkait ajakan vaksin, jadwal vaksin, jenis vaksin, pasca vaksin, dan tombol call-to-action.

2. Halaman Informasi Vaksin

   Berisi penjelasan mengenai data informasi vaksin, jadwal & lokasi vaksin, dan FAQ’s vaksin.

3. Halaman Layanan Pesan Antar

   Halaman ini menyediakan layanan pesan antar (delivery) untuk membantu pengguna yang terkena covid, bantuan disini berupa: obat atau kebutuhan terkait selama masa isolasi mandiri.

Demo Website

website Yuk Vaksin → Link