email-designs.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Designs | Evan O'Dacre</title>
  <meta name="description" content="Explore Evan O'Dacre's email design portfolio: promotional campaigns, welcome flows, abandoned-cart emails, and email program preparation.">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="navigation.css">
</head>
<body class="bg-[#fffdf7] text-gray-800 font-sans">
  <header class="bg-[#fffdf7] shadow-sm p-6">
    <div class="max-w-3xl mx-auto text-center">
      <a href="index.html#work" class="back-link mb-4">Back to portfolio</a>
      <h1 class="text-3xl font-bold">Email designs</h1>
      <p class="text-gray-700 mt-3 leading-relaxed">Promotional campaigns, welcome sequences, and abandoned-cart emails. Explore the designs and the thinking behind each project.</p>
    </div>
  </header>
  <main class="max-w-3xl mx-auto p-6 space-y-12">
    <section aria-labelledby="design-projects">
      <h2 id="design-projects" class="text-2xl font-semibold mb-6">Campaigns & flows</h2>
      <div class="grid gap-6 sm:grid-cols-2">
        <article class="bg-white/70 rounded-md shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
          <a href="fiihii.html" class="block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
            <img src="images/fiihii/launch%20email.png" alt="Fiihii email design preview" class="w-full h-72 object-cover object-top" loading="lazy" width="600" height="288">
            <div class="p-4"><p class="text-sm text-gray-600 mb-2">Promotional campaign · Client work</p><h3 class="text-xl font-semibold underline mb-2">Fiihii</h3><p class="text-gray-700">Five Cyber Monday emails combining offer strategy, brand-aligned copy, Figma design, and responsive MJML/HTML development.</p><span class="inline-block mt-3 underline">View designs & screenshots →</span></div>
          </a>
        </article>
        <article class="bg-white/70 rounded-md shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
          <a href="FableNestSpringCampaignLaunch.html" class="block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
            <img src="images/CandleShop-AutomatedFlows/campaign.png" alt="Fable Nest email design preview" class="w-full h-72 object-cover object-top" loading="lazy" width="600" height="288">
            <div class="p-4"><p class="text-sm text-gray-600 mb-2">Seasonal campaign</p><h3 class="text-xl font-semibold underline mb-2">Fable Nest</h3><p class="text-gray-700">A three-part spring sequence built around storytelling, product discovery, and a last-chance reminder, with responsive MJML templates.</p><span class="inline-block mt-3 underline">View designs & screenshots →</span></div>
          </a>
        </article>
        <article class="bg-white/70 rounded-md shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
          <a href="Luna&amp;StoneJewelryWelcome&amp;AbandonedCartFlows.html" class="block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
            <img src="images/JewelryBrandSeasonalCampaigns/welcome-desktop.png" alt="Luna &amp; Stone Jewelry email design preview" class="w-full h-72 object-cover object-top" loading="lazy" width="600" height="288">
            <div class="p-4"><p class="text-sm text-gray-600 mb-2">Welcome & abandoned-cart flows</p><h3 class="text-xl font-semibold underline mb-2">Luna &amp; Stone Jewelry</h3><p class="text-gray-700">Branded welcome emails and cart reminders, bringing together product storytelling, social proof, and responsive email development.</p><span class="inline-block mt-3 underline">View designs & screenshots →</span></div>
          </a>
        </article>
        <article class="bg-white/70 rounded-md shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
          <a href="CleanSkinCoWelcomeFlow&amp;LeadMagnet.html" class="block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
            <img src="images/SkincareStore-SegmentationProject/welcome-desktop.png" alt="CleanSkin Co. email design preview" class="w-full h-72 object-cover object-top" loading="lazy" width="600" height="288">
            <div class="p-4"><p class="text-sm text-gray-600 mb-2">Welcome flow & lead magnet</p><h3 class="text-xl font-semibold underline mb-2">CleanSkin Co.</h3><p class="text-gray-700">A three-email welcome sequence introducing a skincare guide, sharing educational content, and moving into product promotion.</p><span class="inline-block mt-3 underline">View designs & screenshots →</span></div>
          </a>
        </article>
      </div>
    </section>
    <section aria-labelledby="more-email-work">
      <h2 id="more-email-work" class="text-2xl font-semibold mb-6">More email work</h2>
      <div class="space-y-6">
        <article class="bg-white/70 p-4 rounded-md shadow-sm">
          <h3 class="text-xl font-semibold mb-2"><a href="sanecotec.html" class="underline">Sanecotec — Workshop emails</a></h3>
          <p class="text-gray-700">A workshop promotional email and follow-up, both used by the business.</p>
        </article>
        <article class="bg-white/70 p-4 rounded-md shadow-sm">
          <h3 class="text-xl font-semibold mb-2"><a href="MissionaryConnectAppEmailStrategyResearch.html" class="underline">Digital Missions Display — Program preparation</a></h3>
          <p class="text-gray-700">Previously listed as Missionary Connect. Campaign planning, email development, and Mailchimp preparation for an existing 5,000+ subscriber audience. The program did not launch.</p>
        </article>
      </div>
    </section>
    <section class="border-t pt-6">
      <h2 class="text-2xl font-semibold mb-4">Behind the designs</h2>
      <p class="leading-relaxed">I also build tools for email production. My <a href="modular-email-library.html" class="underline">Modular Email Library</a> brings reusable brand components, previews, and validation into one production workspace.</p>
    </section>
  </main>
  <footer class="bg-[#fffdf7] border-t mt-12 p-4 text-center text-gray-500 text-sm">© 2026 Evan O'Dacre</footer>
</body>
</html>