Product design · 2025
UnderstandingFAFSA
Redesigned a newsletter system to match a fresh site rebrand. Modular templates, competitive research across 120+ examples, and a 75% lift in open rates.
- Problem
- A freshly rebranded site left its newsletter looking dated and off-brand.
- Role
- Product Designer
- Timeline
- February 2025 – Ongoing
- Tools
- Figma, Mailchimp
- Outcome
- ~52.6% open rate after the redesign, up from ~30%, a 75% lift
Key moves
- Researched 120+ newsletters against four criteria.
- Built a modular template system with locked layers and swappable parts.
- Matched the newsletter to the rebranded site so subscribers see one brand.
Where it started: a rebranded site, a dated newsletter.
Subscribers were seeing two different brands.
UnderstandingFAFSA helps students, parents, and counselors navigate the Free Application for Federal Student Aid (FAFSA). The newsletter is a primary touchpoint. The website had already moved to a calmer, modern visual language (Saans typeface, refreshed palette), but the newsletter still carried an older system. The scope was email-only. The founder assembles every issue, so the system had to maintain the brand's identity regardless of who was building it.
Why the old template lost readers.
The old template lost busy readers on mobile, and open rates sat around 30%.
The old template failed where busy readers notice first: uneven CTAs, a muted palette that didn't carry the rebrand, long unscannable stretches of text, weak section breaks, and a layout that wasn't optimized for mobile users. Open rates sat around ~30%.
If email stayed weak, people would miss deadline-driven guidance at key checkpoints: FAFSA filing windows, scholarship deadlines, policy changes. The channel needed the same credibility the site had worked to develop.
Scroll inside the frame to read the full send.
Scroll inside the frame to read the full send.
Auditing 120 newsletters against four criteria.
Before touching templates, we compiled over 120 newsletter examples and evaluated them against four criteria: clarity, personalization, tone of voice, and visual appeal and branding consistency.
Five newsletters got the deepest treatment: Revenews, The 74, Next by Jeff Selingo, Medium, and Folderly. Each newsletter adopted a different approach to the same problem: making a recurring email feel worth opening.
The rest of the newsletter pool served as lighter references for layout, color, and hierarchy patterns.
The deep dive highlights:
- Selective bolding created visual entry points without adding imagery. Revenews paired this with emoji section headers and concise intros.
- Bespoke bullet stylesreinforced brand identity in the smallest details, like Folderly's use of brand-colored accents.
- Action-focused section titles turned bulk information into content readers could parse in a single scroll.
- Tone calibration by audience: student-facing emails could carry emojis and GIFs, while counselor-facing emails needed the more earnest, formal register we saw in The 74.
- Personalization through structure: Next's if/then link framing ("if you're looking for help with X, then read this") gave readers agency, and author photos with brief bios made the sender feel human.
From there we put our own spin on it, adapting these patterns to UnderstandingFAFSA's voice, the founder's preference for vibrancy, and the practical constraint that a non-designer would assemble every issue.
Designing one skeleton for three kinds of sends.
One modular framework covers the welcome email, the weekly newsletter, and lighter event sends.
The system ships through a shared modular framework: a welcome email that sets expectations, the core weekly newsletter, and an event-specific variant with fewer blocks and faster assembly for invites and recaps. A counselor-focused toolkit extends the same vocabulary (duotone icons, formal register) and is in progress.
The welcome email follows a deliberate structure shaped by the audit. It includes a banner, gratitude, what to expect, a brief history that transitions into the current mission, a CTA, suggested reading, and social links. It's the subscriber's first impression of the redesigned brand.
Default send. Full modular kit assembled each week.
Scroll inside the frame to read the full send. Click to expand.
Block shelf
Your send
4 blocks~96 KB102 KB Gmail ceiling
Locked
LockedThe core decision: locked layers, swappable parts.
Structure and type stay locked, so a non-designer can swap copy and images without breaking the brand.
The locked-vs-swappable distinction was the core design decision. Spacing, dividers, type, and the structural skeleton stay locked so swaps don't quietly undo the brand. Editors swap body copy and emoji-style section images. The founder drafts each week's copy for editorial.
Color variants were chosen to stay in harmony with UnderstandingFAFSA's design system. The founder can assemble an issue quickly without any single swap pulling the send off-brand.
Pick a layer to isolate it; the other dims back.
Showing both layers: swappable content and the locked frame.Try a swap — the palette re-tints the region markers.
- Swappable: editors change each send (headlines, body copy, emoji icons, article links).
- Locked: structure holds every send (wave dividers, padding rails, section rhythm, footer skeleton).
Rebuilding it in Mailchimp.
Rebuilding the design in Mailchimp meant fighting Gmail's 102KB clip limit without losing the brand.
The hierarchy, spacing, and modular rhythm all lived in Figma, but the live template had to be rebuilt in Mailchimp so the founder could edit without touching HTML. Matching Figma spacing inside the builder was a dead end. Every container and wrapper added bloat. I reframed hierarchy so section headers and body read clearly in email, not on a static artboard.
Gmail's 102KB HTML ceiling and clipping created a rigid constraint.Early weight came from custom section icons and themed dividers exported from Figma. The fix arrived through test sends, stripping redundant wrappers and dividers, merging sections where it still scanned, and compressing PNGs through an external tool. For dark-mode-friendly dividers, I removed backgrounds in Photoshop so assets stayed lighter without muddying on phone.
Compression wasn't one recipe. The weekly kit leaned on fewer custom assets and more Mailchimp-native structure. The counselor toolkit needed more image work and tighter file discipline for its duotone icons. What I wouldn't trade for a few kilobytes: typography tuned to the closest Mailchimp sans to the site's Saans typeface, and the full brand palette, even when trying to maintain the founder's appetite for vibrancy.
The results: open rates after the first send.
The first redesigned send moved open rates from around 30% to about 52.6%.
This was my first time designing a system someone else assembles every week. No designer looks at a send before it goes out. The founder swaps copy and images herself, which means the locked layers carry the review a designer would normally do.
The first redesigned send went out November 4, 2025. Open rates moved from around 30% to ~52.6% (Mailchimp reporting with MPP excluded), with clicks, bounces, and unsubscribes still in a healthy band. What shipped: a master template, modular blocks, explicit locked-vs-swappable rules, and three template variants on the same design vocabulary.
