Rebecca SunProduct Designer

AgentMail Product Demo

Central idea

Make an AI email agent feel familiar enough that busy, non-technical people would trust it with their inbox.

Role
Product Designer
UI/UX
Duration
2-week sprint
Fall 2025
Scope
Interaction design
Visual design
Demo storytelling
Toolkit
Figma
Framer Motion
GSAP

AgentMail wanted visitors to watch an agent send email in real time

AgentMail is a YC S25 startup that gives AI agents their own email inboxes. Developers use its API to create inboxes and send, receive and reply to messages in code. The product is powerful, but an API is hard to show off on a landing page.

In Fall 2025, AgentMail asked our team at Atlas Digital, a consulting group at the University of Michigan, to build an interactive demo for their site: something visitors could watch think, act and email on its own. I joined as the product designer and designed the screens and layout of the frontend in a two-week sprint.

The AgentMail demo switching between the User, System and Client views
Design sprint before the midpoint
2 weeks
Views in one demo
3
People on the team
7

The team realised they needed a designer two weeks before the midpoint

The team started out thinking the project didn't need a designer. Their first ideas were practical agents, like a sales rep that routes emails and a quote agent that replies to requests. Then they pivoted: the demo needed to show a fully autonomous agent, and it should put the spotlight on the API, sending and receiving email at scale, rather than on any one use case.

The new idea was a short, playful storyline in the spirit of The Office. You're an overworked salesperson at a paper company, and you launch an agent to do your outreach for you. Two weeks before the midpoint, the team realised someone had to turn that into screens, and I was brought in.

The story was mostly set by then. I helped choose the busy salesperson as the person the demo speaks to. The rest was mine to decide: who the demo was really for, which views to show, and what happens in each.

I designed for busy people who don't speak AI

With such a narrow scope, everything came down to knowing exactly who I was serving. The people watching this demo aren't necessarily developers. They're busy, they want something to take work off their plate, and they don't have much AI fluency. They also need to trust it enough to hand over their inbox.

So the question became: how do we make sure people aren't put off by the idea of AI emailing for them? My answer was to introduce it slowly, through things they already know: an inbox that looks like Gmail, a message from a manager, and code shown as a simple card rather than a wall of terminal output.

One demo, seen from the salesperson, the system and the lead

My first proposal was a step-by-step walkthrough: the user's first prompt, then AgentMail picking it up, then how the system works, and finally the result. The team helped me sharpen that into three perspectives on the same moment, the person sending, the system doing the work, and the lead receiving the email. A toggle lets visitors switch between them.

A step-by-step walkthrough

Prompt, AgentMail, how it works, result. Clear, but it reads like a tutorial and makes visitors wait for the payoff.

Three perspectivesChosen

User, system and client side by side behind one toggle. Visitors pick what they care about and see both ends of every email.

User12345

The salesperson

  1. 1A liquid-glass toggle to switch perspectives
  2. 2A banner says whose view you're in
  3. 3The manager's message sets the goal
  4. 4SDK cards hint at the tech underneath
  5. 5A familiar inbox, so it still feels like yours

Every detail leaned on something people already know

Liquid glass for a product on the frontier

AgentMail's brand is about efficiency: automating email and finding leads is ergonomic, fast and technical. Handing your outreach to AI is about as modern as it gets, so I used liquid glass for the toggle and the banners to carry that feeling into the interface.

A message from the manager to start the story

Before anything happens, a notification from your manager tells you to reach 50 sales over email by the end of the day. It's there purely for storytelling, so visitors immediately understand what they're looking at and whose shoes they're in.

SDK cards instead of a terminal

The original pitch had a scrolling terminal of live API logs. For people who aren't very technical, that's noise. Short SDK cards say the same thing in a friendlier way: there's serious technology behind this, it's been thought through, and you can rely on it.

A Gmail-style inbox to keep people in control

Showing the agent's work inside an inbox that looks like Gmail tells people their mailbox is still theirs. The AI works inside a space they already understand, instead of off somewhere they can't see.

The shipped frontend stayed close to the Figma

After the midpoint, the engineers built the demo in React with Framer Motion animations, following my screens closely. Testing the build surfaced two problems. Generating many emails took time, so visitors sat waiting, and it wasn't always clear when to click or where the flow went next.

The team cut the wait by generating all the emails in one API call instead of one per email, adding an exit timeout, and giving the loading agent more buffer time.

The demo ran on AgentMail's marketing site for a while, until they refreshed the site and replaced it for strategic reasons, which is normal for a startup moving this fast.

A narrow brief made me get specific about who I was designing for

Know exactly who you're serving. With only a demo to design, there was no room for a vague audience. Pinning down a busy, non-technical person who wants help but needs to trust it shaped every decision, from the inbox to the code cards.

Introduce new things through familiar ones. People accept AI more easily when it shows up in places they already know. Gmail, a manager's message and a simple code card did more to build trust than explaining the technology would have.

Going straight to high fidelity can work. With two weeks and a story already set, I went directly to high-fidelity screens. It worked here because the hard decisions were about perspective and tone, which are easier to judge on finished screens.

Design for the system, not just the component. I introduced new elements like liquid glass, which really meant changes to whatever design system AgentMail was working from. They were likely building most of their site in Cursor without an established system, so there was little to align with. Looking back, the ideal handoff would have paired the demo with a short design guideline for their marketing pages, so the new pieces could live on after the demo itself was replaced.