Diagnosis

I didn't start with Figma. I started by walking the site.

My first weeks were a heuristic walkthrough of the full experience. I paired that with team conversations, a competitive audit of other DTC personal care brands, and scroll depth data from Hotjar.

The pattern was clear. Users were landing, engaging, and showing interest, but the experience had more room to guide them toward the next step.

Two issues kept surfacing.

Clearer paths forward. Pages were built in isolation, creating an opportunity to connect more moments across the journey. Discoverability needed to become intentional.

More confidence at decision time. Dr. Squatch sells a product that benefits from education, proof, and sensory detail. The opportunity was to bring that information closer to the moments where users decide.

These patterns pointed to a larger opportunity: creating a connective framework that could support a growing site and a broader product story.

Solutions

To build on those structural and informational opportunities, I developed two UX frameworks that would work in tandem across the Dr. Squatch digital experience.

Driftwood established intentional entry and exit points throughout the site, ensuring users always had a clear path forward and improving discoverability across the experience.

Lighthouse brought the right information to the surface at the right moments, strategically placing product education and trust signals where users were most likely to need them before making a purchase decision.

Together they gave the experience a stronger connective backbone, designed equally for the user who wants to feel guided, and the business that needs them to convert.

Section by Section

Intentionally building confidence and informing users

NCO Landing Page System

I inherited NCO landing pages that were built to ship quickly: product image, price, buy button. They worked as destinations, but they did not work hard enough as acquisition experiences.

I rebuilt the approach into a repeatable landing page system around product story, offer clarity, education, social proof, and a low-friction path to purchase. Each page was designed to answer the questions a cold shopper would have before they were ready to buy. In effect, this was Lighthouse and Driftwood applied to acquisition — surfacing the right proof and education at the moment of decision, along a single clear path to purchase.

Old Experience

Before

The original page set the baseline: functional, with an opportunity to add stronger proof, education, and guidance for cold traffic.

↑ ↓

Section 01 / 13

Hero

Clarifies the offer fast with what is included, savings, and a direct path to buy.

AI Assisted Creative

I used image models as a creative production tool for landing pages, especially when a campaign needed stronger product-context imagery than the available photography could support.

The goal was not to make decorative AI images. It was to move faster from concept to testable creative, explore stronger compositions, and create product visuals that helped users understand the offer faster. Models used included Google Nano Banana Pro and Seedream.

Replay

Replay

AI Generated Assets

Tested Patterns

After enough sections tested well with users and pages started performing consistently, the winning pattern became clear: lead with a strong product hero, make the offer easy to understand, explain the product at the right moment, add proof, then make the purchase path feel obvious.

That learning turned growth design from one-off page creation into a system. Each new landing page could start from what already worked, then adjust the story, education, proof points, and offer structure for the campaign.

Winning Hero Image

Every Element Earns Its Place

Each visual cue is intentional — working together to communicate value, build trust, and reduce friction at first glance.

Hand Human size reference

Real Reviews Social proof & trust

Red Corner Free product callout

Bag Icon Free product image

Free Gift in Context Size vs. other items

• HandHuman size reference
• Red CornerFree product callout
• Bag IconFree product image
• Free Gift in ContextSize vs. other items
• Real ReviewsSocial proof & trust

Winning Carousel Image Formula

Business Impact

I designed the landing page system behind Dr. Squatch's current new-customer acquisition engine, supporting $977K/month in ad spend, 55K+ acquired customers, and $17M+ in measured spend across 22+ pages.

The current top NCO pages are not isolated wins. They are the result of a repeatable system for building acquisition pages that educate, persuade, and convert cold traffic while protecting contribution margin.

Dynamic Bundle Builder

I designed a new tiered bundle builder PDP for bar soap that brings custom bundling, tiered pricing, and subscription into one flexible shopping experience. Customers can build a pack from 3 to 12 bars, unlock better pricing as they add more, and choose between one-time purchase or Subscribe & Save.

In planning, we translated the growth goals into product requirements: flexible bundle quantity, tiered pricing milestones, one-time and subscription options, dynamic price updates, and configurable default bundles for paid traffic.

We mapped the core paths for building from scratch, landing on a pre-configured pack, switching between Subscribe and One-time, editing quantities, and handling rules like minimum quantity, max quantity, Limited Edition gating, and out-of-stock scents.

What Sparks Joy

Product Tile Selector

Best Seller

Alpine Sage Aloe, Cypress, Sage Zero Grit

ADD

1 2 3 4 5

Stepper

Build your Bar Soap bundle

3 Bars

$6.00/ea

4 Bars

$5.74/ea

5 Bars

$5.46/ea

6+ Bars

$5.25/ea

BEST DEAL

Bottom Sheet

Add Items for Savings! Saving 14% Saving 18% Saving 22%

0 Selected 1 Selected 2 Selected 3 Selected 4 Selected 5 Selected

No items selected yet

The Chosen One

Bricc'd Up

Super Saiyan Surge

Rainforest Rapids

Alpine Sage

Subscriber Only

ADD AT LEAST 3 ITEMS ADD AT LEAST 2 ITEMS ADD AT LEAST 1 ITEM

ADD TO CART

$21$18 $28$22.96 $35$27.30

Bottom Sheet Collapsed

Saving 14%

3 Selected

The Chosen One

Bricc'd Up

Super Saiyan Surge

Alpine Sage

Rainforest Rapids

Subscriber Only

ADD TO CART

$55$45

Methods

The site had grown faster than its design language. Patterns were copied screen to screen, the same component existed in a dozen near-identical versions, and every new page added a little more drift. I approached the design system not as a sticker sheet but as a product — with a clear strategy, an atomic structure, and rules that let it scale with the brand instead of fighting it.

Our Goals:

I followed atomic design as the organizing principle — tokens and primitives at the base, composed into components, then into the modules and templates teams actually ship. Naming, structure, and documentation were defined so the system reads the same in Figma and in code, and so AI tooling could generate on-brand layouts from the same building blocks rather than inventing new ones.

Impact

The system turned a fragmented set of screens into one coherent product language — faster to design, faster to build, consistent for customers, and structured to scale with the brand and the tools that build it.

Tokens

Before the system, the same Dr. Squatch green lived as five slightly different hex values across the site, and spacing was whatever felt right in the moment. I started at the foundation: a single set of design tokens for color, typography, spacing, radius, and motion that both Figma and the codebase read from.

I structured tokens in layers — raw primitives (brand, accent, mono) composed into component tokens like button/primary — so a refresh means changing one value instead of hunting through every screen. The same names live in Figma variables and in tokens.css, keeping design and engineering on one language across color, type, radius, and elevation.

Components

I audited the live site and found dozens of one-off buttons, cards, and form fields that looked almost — but not quite — the same. I consolidated them into a governed component library: buttons, inputs, badges, product cards, and the marketing modules that power PDPs and landing pages.

Each component was built with defined variants, states, and responsive behavior, then documented with usage rules — when to reach for it, what to pair it with, and what not to do. Components were Code Connected to their front-end counterparts so a designer dragging in a card and an engineer importing it land on the exact same thing.

Governance

A system is only as good as the rules that keep it from drifting. I set up a lightweight governance model: a clear path for proposing new patterns, a contribution checklist, and a regular review so additions earned their place instead of accumulating.

I paired that with versioned releases and changelogs, plus office hours and quick-start docs so partner teams could adopt the system without a meeting. The result was faster, more consistent shipping — designers and engineers building from one source of truth, with brand and accessibility baked in rather than bolted on.