Bath & Body Works hero

An Email Worth Scrolling For

From: Bath & Body Works
Date: 2/01/20
Subject Line: 💘 your Valentine’s Day gift guide 💘
View it in a browser

Bath & Body Works Email

Every now and then I get an email that makes me jealous, as a designer. Today was one of those days.

According to a study done in 2019, the majority of emails are opened on a mobile device (roughly 42% mobile, 40% webmail clients and 18% desktop). Viewing on a smaller screen forces you to scroll more than on a desktop. Therefore, it’s important to create designs that entice you to reach the bottom.

Bath & Body Works Phone Scroll

When you look at this email as a single image, it really isn’t as impressive as seeing it scrolling. Bath & Body Works was able to create one long vertical image that SEAMLESSLY incorporates multiple products — while also creating flow, balance, and dimension. I find myself dissecting the image, looking for any seam or a misplaced shadow, but I can’t find one. It’s amazing work. They also add interest by including an animated gif in the header (the candle flickers).

Bath & Body Works animation

The only missed opportunity is the lack of call-to-actions. Bath & Body Works does include a link at the top and bottom of the “scroll area” to SHOP GIFTS. (I appreciate the CTA at the bottom, BTW!) However, the products within the scroll are missing these. The long image is broken into multiple pieces to allow for multiple links (room fragrances and 2 new scents), but all sections link to the same landing page (Gifts for Her).

This design, graphically, is nothing short of inspiring!

Read More

Rejuvenation Hero

The Beauty of a Zoom

From: Rejuvenation
Date: 3/24/17
Subject Line: LAST CHANCE! FREE SHIPPING + bath makeover inspiration

From: Rejuvenation
Date: 3/22/17
Subject Line: Don’t miss out! Free Shipping on your first order!

From: Rejuvenation
Date: 3/20/17
Subject Line: We’re treating you to Complimentary Shipping on your next order

Rejuvenation   Rejuvenation   Rejuvenation

These emails by Rejuvenation are the new evolution of design. Two major staples of my methods include: 1) creating flow by staggering products and 2) not overwhelming layouts with too many products. These email do neither, so WHY would I find these emails so aesthetically pleasing? The answer is in the photo zooms! If you tried this layout with photos of a typical shooting distance, it would become overwhelmingly cluttered; your eye wouldn’t know where to look and your brain would have trouble processing every element before you got bored and moved on to the next email. The zooms, however, add a clear and beautiful level of detail that are simplistic and easy to digest. Each image leaves you wanting more. The angles that the photos were taken at are also important; if each photo was shot head-on, it would become stale and lack movement. However, Rejuvenation cropped each image to add balance and interest to a layout that would otherwise be devoid of flow. I also love how each design has its own color scheme; every image coordinates with the hero perfectly.

Read More

Sur La Table Recipe Email Hero

Now THIS is How You Sell a Product

From: Sur La Table
Date: 7/17/16
Subject Line: This Week’s Recipe—Shrimp and Pineapple Curry

From: Sur La Table
Date: 7/24/16
Subject Line: This Week’s Recipe: Barbecued Corn & Tomato Salad

Sur La Table Pineapple Email    Sur La Table Corn Email

I ADORE these recipe emails from Sur La Table! These are great examples of how to feature a product in a way that can appeal to anyone. They’re packed with information including a recipe, product, tip and trivia — but despite all the content, they are fun and don’t feel overwhelming. The gorgeous recipe hero image is eye catching and includes a large call to action above the fold. Right from the start this email has added value by giving you something for free without trying to sales pitch you out the door. The well implemented left-to-right flow and wonderful use of negative space draws your eyes to the next section where you see the product that was used to make the recipe. A video is included in both emails to illustrate how easy the product is to use. There are so many graphic design choices that really add interest, including: textured headline backgrounds that POP, drop shadows on products, boxes with dotted borders, overlapping imagery, various arrows to lead the eye, colored drop shadows and the headline flourish in the trivia section. I ❤❤❤ these emails! Nice job, Sur La Table!

Read More

Forever 21

A Design FIT for Greatness

From: Forever 21
Date: 2/05/16
Subject Line: A (F)IT Girl: Tips From SELF Magazine

Forever 21

There’s a lot to like about this gem from Forever 21. The clothing retailer steps up their game by making the email all about the workout. They offer 3 muscle-building moves to add to your routine. Each move is paired with an image of a model in fitness attire that can be purchased. The design is inspiring with many positive takeaways.

Let’s count the things I love about it:
1) Flow. I love the line that draws your eye down the page from the very beginning. The movement continues by use of staggered imagery and text placement.
2) Scanability. The bold and concise headlines make it quick and easy to read.
3) Organization. The large pink numbers provide nice separation between sections. They keep the email from becoming a jumbled mess with no end in sight.
4) Style. The editorial type layout resembles that of a magazine (after all the subject line says the tips come from SELF magazine).
5) Depth. The overlapping imagery in varying sizes adds interest to the design.
6) Theme. The variety of image types include products, exercise equipment, and motivational signs. The image mix adds to the feel of the email so it doesn’t look product driven.
7) Details. The careful attention to alignment gives the design a finished feel. For example: In the first section the number 1, the title and the copy box are all top-aligned. In the next section the vertical lines align with the title and the copy block.

