Countdown hero

♫ Because your list (your list) is on my list …

…because your list (your list) I can’t resist!

Lists can be a great way to call out your most popular products. There are many ways you can tackle designing such a list. Here are 5 drastically different approaches and a few pointers to keep in mind.

NOT JUST NUMBERS

From: Pottery Barn
Date: 11/18/15
Subject Line: Celebrate the Season of Giving with Our Top 10 Holiday Gifts

Pottery Barn  Pottery Barn zoom

The last thing you want is for your numbers to get lost or to feel like an afterthought. Think of them as a graphic rather than text. I love how Pottery Barn made their numbers large so that they feel like a conscious part of the design. They toned-down the color to keep them from becoming overwhelming. Another great addition is the horizontal lines. They help to unify the sections and also add dimension & interest by intersecting the numbers.

ADD DEPTH

From: Sephora Beauty Insider
Date: 11/23/15
Subject Line: Take your pick: free fragrance mini

Sephora  Sephora zoom

Don’t let your design fall flat. Sephora’s email has layers upon layers of dimension by 1) overlapping product cut-outs over square cut images, 2) including drop shadows, and 3) sprinkling in confetti ground cover. In this design, the numbers all run along the right side. The flow is made possible with the help of ornaments, gold fans, and carefully placed confetti stars.

USE A VARIETY OF IMAGES

From: Pottery Barn Kids
Date: 11/13/15
Subject Line: Top 10 gifts we L♥VE

Pottery Barn Kids  Pottery Barn Kids zoom

By using both product cut-outs and square-cut images, you are getting the best of both worlds. The square-cuts will help to set the scene and show off your products in the best way possible. But when you get too many environment shots, your design will become hard to scan and overwhelming to look at. This email has the perfect mix. I also like how the environment images are all full-width with the number and text written on top of them.

MAKE IT A COUNTDOWN

From: OshKosh B’gosh
Date: 11/19/15
Subject Line: Extra 30% OFF COUPON ends tonight!

OshKosh  OshKosh zoom

A countdown is a great way to get your subscribers to scroll in order to reveal the big #1 item. In OshKosh’s design, even though the numbers are aligned down the center, they are able to create flow by staggering the corresponding text and products. I also like the mix of fonts, clever wording, and scannable titles.

KEEP IT CLEAN

From: Williams-Sonoma
Date: 11/21/15
Subject Line: Last Chance to Save on Thanksgiving Essentials + FREE SHIPPING ON ALL ORDERS

Williams-Sonoma  Williams-Sonoma zoom

Don’t let your design get too cluttered. Sometimes simplicity and predictability is the best solution to a scannable email. Here is a classic example of a staggered design. Everything is cut into a perfect grid with the images zigzaging down the page. The copy appears on the opposite side of each image. The copy is kept concise for easy scanning.

Read More

November Design Inspiration Hero

Design Inspiration of the Month

The holiday season is here! Are you in need of some fresh design ideas? Break out of that template and make your emails stand out. Here are some cool designs that hit my inbox this month.

GEOMETRIC IMAGE GRID
I just love this image layout! Cutting images into diamonds and triangles and forming them into a geometric shapes… Just so much yes. Creative. Stunning. More of this please!

From: American Eagle Outfitters
Date: 11/22/15
Subject Line: BOGO 50% off the sweaters (& everything else) you need now.
See the email

American Eagle Outfitters

From: GUESS
Date: 11/23/15
Subject Line: Online Now: Up to 50% Off + Free Shipping
See the email

GUESS

TINY PEOPLE
Neiman Marcus first sent an email with animated little people painting the border around the email. So clever and cute — as if they were setting the scene for the beginning of the holiday season. Then, a couple weeks later, I received another email with the return of some tiny people. This time they were sort of photobombing the scene (as was the product). It gives the image a little something special to grab your attention.

From: Neiman Marcus
Date: 11/05/15
Subject Line: The Love to Give Collection is here!
See the email

Neiman MarcusNeiman Marcus

From: Neiman Marcus
Date: 11/18/15
Subject Line: Triple Point Event + Our exclusive gifts!
See the email

Neiman Marcus

RIBBON ACCENTS
Sephora sent an email using red ribbon for a little holiday accent and a pop of color. It’s a classy (and holiday neutral) graphic choice that I love. It’s reminiscent of another email they sent back in September with gold ribbon weaving throughout the products and design. The ribbon adds flow, dimension and a little fun to the email.

From: Sephora Beauty Insider
Date: 11/21/15
Subject Line: 12 party-perfect samples, 1 festive bag
See the email

Sephora

From: Sephora Beauty Insider
Date: 9/15/15
Subject Line: They’re here
See the email

Sephora

WRAPPED PRODUCTS
I really like how Michaels added bows and tags onto their products. It’s a great way to make an ordinary item feel more in the spirit of the holiday season. It also takes less imagination to consider the products as being gift worthy.

From: Michaels
Date: 11/18/15
Subject Line: The Latest Creative Tech Tools – Now on Sale!
See the email

Michaels

Read More

Glitch Hero

A Nice Recovery

