Ma’had Nurul Ilmi is a newly founded pesantren whose only presence was scattered posts across YouTube, Instagram, TikTok, and Facebook. So it needed an official website to introduce its programs and curriculum to prospective students and parents from outside the area.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
Work like this is usually split between a developer, a UI/UX designer, a graphic designer, and a marketer. On this project, one person holds all four of those skill sets, so every decision came from someone who understood the whole project, not just their own part of it.
16
standards met, from code to marketing.
Business impact here is measured across 4 areas: Presence, Quality, Trust and Growth. Together they cover how the business is found, perceived, and acted on.
Information that stays findable, not buried
Before
A newly founded institution relying only on social media, YouTube, Instagram, TikTok, and Facebook, to share its programs has that information buried under newer posts within days, with no dedicated place a prospective parent can go back to and check.
After
A website turns that same information into a proper, professional destination, organized by page instead of buried in a feed, so a prospective parent always finds exactly what they need before ever visiting.
Each project draws on a mix of disciplines: here’s how they came together on this one.
The tools and technologies that came together to bring this project to life.
The problems that came up while building this project, and what came out of solving them.
Structuring a Wide Range of Programs and Curriculum
The school offers many programs, subjects, and areas of Islamic study, plus entrepreneurship activities, so content was organized into clear categories instead of one long list.
Dense Information Navigation
Programs, curriculum, and activities were grouped into separate menus so visitors wouldn’t feel overwhelmed by one long page.
Building Credibility for a New Institution
As a newly founded pesantren, the site needed to build trust through detailed program information and real activity photos rather than institutional history.
The technical problems fixed while building this project.
Backed up and recoverable, not one failure away from gone
Images under 200KB
Monitored and maintained, not left to drift
Consistent structure, every article
Before
A site with no SSL certificate and no backup routine is one server failure, hack, or expired certificate away from losing everything, with no way to recover.
After
SSL, routine backups, and site speed optimization were configured from setup, so the site stays secure, recoverable, and reliable if anything ever goes wrong.
Before
High-resolution images across the site, not just one section, risked slowing down every page.
After
Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.
Before
A site left unmaintained after launch, unpatched plugins, no uptime monitoring, quietly accumulates risk and downtime that often goes unnoticed until something actually breaks.
After
Ongoing maintenance keeps plugins and themes updated and monitors performance and uptime, catching issues before they become visible problems.
Before
Publishing religious articles, education content, admission announcements, and activity updates without a consistent structure would mean rebuilding formatting and layout decisions for every single post.
After
A dedicated blog architecture and templates handle formatting and layout consistently, so publishing a new article is a content task, not a rebuilding-the-page task.
