zsty.us

Before / After · Case Study

Jackie J Skin — a skincare line finally dressed like the product it sells

  • Beauty & Wellness

Jackie's skincare brand was living on a rented store theme that could have sold anything to anyone. It got its own warm, editorial storefront — every product and page carried over, pages that load instantly, and her business email never touched.

“Same client, opposite brand: the DJ site is neon at midnight; the skin line is morning light — and neither should share a template.”
New build (live)↗Legacy → jackiejskin.com↗Repo → og-gitclaw/jackiejskin-storefront↗
🔒jackiejskin-storefront.vercel.app
jackiej.events — modern site

At a glance

What this rebuild covers.

  • Design

    The signature piece is a four-step skincare ritual that unfolds sideways as you scroll, plus floating ingredient particles and products that tilt gently toward the mouse — all of it calm, and all of it switches off for visitors who prefer less motion.

  • Theme & color

    Same owner as a dark, neon DJ site — so this brand went the opposite way: warm morning light, quiet-luxury serif type, and editorial pacing that feels like a beauty magazine, not a template.

  • Speed

    The old store queried a database every time someone looked at a product; the new catalog is baked in ahead of time, so browsing is instant everywhere with zero database work per visit.

  • Agents

    The entire catalog — products, copy, and imagery — was pulled out of the old store automatically, with no admin passwords needed and nothing retyped by hand.

  • Email

    Her business inbox stays exactly where it is: the rebuild was structured so going live can never interrupt or endanger her email.

  • Selling & payments

    Instead of a fake checkout, the store has a designed drop-in point for payments that switches on the moment Jackie is ready to sell online — on her schedule, not the platform's.

Receipts — measured

Numbers that moved.

0
Products migrated to the static catalog
was 0
0
Pages carried over
was 0
0
Routes building clean
was 0
1
DB queries per catalog page view
was 1
  • 6 products + 10 pages carried over
  • 0 database calls while browsing
  • 0 risk to her email inbox
  • Opposite look from her DJ brand — on purpose

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.

Before — the overview
🔒jackiejskin.com
Before — the overview

This is everything the legacy site had to offer above the fold. No pricing, no calendar, no booking — the funnel ended at a mailto.

After — scroll through what shipped
🔒jackiejskin-storefront.vercel.app
After — scroll through what shipped

Auto-scrolls through the modern site so you can see the booking surface, the package grid, the pricing table, and the calendar inline — without leaving this page.

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
Legacy
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
Modern
For the technically curiousHow it was done
  1. 01

    Where it started

    The skincare line sold through a standard WordPress + WooCommerce setup: a theme-bound design that had nothing to do with the product's premium positioning, and a database query behind every catalog view. Meanwhile the same owner already had one of the most distinctive brand sites in the portfolio — her DJ site — so the gap was obvious.

  2. 02

    The design fork

    Two brands, one owner: the playbook carries over, the aesthetic inverts. Where the DJ site is neon at midnight, the skin line is morning light — serif restraint, editorial pacing, a scroll-pinned horizontal four-step ritual section, an ingredient particle field, and mouse-depth product tilt. Every motion effect respects reduced-motion preferences.

  3. 03

    The catalog rip

    The 6 products and 10 pages were extracted through WooCommerce and WordPress's public REST APIs — no admin access required — and compiled into a static catalog. Browsing hits no database at all; the storefront serves at CDN speed everywhere, and all 25 routes build clean.

  4. 04

    The inbox treated as sacred

    Her business email rides Proofpoint, and the rebuild deliberately never touches the mail records. Transactional sending runs through our email service on separate identities, so the site can cut over with zero risk to her inbox — a storefront migration should never gamble a client's email, and this one structurally can't.

  5. 05

    What runs now

    The full experience is live as a preview on our hosting platform, with operational data in a managed database. Going live on her domain is a single DNS change that carries no email risk, and commerce activates through a designed payment drop-in whenever Jackie connects her account — an honest deferral, not a stub pretending to charge.

Architecture

Old stack
  • WordPress
  • WooCommerce
  • Theme templates
  • Per-view DB hits
↓
New stack
  • modern web framework
  • Static zero-DB catalog
  • GSAP scroll-pinned ritual
  • Ingredient particle field
  • transactional email rails
  • Stripe drop-in (staged)

What changed, with evidence

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

Jackie J Skin — a skincare line finally dressed like the product it sells — zsty.us