Skip to main content
stack.com
Next.jsMagento 2TypeScriptAlgoliaPWA
Wychwood Art Gallery
Modern headless eCommerce gallery for original contemporary art with high-performance PWA experience.
Project Overview
We helped modernize the Wychwood Art experience with a headless PWA architecture. The new build centers on fast artwork discovery, seamless artist storytelling, and conversion‑focused journeys. Optimizations across rendering, media delivery, and search relevance produced measurable improvements in engagement and revenue metrics while creating a scalable foundation for editorial and catalog growth. The site now showcases over 300 artists with real-time inventory management, personalized collections, and advanced filtering capabilities that allow art buyers to discover perfect pieces instantly.
Screenshots
Art Gallery Homepage with Featured Collections
Artwork Detail with High-Resolution Gallery
Artist Profile with Collection Grid
Key Features
- Instant artwork search & smart faceting by medium, artist, and price
- Artist landing pages with curated collections and biographies
- High-fidelity responsive image delivery with gallery zoom
- Server components & ISR for scalable performance on 300+ artworks
- Persistent wishlist & recently viewed with account sync
- Rich SEO with structured data for artworks, artists, and collections
- Commission flow for sold artwork with artist contact integration
- Multi-filter discovery: by price range, style, technique, and mood
Challenges
- Balancing ultra-high-resolution artwork imagery with performance targets
- Unifying 15 years of legacy Magento data into clean headless schema
- Delivering fast search and faceted filtering across dynamic 5000+ SKU catalog
- Maintaining 90+ Lighthouse scores under heavy image merchandising load
Solutions
- Progressive JPEG + AVIF with blur placeholders & adaptive quality
- GraphQL layer with normalized schema, caching directives, and batch queries
- Algolia with custom ranking, synonyms, and facet grouping for art discovery
- ISR strategy with 3600s revalidation + stale-while-revalidate headers
Key Metrics
+32%
Conversion Lift
1.1s
LCP Desktop
15k+
Monthly Visitors
Technology Stack
Frontend
Next.jsReactTypeScriptTailwindCSS
Backend
Magento 2 (Headless)Node.jsGraphQL
Search
AlgoliaDynamic Faceting
Infra
VercelCloudflare ImagesCI/CD
Results
- Reduced initial payload by 48% (from 2.2MB to 1.1MB)
- Achieved LCP of 1.1s desktop / 2.0s mobile on median connections
- Art discovery page engagement increased +27% YoY
- Search bounce rate dropped from 28% to 9% after facet UX refinement
- Commission inquiry conversion lifted +18% with streamlined process
interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; }