RA Mutiara Islam Kendari runs Meta and TikTok ad campaigns every admission season. It needed a landing page built specifically to convert that paid traffic, not just a general information page shared organically over WhatsApp.
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 5 areas: Presence, Quality, Trust, Conversion and Growth. Together they cover how the business is found, perceived, and acted on.
Tracked, retargeted, and refined by real data
Before
There was no way to track which visitors came from ads, retarget them later, or use any real visitor data, breakpoint, screen size, location, load time, to guide design decisions.
After
Built-in tracking now follows ad-driven visitors for retargeting, while analytics on breakpoints, screen size, location, and load time directly shape ongoing page refinements.
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.
Very Short Turnaround Time
The landing page had to launch before the registration season started, so the initial build was sped up using Tailwind CSS for rapid styling.
Optimizing for Paid Ad Traffic, Not Just Organic Visitors
Traffic arriving from Meta and TikTok ads behaves differently from organic visitors, so page structure and content were continuously refined based on Google Analytics data on breakpoints, screen size, location, and load time.
Hitting a Perfect Google PageSpeed Score
Getting a green score across all four PageSpeed categories required careful optimization of image, JS, and CSS delivery across many device breakpoints.
The technical problems fixed while building this project.
Launched on time, zero cut corners
PageSpeed green across all 4 categories
Images under 200KB
Every change tracked, every change reversible
Before
Building a fully custom design from scratch on a tight deadline, before the registration season started, risked shipping late or cutting corners just to launch on time.
After
A utility-first CSS approach sped up styling significantly, hitting the deadline without sacrificing design quality or cutting any planned section.
Before
Early performance was inconsistent across the four Google PageSpeed categories.
After
Continuous optimization of images, JS, and CSS delivery brought all four categories into the green.
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
Making updates without version control or a structured deployment process risks losing track of changes or breaking the live page with no way to roll back.
After
The codebase is managed on GitHub and deployed through a connected hosting pipeline, so every change is tracked and any update can be rolled back if something breaks.
