AI Receptionist UI Design for Hey Rosie

Hey Rosie is an AI phone receptionist for small businesses. A plumber, a clinic or a bakery forwards their number to Rosie, and she answers the calls they can't: takes a message, books the appointment, transfers the urgent ones, and hands the details back. We've been Rosie's product design partner since September 2024, on a flat monthly subscription, and almost all of that work has happened in one place: Figma.

When we started, the hard part wasn't a screen. It was the question underneath every screen. What does an AI receptionist even look like? In 2024 the category barely existed, and the patterns that did exist all pointed the wrong way.

There was no product to copy. "AI voice receptionist" was an idea, not a category. Every competitor reference was either a call-centre dashboard or a chatbot, and Rosie is neither.

The audience is non-technical. Rosie's customers run salons, dental practices and painting companies. They don't write prompts, tune models, or want to learn what a system message is.

The obvious AI patterns would have hurt. A chat window, a prompt box, sparkle icons on every button. Those signal "you are operating a machine". Rosie needed to feel like someone you'd hired.

The product changes every week. A fast-moving team ships constantly. Without a foundation, every new screen drifts a little further from the last one, and two years of drift is a different product.

Engineering needed specs, not moodboards. Finished frames, every state resolved, copy and spacing decided, ready to build from.

None of that gets answered by a single design project. It gets answered by showing up every week with a canvas.

Every idea at Rosie, from a new settings section to a banner in the sidebar, follows the same path through the same Figma file. It has three stages, and the first one is deliberately ugly.

Start messy. A new idea goes onto an exploration page as rough frames. Duplicated, half-finished, five versions of the same modal next to each other. Nothing is precious at this stage, and that's the point. We share it early, usually the same day, because the team reacts to something real far better than to a description of it.

Push it further together. Jordan and the Rosie team review in Figma. Comments, counter-proposals, a screenshot of what a customer actually asked for. The idea that ships is rarely the first frame. It's usually two or three rounds past it, and the canvas keeps the whole trail.

Polish and hand over. The winner moves to a dev-ready page: final frames, every state, annotations for spacing and behaviour. Engineering builds from that page, not from a Slack thread. When a moment can't be judged from a flat frame, like the onboarding Test Call, we take it out of Figma into a working prototype. That's the exception. The rule is the canvas.

Two years in, the file holds hundreds of frames across many pages. Onboarding, settings, the inbox, widgets, banners, upsells, empty states. Every one of them was designed next to the last one, which is how a product that changes weekly still looks like one product.

The biggest decision in the whole file is one we made early and never reversed. Rosie is set up like you'd brief a new receptionist, not like you'd operate an AI.

Open Agent Settings and there is no prompt box. There are twelve plain-language sections: Business Information, Agent Profile, Greeting, FAQs, Take a Message, Spam Filters, Appointments, Text a Link, Transfer Calls, Custom Training, Launch Instructions and Website Widgets. Each one is a set of read-only cards with an Edit button, and one Publish action at the top when you're done. Agent Profile is five fields: a name, a voice, a tone, a talking speed, and the background noise on the line. That's how you'd describe a person, and it's how a bakery owner describes the receptionist they want.

The same principle shaped the Conversation Inbox. Calls don't land as a log of events. They land as conversations, each with a type badge (Appointment, Message, Hang-up), a summary band that says what happened in one sentence, and the transcript underneath with Rosie's turns marked by her mark. Outcomes become cards in the info rail, so an appointment Rosie booked shows up as a calendar entry with a link to the event, not as a line in a transcript you have to go looking for.

Both surfaces do a lot of work to look unremarkable. That's the job. The customer's mental model is "I have a receptionist", and the UI never asks them to trade it for "I have a model".

Two years of screens only hold together if the pieces do. From the first months we built Rosie's UI from components and styles in Figma rather than one-off frames: the purple scale, a warm purple-tinted gray family (the default slate grays looked cold next to it, so we re-tinted them), a sea-green highlight, rose reserved for errors, Outfit throughout, 50px pill buttons, and soft cards with a layered shadow instead of a hard border.

The brand lives in the same system. The brief for every screen was the same four words, capable but friendly, and the design system describes Rosie as a person to make that concrete: "A 35-year-old office manager who's great at her job and actually likes people. She wears lavender, speaks clearly without being stiff, and makes sure everyone feels taken care of." It also lists what Rosie never is: cold blues or grays as primary colours, robotic or clinical UI, sharp corners, dense layouts, corporate jargon. Those guardrails are the "not a chatbot" decision written down where the whole team can check against it.

In April 2026 the system left Figma. We lifted it into rosie.tasteprofile.io: a versioned DESIGN.md with every token, a browsable viewer covering colour, type, space and shape, voice and tone, and themed components, and exports for Claude Design and Claude Code. Engineers, the Rosie team and AI tools now build from the same source of truth we design with. The Figma file is still where ideas start. It's no longer the only place the system exists.

A subscription changes what design work looks like. There's no kickoff and no handover deck. There is a standing canvas, a weekly rhythm, and a growing list of small decisions that each get real attention: how a premium feature is introduced in the sidebar without crowding the product, what the empty state for Transfer Calls should teach, whether a "Keep Exploring" grid belongs under the onboarding stepper.

None of those justify a project. All of them matter. A subscription lets small decisions get designed properly, and the canvas means each one is made in the context of everything that came before it.

Start messy, on purpose. Rough frames shared early beat polished frames shared late. The team reacts to something real, and the good idea is usually two rounds past the first one.

Design for a hire, not a tool. Skipping chatbot patterns kept Rosie feeling like a receptionist an owner is briefing. That's the whole promise of the product, and the UI never contradicts it.

One canvas, two years. Keeping everything in one Figma file meant every new screen was designed next to the last one, so the product stayed coherent while it changed weekly.

Turn the system into a product. Lifting the Figma system into rosie.tasteprofile.io made it useful beyond design. Engineers and AI tools now build from the same tokens we design with.