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.
Screenshots
Gallery Hero
Artwork Detail Page
Artist Profile
Key Features
- Instant artwork search & smart faceting
- Artist landing pages with curated collections
- Optimized responsive image delivery
- Server components & ISR for scalable performance
- Persistent wishlist & recently viewed
- SEO structured data for artworks & artists
Challenges
- Balancing high-resolution imagery with performance
- Unifying legacy Magento data into a clean headless schema
- Delivering fast search across a dynamic catalog
- Maintaining strong Core Web Vitals under merchandising load
Solutions
- Progressive image loading + AVIF/WEBP fallback strategy
- GraphQL layer normalization & caching directives
- Algolia index design with relevance tuning & synonyms
- Edge caching & ISR tuning for high‑traffic landing pages
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 size by 48%
- Improved LCP to ~1.1s desktop / ~2.0s mobile median
- Increased artwork detail page engagement +27%
- Lowered bounce rate on search by 19%
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[]; }