Before / After · Case Study

Jackie J Skin — a WooCommerce skincare store rebuilt as quiet luxury

Beauty & Wellness

Jackie Jensen's second brand: a skincare line that had been living on a WooCommerce/WordPress store at jackiejskin.com. The rebuild is a bespoke Next.js 16 storefront that is deliberately the aesthetic opposite of her dark-neon DJ site — warm, quiet-luxury, editorial. The catalog was ripped via the public WooCommerce/WordPress REST APIs into a static, zero-DB-hit catalog (6 products, 10 pages), and the design carries real motion craft: a scroll-pinned horizontal four-step ritual section, an ingredient particle field, and mouse-depth product tilt. Payments are a deliberate Stripe drop-in deferral, and her Proofpoint-hosted email was left untouched — the rebuild never risks her inbox.

“Same client, opposite brand: the DJ site is neon at midnight; the skin line is morning light — and neither should share a template.”

jackiejskin-storefront.vercel.app↗Legacy → jackiejskin.com↗Repo → og-gitclaw/jackiejskin-storefront↗

🔒jackiejskin-storefront.vercel.app

🔒jackiejskin.com

Before

Receipts — measured

Numbers that moved.

Products migrated to the static catalog

was 0

Pages carried over

was 0

Routes building clean

was 0

DB queries per catalog page view

was 1

WooCommerce/WordPress → bespoke Next.js 16 storefront
6 products / 10 pages ripped via public WC/WP REST → static zero-DB catalog
25 routes build clean; GSAP + Lenis + Motion craft throughout
Proofpoint email deliberately untouched — no MX risk in the rebuild

The pixel diff

Overview, then the walkthrough.

Left: everything the legacy site shipped — frozen in place. Right: an auto-scrolling tour of the rebuild, from hero to booking. No slider to fight with.

The four beats

Problem · Insight · Build · Outcome.

Scroll past the legacy frame. The four beats land in order. At the end, the modern site fades into the same window.

🔒jackiejskin.com

🔒jackiejskin-storefront.vercel.app

01 · Problem
A premium product wearing a rented theme.
The skincare line sold through a standard WooCommerce setup: theme-bound design, database-bound performance, and a look that had nothing to do with the product's actual positioning — while sharing an owner with one of the most distinctive brand sites in the portfolio.
02 · Insight
Two brands, one owner — the design system must fork, the playbook needn't.
The DJ playbook (bespoke Next.js, real motion craft, owned data) applies wholesale; the aesthetic inverts. And with only 6 SKUs, the catalog doesn't need a database at all — a static rip is faster, cheaper, and unbreakable.
03 · Build
REST rip → static catalog → editorial motion system.
Catalog extracted via public WC/WP REST. Next.js 16 + Tailwind v4 with GSAP/Lenis: scroll-pinned horizontal ritual, ingredient particle field, mouse-depth tilt. Neon holds ops data only; SES handles transactional; Stripe is a designed drop-in. Proofpoint MX untouched throughout.
04 · Outcome
Live preview, zero-risk cutover path.
jackiejskin-storefront.vercel.app is live with the full experience. Cutover is a DNS change that carries no email risk, and commerce activates whenever the Stripe account connects — both on Jackie's schedule, not the platform's.

🔒jackiejskin.com

01 · Problem

A premium product wearing a rented theme.

The skincare line sold through a standard WooCommerce setup: theme-bound design, database-bound performance, and a look that had nothing to do with the product's actual positioning — while sharing an owner with one of the most distinctive brand sites in the portfolio.

02 · Insight

Two brands, one owner — the design system must fork, the playbook needn't.

The DJ playbook (bespoke Next.js, real motion craft, owned data) applies wholesale; the aesthetic inverts. And with only 6 SKUs, the catalog doesn't need a database at all — a static rip is faster, cheaper, and unbreakable.

03 · Build

REST rip → static catalog → editorial motion system.

Catalog extracted via public WC/WP REST. Next.js 16 + Tailwind v4 with GSAP/Lenis: scroll-pinned horizontal ritual, ingredient particle field, mouse-depth tilt. Neon holds ops data only; SES handles transactional; Stripe is a designed drop-in. Proofpoint MX untouched throughout.

04 · Outcome

Live preview, zero-risk cutover path.

jackiejskin-storefront.vercel.app is live with the full experience. Cutover is a DNS change that carries no email risk, and commerce activates whenever the Stripe account connects — both on Jackie's schedule, not the platform's.

🔒jackiejskin-storefront.vercel.app

Architecture

One chain replaced by another. Receipts above.

Old stack

WordPress
WooCommerce
Theme templates
Per-view DB hits

↓

New stack

Next.js 16
Static zero-DB catalog
GSAP scroll-pinned ritual
Ingredient particle field
SES transactional
Stripe drop-in (staged)

What changed

Grouped by what kind of system shipped.

Each claim ships with concrete evidence — env vars, table names, cadence chips. No marketing fluff.

Design

Quiet luxury as a deliberate inversion of the DJ brand

Same owner, two brands, zero shared aesthetics: where jackiej.events is dark neon and beat-driven, the skin line is warm light, serif restraint, and editorial pacing. The signature piece is a scroll-pinned horizontal four-step ritual section — the routine unfolds sideways as the visitor scrolls — plus an ingredient particle field and mouse-depth product tilt. All GSAP/Lenis, all reduced-motion safe.

Before: A WooCommerce theme that could have sold anything to anyone.
After: A brand-specific editorial surface that could only be this product line.

Agent backbone

Catalog ripped via public REST into a zero-DB static layer

The 6 products and 10 pages were extracted through the public WooCommerce and WordPress REST APIs — no admin access needed — and compiled into a static catalog. Browsing hits no database at all; the storefront is effectively CDN-speed everywhere.

Public WC/WP REST rip — products, copy, imagery
Static catalog module; zero runtime DB reads on browse
25 routes build clean

Retention

The inbox was treated as sacred

Her business email rides Proofpoint. The rebuild deliberately never touches MX — transactional sending is SES on separate identities, and the cutover plan keeps mail exactly where it is. A storefront migration should never gamble a client's inbox, so this one structurally can't.

Before: Any typical replatform would 'helpfully' move the email too.
After: Email untouched by design; the site can cut over with zero mail risk.

Design

Payments deferred honestly — a Stripe drop-in point, not a fake checkout

Rather than shipping a stub pretending to charge, the storefront has a designed Stripe drop-in point that activates when Jackie wants commerce live. Until then it's a full brand + catalog experience with a clean path to payment.

← All rebuilds