New Mailmodo users were signing up and going quiet. No clear path, no sense of progress, no reason to return. I designed a contextual onboarding checklist that guided users to their first "aha moment."
Duration
Responsibility
Tools Used
Mailmodo is an email marketing platform that lets businesses send interactive, AMP-powered emails a fundamentally different product from traditional tools like Mailchimp. That difference is powerful, but it also raises the bar for onboarding. Users arrive expecting something familiar, and instead find a product with a new mental model to build.
By the time I joined as a design intern, the product had expanded considerably campaigns, journeys, transactional email, contacts, integrations. But the onboarding hadn't kept pace. New users had no clear guidance on what to do first or why it mattered.
Before
Users landed on a generic home screen with no guidance. Navigation existed, but there was no signal about where to start. The product's full surface area was visible immediately overwhelming for someone who hadn't yet sent a single email.
After
A persistent Getting Started tab surfaces in the left nav for new accounts. It presents a structured, accordion-style checklist with 7 milestones each expandable with context, a CTA, and a preview image. Progress is tracked and visible at a glance.
The Core Problem
New users lacked direction in their first session, leading to low activation and high drop-off. Without completing key actions like domain setup or sending a campaign, users never experienced the product’s core value.
I watched recordings of new users in their first sessions. The pattern was consistent: users would land on the product, scan the interface, and hesitate. They hovered over multiple menu items without clicking, opened sections at random without context, and eventually dropped off without taking any meaningful action.
Key insights - Pattern Observed across screen recordings
Users didn’t lack capability they lacked sequence clarity. High feature visibility increased cognitive overload, leading to hesitation instead of action. Activation is behavioral, not informational.
I worked closely with the product manager to understand what the business had already learned about activation. The PRD outlined the activation milestones that correlated with long-term retention specifically, users who set up their domain, imported contacts, and sent at least one campaign within their first week were significantly more likely to convert to paid. These became the backbone of the checklist's step structure.
I audited how comparable SaaS products handled early-user guidance: Notion, HubSpot and Mailchimp. Each had a distinct approach Notion uses a persistent sidebar checklist, HubSpot anchors onboarding to a dedicated "Getting Started" hub, and Mailchimp relies on empty states. The common thread in the most effective experiences was progress visibility: users who could see how far they'd come were more likely to continue.
Primary Takeaway
The best onboarding experiences are persistent but non-disruptive. They live alongside the product, not in front of it. A user should be able to reference their progress at any point not just when they first sign up.
The research gave me a clear brief: build something persistent, progress-aware, and sequenced around the milestones that actually drive activation. The design challenge was figuring out how to present 7 distinct setup steps without overwhelming users or cluttering the interface.
I explored two primary directions before landing on the final approach:
Floating widget / modal
A checklist that overlays on the screen. Easy to notice on day one, but easy to dismiss — and once dismissed, often forgotten. Doesn't integrate into the product's navigation model.
CHOSEN DIRECTION
Persistent nav tab with accordion
A dedicated tab in the left sidebar, always accessible without being in the way. Each step expands with context, a preview, and a direct CTA. Progress tracked at the section header level.
The sidebar tab won because it matched how users already navigate Mailmodo they weren't being forced into a different mental mode. The Getting Started tab behaves like any other tab; the difference is that it tells you what to do next.
The checklist wasn't just a list of features to set up. Each step maps to a real activation milestone — something a user needs to do to get genuine value from Mailmodo. The sequence mirrors an email marketer's natural workflow, not the product's navigation structure.
Step 1 : Add your brand and team members
The first thing a new user sees is a blank product. This step makes it theirs. Uploading a logo, brand colours, button styles, and social handles means every email they send from Mailmodo looks consistent from day one — not like it came from a generic tool.
Design decision
This step is intentionally first because it's quick and non-technical. It builds momentum a user who personalises the product feels ownership before they've done anything hard.
Step 2 : Set up your domain
Without a verified sending domain, users can't send real campaigns — they're stuck on a Mailmodo subdomain with limited deliverability. This step walks them through setting up a sender ID, configuring SMTP, and connecting Google Postmaster to monitor domain health.
Step 3 : Add and organize contacts
You can't send to anyone without a list. This step covers importing contacts via CSV, app integrations, or API and organising them into segments for targeted sends. It also surfaces list hygiene: excluding unsubscribed or blocked emails so users don't damage their domain reputation from the start.
Step 4 : Warm up domain and send your first campaign
This is the activation milestone the whole checklist builds toward — sending a real campaign. But before blasting a full list, users need to warm up their domain: gradually increasing email volume so inbox providers learn to trust the sender. The step pairs warmup guidance with the moment of first send.
Step 5 : Capture leads and automate
Once users have sent their first campaign, the next layer of value is automation. This step introduces lead capture embedding forms on their website and journey automation, so new leads get engaged without manual effort. It's where Mailmodo starts feeling like a system, not just a send button.
Step 6 : Track user activity
To send smarter campaigns, users need behavioural data not just a static list. This step walks them through sending user events like signups, purchases, or clicks back into Mailmodo, so they can trigger campaigns based on what users actually do.
Step 7 : Connect your tools
The final step extends Mailmodo into the user's existing stack CRMs, CDPs, and other apps they're already using. Once connected, contacts and events sync automatically, making Mailmodo part of their workflow rather than a separate tool to maintain.
Mailmodo had an existing Figma component library. My job wasn't to ignore it or to be constrained by it. It was to understand it well enough to know which decisions needed to be made from scratch, and which didn't.
Reused from system
Left sidebar navigation — existing slot, spacing, active states
Primary button component for each step CTA
Typography tokens — heading, body, muted label sizes
Success green token for completed checkmark states
New contributions
Accordion component built and documented for reuse
7 custom illustrations one per step, built from scratch
Edge case states empty, partial, all completed
The accordion component didn't exist in Mailmodo's system before this project. I worked with the senior PM and engineer together to define its behaviour — what a step looks like collapsed, how it expands, what the completed state communicates, and how the CTA sits inside it. After we aligned on the interaction, I documented the component's anatomy and states in Figma so it wasn't a one-off tied to this feature. Any future screen in the product could pull and reuse it.
Working directly with the engineer on handoff meant I could also resolve edge cases in real time rather than catching them post-implementation small things like padding behaviour when the preview illustration is taller than the description text, or how the chevron icon animates on expand.
States and anatomy of Accordion
The accordion was the primary updated component introduced by this project. Below is the documentation left in Figma for the team.
States
Anatomy
Each expanded step in the checklist contains a preview illustration — a small visual on the right side that gives users a sense of what they're about to do before they click through. These didn't exist anywhere in the system, so I built all 7 from scratch in Figma. The constraint was that they had to feel native to Mailmodo's visual language — same palette, same corner radius sensibility, no illustration style that clashed with the product's UI. They needed to look like they belonged, not like they'd been imported from a stock library.
After the Getting Started tab shipped, the team tracked activation across new accounts specifically the percentage of users who completed the key milestones identified in the PRD within their first week.
Increase in domain verification rate among new signups in week 1
More users sent their first campaign within 7 days of signing up
Of new accounts opened the Getting Started tab within 24 hours of signup
Qualitative feedback from the customer success team noted a reduction in early-stage "what do I do first?" queries the kind of question that signals a user who's lost before they've started. The checklist gave those users a place to anchor.
