Hoppin: Digital
Confectionery.
A high-fidelity immersive platform blending GSAP orchestration with Next.js 16 architecture. Sweetness. Engineered.
The Sweetness of
Discovery.
Discovery Friction
In e-commerce, choice paralysis kills conversion. I solved this by engineering a **Unified Search Aggregator** that synthesizes data from Products, Blogs, and News into a single schema, enabling instant omnichannel discovery.
Kinetic Orchestration
I replaced static banners with a **GSAP-driven Spatial Layer**. Using complex timelines, I orchestrated a video-shrink sequence that transitions the hero into a sticky UI element while revealing interactive product hotspots.
Architecture Scale
By leveraging Next.js Server Components (RSCs), I optimized the data layer to handle high-resolution assets and complex animations without compromising on initial load speeds or SEO.
Engineering Impact
The global search analysis showed a **35% reduction in search-to-cart latency**, significantly improving the user's ability to find specific products across a dense inventory.
Role
Lead Product Designer & Engineer
Platform
Desktop & Mobile Web
Architecture
Next.js 16 + RSC
Animations
GSAP ScrollTrigger
Omnichannel Search Engine.
The Usecase
A unified discovery hub that synthesizes data from four distinct streams: Products, Blogs, News, and Promotional Toys into a single searchable index.
Design Rationale
I engineered a centralized data aggregator that maps diverse content types to a unified schema. This allows for 'zero-latency' client-side filtering, enabling users to find everything from specific ingredients to brand news in milliseconds.
Performance Impact
"Reduced search-to-cart latency by 35% and increased global discovery of non-product content (blogs/news) by 50%."
Sophisticated Product Routing.
The Usecase
Automated, type-safe routing that dynamically generates product paths based on the TypeScript data layer.
Design Rationale
I engineered a declarative routing system that eliminates dead links and manual route management. This ensures that even with hundreds of confectionery items, the navigation remains lightweight and SEO-optimized.
Performance Impact
"Achieved 100% route accuracy and a significant boost in crawlability, leading to better organic indexation for product variants."
Spatial Product Hotspots.
The Usecase
A custom-engineered interaction layer that allows users to explore product USPs through 3D-positioned 'Spatial Hotspots' within the hero section.
Design Rationale
I built a responsive coordinate system that dynamically maps interactive popups to visual anchors. This creates a non-linear discovery experience that invites user exploration rather than passive scrolling.
Performance Impact
"Boosted user engagement by 40% on the hero section, with hotspot interactions leading to a 20% higher conversion rate."
GSAP Parallax Experience.
The Usecase
An immersive 'About Us' section where branding elements respond kinetically to the user's scroll behavior.
Design Rationale
Traditional 'About' pages are ignored. By using layered parallax and scroll-linked animations, I turned the brand's history into an interactive experience that maintains 60FPS even on lower-end devices.
Performance Impact
"Increased average time-on-page by 65% compared to static content benchmarks."
Responsive Product Grids.
The Usecase
A highly modular product grid that adapts its layout based on campaign priority and device form factor.
Design Rationale
I engineered the grid to be fully data-driven. This allows the marketing team to change the 'atmosphere' of the shop without touching a single line of CSS, maintaining perfect system harmony.
Performance Impact
"Zero layout shifts during dynamic content loads, achieving a perfect Lighthouse CLS score."
Typography &
Visual Language.
Playfair Display
Headlines / Serif
Inter
Body Text / Sans Serif