Project URL: wilbourneneri.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 Dr. Wilbourne Neri Dental Clinic website prototype. Responsibilities included website planning, user experience design, visual design, responsive frontend implementation, content structuring, and conversion-focused landing page development.


1. Executive Summary

This case study details the design and development of a demonstration website prototype created to showcase how a modern dental clinic website could be designed and structured. Built using a modern Jamstack architecture and deployed on Cloudflare Pages, the site presents a professional online presence for a dental practice through a clean user experience, clear service presentation, and appointment-focused layout. The website explicitly states that it is a development prototype and is not an official website commissioned or approved by Dr. Wilbourne Neri.


2. The Problem & Local Context

Patients evaluating a new dental practice rely on a website to quickly gauge trustworthiness, available treatments, and the practitioner's credentials. A cluttered or slow site creates immediate doubt and drives prospective patients toward competitors, especially for visitors browsing on mobile data connections in Cagayan de Oro.

The prototype was built around three core requirements:

  • Professional Trust Presentation: Establishing credibility through experience metrics, patient satisfaction figures, and a dedicated practitioner profile.
  • Clear Service Organization: Structuring dental treatments into distinct, easily scannable categories.
  • Appointment-Focused Conversion: Guiding visitors toward contact through visible, repeated calls to action.

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, optimized CSS, and minimal vanilla JavaScript within a modern single-page layout, 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) is near-instantaneous 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. Trust-Building Elements & Practitioner Profile

The design incorporates multiple credibility indicators—years of experience, clinical work metrics, procedure counts, and patient satisfaction figures—presented prominently near the top of the page to establish trust and professionalism. A dedicated section introduces Dr. Wilbourne Neri with his professional background, education, experience, specialties, and affiliations, personalizing the practice and strengthening visitor confidence.

B. Service Presentation

Dental services are organized into individual service cards—Tooth Protection, Dental Implants, Dental Care, Teeth Whitening, Restorative Dentistry, and Preventive Care—allowing visitors to quickly understand available treatment categories.

C. Conversion-Focused UX & Social Proof

A testimonial section featuring sample patient reviews and locations demonstrates how social proof can be integrated into a healthcare website. Multiple appointment call-to-action buttons, service-focused messaging, trust indicators, and contact information displayed in multiple locations guide users toward the inquiry form, which is placed near the end of the page. The site concludes with clinic address, phone, email, and operating hours. The contact form includes a notice explaining that submissions are disabled because the website is a demonstration prototype.


5. Results & Technical Impact

  • Responsive Single-Page Architecture: A modern layout with clearly separated content sections (Home, About, Services, Testimonials, Dentist Profile, Contact) improves navigation and content organization.
  • Conversion-Oriented UX Structure: Repeated calls to action and inquiry form placement near the end of the page guide visitors toward making contact.
  • Hardened Security: With no exposed database or dynamic CMS, the site is inherently secure against common web vulnerabilities.
  • Frictionless UX: Prospective patients can evaluate services, practitioner credentials, and contact details within a single-page experience.

6. Conclusion

This project illustrates how a dental clinic website can combine professional branding, service presentation, practitioner credibility, and patient inquiry pathways within a single-page experience. While created as a demonstration prototype, it showcases the design and development approach that can be adapted for real healthcare clients.

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

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