Hey Rosie Marketing Site Design

Hey Rosie sells an AI answering service to plumbers, salons and clinics. Not to SaaS buyers who compare feature matrices for a living, but to owners who pick up the phone between jobs, and sometimes can't. The pitch is simple: Rosie answers the calls you miss. The website had to make that real in one scroll.

We've designed Rosie's product since September 2024. The marketing site ran alongside it, and five problems shaped it.

Explain an AI receptionist to people who don't buy software. No jargon, no three-paragraph explainer. A visitor should understand what Rosie does before they scroll.

Make the missed call hurt. Telling an owner they lose business when the phone rings out is one thing. Showing it is another. The site needed a hook you feel, not a bullet point.

Keep it editable by the team. Production lives in Framer. Anything custom had to be a component the Rosie team could drop on any page, not a one-off build they'd have to ask us to change.

Don't lose attribution on the way to signup. Affiliates, coupons and campaign links land on the marketing site, but the account gets created in a different app. A visitor who reads three pages first still has to arrive at signup with the right tags.

Survive a pricing comparison. Three plans, 48 features across seven categories, benchmarked against a competitor's table. The comparison had to read at a glance and not break when a plan changes.

The answer to all five was the same: be specific. Show the call. Name the feature. Build the thing the team will actually edit.

We built the first landing page in September 2024. One week, Next.js and Tailwind, eight sections: Hero, a logo wall, "Handle calls 24/7/365", "Create your Rosie phone agent", a "Manage calls and messages" bento, a "Let's Compare..." panel, FAQs and a closing CTA. The logo wall put Rosie in familiar company for its audience: Jobber, Housecall Pro, Boulevard, GoSite, GoHighLevel and Zapier.

Every section answers the next question a skeptical owner would ask. What does Rosie actually do? How do I set it up? How is that better than voicemail? The page follows the objection, not the feature list. The "Let's Compare..." panel makes the last question direct: tabbed rows for Voicemail against Rosie and a human Answering Service against Rosie, a red cross on the left, a green check on the right, on a dark purple panel that breaks the rhythm of the page.

The Framer site that replaced it keeps the same logic with more room. Each feature section pairs one claim ("Rosie learns your business in minutes, not months", "Rosie handles every call so you never miss an opportunity") with a mock of the product doing exactly that and a quote from a customer who relied on it. Social proof sits right under the hero: three testimonials, a 5.0 rating, and running totals of calls handled and texts sent. Further down, a grid of industries, from home services to salons, lets an owner find their own trade before they hit the FAQ.

The headline reads "Never miss another call with Rosie's AI Answering Service." Under it, one field: "Enter website url to start...", because Rosie builds the agent from your website. Under that: "7-day free trial, no credit card required, then only $49/mo."

The real work is next to it. We used Rive instead of video. The hero shows an iPhone on its lock screen with missed-call notifications stacking up, authored in Rive with the phone body, the Rosie app icon and each notification as separate layers. It runs as a small runtime in the browser: no autoplay video, no looping GIF, no stock footage of someone looking stressed. Just the thing that keeps a plumber up at night, calls they didn't answer, piling up. A static iPhone image is the fallback where Rive can't run.

When the site moved to Framer, the hero moved with it, and the story flipped from the call you missed to the call Rosie takes. We animated a whole conversation in Jitter and exported it as Lottie: a caller asks "Hi, do you handle interior projects?", Rosie answers "We sure do. Tell me a little about your project to get started.", and the next line types itself out as the caller speaks, with the earlier bubbles drifting up and out of focus. It plays on a loop next to the headline and was the most fun part of the whole build.

When the site moved to Framer, we kept the custom behaviour as code components rather than rebuilding it page by page. The Rosie team edits the site. We own the parts that need code.

The RosieOnboarding CTA button (first built June 2025, revised March 2026) looks like any call to action. Behind it is attribution logic. When a page loads, it reads the affiliate ref, coupon, campaign tags and every UTM parameter from the URL, plus the referrer, and keeps them in the browser. When the visitor eventually clicks through to signup, the button appends all of it to the register link. Someone who arrives on a partner's link, reads the pricing page, checks the FAQ and signs up ten minutes later still carries the partner's tag. Attribution survives the browse.

In Framer, the team sets the label, size, style, shadow and a default coupon or UTM per page from property controls. Nobody opens the code to put a CTA on a new landing page.

That matters because the site kept growing new landing pages. Website Texting got its own: "Turn your website visitors into valuable leads with AI-powered text conversations", with a phone showing a text thread instead of a call. The Shopify app got a full page, "The #1 AI phone agent for Shopify", where the nav button itself changes to "Get Shopify App" and the sections walk through order updates, taking orders by phone with a texted checkout link, and resolving support issues against store policies. Each one reuses the same building blocks: a headline next to a product illustration, a stats row, a customer quote, and alternating feature sections with a mock of Rosie doing the thing. New page, same parts, no new code.

The same approach covered a campaign page at email.heyrosie.com in September 2025: a single static page, built, restyled and shipped in a day.

Three plans: Professional at $49, Scale at $149, Growth at $299. Forty-eight features across seven categories: General, Agent training and voices, Appointment & Transfers, Lead Capture, Call Management, Integrations and Shopify. A June 2026 feature grid laid it all out against a competitor's comparison table, and the job was to make 48 rows read at a glance.

We built the table from the grid, not by hand. The pricing comparison component (August 2026) holds the feature data as data. Each cell is a check, a dash, or a literal value ("250", "1,000", "Unlimited", "With Add-On"), with an optional note line and a tooltip where a feature needs explaining. When a plan changes, the grid changes and the table follows. There is no redesign.

On desktop, the plan header and each category band stay sticky as you scroll, so you always know which plan and which group you're reading. Under 900px the table becomes one plan at a time, with a sticky tab bar and keyboard navigation between plans. Type, the purple tint and the hairlines were pulled from heyrosie.com so it sits in the Framer site as if it were native. Title, subtitle, plan names, prices, the highlighted plan and the sticky offset are Framer property controls, so the team can tune it without us.

Show the problem, not the category. Every competitor can say "AI answering service". The missed-call animation makes the problem tangible in a few seconds, and that's what separates the site from a product description.

Build for the team's tool. Code components with property controls mean the Rosie team adds a CTA, changes a label or updates a plan without a developer in the room. The site stays current because it's designed to be touched.

Carry the context through. The CTA remembers where a visitor came from and hands it to signup. For a business running affiliate and coupon campaigns, that's the difference between knowing what works and guessing.

Pricing as data. Forty-eight features maintained by hand across three columns is a maintenance problem waiting to happen. Fed from a grid, the table reflects whatever the product team decides.

Hey Rosie's site is the kind of website work we do alongside product design: one story told visually, and the custom parts built so the client's team owns them.