Eden & Blooms – Studio & Floral Experience
End-to-End Product Design, Frontend Engineering & Vercel Deployment
Conceived in Figma, programmed from clean slate, deployed to Vercel.
Lighthouse performance with sub-second page delivery worldwide.
Frictionless inquiry booking flow directly synced with calendar.
Fluid physics-based balloon and floral interactive showcases.
Design & Architecture Walkthrough
Full-cycle product design and frontend development for an event decor studio. Designed in Figma and built from scratch with Next.js, Tailwind CSS, and Framer Motion. Features interactive service showcases, organic balloon & floral gallery viewers, booking flows, and high-performance Vercel cloud deployment.
The Friction Baseline & Funnel Drop-off.
High-end event decor brands struggle with heavy media assets. Traditional WordPress portfolio templates loaded slowly (>6.5s load times), degrading the luxurious brand perception and causing mobile visitors to abandon before viewing custom installations.
Heavy uncompressed photography degraded Core Web Vitals and caused high bounce rates.
Clients had to fill out clunky external contact forms rather than selecting specific packages.
Lack of interactive gallery navigation prevented customers from visualizing custom balloon color palettes.
Architectural Execution & Strategic Decisions.
Every design choice optimized for conversion velocity, human clarity, and system scalability.
Bespoke full-stack engineering over bloated website builders
“Pre-packaged templates carry immense JavaScript weight. Building from scratch with Next.js App Router, Tailwind, and Vercel Edge caching delivered an instant 60fps editorial browsing experience.”
- Edge-cached optimized modern image formats (AVIF/WebP) with blur-up placeholders.
- Zero layout shift fluid masonry galleries for event installations.
- Mobile-first gesture-driven swipe interactions.
Frictionless consultation drawer tied directly to package configurations
“Rather than forcing clients onto generic contact pages, clicking any floral arrangement or luxury balloon arch opens a contextual consultation drawer pre-filled with package specifications.”
- Contextual drawer keeps users on the visual page while capturing project scope.
- Dynamic pricing estimator and date availability calendar integration.
Before & After Transformation Matrix.
- ✕6.5s load time on traditional WordPress hosting
- ✕Clunky generic contact form with no package pre-selection
- ✕Static image thumbnails without interactive viewing states
- ✕High bounce rate on high-intent mobile visitors
- ✓Sub-second delivery with Next.js 14 on Vercel Edge
- ✓Contextual package booking drawer boosting inquiries by +85%
- ✓Fluid 60fps gesture-driven showcase with instant image previews
- ✓Fully deployed in production with continuous git CI/CD pipeline
Shipped Production Assets & Specifications.
- High-end bespoke editorial visual identity designed in Figma
- Fluid 60FPS motion showcase powered by Framer Motion
- Interactive consultation booking drawer flow with calendar sync
- Full CI/CD pipeline on Vercel with edge image optimization