Klaviyo welcome flow with landing page capture and QA proof
A full-funnel build: landing page signup, Klaviyo flow entry, 5-email lifecycle sequence, and HTML email implementation focused on Outlook-safe structure and practical QA validation.
Demo project • DTC e-commerce email system: landing page capture, Klaviyo flow architecture, HTML builds & QA
Lifecycle Emails
Flow Architecture
Signup → Trigger → Sequence
Compatibility Focus
MSO + bulletproof patterns
Testing Proof
Cross-client preview evidence
Campaign Overview
The strategic foundation of the project and what the build demonstrates.
Problem
New subscribers often enter a list without timely follow-up, reducing early engagement and leaving the first few days underused.
Solution
A 5-part Klaviyo welcome flow supported by a signup landing page and responsive HTML emails built to be clear, reusable, and reliable across major clients.
What I Built
Built the complete system end-to-end: signup landing page, Klaviyo flow architecture, 5-email HTML template series, segmentation logic, and full QA documentation.
The Conversion Funnel
From signup to flow entry and conversion-focused follow-up.
Klaviyo Flow Architecture
Flow logic laid out as a practical lifecycle sequence.
Trigger
New List Subscriber
Email 1
Brand Welcome
Delay
24 Hours
Email 2
Problem / Solution Info
Delay
48 Hours
Email 3
Social Proof & Trust
Delay
24 Hours
Email 4
Offer
Delay
24 Hours
Email 5
Final Reminder
Flow Builder Logic View
Lifecycle Email Series
Responsive HTML email templates designed for clarity, structure, and conversion-oriented flow progression.
Technical Implementation
Building robust email templates that remain reliable in Outlook, Gmail, and Apple Mail.
Table-Based Layouts
Strict table structure for dependable layout behavior across legacy and modern email clients.
Mobile Responsive
Fluid widths and safe stacking rules for smaller screens and touch-friendly viewing.
Outlook Compatibility
MSO-aware code patterns for bulletproof buttons, spacing stability, and Word-rendering resilience.
<!-- Bulletproof Button Pattern -->
<table role="presentation" border="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#7311d4">
<a href="#" style="font-family: Arial; padding: 12px 24px...">
Claim Your Offer
</a>
</td>
</tr>
</table>
<!-- Conditional MSO Hack -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
arcsize="10%" strokecolor="#7311d4" fillcolor="#7311d4">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Arial,sans-serif;">
Claim Your Offer
</center>
</v:roundrect>
<![endif]-->
Skills Applied in This Build
Every skill used in this project is one I can bring to a live account from day one.
Klaviyo Flow Logic
Trigger setup, conditional splits, time delays, and engagement-based segmentation across a 5-step welcome sequence.
HTML Email Coding
Table-based layouts, inline CSS, MSO conditionals, VML fallbacks, and bulletproof CTA patterns for Outlook compatibility.
QA Process
Pre-send checklist covering links, alt text, dark mode, mobile stacking, dynamic content, and cross-client rendering review.
Segmentation Logic
Audience targeting, list hygiene fundamentals, and subscriber-based conditional logic to ensure the right message reaches the right person.
Rigorous QA Testing
fact_check QA Checklist
- check_circleAll links verified
- check_circleImages optimized and ALT text added
- check_circleDark mode awareness checked
- check_circlePlain-text version prepared
- check_circleCross-client rendering review
smartphone
mail
desktop_windows
Tech Stack & Tools
Project Roadmap
Chronological execution of the campaign build.
Design
Branding, wireframing, landing page direction, and email content planning.
Build Templates
Hand-coding responsive HTML email templates with safe structure for ESP usage.
Testing
Rendering QA, link validation, image review, and dark mode checks.
Implement
Flow trigger setup, email ordering, timing rules, and campaign deployment steps.