Larj Media Website

Turned a research-backed strategy into a live, client-run website — and wrote the front-end myself.

Larj Media is an award-winning, sister-run podcast agency (since 2011) whose clients include Microsoft and the Gates Foundation. I owned everything after strategy: the visual system, every page layout, and the custom code that makes Squarespace do things it normally can't.

• 1 designer owning design system, UI, and front-end code
• 3 → 1 homepage directions explored, then merged
• 0 developers needed after launch — the founder edits it herself
• 97% → 55% bounce rate after the rebuild

The old site was a bottleneck, not a storefront.

In my first meeting with the founders, they described a site "clogged up" with information. Four problems kept coming up.

A bridge between strategy, visual design, and working code.

• 01 —
  Translated strategy — turned the sitemap and page "core models" into layouts and flows.
• 02 —
  Built the system — color, type, spacing, and reusable components.
• 03 —
  Coded the UI — custom HTML/CSS/JS components inside Squarespace 7.1.
• 04 —
  Handed it off — content editable without code, plus visual how-to guides.

Started as a UW Communication Leadership engagement with content strategist Josiah Scott, then continued as a paid contract where I led design and build.

Ten months, from sitemap to shipped site.

Design ran in weekly cycles with the founders, content strategist, and advisor. Build ran page by page in Squarespace.

1. Jan

   Discover

   1:1s with founders, strategist, and advisor. Squarespace data report. Sitemap feedback.

2. Jan – Feb

   Define the direction

   Brand story Q&A with the founders: "thoughtful, strategic, calm." Mood board in 2 directions.

3. Feb

   Wireframe

   Three Services page layouts (V1–V3), with written trade-offs for each.

4. Feb – Mar

   Brand guide + contrast tests

   Every color pairing tested for WCAG contrast before it went into the system.

5. Mar

   Feedback → pivot

   The first sample design felt "stationary and academic." I rebuilt the look as "Fresh & Bright."

6. Apr – Sep

   Build

   Paid contract. Every page coded and built in Squarespace, with weekly reviews.

7. Oct

   Launch + handoff

   Live on larjmedia.com. Editing guides for the founder.

Small structure changes, big clarity gains.

In sitemap reviews, I pushed for changes that put proof and action in front of the visitor.

From mood board to a real website direction.

The founders described the brand as "thoughtful, strategic, calm" and "grounded and confident." I turned that into two mood board directions in Larj's existing colors.

Three layouts for the hardest page: Services.

Services had six offerings, each with a price, audience, and long checklist. I tested how much to show at once, and wrote down the trade-offs for the client.

V1 · Folded cards

Fast to scan. But "View details" hid what each service includes.

V2 · Rows Approved

Room for detail. Slows readers down for high-ticket services.

V3 · Column cards

Easy to compare prices. But cards got very long and uneven.

The feedback that changed the whole look.

My first sample design used the original brand guide: script accents, Cormorant Garamond, and lots of ivory. It was clean, but it didn't feel like Larj.

"Style feels stationary and academic. Add more colors to brighten it up."

Tina, founder

"Font size 16 minimum. Garamond feels old and traditional. Make Contact Us bigger."

Carrie, advisor

What I changed

• Cormorant + script→Playfair Display + Nunito Sans
• Mostly ivory→Red, gold, teal color blocks
• Small body text→16px minimum, 1.5× line-height
• Quiet Contact link→Bold CTA button in the nav

"Fresh & Bright" — bold enough for a creative agency, calm enough to read.

I built the system as a living HTML document first, then mapped it into Squarespace Site Styles so native blocks and custom code look like one product.

Click a swatch to copy its hex.

Color contrast test (WCAG)

Before any color went into the system, I tested each text / background pair. Pairs that failed were banned, and teal was darkened for text.

Aa

Charcoal on gold9.9 Pass

Aa

White on red5.3 Pass

Aa

Gold on white1.4 Banned

Explore wide, then combine the best parts.

For the homepage, I prototyped three directions in code, so the founders could react to real, scrollable pages instead of static frames.

A hybrid build: native where the founder edits, custom code where the design needs it.

Squarespace templates couldn't produce the design. Moving platforms would leave the client unable to maintain it. So I split the site into two layers.

/* ==========================================
   EDIT CONTENT HERE ONLY (Tina)
   One { week, title } per row.
   ========================================== */
var schedule = [
  { week: 1, title: "…" },
  { week: 2, title: "Podcast First Planning" },
];
/* ======== END OF EDITABLE ======== */

// Responsive: JS class toggle, not @media
function fit() {
  root.classList.toggle("is-mobile",
    window.innerWidth <= 768);
}
window.addEventListener("resize", fit);

AI wrote a lot of the code. I set the rules and owned every decision.

Early on, I proposed prototyping in code instead of only in Figma, and the founders agreed. I used Claude as a pair programmer. That let one designer ship what usually takes a designer plus a developer — because I built a process around it.

Motion with meaning — and the restraint to remove it.

The founders asked for "thoughtful, strategic, calm" — not fancy animation. So I kept motion small and purposeful: things should feel on air, and everything must work without it. Try the demos.

Launched on larjmedia.com — and the founder runs it herself.

Bounce rate dropped from 97% to 55%. And success wasn't just a launch — it was the client making changes without calling me.

What I'd take into my next product.