Fadhil Official Logo
Fadhil NuruzzamanSoftware Engineer
Fadhil Official Logo
Company ProfileMutiara Aqiqah Kendari2022

Mutiara Aqiqah Kendari: Company Profile Website

Mutiara Aqiqah Kendari offers a full range of aqiqah services, but their service list and pricing used to be available only by phone or in-person visit. So this project built a company profile on Blogger with a custom-coded theme, giving prospective customers a way to compare packages and order directly through WhatsApp.

Preview

Walk Through the Site

A scrollable look at the finished site, exactly as a visitor would browse it.

Mutiara Aqiqah Kendari: Company Profile Website desktop preview

Desktop

Mutiara Aqiqah Kendari: Company Profile Website mobile preview

Mobile

Tech Stack

Technologies Powering the Build

The tools and technologies that came together to bring this project to life.

HTML logo
CSS logo
JavaScript logo
Tailwind CSS logo
Blogger logo
Google Analytics logo
VSCode logo
NPM logo
Claude logo
Figma logo

Roles

A Skill-by-Skill Breakdown

Each project draws on a mix of disciplines, here's how they came together on this one.

Web Development

  • Purchased the domain and configured DNS to point to Blogger.
  • Hand-coded a custom Blogger theme from scratch in XML.
  • Built the package detail pages with portion selection and full specifications.
  • Implemented dynamic, pre-filled WhatsApp order links generated from each package's details.
  • Integrated a location map and direct contact links.
  • Optimized page speed and image delivery for mobile visitors.

Web Design

  • Designed the full UI/UX in Figma before slicing it into the Blogger theme.
  • Designed a transparent, easy-to-scan services and pricing layout.
  • Designed the package detail flow: portion selection, specifications, and price display.
  • Let visitors compare packages without contacting sales first.
  • Kept the design warm and approachable for a family-oriented service.

Graphic Design

  • Designed the logo, color palette, and typography system from scratch.
  • Prepared and edited service photography for the site.
  • Designed simple icons to highlight service advantages.
  • Kept a consistent visual style across the services section.
  • Created the site's favicon.
  • Compressed every image to WebP and under 200KB before upload, without a visible drop in quality.

Digital Marketing

  • Wrote clear service descriptions to reduce back-and-forth before contact.
  • Wrote blog posts documenting previously completed orders.
  • Optimized content around local keywords: "aqiqah kendari," "jasa aqiqah kendari," and "katering aqiqah kendari".
  • Set up Google Search Console and Google Analytics to monitor traffic.
  • Set up and completed the Google My Business listing for local search visibility.

Highlights

Behind the Scenes

A closer look at what the finished product offers, the obstacles along the way, and what came out of it.

Key Features

  • Fully responsive design across desktop and mobile devices.
  • Optimized images for fast loading.
  • Google Analytics and Search Console integration.
  • Company profile detailing the business.
  • Complete aqiqah service list with pricing per package.
  • Package detail pages with portion options and full specifications.
  • Pre-filled WhatsApp order message generated from the selected package.
  • Floating WhatsApp button.
  • Blog documenting previously completed orders.
  • Photo gallery.
  • Address information and an embedded location map.
  • Google My Business listing for local search presence.
  • Highlighted advantages over other service providers.

Challenges Faced

Building a Custom Blogger Theme From Scratch

Blogger doesn't support component libraries like typical web frameworks, so the entire theme was hand-coded in XML using Blogger's templating tags to get full design control.

Building the Pre-Filled WhatsApp Order Flow

Each package needed to generate a WhatsApp link pre-filled with the selected product and portion details, built with JavaScript to dynamically construct the message.

Lessons Learned

  • Learned to hand-code a custom Blogger theme in XML, a very different workflow from a typical component-based framework.
  • Practiced writing service descriptions that reduce back-and-forth before a sale.

Impacts

Problems Solved After Launch

How this project changed things for the business and its users after launch.

Zero hosting costs

Images under 200KB

Transparent service info

Pre-filled order messages

3 targeted local keywords

Clear package specifications

Critical Fix

Zero Hosting Costs Through Blogger

Before

A typical WordPress or custom-hosted website would mean ongoing hosting fees for a small local business.

After

Building on Blogger with a custom-coded theme delivers a fully custom design at zero hosting cost.

Performance

Slow-Loading Pages From Unoptimized Images

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.

Improvement

Service & Price Transparency for Prospective Customers

Before

Prospective customers had to call or visit in person just to learn service details and pricing.

After

All services and price ranges can now be viewed directly on the website before reaching out.

Improvement

Streamlined WhatsApp Ordering

Before

Customers had to type out their order details manually when messaging on WhatsApp, and staff had to ask clarifying questions.

After

Each package generates a pre-filled WhatsApp message with the exact product and portion selected, reducing back-and-forth for both customers and staff.

Improvement

New Local Search Presence

Before

The business had no presence in Google's local search or Maps results, and no dedicated SEO for aqiqah-related searches.

After

A Google My Business listing plus SEO targeting keywords like "aqiqah kendari," "jasa aqiqah kendari," and "katering aqiqah kendari" gives the business visibility for local searches.

Improvement

Fewer Mismatched Orders

Before

Without clear package specifications, customers could order the wrong portion size or miss what was included.

After

Each package page lists full specifications and portion options upfront, reducing mismatched orders.