Email Layout Designs

Email Layout Designs

Menu

Menu

Project Scope

My marketing emails are designed for quick readability, the value and desired action are clear to the user. They are built to adapt responsively across devices and browser sizes. The images are used thoughtfully and are separate from the text for easier scanability and do not pose as a distraction from the Call to Action. Designed to feel native and on-brand, the color pallet, fonts, and element styling are designed to reflect a client's current branding.
Below are some examples of emails that I have designed for clients during my time at Wunderkind. You will find three types of abandonment emails (product, cart, and subscription), a welcome email, a post-purchase email, and a section showing how I use consistency in layout design while applying unique branding elements for multi-property clients.
I have had the pleasure of working with luxury fashion brands, small, family-owned businesses, and globally recognized service providers.

Product Abandonment Email

Product Abandonment Email

The purpose of this type of email is to re-engage users who abandon after viewing a product page. The top products are pulled in based on the products within that category with the highest engagement at the time of the abandonment.

The hero CTA is placed above imagery as a performance best practice—80% + of email engagement happens above the fold. The hero imagery showcases brand lifestyle or a variety of bestsellers to capture a broad audience. The image is placed at the bottom to ensure that the copy and CTA stay above the fold across a variety of screen sizes.

Product grid features four products as a performance best practice for email loading time.

To build brand affinity abandonment emails can include a value proposition block in the layout. These values can either be the values that the brand processes, such as a commitment to sustainability, or ways the brand gives back. The section could alternatively be the value that the customer will receive such as free shipping, or easy returns.

The last touch section appears just above the footer. This section can include links to top categories, ways of shopping on the site, or social media sites. These links are not recommended as they can reduce performance due to the fact that they are not encouraging the customer to continue on with the abandoned journey but rather start a new journey. Many clients request to include them regardless. Including them below the product grid helps reduce the possibility that they can negatively affect performance.

Cart Abandonment Email

Cart Abandonment Email

Cart abandonment emails re-engage customers who have abandoned the user journey after viewing the cart page. This is often the highest converting series. Each email pulls in items that the user has added to their shopping cart, with the most recently added item featured in the hero.

For the Cart Abandonment emails, the first product dynamically populates in the hero as this is a higher intent module than the product abandonment email. Additionally, three products appear in the product grid, for a total of four products as a performance best practice for email loading time

Cart emails use stacked product cards due to the fact that the number of products in a customer's cart can vary and asymmetry of product cards can be an unnecessary distraction.

Customized last touch blocks encourage the customer to click back to the site. While the ultimate goal of an abandonment email is to get the customer back on the user journey that they originally abandoned, adding additional content that directs the customer back to the website will generate traffic if the items in the product grid are no longer of interest to the customer.

Post-Purchase Email

Post-Purchase Email

Post-purchase emails re-engage a user who has successfully completed a purchase. New arrivals, top categories, and additional ways to engage with the brand are part of this email layout.

The categories section in a post-purchase email is designed to feature top categories and boost return traffic. Top sellers from that category are featured along with lifestyle images. CTAs that direct the customer to the featured item's product page are used here as well as a general CTA that directs the customer to the category page.

A rating section in a post-purchase email encourages customers to return to the brand's site to offer their feedback. This boosts traffic and strengthens customer loyalty.

Some brands ask customers to engage with them by posting pictures on Instagram and asking the customer to tag them. Meta offers a way for the brand to curate these posts on their website. Pulling these images into a post-purchase email inspires customers to show off their new purchase to the community of customers that the brand has built. This helps to boost brand affinity and build customer loyalty.

Promo banner sections such as limited time sales, or other ways to save boost user urgency and engagement and drive more traffic to the site.

This is another example of a value proposition section. Rather than a story format like the flower store example from above, this layout is designed to feature three seperseparateate values or three steps to receive the value on offer.

Welcome Email

Welcome Email

When a prospective customer signs up to receive emails from a client, I send a welcome email. The purpose is to give users an introductory "handshake" to the brand. Welcome emails are designed to emphasize brand identity and voice. They build brand affinity and encourage users to follow through with their buying journey. The overall layout of the email takes a similar form to abandonment emails so that there is consistency in design across all the emails the customer will receive from me.

I recommend not including a navigation bar in abandonment emails as it can cause the customer to start a new journey rather than continue on the journey that they abandoned. I do include the navigation bar in welcome emails to encourage the customer to begin their buying journey.

The brand story block is a place for the client to introduce themselves to the customer and begin to build affinity. The design can feature information about the founders, the backstory of the brand, or a story about the brand's values.

Subscription Email

Subscription Email

The abandonment email model is switched up some for clients that sell subscriptions. This includes, food boxes, insurance, and periodicals.

For subscription clients, I replace the product grid block with either the individual type of subscription that the customer has abandoned or a group of cards with each of the subscriptions on offer. For these product cards I include the name of the subscription, a brief description of that subscription and some key features or offerings that are part of the subscription.

To reinforce the value of the subscription, I include a section in the email detailing the benefits that apply to all of the subscription types and levels that the client offers.

Consistency Across Multi-Property Clients

Consistency Across Multi-Property Clients

Back

Previous UI Experience

Take me to the top

Next UI Experience

Next

Let’s get a conversation started!

Let’s get a conversation started!

Let’s get a conversation started!