MX Zermatt

The Brief

MX Zermatt is a premium chalet rental business in the Swiss Alps. The existing WordPress site was dated and underperforming — the brief was to rebuild it as a high-performance property showcase that could convert high-net-worth visitors browsing luxury ski accommodation, with full English and German language support.

My Role

I built the custom WordPress theme and all React-powered interactive components, working from Figma designs provided by the client's creative team. I was responsible for the full build: theme development, React integration, WPML configuration, performance optimisation, and deployment. There was no agency involved — I worked directly with the client.

Technical Approach

Rather than using a page-builder, I built a custom WordPress theme with React components embedded at key points in the page. This gave full control over markup quality and performance that a page-builder approach couldn't match.

The standout feature is the interactive chalet location map — a React component consuming the Google Maps JavaScript API. Each property is represented as a custom marker with hover states, click-to-expand detail panels, and a responsive layout across viewport sizes. To avoid penalising initial page load, the Maps SDK is loaded lazily via Intersection Observer — it only initialises when the map scrolls into view.

WPML handles content translation across English and German, with custom string tables for UI text outside the CMS. Particular care was taken with hreflang tag configuration for correct search engine localisation signals.

Performance was treated as a first-class concern throughout. The result at launch was Lighthouse scores of 98–100 across all metrics.

Key Features

• Interactive property map — React component using the Google Maps JavaScript API with custom markers, hover states, and click-to-expand detail panels
• Lazy map initialisation — Google Maps SDK loaded via Intersection Observer to avoid blocking initial page load
• WPML multilingual — full English/German translation with custom string tables and correctly configured hreflang tags
• Custom WordPress theme — hand-built from Figma designs, no page-builder, with clean template hierarchy and custom post types
• WebP image pipeline — responsive srcsets and WebP delivery for all property photography
• Lighthouse 98–100 — achieved across Performance, Accessibility, Best Practices, and SEO at launch

Tech Stack

React · WordPress · PHP · Elementor · WPML · Google Maps JavaScript API · Figma · WebP pipeline

Results

Bounce rate dropped 34% compared to the previous site. The client reported a measurable increase in direct enquiries within the first month post-launch.