It happens to the best of us — an email goes out with a mistake, a promo code doesn’t work, a website goes down… No one is perfect. But when something like this happens, you need to be quick on your feet. Let your subscribers know that you’re aware of the issue, and offer something in return for the inconvenience. Your offer can be anything from a heart-felt apology, to an extension of the sale or additional savings. Here are two emails that did an exceptional job.

From: American Eagle Outfitters
Date: 11/18/15
Subject Line: Son of a glitch.
See the email with animation

AEO AEO glitch gif

When you’re in a crunch to get this message out fast, it’s easy (and often necessary) to cut corners on the design. Surprisingly, American Eagle Outfitters presented a well thought out design while under pressure. I love the subject line (Son of a glitch) and the animated hero (of a picture with a glitch). Well played, AEO. So what can we learn from this email? Plan ahead. You never know when you might be in this very situation, so create a design ahead of time. Have it coded and standing by. When the time comes to use it, plug in the details and send it out the door.

From: Christopher & Banks | CJ Banks
Date: 11/13/15
Subject Line: Oops! Our Bad…

Christopher & Banks

Here’s another example from Christopher & Banks. I like how they incorporated the original email into the response message. It makes it clear which email they’re referring to, and even adds a bit to the design. A message that is purely text can get overlooked, but they did a great job addressing the issue in a scannable way. When the glitch was corrected the next day, they resent the email and updated the subject line to “Festive Friday is now Festive Saturday!” They also included this message at the top of the design: “Festive Friday is back on! … and extended through Saturday. Thank you for your patience. Happy shopping!”

Read More

CTA hero

C-T-yaaaaaaay!!

More times than not, an email’s success is measured by the number of clicks it receives. An important factor in getting that reaction is having an effective call to action. Get yours noticed with my tips below.

USE CONTRASTING COLOR
Make sure your call to action stands out by giving it high contrast. Whether it’s a link, a colored box or a graphic, do whatever you can to keep it from blending into the background.

From: Charming Charlie
Date: 11/08/15
Subject Line: It’s the last weekend of BOGO, sooo…
See the full email

Charming Charlie

Here’s an example where Charming Charlie used a dark plaid button to contrast the white background.

LOCATION, LOCATION, LOCATION
You should always aim to keep your call to action above the fold (aka where subscribers will see it without needing to scroll). Also, place it where the eye flows naturally.

From: maurices
Date: 11/14/15
Subject Line: Fa la la la fab!
See the full email

Maurices

Maurices does a good job getting their call to action above the fold in this example.

BE SPECIFIC
Subscribers should know where the link will take them without reading the email. For example, “Shop the Sale” would be a better approach than “Shop now.”

From: American Eagle Outfitters
Date: 11/14/15
Subject Line: Get your shirt together.
See the full email

American Outfitters

Although AEO’s call to actions are below the fold, they do a great job naming the buttons. Without reading anything else, I know exactly where the link “Shop Women’s Flannels” will take me.

KEEP IT SHORT
If your call to action is too wordy, it will become unscannable and could lose clicks. Making it too wide may also make it less apparent as a button.

From: Gap
Date: 11/13/15
Subject Line: a merry mystery awaits…
See the full email

Gap

Gap’s wording is borderline long in this example. It could be shortened to “Reveal Your Deal.” However, they do a good job calling attention to the call to action by giving it contrasting color, and by using the tree background which works as a giant arrow.

From: aerie
Date: 11/07/15
Subject Line: Welcome To Dreamland. FREE Boxer!
See the full email

aerie

Aerie kept their copy short, but they decided to go super wide. Because of this, it’s slightly less apparent as a button/link. If different wording was used, it could be mistaken for a headline.

USE INVENTIVE WORDING
Put your copywriter thinking cap on to make the link fun and unique. Take into consideration who your audience is, the theme of the email and the tone you’re trying to set.

From: Moosejaw.com
Date: 11/12/15
Subject Line: Hours Left to Get 30% Back
See the full email

Moosejaw

Moosejaw used some clever wording in this email. Their sub-message title says: “It’s getting Cold,” the call to action is “Bundle Up.”

CALL ATTENTION TO IT
Try animating your call to action, adding graphics to it, or making objects point to it. The sky is the limit.

From: aerie
Date: 10/14/15
Subject Line: Last Day For BOGO 50% Off Collection!
See the full email

aerie

Here’s an example from Aerie where a heart was included in the button. I ❤ this.

Read More

Moosejaw

Hilarious Text Alert Sign Up

From: Moosejaw.com
Date: 11/16/15
Subject Line: 20% off Thermarest, Nemo, Big Agnes and more
See the full email
Go to the landing page

Moosejaw

I loved the ingenious way Moosejaw encouraged customers to sign up for text alerts. In their email, they offer a service to “escape the awkward dinner this holiday.” You choose the time and they’ll text you an excuse to get you out of Thanksgiving! At the bottom of the form they ask you if you’d be interested in receiving future text alerts. The selection of excuses are hilariously written and are sure to provoke a laugh. Check them out below!

Moosejaw

Read More

Starbucks

Invite a Friend to a Sale

