Project URL: ladentalstudio.pages.dev

Portfolio Exhibit: bongaceron.pages.dev

Role: Front-End Developer / Jamstack Specialist. I served as the UI/UX Designer and Frontend Developer for the L.A. Dental Studio landing page prototype. Responsibilities included website planning, user experience design, visual design, responsive frontend implementation, content structuring, branding, and conversion-focused booking integration.


1. Executive Summary

L.A. Dental Studio is a premier dental clinic brand operating two highly rated branches in Cagayan de Oro (CDO), Philippines (Downtown Gaston Park and Uptown Xavier Heights). Known for premium oral care, specialized TMJ/airway dentistry, and an exclusive home-care product line, the clinic required a digital presence that matched its upscale, modern physical branding.

This case study details the development of a demonstration landing page prototype designed to bridge the gap between social media discovery and an online patient booking funnel. Built using a modern Jamstack architecture and deployed on Cloudflare Pages, the project presents a professional online presence through clean visual hierarchy, transparent location info, intuitive service showcase, and streamlined appointment routing. The website clearly indicates that it is a development prototype and is not an official website commissioned or endorsed by any clinic or business.


2. The Problem & Local Context

Healthcare brands in Cagayan de Oro frequently rely on social media pages as their primary digital touchpoint, a channel that limits structured patient bookings and makes clinic information difficult to scan on the go. For a multi-branch dental clinic, a slow or cluttered website creates immediate friction for prospective patients browsing on mobile data connections.

The prototype was built around three core requirements:

  • Instantaneous Performance: Must load instantly on local mobile networks so patients can check branches, services, and products without delay.
  • Structured Booking Intake: Replacing scattered social media inquiries with clear, dual-option pathways for scheduling an appointment.
  • Premium Trust Presentation: Reflecting the clinic's upscale, sterile-yet-welcoming brand with transparent location, rating, and operating information.

3. Technical Strategy & Architecture

To ensure maximum speed, security, and zero maintenance overhead, the prototype was developed using a decoupled, Jamstack architecture:

  • Static Generation: The entire interface is pre-rendered into semantic HTML and custom-tailored Tailwind CSS, with hand-coded inline SVGs replacing heavy font icons. No heavy client-side frameworks were used, keeping the asset footprint small.
  • Global CDN Deployment: Hosted on Cloudflare Pages. By serving the site directly from the network edge, the Time-to-First-Byte (TTFB) stays under 300ms across patient browsers.
  • Managed Edge Infrastructure & Hosting: By leveraging an advanced serverless static architecture on enterprise-grade edge networks, the platform scales automatically to handle traffic spikes. This setup eliminates database maintenance, server patching, and dynamic backend hosting fees, delivering continuous uptime and high reliability.

4. Key Design & Implementation Features

A. Multi-Branch & Social Proof Showcase

A dedicated section highlights the clinic's two CDO locations alongside verified ratings (4.8★ and 5.0★). This establishes instant local credibility and helps patients find their nearest branch right away.

B. Specialized Services & Dual-Option Appointment Routing

The prototype highlights core treatments and exclusive oral care products using clean imagery and concise descriptions, demonstrating how clinics can organize complex medical services without overwhelming potential patients. Instead of relying on a single complex booking form, the page implements two distinct pathways: a direct online booking route for high-intent users tapping through to external scheduling tools (mymedsph), and a low-friction localized inquiry form capturing branch choice, service interest, and contact details for direct follow-ups.

C. Conversion-Focused Healthcare UX

Persistent, thumb-friendly navigation with fixed booking actions, high-contrast typography, and localized micro-copy guide patients toward appointments. The page concludes with essential clinic information, including Downtown and Uptown branch addresses, direct contact details, social links, daily operating schedules, and interactive map indicators.


5. Results & Technical Impact

  • Near-Perfect Lighthouse Scores: Consistently high scores across all four Lighthouse categories (Performance, Accessibility, Best Practices, and SEO).
  • Sub-300ms Time-to-First-Byte: Edge delivery on Cloudflare Pages ensures near-instant page loads on local cellular networks.
  • Hardened Security: With no exposed database or dynamic CMS, the site is immune to traditional CMS database vulnerabilities.
  • Frictionless UX: Patients can evaluate branches, services, and products and initiate a booking within seconds of opening the page.

6. Conclusion

The L.A. Dental Studio prototype demonstrates how a healthcare website can combine premium branding, clear location details, and conversion-focused booking funnels within a lightning-fast static frontend. While created as a demonstration prototype, it showcases the design and development approach that can be adapted for real clinics and local service businesses looking to convert social media traffic into booked clients.

Visit the website I created here: ladentalstudio.pages.dev

Explore more lightweight, high-performance web solutions at bongaceron.pages.dev.