Loading image 1...
MandiriAutismaWebsite
UI/UX Design and WPBakery Page Builder Implementation for Therapy Center
_khK8dRdJS.png&w=3840&q=75)
Mandiri Autisma Website
Mandiri Autisma Website
UI/UX Design and WPBakery Page Builder Implementation for Therapy Center
UI/UX Design and WPBakery Page Builder Implementation for Therapy Center
Designed the complete UI/UX in Figma and built the official website using WPBakery Page Builder within WordPress. This approach ensured the client could easily manage therapy programs, gallery updates, and content via a visual drag-and-drop interface, while maintaining the high visual fidelity established in the design.
The Problem
The primary challenge was balancing the professional credibility required for a therapy center with a warm, inviting interface, while providing the client with a robust, non-technical backend (WordPress with WPBakery) to manage frequent content updates (programs, testimonials, and operating hours).
Developed the site using a lightweight base theme and implemented the custom Figma design logic via WPBakery Page Builder. Used PHP for backend logic, including Custom Post Types to structure the "Program" cards and gallery, and created specific WPBakery elements to ensure high visual fidelity and easy content editing for the client.
Visual Journey
Project Showcase
Loading image 1...
Screenshot 1
Project visualization and interface design
TechStack
WordPress CMS
CMS
WPBakery Page Builder
Page Builder/Visual Editor
PHP
Backend Language
HTML5 / CSS3
Frontend
Tailwind CSS (via custom integration)
Styling
Figma
UI/UX Design
KeyFeatures
High-Impact Free Service Banner
Prominent, colorful header banner advertising "Layanan Terapis GRATIS" with dynamic operating hours and contact methods (WhatsApp, Phone).
WPBakery-Integrated Program Modules
Created custom WPBakery elements linked to WordPress Custom Post Types for structuring unique programs (Fun Sport, Bina Tani, etc.), ensuring easy client editing.
Empathy-Driven UI/UX Design
Implemented a warm, professional aesthetic (greens and yellows) designed to instill trust and reduce anxiety for parents seeking help.
Testimonial and Trust Showcase
Dedicated module (blue cards) for showcasing press mentions, authority logos, and client testimonials to enhance credibility.
Facility and Trust Gallery
A flexible, managed photo gallery showcasing the center’s outdoor facilities and therapy rooms, easily updated via the WordPress Media Library.
Optimized Mobile Accessibility
Full mobile-first design implementation across all modules, ensuring high readability and easy access to therapy contact information on smaller screens.
OurProcess
A detailed look at how we brought this project from concept to reality through our proven methodology.
Design & Visual Strategy (Figma)
Defined the primary user persona and created high-fidelity mockups of the landing page and program cards in Figma.
WPBakery Setup & Custom Element Creation
Configured WordPress and WPBakery. Coded necessary custom PHP-based WPBakery elements and CSS to implement the Figma design and ensure visual fidelity within the page builder environment.
Content Integration & Client Training
Integrated initial content (programs, gallery). Conducted full training for the client on using the WPBakery visual editor and the WordPress dashboard for self-management.
Final QA & Deployment
Executed final QA, ensuring cross-browser stability and testing the visual editor functions. Final launch to the production environment.
04 Outcomes delivered
- 01Created an empathetic and professional visual design appropriate for a therapy center.
- 02Provided the client with an intuitive WPBakery/WordPress interface for self-managing all page content and program details.
- 03Successfully organized complex program information into visually digestible, editor-friendly WPBakery modules.
- 04Implemented a clear, high-contrast banner to drive enrollment in the free service program.
The redesigned website is warm and professional. Parents immediately know how to contact us and clearly see the range of unique programs we offer. The WordPress backend is intuitive and perfect for our team to manage.