Memuat Proyek

Loading image 1...

01/02

WebsiteMandiriAutisma

Desain UI/UX dan Implementasi WPBakery Page Builder untuk Pusat Terapi

Client
Mandiri Autisma Indonesia
Year
2021
Timeline
4 minggu
Category
Pengembangan WordPress / Desain UI/UX
UI Goal
Menumbuhkan kepercayaan dengan segera dan memaksimalkan lead generation untuk program terapi gratis dengan menyediakan informasi yang jelas dan mudah diakses.
VISUAL STYLE
Estetika hangat, empatik, dan profesional menggunakan tata letak bersih beraksen hijau dan kuning cerah untuk menyampaikan harapan dan energi.
LAYOUT SYSTEM
Alur modular satu halaman yang memastikan banner layanan gratis berprioritas tinggi menjadi elemen pertama yang dilihat, diikuti detail program dan pembangun kredibilitas.
PRIMARY DEVICE TARGET
Desain mobile-first, mengingat tingginya kemungkinan orang tua mengakses sumber daya via perangkat mobile.
Website Mandiri Autisma
Karya Unggulan

Website Mandiri Autisma

Desain UI/UX dan Implementasi WPBakery Page Builder untuk Pusat Terapi

Gambaran

Desain UI/UX dan Implementasi WPBakery Page Builder untuk Pusat Terapi

Mendesain UI/UX lengkap di Figma dan membangun website resmi menggunakan *WPBakery Page Builder* dalam WordPress. Pendekatan ini memastikan klien dapat dengan mudah mengelola program terapi, pembaruan galeri, dan konten via antarmuka drag-and-drop visual, sekaligus mempertahankan kesesuaian visual tinggi yang ditetapkan dalam desain.

Tantangan

Masalah

Tantangan utamanya adalah menyeimbangkan kredibilitas profesional yang dibutuhkan pusat terapi dengan antarmuka yang hangat dan mengundang, sekaligus memberi klien backend yang andal dan non-teknis (*WordPress dengan WPBakery*) untuk mengelola pembaruan konten yang sering (program, testimoni, dan jam operasional).

Solusi

Mengembangkan situs menggunakan tema dasar ringan dan mengimplementasikan logika desain Figma kustom via *WPBakery Page Builder*. Menggunakan *PHP* untuk logika backend, termasuk *Custom Post Type* untuk menyusun kartu "Program" dan galeri, serta membuat *elemen WPBakery* khusus untuk memastikan kesesuaian visual tinggi dan penyuntingan konten yang mudah bagi klien.

VisualJourney

Showcase Proyek

Loading image 1...

Tangkapan Layar 1

Visualisasi proyek dan desain antarmuka

01/02
Navigasi|ESCKeluar Layar Penuh

TeknologiStack

01

WordPress CMS

CMS

02

WPBakery Page Builder

Page Builder/Editor Visual

03

PHP

Bahasa Backend

04

HTML5 / CSS3

Frontend

05

Tailwind CSS (via integrasi kustom)

Styling

06

Figma

Desain UI/UX

KeyFeatures

[01]

Banner Layanan Gratis Berdampak Tinggi

Banner header menonjol dan berwarna yang mengiklankan "Layanan Terapis GRATIS" dengan jam operasional dinamis dan metode kontak (WhatsApp, Telepon).

[02]

Modul Program Terintegrasi WPBakery

Membuat elemen WPBakery kustom yang terhubung ke *Custom Post Type WordPress* untuk menyusun program unik (Fun Sport, Bina Tani, dll.), memastikan penyuntingan klien yang mudah.

[03]

Desain UI/UX yang Mengedepankan Empati

Menerapkan estetika hangat dan profesional (hijau dan kuning) yang dirancang untuk menumbuhkan kepercayaan dan mengurangi kecemasan orang tua yang mencari bantuan.

[04]

Showcase Testimoni dan Kepercayaan

Modul khusus (kartu biru) untuk menampilkan liputan media, logo otoritas, dan testimoni klien untuk meningkatkan kredibilitas.

[05]

Galeri Fasilitas dan Kepercayaan

Galeri foto fleksibel dan terkelola yang menampilkan fasilitas luar ruang dan ruang terapi pusat, mudah diperbarui via Media Library WordPress.

[06]

Aksesibilitas Mobile yang Dioptimalkan

Implementasi desain mobile-first penuh di semua modul, memastikan keterbacaan tinggi dan akses mudah ke kontak terapi di layar kecil.

ProsesKami

Pandangan detail tentang bagaimana kami mewujudkan proyek ini dari konsep hingga kenyataan melalui metodologi kami yang terbukti.

01
Durasi
1 minggu

Desain & Strategi Visual (Figma)

Menetapkan persona pengguna utama dan membuat mockup high-fidelity untuk landing page dan kartu program di Figma.

Hasil
File Desain Figma
Panduan Palet Warna & Tipografi
02
Durasi
2 minggu

Setup WPBakery & Pembuatan Elemen Kustom

Mengonfigurasi WordPress dan WPBakery. Menulis kode *elemen WPBakery berbasis PHP* kustom dan CSS yang diperlukan untuk mengimplementasikan desain Figma dan memastikan kesesuaian visual di dalam lingkungan page builder.

Hasil
Setup Template WPBakery
Elemen WPBakery Kustom
Struktur Custom Post Type
03
Durasi
1 minggu

Integrasi Konten & Pelatihan Klien

Mengintegrasikan konten awal (program, galeri). Melakukan pelatihan penuh untuk klien tentang penggunaan *editor visual WPBakery* dan dashboard WordPress untuk pengelolaan mandiri.

Hasil
Integrasi Konten Selesai
Manual Pelatihan WPBakery & WordPress
Sesi Pelatihan
04
Durasi
0,5 minggu

QA Akhir & Deployment

Menjalankan QA akhir, memastikan stabilitas lintas browser dan menguji fungsi editor visual. Peluncuran akhir ke lingkungan produksi.

Hasil
Laporan QA Visual
Deployment Produksi Akhir
Checklist Pasca-Peluncuran
1

Menciptakan desain visual yang empatik dan profesional yang sesuai untuk pusat terapi.

2

Memberi klien antarmuka *WPBakery/WordPress* yang intuitif untuk mengelola sendiri semua konten halaman dan detail program.

3

Berhasil mengorganisir informasi program yang kompleks ke dalam modul WPBakery yang mudah dicerna dan ramah editor.

4

Menerapkan banner berkontras tinggi yang jelas untuk mendorong pendaftaran program layanan gratis.

Website yang didesain ulang ini hangat dan profesional. Orang tua langsung tahu cara menghubungi kami dan jelas melihat ragam program unik yang kami tawarkan. Backend WordPress-nya intuitif dan sempurna untuk dikelola tim kami.
Mandiri Autism Team
Mandiri Autism Team
Koordinator Program
Mandiri Autisma Website - Portfolio | Javapixa Creative Studio