Starbucks came up with a fun and clever way to spread the word about their promotion. The deal was: Buy one holiday drink, get one free. The email encouraged subscribers to invite a friend to a free drink. They provided a variety of cute animated gifs that could be personalized and shared through social media.

Starbucks Starbucks

From: Starbucks
Date: 11/12/15
Subject Line: 4 days only: Buy one, get one to share
See the landing page

Starbucks

I love the concept, but I have a few suggestions for improvement. I would have liked to see the animated gifs in the email. By only saying “Create and Send an Invite,” I didn’t know what to expect — for all I knew it could have brought up a basic email form. The design is also really long with too many topics. The sections are overly large to the point where each fills the entire screen. This means a lot of scrolling, and no visual push into the next section. My last gripe — on the landing page, you can’t tell the images are animated until you click on them. I would have liked to see the animation from the get go.

On a positive note, I love the hero graphics (the gold dust and illustrated cups)… although its size pushes the call to action below the fold. The stylized font that appears throughout the email is also appealing. Lastly, the animations are super creative and cute which makes it so much fun to share.

Read More

Michaels

Personality Quiz Email

If there’s anything Facebook has taught us, it’s that people love personality surveys. So why not create your own? Make a quiz that determines the subscriber’s personal style. Then offer product suggestions based on their results! Tip: Don’t forget to make your survey answers images, like in the popular Facebook quizzes. Finally, include a button to allow the subscribers to share their results on Facebook. Well, aren’t you just #trendy?

From: Michaels
Date: 11/11/15
Subject Line: Have You Used Your Coupon?
See the full email

Michaels

Here’s the email that inspired the idea. Michael’s included a sub message where viewers could see their “tree profile.” By clicking on which tree they liked best, they’re given an explanation of their personality type and offered DIY projects and items that fit their taste. Pretty cool. Here is the landing page for the top/right tree.

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

FLOW
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

CALL TO ACTION
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
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

HIERARCHY
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

BALANCE
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.

EMBELLISHMENTS
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

CONTENT
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

showroom hero

Straight from the Showroom Floor

I like how these emails give you a feeling of shopping in the store by showing the products as you would see them in person: displayed on a table, carefully folded or hanging on the rack. It makes the images seem less doctored when they’re not being worn by a curvy model or in a perfectly decorated setting.

From: American Eagle Outfitters
Date: 11/01/15
Subject Line: Take 25% off, ’cause we APPreciate you!

american eagle outfitters

I ADORE this email design. The wood grain background that extends the full height of the email sets a nice inviting and rugged tone. The leaves add to the ambiance, giving a sense of fall. But the best part (as it should be) is the products. The way they overlap on top of one another, along with drop shadows, really give them interest. The way they’re positioned draws your eye around to each item and down the page.

From: maurices
Date: 10/21/15
Subject Line: Top picks for 9 to 5.

maurices

I love how the folded clothes overlap the hero to draw your eye into the next section. The products are fanned out and folded in interesting ways to add movement. The call to actions are well placed to fill the empty space and connect with the items.

From: Express
Date: 11/06/15
Subject Line: New Express One Eleven! Let’s hang

express

Puns galore are included in this email from Express. The hero image shows a rack of clothes on hangers. The subject line says “Let’s hang” and the headline is “The tops you need for major hang time.” Cute.

From: babyGap
Date: 10/22/15
Subject Line: snoopy’s here!

baby gap

Baby Gap shows off its new Snoopy collection by folding and laying them all out as you would see in a store. It’s effective at fitting a lot of products into a small space while also giving a true sense of what each garment looks like.

Read More

Scrolling Story Hero

A Scrolling Story

I love how these emails tell a vertical story. The thought/sentence begins at the top of the email and continues as you scroll down. They use minimal word groupings to make it quick and easy to scan. This concept is sure to keep you scrolling all the way to the bottom. So which email pulled it off better? Check out my thoughts below.

From: Anthropologie
Date: 10/16/15
Subject Line: Fri, Sat, Sun & 20% OFF.

Anthropologie

The drop shadows on the products add nice dimension. Normally I love a strong hero but in this case it sort of feels disconnected from the story. (Especially with the large headline that appears below it.) I would suggest starting the first cut out overlapping the hero. Either that or use a method like an arrow or an alternative graphic to tie it all together. The landing page links work as expected — each product links to a page for that category, beginning with the product featured in the email.

From: Banana Republic
Date: 10/16/15
Subject Line: Spice things up (with accessories!)

Banana Republic

Both emails did a good job placing a call-to-action above the fold. However, Banana-Republic one-up’d Anthropologie by placing an additional button at the bottom of the email. Their call-to-action also stands out more. I love how the color of the products and the title bring everything together. The growing words really add interest to make you want to scroll to the end. Banana Republic scores one again by not only adding drop shadows to their products, but also angling them. They went with a different approach with their links. Instead of having separate product links, all of the products link to the same page. This page contains everything featured in the email. Personally, I prefer Anthropologie’s landing page approach more.

So IMHO, the winner of this round is (drum roll, please) … Banana Republic. My challenge to you: Take the vertical story idea, improve upon it, and make it your own! I would love to see Land of Nod (or any children’s brand) use the vertical story concept with a cute children’s book theme.

Read More