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

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

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