Studi Kasus: Pengembangan Website Titian Foundation

Ikhtisar

Titian Foundation (Yayasan Titian Masa Depan) adalah organisasi nirlaba yang bertujuan untuk memberikan kesempatan pendidikan yang lebih baik bagi masyarakat yang kurang beruntung di Indonesia. Yayasan ini fokus pada peningkatan pendidikan, pengetahuan, dan keterampilan, sehingga dapat menciptakan masa depan yang lebih cerah bagi penerimanya. Titian Foundation juga berusaha meningkatkan kualitas guru di Indonesia dan mendirikan Sentra Pembelajaran Masyarakat (CLC), sebagai pusat pembelajaran untuk mempertahankan keterampilan tradisional dan mengajarkan keterampilan baru.

Organisasi ini dikelola dengan basis profesional relawan yang dipimpin oleh Dewan Pengurus dan didukung oleh banyak relawan profesional. Titian Foundation diaudit secara independen oleh firma akuntan internasional PwC, dan mereka menyediakan laporan keuangan berdasarkan permintaan.

Tujuan

Tujuan utama dari pengembangan website ini adalah untuk menciptakan kehadiran online yang mencerminkan nilai-nilai dari Titian Foundation, menampilkan berbagai inisiatif mereka, memberikan kemudahan akses untuk donasi, dan meningkatkan komunikasi dengan para pendukungnya. Website ini harus:

Responsif: Dapat diakses di semua perangkat.
Mudah Digunakan: Desain intuitif agar pengunjung mudah menavigasi.
Fokus pada Donasi: Proses donasi yang sederhana melalui WooCommerce dan plugin donasi.
SEO-Friendly: Agar website mudah ditemukan di mesin pencari.
Profesional dan Transparan: Dengan desain yang bersih dan laporan keuangan yang mudah diakses.

Teknologi yang Digunakan

Website ini dibangun dengan menggunakan teknologi berikut:

WordPress: Sebagai dasar dari website, WordPress dipilih karena fleksibilitasnya dan kemudahan dalam mengelola konten. WordPress memungkinkan pengelolaan konten yang mudah dan skalabilitas yang tinggi.
WooCommerce: Diintegrasikan untuk menangani donasi, yang memfasilitasi pengalaman donasi yang aman dan mudah bagi para pengguna.
Plugin Donasi: Plugin donasi khusus dipasang untuk memudahkan berbagai metode donasi, termasuk donasi berulang dan integrasi dengan WooCommerce untuk pemrosesan transaksi yang lancar.
Figma: Figma digunakan untuk desain UI/UX, memastikan bahwa desain website menarik secara visual, fungsional, dan dioptimalkan untuk berbagai perangkat.
SEO: Plugin SEO dan praktik terbaik diterapkan untuk memastikan website memiliki peringkat yang baik di mesin pencari, termasuk optimasi metadata, struktur situs, dan konten.

Proses Desain dengan Figma

Proses desain untuk website Titian Foundation dilakukan sepenuhnya menggunakan Figma, alat desain UI/UX yang kuat. Berikut adalah rincian dari proses desainnya:

Wireframing dan Prototyping

Konsep Awal: Langkah pertama adalah membuat wireframe dasar, yang berfokus pada bagian-bagian penting seperti halaman utama, halaman donasi, tentang kami, dan cerita dampak.
Prototyping: Prototipe interaktif dibuat di Figma, memungkinkan para pemangku kepentingan untuk merasakan alur website sebelum pengembangan dimulai. Ini sangat berguna untuk menyesuaikan desain berdasarkan umpan balik pengguna.

Fokus Desain

Desain website bertujuan untuk mencerminkan profesionalisme yayasan sekaligus mempertahankan tampilan yang ramah dan mudah diakses. Prinsip desain utama meliputi:

Tata Letak Minimalis: Desain yang bersih dan bebas gangguan yang menekankan misi dan visi yayasan.
Warna dan Branding: Warna dipilih untuk mencerminkan kepercayaan, harapan, dan komunitas—nilai inti dari yayasan. Warna biru lembut, hijau, dan warna bumi digunakan.
Tipografi: Font yang mudah dibaca dan memberikan kesan profesional serta ramah. Pemilihan font berfokus pada keterbacaan untuk audiens yang lebih luas.
Gambar: Gambar berkualitas tinggi yang menggambarkan komunitas dan program pendidikan yang didukung oleh yayasan. Gambar menyoroti dampak positif dari pekerjaan Titian Foundation.

Responsif pada Perangkat Mobile

Desain sepenuhnya responsif, memastikan website bekerja dengan mulus di desktop, tablet, dan perangkat mobile. Figma memungkinkan pengujian elemen desain di berbagai ukuran layar, memastikan pengalaman pengguna yang konsisten di semua perangkat.

Fitur Website

1. Halaman Utama

Halaman utama berfungsi sebagai pintu masuk utama dan memperkenalkan pengunjung pada misi Titian Foundation dan dampaknya. Fitur utama termasuk:

Bagian Hero: Gambar besar yang berdampak visual yang menggambarkan pekerjaan yayasan, dengan CTA yang jelas untuk mendonasikan atau terlibat.
Pernyataan Misi: Gambaran singkat tentang tujuan dan pencapaian yayasan.
Cerita Sukses: Menyoroti contoh nyata dari pekerjaan yayasan dalam meningkatkan pendidikan dan kehidupan.
Navigasi: Akses mudah ke halaman donasi, program, dan halaman tentang kami.

2. Sistem Donasi

Fungsi utama dari website ini adalah sistem donasi yang dirancang agar mudah digunakan dan aman:

Pilihan Donasi: Pengguna dapat memilih jumlah donasi sekali waktu atau berlangganan donasi berulang.
Proses Donasi yang Sederhana: Donasi diproses melalui WooCommerce dan plugin donasi, memberikan pengalaman pengguna yang lancar.
Transparansi Keuangan: Laporan keuangan yayasan disediakan dengan jelas dan transparan untuk memastikan kepercayaan dari donatur.

3. Halaman Program dan Cerita Dampak

Halaman ini menunjukkan berbagai program yang dijalankan oleh Titian Foundation dan memberikan cerita sukses dari para penerima manfaat. Ini bertujuan untuk membangun kepercayaan dan menggugah emosi pengunjung untuk lebih terlibat.

4. Halaman Laporan Keuangan

Sebagai organisasi yang diaudit secara independen, halaman ini memberikan akses kepada pengunjung untuk melihat laporan keuangan yang jelas, mencerminkan integritas dan transparansi yayasan.

Kesimpulan

Website Titian Foundation dibangun dengan teknologi modern untuk memberikan pengalaman yang memudahkan pengunjung dalam mencari informasi, berdonasi, dan terlibat lebih lanjut. Desain yang bersih dan profesional mencerminkan misi yayasan, sementara sistem donasi yang terintegrasi memudahkan pengunjung untuk berkontribusi pada tujuan mulia yayasan ini. Dengan menggunakan WordPress, WooCommerce, plugin donasi, dan Figma, website ini berhasil menggabungkan estetika dengan fungsionalitas, menciptakan platform yang dapat diakses oleh berbagai audiens di seluruh dunia.