A full site rebuild walks into a bar

_{Day 213/100}

Hey—It's Tim. 

Here’s the debrief on Penfriend’s new homepage - the thinking, the trade-offs, and the stuff I’m still not happy with.

How I approached the rebuild

The product changed; the page didn’t.
I went in on this as if I was building the site from scratch, not doing an update.

Constraint one: first scroll must answer “What is it?” and “How do I use it?” without video, without reading a novel.
Constraint two: future-proof it for two more feature waves without breaking the grid.
Constraint three: mobile is primary. Desktop gets the bonus affordances.

Why there’s no hero video

Nobody watches a 2-minute video at the top of a SaaS site.
It’s a conversion hole disguised as a feature.

So the hero does two jobs only: clarity + momentum.
Clear one-liner.
Then as you scroll, we hit you with the biggest testimonial, and then straight into the “demo”…

The “how it works” flow

I built a three-step scroll-through you can understand in 7 seconds.
Each step has one verb and one payoff.

No nested modals.
No tooltips on tooltips.
Micro-wins that keep you inching forward.

Design note: I used the same card component everywhere so the pattern repeats in your head.
People trust repetition more than novelty.

The social-proof system

We have 4× more testimonials now.
They were living in my Obsidian like dragons on a gold pile.

I chopped them into buckets: speed, quality, “beats ChatGPT/Claude,” editor saves, support, ROI, etc
Now each claim on the site has a matching quote within 200px.

Homepage: credibility sweep.
Feature pages: feature-specific proof.
Comparison pages: head-to-head lines only.

The roadmap strip

I hate vague “we’re building cool stuff” blocks.
So the roadmap shows real features, real names, and a simple “wave” tag.

If dates shift, they shift in public.
Early adopters see what they’re actually buying into.

Pricing table that stops fighting you

Old table was Where’s Waldo on mobile.
Now it’s a single column stack with sticky plan headers and a “You get” summary at the top.

No feature jargon.
Every row answers a Yes/No question in plain English.
“Most Popular” is obvious without flashing neon.

Under the hood

Performance: image sizes are locked; no layout jank. LCP asset is native, not a 3rd-party embed. The load time now is soo soooo much faster. I’m very happy with that.
Accessibility: tab order is linear; buttons read like verbs; focus states are visible; motion respects reduced-motion.
Copy: verbs first, nouns second. No adjectives that don’t earn their keep.

What still bugs me

The “how it works” scroll section could feel even snappier.
The roadmap screenshots need another pass (less gray, more context).
I want a tiny “AI overview vs. real brief” toggle to show our editor choices in one tap.
Way more examples for readers to see an end output without having to log in.

What’s next

Feature pages with side-by-side proof (input → output → why it works).
Then the BoFu pagecomparisons, alternatives, and sector-specific demos.
Those will carry most of the search work; homepage earns the trust to click deeper.

How I’ll measure this week

Scroll depth to Step 2 of “how it works.”
CTA click rate per fold, mobile first.
Time-to-first-interaction.
Pricing table interactions and plan selection hover time.
Session replays on mobile for rage clicks.
If the hero doesn’t drive the first click in <5 seconds median, I’ll cut words.

—

Wrap-up: Give the new Penfriend.ai homepage a proper skim.
Tell me the exact pixel where your thumb hesitate I’ll fix that first.

My graphic designers out there. Seriously… how did I do?

Be kind. This isn’t my “job”.

✌️ Tim "position: sticky" Hanson
CMO @Penfriend.ai

Same brain, different platforms: X, Threads, LinkedIn.

P.S. I have a whole series of sketches I did for the homepage. Reply “SKETCHES” and I’ll go over them next week. What the sketch was and how it ended up in the “final” page.

Penfriend.ai
Made by content marketers. Used by better ones.