Overview

Dalam memasuki era pendidikan modern, website sekolah telah mengalami pergeseran peran dari sekadar papan pengumuman digital kini menjadi wajah utama yang merepresentasikan kredibilitas dan visi sebuah institusi. Tantangan besar yang sering ditemui adalah bagaimana membangun impresi pertama yang kuat bagi orang tua dan calon siswa melalui sebuah landing page yang tidak hanya informatif, tetapi juga mampu menumbuhkan rasa percaya. Melalui proyek redesign ini lahir dari kesadaran bahwa pengalaman pengguna yang buruk dapat menghambat penyampaian pesan sekolah, sehingga fokus utama diarahkan pada penciptaan ruang digital yang mampu berkomunikasi secara emosional dan fungsional sebagai garda terdepan institusi yang berkemajuan.

UX Audit: Problem vs Solution

Melalui audit UX yang mendalam, teridentifikasi bahwa ketergantungan pada template standar seringkali menjadi bumerang bagi citra sekolah karena tampilannya yang kaku, inkonsisten, dan sering mengalami degradasi visual. Masalah ini diperparah dengan struktur navigasi yang tidak memiliki hierarki jelas, sehingga pengunjung sering kali merasa tersesat sebelum sempat memahami keunggulan sekolah tersebut. Sebagai langkah solutif, saya merancang ulang seluruh arsitektur informasi dengan pendekatan storytelling yang lebih mengalir, di mana setiap elemen visual diletakkan untuk memandu perjalanan pengguna secara intuitif, mulai dari pengenalan nilai sekolah hingga dorongan strategis menuju tombol pendaftaran tanpa adanya hambatan kognitif.

Design System

Untuk menjaga konsistensi jangka panjang, pada tahap ini saya membangun sebuah sistem desain yang menggabungkan nilai tradisi pendidikan dengan inovasi digital melalui pemilihan palet warna yang sangat spesifik serta pemilihan typography yang tepat.

Penggunaan warna Deep Navy (#0C2153) berfungsi sebagai jangkar emosional yang memancarkan stabilitas dan profesionalisme, sementara Royal Blue (#225CDA) dihadirkan untuk memberikan energi dinamis yang relevan bagi generasi muda, serta aksen Burnt Orange (#BC510E) yang ditempatkan secara strategis pada elemen Call-to-Action untuk menciptakan kontras bertenaga yang mengarahkan fokus pengguna secara instan.

Keseluruhan identitas visual ini dipertegas oleh tipografi Plus Jakarta Sans yang modern dan bersih, memastikan bahwa setiap informasi teks dapat dikonsumsi dengan nyaman di berbagai perangkat sekaligus memperkuat kesan sekolah sebagai institusi yang progresif.

Prototype (From Wireframe to High-Fidelity)

Pada tahap ini menjadikan tahap penting dalam terbentuknya sebuah UI/UX Design setelah melakukan rancangan sebuah design system yang terdiri dari 2 langkah, yaitu Low-Fidelity dan juga High-Fidelity

• Low-Fidelity (Wireframe)

Tahap awal perancangan dimulai dengan pembuatan Low-Fidelity Wireframe, di mana fokus utama saya adalah membangun "tulang punggung" desain tanpa terdistraksi oleh elemen visual seperti warna atau gambar. Pada tahap ini, saya menyusun tata letak elemen secara hitam-putih untuk memvalidasi apakah alur informasi sudah logis dan fungsional bagi pengguna. Setiap penempatan section dipikirkan secara matang guna memastikan hierarki konten berjalan dengan semestinya, sehingga kita bisa mendeteksi hambatan navigasi sejak dini sebelum masuk ke detail yang lebih kompleks. Ini merupakan fase krusial untuk memastikan bahwa fondasi arsitektur informasi website sudah cukup kuat untuk menampung seluruh pesan strategis sekolah.

• High-Fidelity (Visual Refinement): 

Setelah kerangka logika teruji, proses berlanjut ke tahap High-Fidelity yang merupakan fase transformasi dari sketsa kasar menjadi antarmuka yang nyata dan hidup. Di sini, saya mengimplementasikan seluruh komponen dari Design System, mulai dari penerapan warna yang harmonis hingga tipografi yang presisi. Detail-detail halus seperti penggunaan soft shadows untuk memberikan kedalaman, serta pengaturan whitespace yang luas untuk meningkatkan keterbacaan, mulai diaplikasikan agar tercipta pengalaman visual yang modern dan profesional. Tahap ini bukan sekadar mempercantik tampilan, melainkan memastikan bahwa setiap interaksi visual dan estetika yang dihadirkan mampu memperkuat pesan kredibilitas yang ingin disampaikan oleh sekolah kepada pengunjungnya.

Visual Direction

Keseluruhan estetika dalam redesign ini mengusung konsep yang modern, bersih, dan profesional dengan menitikberatkan pada efisiensi komunikasi visual. Saya secara sengaja memanfaatkan penggunaan whitespace yang luas untuk memberikan ruang napas bagi setiap konten, sehingga pengguna dapat memindai informasi penting tanpa merasa terbebani oleh kepadatan teks yang berlebihan. Pendekatan ini diperkuat dengan penggunaan ikonografi yang konsisten sebagai pemandu visual, yang memungkinkan penyampaian pesan tetap efektif dan intuitif tanpa harus mengandalkan deskripsi yang terlalu panjang, sehingga menciptakan harmoni antara keindahan bentuk dan kejelasan fungsi.

Expected Impact

Melalui transformasi desain yang lebih intuitif ini, proyek ini diproyeksikan tidak hanya mampu memperkuat kredibilitas institusi di mata publik, tetapi juga mempercepat akses informasi bagi setiap pengguna secara signifikan. Optimalisasi pada alur pendaftaran siswa baru menjadi indikator keberhasilan utama, di mana peningkatan conversion rate diharapkan terjadi berkat navigasi yang lebih terarah. Saat ini, proyek masih berada dalam tahap pengembangan awal yang memfokuskan seluruh energi pada landing page sebagai fondasi visual utama, sebelum nantinya diekspansi menjadi versi multipage dengan fitur fungsional penuh yang mendukung seluruh kebutuhan ekosistem digital sekolah secara optimal.

Development Notes

Proyek saat ini berada pada tahap pengembangan awal dengan fokus pada landing page sebagai fondasi visual utama. Ke depannya, proyek akan dikembangkan menjadi versi multipage dengan fitur fungsional penuh untuk mendukung kebutuhan pengguna secara optimal di seluruh ekosistem website sekolah.

Closing

Perjalanan redesign ini bukan sekadar tentang memperbarui tampilan visual atau mengikuti tren desain terkini, melainkan tentang upaya menciptakan sebuah pengalaman digital yang lebih relevan dan bermakna bagi penggunanya. Dengan menggabungkan prinsip UI/UX modern dan narasi visual yang kuat, website ini diharapkan bertransformasi menjadi media komunikasi yang mampu merepresentasikan identitas sekolah secara jujur sebagai institusi pendidikan yang progresif dan siap menghadapi tantangan masa depan. Perubahan ini menjadi langkah kecil namun fundamental dalam memastikan bahwa teknologi tetap berfungsi sebagai jembatan yang memudahkan manusia dalam mencapai tujuan pendidikannya.