UX + WordPress Rebuild / 2026
Rebuilding Alamaar HPL's digital product experience.
I restructured the UX and information architecture, directed the UI design, and developed a custom multilingual WordPress rebuild that introduced structured product discovery, richer finish evaluation, and project enquiries across a 98-finish catalog.
Role: UX strategy · information architecture · design direction · WordPress development · performance engineering
Collaboration: UI design by a collaborating designer, directed and reviewed by Yasser.
The biggest improvement was measurable performance
Comparable desktop PageSpeed Insights lab snapshots show Performance 56 → 99, FCP 4.0s → 0.8s, LCP 6.7s → 0.8s, Speed Index 5.1s → 0.8s, TBT 50ms → 0ms and CLS 0.041 → 0. The same screenshots show Accessibility 83 → 100, Best Practices 69 → 96 and SEO 54 → 100. These are point-in-time lab measurements and can vary between runs.
The product website had outgrown its presentation
The previous Alamaar website already contained company information, a product catalog, individual finish pages, certifications and contact details. The redesign reorganized that existing content around browsing, evaluating and enquiring about materials.
Restructuring product discovery
The new catalog exposes 98 finishes and supports direct retrieval by product name or code plus exploratory browsing through collection, finish and design-family filters, with result counts and pagination.
Giving each finish more context
The rebuilt product-detail system adds product identity and enquiry actions, attributes, application context, core specifications, benefits and related finishes. Application scenes are conceptual visualizations; the original product swatch or material reference remains the source of truth for the finish itself.
From contact information to project enquiry
The rebuilt enquiry flow can collect contact details, project type, an optional product or code, and project requirements before continuing the request through WhatsApp.
One product experience, three languages
English, Arabic and Hindi share the same product-page structure with language-specific content overrides. Arabic adds RTL presentation rules while keeping the same hierarchy and interaction model.
Editable without rebuilding the page
The production site uses native WordPress Gutenberg/FSE with structured ACF controls instead of a page builder. Reusable Gutenberg blocks, ACF v3 controls and inline editing let product content be updated while the front-end design system stays consistent.
The next problem is doing it 98 times
The richer product-page standard creates the next production challenge: preparing assets and structured data across 98 finishes and three languages, then entering that content into the Gutenberg and ACF fields consistently. The next case study covers the system for scaling that work.