As much as I adore this email, there are a few things I would change:
1) Clearer Instructions. I would have liked to see images or illustrations of the steps for each routine. Sometimes it’s difficult to understand in words; plus, images are so much quicker to scan. If there’s not a good way to work them into the design, a link to a landing page could work.
2) The CTA. I have a few gripes on this one. There is only one call to action for the primary message, and it’s placed at the very bottom. I would have liked to see product names as links throughout the design, as well as a general button above the fold. The CTA wording is also lack luster and unclear: “Shop Now.” I would assume this would take me to fitness clothing, which it does… but then the next section says “Shop Activewear” which goes to a different landing page. So I’m left wondering what the difference is between these sections.
3) Last, I have a small copy suggestion. In the right column of the opening paragraph, it bothers me that it begins with a number. I would have rearranged copy, added words, or spelled out eighteen to make sure that didn’t happen. The length of that line compared to the others also doesn’t settle well with me. It wouldn’t be so bad anywhere else, but it doesn’t work well in the first line of a column. Nit-picky, but that’s my 2 cents.

Overall, I love this email. Nicely done!

Read More

Sur La Table

Creating the Perfect Design

Do you ever see a design that just feels right but you can’t put your finger on what makes it so great? Well here’s a breakdown of things every designer should know to make their design fabulous. I chose this email from Sur La Table to dissect as an example. I thought the design was well done overall. So let’s dig in!

From: Sur La Table
Date: 11/09/15
Subject Line: Our Holiday Gift Shops are ready — take a peek!

Sur La Table

You want to weave the subscribers’ eyes through the design — over each product and down the page. There are many ways to create flow from staggered products, angled images, or added graphics. Sur La Table used a numbered list to zig-zag your eye through the page.

Sur La Table

No email is sent without a purpose. Make sure it’s clear to the subscriber as well by making your call to action clear and present. Make it pop on the page and keep the copy concise and specific. This email isn’t the best example of this, but it’s not bad. The call to action is a nice contrasting red to the light grey background, but a colored box could have helped it stand out a bit more. Spoiler alert: I’ll have another blog coming soon all about call to actions!

Color can be a great way to add flow and interest to your design. You can stagger colors (just like images) to create flow. In this email for example, the white is used as negative space. The dark brown curves your eye around the section. Color can also be used to unify sections and products. If you notice all the imagery in the first section sets a grey tone. The secondary section is primarily reds and browns. It helps to separate the sections and makes the product feel like they belong together.

Sur La Table

Again, you don’t want to confuse subscribers about the focus of the email. Without a sense of hierarchy, you will lose their interest. Make sure sections are clearly defined, sized appropriately, and don’t try to cram too much into one email. Although Sur La Table’s primary and secondary sections are fairly equal in size, they are clearly separated and defined. They use extra white space between the messages and placed the secondary headline in a color bar. I love the addition of the arrow to tie the headline with the products and draw your eye down.

Sur La Table

Time for me to get a bit OCD on you. Sometimes image and text groupings just click. They feel right but it may not be obvious why. Well, here’s a big tip for you. Place every object with equal balance and purpose. And I don’t just mean aligning your copy. Look at the space that surrounds the copy vertically and horizontally. Is it equal? What about the space that borders the entire hero? Now that you’ve seen it, it can’t be unseen. I’m sorry and welcome to my world.

Sur La Table

I created an animated gif below (a before and after), showing how I would modify this hero. I made the following adjustments:

  • Centered the call to action to the headline
  • Centered the grey body copy
  • Moved the call to action up so that the space below the button was equal to the space above the headline
  • Moved the stocking image right so that the space to the left and right of the headline was equal

Sur La Table

Doesn’t that just feel a little bit better? It’s all in the details. No one will measure the pixels in your design (other than me), but when it fits, the design simply feels complete.

Whenever you get the chance, break out of the box. Find unique ways to add interest by using things like graphics, textured backgrounds, fun image borders, animations, etc. Sur La Table added a little value with some curved text and a fun font.

Sur La Table Sur La Table

The last thing I want to mention is content does matter. The wrong copy and/or imagery can really kill any design. If the copy is too wordy or bland, subscribers will lose interest. It’s also hard to get bad imagery to work. These can be real struggles for a designer since content is usually handed to them. But when you see an opportunity to make an improvement, pitch your idea! Support your claims of why it’s a good idea. Show an example of working copy from a competitor or take the time to find some stock imagery that might be suitable. They just might be appreciative of the new perspective.

So there you go! Every email is a piece of art just waiting to happen, so get creative and go rock it!

Read More

Design Flow Hero

Creating Flow from Chaos

When you’re tasked to fit A LOT of products in an email, it’s tough to find a layout that will flow, draw interest and won’t overwhelm. Here are two design styles that I think pull it off quite nicely.

Solution #1: Staggered Image Grids
Works well with: Environmental Photography

I’m really drawn to this popular layout. Breaking away from the traditional grid, the staggered effect really draws your eye through the images and down the page. It has minimal text so it scans easily.

From: Rejuvenation
Date: 8/12/15
Subject Line: Looking to update your bath? Start here with Free Shipping!


From: Pottery Barn Kids
Date: 8/12/15
Subject Line: POW! Save on our Super Hero Collection

Potterybarn Kids

From: Anthropologie
Date: 8/16/15
Subject Line: It’s your move (our move: free ship).


From: Crate and Barrel
Date: 8/01/15
Subject Line: Last chance to save on outdoor furniture.

Crate and Barrel

From: Aéropostale
Date: 8/05/15
Subject Line: Online Sneak Peek: Employee Discount Sale!


Solution #2: Diagonal Lines
For use with: Product Cutouts

This design method uses graphics in addition to product photography to create flow.

From: The Children’s Place
Date: 8/05/15
Subject Line: Up to 55% Off All Uniforms + Get Back to School Essentials Starting at $2.99 + Extra 25% Off Savings Pass!

The Children's Place

From: Ulta Beauty
Date: 8/13/15
Subject Line: Who’s Getting a Gift? (Hint: It’s You)


Date: 7/29/15
Subject Line: Summer Denim: 7 For All Mankind, HUDSON & more



Read More