Visual + UX Design
Clear hierarchy, readable typography, deliberate CTA priority, brand consistency, and fast mobile scanning.
Case Study · Email Design & Development
Designing scalable email communications from concept to production.
For CDC and Aretum, I translated communication goals into responsive email systems that balanced brand expression, content hierarchy, front-end constraints, accessibility, and production QA.
CDC
Aretum
Role + approach
My role connected visual design with the realities of email production.
The work combined message hierarchy, reusable components, responsive behavior, and QA into one practical system.
Email Development
Email-safe HTML/CSS patterns, responsive stacking, fluid imagery, fallback-aware typography, and cross-client rendering considerations.
Component Systems
Reusable Figma modules and brand variants designed to support faster review, handoff, and future updates.
QA + Accessibility
Content checks, link validation, responsive review, contrast, reading order, image alternatives, and final approval readiness.
The Challenge
The emails needed to feel polished without becoming fragile or difficult to maintain.
My approach started with message priority: what needed immediate attention, what supported the primary action, and what could remain flexible as campaign content changed.
That structure became a modular system rather than a collection of one-off layouts, making the design easier to adapt, review, and carry into development.
Design constraints
- Audience and message priority
- Brand consistency across campaigns
- Responsive behavior across screen sizes
- Accessible hierarchy and image treatment
- Development-ready assets and specifications
- Repeatable QA and stakeholder review
Process
A repeatable path from communication brief to production-ready email.
Each stage reduced uncertainty before the next: clarify the message, establish the system, build within email constraints, then validate the result.
1. Clarify
The first step was defining the objective, audience, content priority, mandatory messaging, brand constraints, and delivery requirements.
2. Systemize
Once the direction was approved, I converted recurring patterns into reusable modules so revisions did not require redesigning the full communication.
3. Validate
Responsive behavior, accessibility, links, visual fidelity, and content accuracy were checked throughout the build rather than only at the end.
Figma System Setup
Reusable components turned visual direction into a system.
I applied the same component logic across two different brand systems, using shared structure while preserving the visual language, hierarchy, and communication goals of CDC and Aretum.
Header / Brand
Consistent logo treatment, utility links, campaign identity, and spacing.
Hero / Primary
Headline hierarchy, supporting copy, imagery, and a clearly prioritized CTA.
Body / Modular
Flexible content patterns designed to reflow predictably as available width changes.
Footer / Legal
Recurring organizational, compliance, contact, and preference-management content.
Design → Development
The approved design was translated into measurable, email-safe HTML and CSS.
Development planning happened alongside design. The layout accounted for table-based structure, inline-safe styling, responsive media queries, fluid imagery, fallback fonts, accessible reading order, and the rendering limitations of major email clients.
I also considered how each campaign would support marketing and lead-generation goals after launch. Primary CTAs could be assigned campaign parameters and consistent naming conventions so click-through traffic could be attributed to the email and evaluated after the visitor reached the destination experience.
Using UTM-tagged links and Google Analytics 4, post-click behavior could be reviewed through landing-page engagement, CTA-driven sessions, key events, conversions, and lead activity. Metrics such as engagement rate and bounce rate provided additional context for understanding whether the message and destination experience were moving users toward the intended action.
Keeping development and measurement requirements visible early reduced the gap between the Figma system, the final email build, and the data needed to evaluate campaign effectiveness.
aretum-campaign-email.html
<table role="presentation"
width="100%" cellspacing="0"
cellpadding="0" border="0">
<tr>
<td align="center">
<table role="presentation"
width="600"
class="email-container"
cellspacing="0"
cellpadding="0"
border="0">
<tr>
<td class="brand-header">
<img
src="aretum-logo.png"
width="180"
alt="Aretum">
</td>
</tr>
<tr>
<td class="hero">
<p class="eyebrow">
PEOPLE · SOLUTIONS · IMPACT
</p>
<h1>
A stronger start begins here.
</h1>
<p>
Explore resources designed
to help you connect, learn,
and move forward.
</p>
<a
href="https://aretum.com/?utm_source=email&utm_medium=email&utm_campaign=welcome&utm_content=hero_cta"
class="cta">
Get Started →
</a>
</td>
</tr>
<tr>
<td class="content">
<h2>
Everything you need
for a great start
</h2>
<p>
Helpful resources,
team information,
and next steps in one
responsive experience.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style>
@media only screen and (max-width:600px) {
.email-container {
width:100% !important;
}
.hero,
.content {
padding:24px !important;
}
.cta {
display:block !important;
text-align:center !important;
}
img {
max-width:100% !important;
height:auto !important;
}
}
</style>Representative Aretum campaign pattern showing responsive structure, branded content, and a UTM-tagged CTA for post-click campaign analysis.
Responsive Behavior
Responsive behavior was designed into both systems, not added after the desktop comp.
Across CDC and Aretum, hierarchy, CTA visibility, spacing, image behavior, and content order were evaluated across desktop, tablet, and mobile widths.
Health-awareness campaign using lifestyle imagery, long-form educational content, and a resource-driven CTA.
CDC · Selected Email Campaigns
Public health content shaped around clarity, trust, and accessible scanning.
For CDC communications, I focused on making important information easier to recognize, understand, and act on without weakening the authority of the brand.
Design approach
A disciplined blue-and-white system, concise sections, clear hierarchy, repeatable content cards, and one obvious primary action.
Build approach
Predictable content widths, responsive stacking, fluid imagery, and reusable sections supported a stable production structure.
Accessibility
Readable type, sufficient contrast, descriptive image alternatives, meaningful link language, and logical reading order guided the final review.
Reusable onboarding campaign adapted for a Director of Business Development while preserving the shared visual and component system.
Aretum · Selected Email Campaigns
A campaign identity extended into a flexible corporate email system.
For Aretum, I carried the brand’s visual language into email while keeping the authoring structure flexible enough to accommodate changing copy, imagery, CTAs, and stakeholder feedback.
Campaign continuity
Navy, blue, white, and yellow cues preserved recognition across the email and supporting campaign assets.
Reusable authoring
Hero, text, CTA, supporting content, and footer areas were separated into repeatable modules rather than fixed one-off layouts.
Production value
Consistent component structure and spacing rules created a clearer handoff for review, development, and future updates.
QA + Accessibility
Testing remained part of the design process through final delivery.
Before handoff, I reviewed each communication against visual, functional, accessibility, and stakeholder requirements, then resolved issues before final approval.
- Copy, links, CTA labels, and required content
- Desktop and mobile hierarchy
- Image rendering and fallback behavior
- Contrast, alt text, and reading order
- Review comments and final approval status
Outcome
The result was a more reusable, consistent, and production-ready email workflow.
Client-specific performance metrics are not shown here, so the case study focuses on the operational value of the work: repeatability, clearer handoff, accessibility, consistency, and production readiness.
Reusable
Modular patterns supported future communications without rebuilding the structure from scratch.
Efficient
Clear components, spacing rules, and specifications reduced ambiguity during review and handoff.
Accessible
Hierarchy, contrast, image alternatives, responsive behavior, and reading order were treated as core design requirements.
Production-ready
Design, development, QA, and stakeholder review were connected through one repeatable workflow.
Capabilities demonstrated