← All work
02

Case Study · Toddle · 2026

The inbox preview is the product.

Role
Sr Product Designer — sole lead
Scope
~500 emails · 26 modules
Personas
Teachers · Students · Families · Admins
Output
Design system + React Email app
~500
Emails redesigned across 26 modules
4
Distinct personas, different inbox behaviour
1
Designer. No copywriter. No researcher. Solo.
56k
Progress report emails — the number that moved priority

The Insight

Most users decide before they open the email.

Toddle sends product emails to everyone in a school — teachers, students, families, administrators — across every interaction. These are not marketing emails. They're the off-platform pulse of the product.

Before the revamp, the email system had never been audited as a whole. Each of 26 modules built its own emails independently — its own subject line patterns, its own understanding of what a recipient actually needs.

The most important realisation: most recipients decide — open, archive, or ignore — from the inbox preview alone. Sender + subject + pre-header. The email body is a confirmation surface. We had abandoned the preview on nearly every email in the system.

Inbox preview — before vs after
Before
New comment on your unit plan
Toddle · Click to view your notification...
After
Priya left a comment on "Unit 3: Identity"
She asked about the summative task — wants to align with MYP criteria.
Before
Progress report published
Toddle Education · View in app
After
Arjun: Progress report is ready
Your child's Term 2 report has been published by Greenfield International School.

The Problems

Four silent failures hiding in plain sight.

01

The pre-header was abandoned

Across 19 of 26 modules, the pre-header was either missing or pulled in whatever came first in the body — an unsubscribe footer, a template label, a generic greeting. The decision surface was wasted on noise.

02

Families couldn't tell which child the email was about

A parent with multiple children receives emails across multiple children, subjects, teachers — often in the same morning. No email surfaced the student's name in the subject line. Opening each one was the only way to know.

03

Comment emails trained users to ignore them

The Goals module had 4 comment triggers — all looking identical in the inbox. Users learned that "comment" could mean 4 things of varying urgency. All four got treated as low priority.

04

The most consequential emails were the most neglected

IB registration reminders. SIS sync failure alerts. External evaluator invitations. Highest-stakes communications — worst pre-header quality, most inconsistent structure. Low-traffic emails got the least design attention. Wrong trade-off.

"If the subject line is a door, the pre-header is the window next to it. We had boarded up every window."

Key Decisions

A system, not a collection of emails.

Copy system

Subject line formulas per persona, not per module

Old approach: each module wrote its own. New approach: four formulas, one per persona. Teacher: [Context]: [Action] → "Math 10B: Assignment deadline changed." Family: {{student_name}}: [Action] → "Arjun: New goal assigned." Student: [Action] in [Subject] → "Task due tomorrow in Physics." Admin: [System]: [Status] → "SIS Sync: 3 errors need attention."

Pre-header logic

Three rules that governed every pre-header

1. Never leave it empty. 2. Never repeat the subject word-for-word. 3. Add exactly one piece of decision-relevant information the subject didn't give — urgency, child name, class context, or required action. Simple rules, applied consistently, rebuilt the inbox as a reliable triage surface.

Tooling

Built a React Email preview app — didn't just deliver Figma files

Most designers would deliver Figma mockups. I built a React Email preview application rendering every spec as a live, pixel-accurate template. No email client setup. No test emails. Share the link, see the email. Changed the design-to-approval cycle time fundamentally.

Discovery

Audited from production screenshots, not Figma

Every audit was done from screenshots of actual production emails — inbox previews and opened-view captures. This surfaced things a code review wouldn't: pre-headers pulling in template labels, a [DND] test artifact in production, and a live subject line bug in PLANNG09 escalated for immediate fix.

What I Learned

The things that changed how I design.

1
The inbox preview is the product.The email body is a confirmation surface. Most recipients spend less than 3 seconds on the preview before deciding. Design from that moment forward, not from the open state backward.
2
The family persona is the most overlooked in institutional products.The {{student_name}} omission wasn't a decision — it was an invisible default that only became visible when you traced a parent's morning with multiple children on the platform.
3
EdTech email design is underdeveloped — which is an opportunity.Google Classroom still doesn't meet best-in-class SaaS standard. Most EdTech products treat email as an afterthought. Toddle can set the category benchmark instead of following one.
4
Instrument before improving.No open rate, click-through, or unsubscribe data existed for any email. Setting up UTM tracking before writing the first spec would transform this from a faith-based improvement to a measured one.