Email Marketing Agency UI Design

Blog posts, pillar pages, and case studies for an email marketing agency — where the content is technical, the topics are dense, and the reader has every reason to disengage before reaching the end. The design challenge across all eight pieces was the same: take content that could easily become an unbroken wall of text and give it enough structure, visual rhythm, and supporting imagery to hold attention from top to bottom.

In This Project

My Role

Senior Graphic Designer

Disciplines

UI Design
Layout Design
Motion Graphics

Making Complex Content Worth Reading

Email marketing is a technical discipline. The topics covered across these pages are complex and often long — the kind of content that requires depth to be useful, but where that depth becomes a design problem. Without relevant creatives placed throughout, even well-written copy loses readers before they reach the point. The challenge was finding ways to break long content into something scannable without stripping out the substance that made it worth writing in the first place.

Structure as a Design Decision

Different content types called for different structural approaches. Sliders and progressive disclosure kept long sections from overwhelming the reader all at once. Tables replaced bullet lists where scanning mattered more than reading in sequence. Alternating layouts and background colors created enough visual variation to keep the reader moving without feeling like they'd already seen what was coming. Animated heroes gave each page a reason to keep scrolling before the copy had done its work. The constraint running through all of it was working with long content on complex topics and making it easy to read — without the reader losing interest halfway through.

Email Marketing Best Practices

Rather than a static composition, the hero uses an animation to establish the page's core claim before the reader reaches the first line of copy: two phones each showing a different email, a counter building from zero, and a rocket icon filling with color. Below the hero, a "Why Email Marketing Best Practices Matter" section presents a quote composited between two emails, before leading into the centerpiece of the page: a slider in "The 5 Pillars of Email Marketing Best Practices" section, where each pillar gets its own card with a supporting creative to reinforce the content, isolated from the others so the reader can engage with one concept at a time. On mobile, the cards are stripped to heading and description with a "Read more..." button, keeping the section (and the page) navigable without losing the depth available to desktop readers.

The Importance of Personalization in Email Marketing

The hero image signals what the post is about before a single word is read: a "Hi [FNAME/there]" personalization block being dragged onto an email composition, making the concept immediately visible. Further into the post, three pieces of content from trustworthy sources are referenced alongside supporting data on personalization, each placed inside a blue box with an icon, making them easy to spot while reading without breaking the flow of the surrounding copy. The "Some ideas to get you started" section uses a GIF rather than a static image, letting the composition show more than a single image could and giving the reader something that actively demonstrates the breadth of what the section covers. Each of the three result boxes at the close of the post sits in its own contained card, paired with relevant email examples, an element relevant to the client's brand, and a highlighted stat pulled from the content and placed in a blue box.

How to Get the Most Out of Salesforce Marketing Cloud

Two phones open the page: one displaying a CodeCrew-built email sent through Salesforce, the other showing Agentforce's response to the question "How is Marketing Cloud used?", establishing the topic before the user has to scroll down. In the "What is Salesforce Marketing Cloud" section, the platform's feature set is presented as a table rather than a plain bullet list, making the information faster to scan for a reader who wants to compare options rather than read sequentially. A creative beneath the table reinforces Salesforce's capabilities visually. Across the middle sections of the page, an alternating five-box layout gives each point its own contained space, with the fifth box in each group carrying a supporting creative, breaking the rhythm just enough that the reader doesn't feel like they've already seen what's coming next.

YouAi Email Marketing Case Study

Leaning into the client's AI-first identity, the hero image opens with a robotic hand holding a phone displaying the YouAi homepage, with a YouAi email visible in the background, alongside two cards showing screenshots of the client's latest product updates and podcast announcement. That same thread carries through to the closing creative, where a human hand and a robotic hand reach toward each other, reinforcing the AI-and-human angle that runs through the client's brand. Between the hero and the closing creative, one additional creative places email examples in context alongside the written content.

Email Campaign Render Testing

Rather than a static hero, a looping animation shows phones moving along the boundary between the blue hero background and the white page below, drawing the eye down the page from the first moment. Each subsequent section alternates between white and CodeCrew-branded blue backgrounds, and each comes with its own supporting creative placed alongside the copy. Having a visual anchor per section means the reader always has something to look at while taking in the content, making a technically dense topic easier to move through.

Inbox Performance Tracking

Data-heavy by nature, the subject announces itself immediately: the hero image leads with a graph and a phone displaying a CodeCrew email, and the section directly beneath it continues with additional graphs, making clear from the first scroll what the page is about. Across subsequent sections, alternating background colors (white, CodeCrew-branded blue, and a lighter blue) give the page a structure the reader can feel without having to consciously track it. Each section also carries its own supporting creative alongside the copy, giving the reader a visual anchor through content that would otherwise be easy to skim past without absorbing.

DSLRPros Email Marketing Case Study

Working around constraints in the hero composition, the case study opens with a video testimonial from the Executive Vice President of Enterprise UAS, the parent company of DSLRPros. Below the hero section, a CodeCrew-branded green strip acts as a visual ground for a composition of DSLRPros emails, drone products, accessories, and a case, keeping the elements anchored rather than floating in space. The campaign stats are worked into the same composition, sitting on the green strip below the main arrangement. Further into the page, a creative shows two DSLRPros emails alongside a partial view of the client's segmentation setup in their ESP.

Sitka Seafood Market Email Marketing Case Study

Three phones displaying Sitka Seafood Market emails, with a branded seafood box placed in front of them, anchor the right side of the hero. To balance the composition, a hand holding a serving tray with salmon sits on the left, referencing one of Sitka’s core products. In the "The Results (Q4 2023 VS Q4 2022)" section, each stat gets its own CodeCrew-branded blue box with a green upward arrow, making the results immediately clear without requiring the reader to parse a block of text. Below, a GIF shows a CodeCrew-branded blue strip carrying a phone and a laptop, each cycling through desktop and mobile campaign variants, with a Sitka Seafood Market's box placed alongside them and the overall stats CodeCrew achieved for the client displayed beneath. The case study ends with a testimonial from the Director of Product and Experience at Sitka Seafood Market, accompanied by an image of her and the Sitka Seafood Market logo.

Hayden LA + CodeCrew Case Study

Placing a Hayden LA model behind a CodeCrew-branded blue overlay, the hero is grounded by a rising trend line with an Average Order Value badge anchored to one of its data points, making it clear from the first frame that the case study is about numbers. Further into the page, a testimonial section uses a chat bubble background, with a Hayden LA email composited between two models, keeping the brand's visual register present through a section that is otherwise copy-led. The case study closes with a creative showing a Hayden LA email, a blue "Increase in Click-Through Rates" callout, and a chart tracking the evolution of Bounce Rate and Open Rate across the months.

†These designs reflect the work as originally delivered. The live pages may have since been updated or changed. Some designs are shown in desktop format only.

Back to Portfolio