Repository navigation
Expand file tree
/
Copy pathFableNestSpringCampaignLaunch.html
More file actions
132 lines (123 loc) · 6.67 KB
/
Copy pathFableNestSpringCampaignLaunch.html
File metadata and controls
132 lines (123 loc) · 6.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fable Nest – Spring Campaign Launch | Email Marketing Project</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="navigation.css">
</head>
<body class="bg-[#fffdf7] text-gray-800 font-sans">
<!-- Header -->
<header class="bg-[#fffdf7] shadow-sm p-6">
<div class="max-w-3xl mx-auto">
<a href="email-designs.html" class="back-link mb-4">Back to email designs</a>
<h1 class="text-3xl font-bold">Fable Nest – Spring Campaign Launch</h1>
<p class="text-gray-700 mt-2">3-email seasonal campaign built with MJML, Klaviyo, and copywriting focused on storytelling + conversions.</p>
</div>
</header>
<!-- Main -->
<main class="max-w-3xl mx-auto p-6 space-y-12">
<!-- Overview -->
<section>
<h2 class="text-2xl font-semibold mb-4">Overview</h2>
<p class="leading-relaxed">
I created a <strong>3-part spring campaign</strong> for Fable Nest, a lifestyle brand offering candles, décor, and gift bundles. The sequence — <em>Spring Story Begins</em>, <em>Spring Drop</em>, and <em>Last Chance</em> — was hand-coded in MJML, tested across clients, and launched through Klaviyo.
<br><br>
This project blended <strong>visual design, responsive development, and narrative copywriting</strong> to capture the feeling of spring renewal while driving product engagement.
</p>
</section>
<!-- Process -->
<section>
<h2 class="text-2xl font-semibold mb-4">Process</h2>
<ul class="list-disc list-inside space-y-2">
<li>Mapped out the customer journey: <strong>storytelling → showcase → urgency.</strong></li>
<li>Wrote email copy that combined lifestyle imagery with clear CTAs.</li>
<li>Coded responsive MJML templates and tested across devices & clients.</li>
<li>Integrated into Klaviyo and scheduled delivery for optimal timing.</li>
<li>Designed a Shopify pop-up to grow the list alongside the campaign.</li>
</ul>
</section>
<!-- Screenshots -->
<section x-data="{
open: false,
imgIndex: 0,
images: [
'images/CandleShop-AutomatedFlows/campaign.png',
'images/CandleShop-AutomatedFlows/landing-page.png',
'images/CandleShop-AutomatedFlows/popup.png'
],
get imgSrc() { return this.images[this.imgIndex]; },
next() { this.imgIndex = (this.imgIndex + 1) % this.images.length; },
prev() { this.imgIndex = (this.imgIndex - 1 + this.images.length) % this.images.length; }
}"
x-init="
window.addEventListener('keydown', e => {
if (open) {
if (e.key === 'Escape') open = false;
if (e.key === 'ArrowRight') next();
if (e.key === 'ArrowLeft') prev();
}
})
"
class="py-8">
<h2 class="text-2xl font-semibold mb-6">Screenshots</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<template x-for="(src, index) in images" :key="index">
<div class="overflow-hidden rounded-lg shadow-md cursor-pointer"
@click="imgIndex = index; open = true">
<img :src="src" :alt="'Screenshot ' + (index + 1)"
class="object-cover w-full h-48 hover:scale-105 transition-transform duration-300">
</div>
</template>
</div>
<!-- Lightbox -->
<div x-show="open"
class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50"
@click.self="open = false"
x-transition.opacity>
<div class="relative">
<img :src="imgSrc" alt="Screenshot Preview"
class="max-h-[90vh] max-w-[90vw] rounded-lg shadow-lg">
<button @click.stop="prev()" class="absolute left-2 top-1/2 -translate-y-1/2 text-white text-3xl font-bold px-2">←</button>
<button @click.stop="next()" class="absolute right-2 top-1/2 -translate-y-1/2 text-white text-3xl font-bold px-2">→</button>
<button @click="open=false" class="absolute top-2 right-2 text-white text-3xl font-bold px-2">×</button>
</div>
</div>
</section>
<!-- Results -->
<section>
<h2 class="text-2xl font-semibold mb-4">Results & Learnings</h2>
<ul class="list-disc list-inside space-y-2">
<li>Built a fully functional demo Shopify store integrated with Klaviyo.</li>
<li>Delivered a <strong>multi-touch seasonal campaign</strong> instead of a single blast.</li>
<li>Balanced storytelling with <strong>persuasive CTAs</strong> for stronger engagement.</li>
<li>Gained practical experience combining <strong>MJML, Klaviyo, and Shopify</strong> into one cohesive workflow.</li>
</ul>
<p class="mt-4">
<strong>Key takeaway:</strong> Multi-step campaigns deepen brand connection, while timing + copy matter as much as design.
</p>
</section>
<!-- GitHub: View project code (with icon) -->
<section class="max-w-3xl mx-auto p-6 mt-12 text-left border-t border-gray-300">
<h2 class="text-2xl font-semibold mb-2">View the code</h2>
<p class="text-gray-700 mb-4">Open the repo to see MJML templates, email assets, and implementation notes.</p>
<a href="https://github.com/e-odacre/fablenest-email-campaign"
target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-3 bg-gray-900 text-white px-5 py-2 rounded-lg shadow hover:bg-gray-800 transition-colors duration-200"
aria-label="Open project repository on GitHub">
<!-- GitHub SVG -->
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 .5C5.73.5.75 5.48.75 11.75c0 4.94 3.2 9.13 7.64 10.61.56.1.76-.24.76-.53 0-.26-.01-1-.02-1.96-3.11.68-3.77-1.34-3.77-1.34-.51-1.29-1.24-1.63-1.24-1.63-1.01-.69.08-.68.08-.68 1.12.08 1.71 1.16 1.71 1.16.99 1.7 2.6 1.21 3.24.93.1-.72.39-1.21.71-1.49-2.48-.28-5.09-1.24-5.09-5.52 0-1.22.44-2.22 1.16-3.01-.12-.29-.5-1.45.11-3.02 0 0 .95-.3 3.12 1.15a10.76 10.76 0 012.84-.38c.96.01 1.93.13 2.84.38 2.17-1.45 3.12-1.15 3.12-1.15.61 1.57.23 2.73.11 3.02.72.79 1.16 1.79 1.16 3.01 0 4.29-2.62 5.24-5.11 5.51.4.35.76 1.04.76 2.1 0 1.52-.01 2.75-.01 3.12 0 .29.2.64.77.53A11.26 11.26 0 0023.25 11.75C23.25 5.48 18.27.5 12 .5z"/>
</svg>
View on GitHub
</a>
</section>
</main>
<!-- Footer -->
<footer class="bg-[#fffdf7] border-t mt-12 p-4 text-center text-gray-500 text-sm">
© 2025 Evan O'Dacre
</footer>
</body>
</html>