January 5, 2016No Comments

6 tips to enhance mobile optimized emails

Email marketing is one of the more successful channels for communicating with consumers. With over 91% of consumers using email at least once a day, and with an average return of $44.25 for every $1 spent on email marketing, it makes sense to target consumers through their digital inbox. But its not enough to just send an email blast out to a targeted list. With over 51% of email opens occurring on a mobile device, it is important to develop mobile optimized emails.

Recently, Jacobs & Clevenger was tasked with improving one of our more successful mobile optimized email templates known as "Service Date." You may be thinking, "If it's already a successful template, why mess with it?" As direct marketers, our goal is to employ different techniques to improve upon the communications we send to our target audience. Below are 6 techniques we used to enhance our "Service Date" mobile optimized email template.

Mobile optimized email test

1.) Design for a similar experience across mobile devices

When designing for a mobile optimized email it is important to think responsive design first. Responsive design allows the layout of your email to be flexible and scalable, so that it can adapt to different screen sizes across devices. While our previous "Service Date" email was responsive, it's layout was based on a 2-column format. In order to improve upon the layout the design was changed from a 2-column to a 1-column format. The 1-column format was selected to offer a more consistent experience between desktop and mobile devices. This layout also allows the design to restructure the hierarchy of information to fit with how most online content is read, which is from top to bottom. Changing the layout also provided a fresh look for audience members who had seen the previous template.

2.) Let the subject line work hand-in-hand with the preheader

Whether viewing an email on a desktop or mobile device, the subject line and preheader are the first elements your audience sees in their preview pane. It is important that these elements work together to give the viewer a quick overview and entice them to open the email. While this might seem like one of the more obvious email techniques, often times it goes overlooked. For example, if the "View as..." copy is placed above the preheader, it will display in the preview pane first, disrupting the subject line/preheader flow. Another example would be omitting a preheader altogether, and having an image as the first element in the content of the email. The alt tag for the image will appear after the subject line in the preview pane, which can cause a disconnect in messaging. In order to enhance the "Service Date" email template, the subject line and preheader were written in a supporting manner to provide a sense of legitimacy and urgency.

3.) Get personal with your audience

Personalization is a key tactic for enhancing mobile optimized emails. According to a study by the Aberdeen Group, personalized emails improve click-through rates by an average of 14% and coversion rates by 10%. Personalization tells your audience that you have a prior relationship with them. It also allows your email communication to stand out from the myriad of emails floating in a person's inbox. For the "Service Date" email revamp, personalization played a key role in shaping the content. Utilizing the data we had on our audience, we were able to customize multiple fields including such as name, vehicle make, vehicle model, model year and VIN in the subject line, preheader and body copy.

4.) Keep the content simple and scannable

Relevant content is key for any communication channel. However, sometimes there is a tendency to cram as much content as possible into an email communication. Instead of relying on the email to do all the heavy lifting for a campaign, streamline content to focus on the key objective of the email. Whether it's getting your audience to click through to a landing page or to call a phone number, craft your content so that it is clear to the audience what you want them to do.

In the revised "Service Date" creative, content was streamlined to focus on the offer and the timeliness of needed action from the audience. This allowed the email to play it's intended role in the campaign, which was to drive viewers to the landing page to purchase and learn more about the product. This also plays to the strengths of mobile optimized emails by having less content for the user to scroll through before taking action.

5.) Allow the audience a comfortable level of commitment

At times it can be tricky to get your audience to commit to a course of action. You want to be direct with the action you want them to take, but some viewers may not be ready to take that step. Offering up a hard and soft commitment option can help ease users into taking the action.

The main goal of the "Service Date" email is to drive users to a product landing page to purchase. In order to enhance click-through response we incorporated an "Update now" button along with a "Learn more" text link. Both call-to-actions took the user to the product landing page. This allowed the audience a choice of the level of commitment they were willing to engage with.

6.) Use relevancy to increase engagement

In direct marketing, relevancy is key to driving engagement. Would you act on an offer for discounted Christmas lights in June? More than likely the answer is "No." In order to enhance the relevancy for the "Service Date" template, emphasis was placed on the number of years it had been since the customer had updated their navigation system. Showing the customer the amount of time that had passed since an update helped add weight to the fact that their status was "overdue."

So how did these techniques enhance our revised "Service Date" mobile optimized email template? The new template outperformed the older control template with:

  • a 34% higher open rate than the control
  • an 85% higher click-through rate than the control
  • a 38% higher click-to-open rate than the control
  • 118% more clicks on the “Update now” button than the control

As you can see even if a mobile optimized email is performing well, it pays to continually find ways to enhance upon your success.

January 29, 2014No Comments

A creative wish come true

What's your wish for 2014? One of my wishes this year was to work on an integrated project that uses single page web design, as well as animation in emails. As luck would have it, I got my wish.

Jacobs & Clevenger wanted a little something different for their end of year card. The creative team decided to develop a single page site to showcase some of the wishes from J&C employees, and encourage others to share their wishes. By tackling a single page design for this project, we were able to incorporate elements not previously used in our other work. This includes:

  • Utilizing large video for our opening and closing frames
  • Incorporating CSS animation to bring life to each wish
  • Adding multiple forms of navigation that include single scroll, a left hand navigation menu and call-to-click buttons
  • Using glyphicons for clean, scalable symbols
  • Providing social interaction through the Twitter API to engage our audience

These features allowed us to step out of our comfort zone, and offer a new experience for our audience. The site is also responsive, which ensures our viewers can engage regardless of their device. If you're interested in playing with single page design, but don't know where to begin, check out this template from wrapbootstrap.com to get started.

Now that we have our site, how do we drive people to it? This is where our email campaign comes in. Since we were doing something new with our web approach, it only seemed natural to change-up our email. We decide to create an email that has animation as well as a borderless layout. The streamlined message and direct call-to-action, would help accentuate these design choices.

I know some people are thinking, "What, animated GIFs in an email? Have you lost your mind?" Using animated GIFs in an email definitely requires some strategy. After all, not all email clients will support the animation, and only display the first frame. For this email, the animation was used to highlight the messaging and play off of the single page site design we developed. No messaging is used in the animation. This way, if your email client doesn't support animated GIFs, you are still able to see the email with no disruption to the layout or message.

J&C Wishes
We also decided to go with a borderless layout to compliment the design of the site, as well as to play up the strength of responsive design. The layout of this email has no borders to its left and right edge, allowing the colors of each section to expand full width. Since iOS 7 came out, emails that are responsive now have padding around the body of the email. In order to get this borderless feature to work for mobile, we simply added the below code to our CSS:

html, body { margin:0; padding:0; }

You can view the email example here or by clicking on the image.

So far one of my wishes for 2014 has come true. What are some of your wishes? Check out JNCwishes.com and share your wishes for the year. Feedback on this campaign? Leave a comment here or Tweet me.

October 21, 2013No Comments

Understanding the flat design trend

Remember the days when drop shadows reigned supreme and bevels were everywhere? If you're an Apple user those days were pretty recent up until the latest iOS 7 release in September 2013. Now Apple has jumped on board the growing trend of flat UI design. While flat UI design has been building since 2006, the trend really exploded in 2013. Websites and apps are tossing out their 3D buttons and icons, for simple, stylized icons and vibrant color pallets. So why the change in style? Is flat design a trend or the way of the future?

Several factors contribute to the success and adoption of flat design.

As technology and the internet have expanded, the way we connect and process information has become more cluttered. We are now looking at multiple streams of information on screens ranging from the size of a smart phone to a desktop monitor. We continually evaluate information and create content. Flat design helps to streamline and reduce the overwhelming visual impact of that information. A simpler design also helps create a simpler interface for the user to interact with.

Content shift
Since flat design allows for simpler design elements, which are arguably less visually distracting, content now jumps back to the forefront. These days there is a huge amount of focus being placed on inbound marketing. Good content is key to successful inbound marketing, and a flat design helps content to shine brighter.

Technology familiarity
Once upon a time the internet and apps were something that we thought only the younger generation could handle. In today's world however, the use of technology has almost become second nature. Whereas we used to think a button should leap off the page in order for people not to miss it, we now recognize that users are more familiar and comfortable interacting with technology. Those "cue" elements no longer have to be as in your face as before, allowing them to meld more seamlessly with your design and content.

As previously stated, users now view web content on a variety of devices. In order to stay competitive, most companies are optimizing their digital content for ease of use across these platforms. Flat design plays into this by allowing for:

  • Minimal design, which decreases file weight
  • Smaller image file size, which optimizes download time
  • A flexible grid layout

These attributes have helped make it easier for web content to render more effortlessly from device to device. They also integrate very nicely with the responsive design methodology.

Knowing why flat UI design has become more prevalent, you may be wondering "Should I jump on this train?" Before you decide to go flat consider whether a flat UI is beneficial to your audience. For example, if you were developing a children's site or an online game, you might want to use more realistic/3D graphics. Remember, following a trend without knowing your audience can be detrimental to achieving your desired results.

While flat design has many benefits in today's current technology climate, only time will tell if this is truly an innovation or just another cycle of design aesthetics. In the meantime, test it out and have fun with it. Check out this article on getting started with flat UI design: http://www.sitepoint.com/getting-started-flat-ui-design/. Who knows, it could inspire you to come up with the next UI design trend.

August 23, 2013No Comments

Breaking through the email barrier

Every day, customers are inundated with dozens of emails flooding their inbox. Email is an essential touch point with customers. Whether its providing awareness, product updates, or new promotions, email is a fast, effective way to engage an audience. As a designer, you want to break through the inbox email barrier. That's why it's important to consider incorporating direct marketing techniques into your design.

Why use direct marketing methods in email? Aren't a good list and creative graphics enough?

True, a list is one of the key components to an effective campaign. However, it doesn't guarantee engagement. Strong visuals also help reinforce the message of an email, but they can't do all of the heavy lifting.

So how can direct marketing best practices be incorporated to help you break through the email barrier?

Brand it
Make sure your brand is recognized the moment your email is previewed. Place the logo in the header for instant recognition. Include fonts and buttons that are consistent with what is used on your website. Consumers want to know that your email is legitimate and brand recognition reinforces that.

Get personal
Customers like to know that you know who they are. Go beyond the standard name greeting. Include personalized information so that the customer knows your speaking directly to them. This could include product purchase history, model numbers, account information, how you first engaged them, etc. Personalization allows you to speak more directly to a customer and reinforces the authenticity of the communication.

Mobile optimization
According to Litmus, over 40% of customers view email on a mobile device. To keep consumers engaged, make sure your email is mobile ready. This can be accomplished by either designing a one column email layout, or a multi-column responsive email. Responsive design allows you to provide a different layout experience depending on device. Both options allow an email to be displayed in a one column format which is ideal for mobile devices. Responsive layouts have the added benefit of allowing a different format for desktop clients. For more on responsive email design, click here.

The power of three
Drive engagement with customers by focusing on one call-to-action at least three times. Multiple calls to action can confuse consumers. Focus on one single action and drive attention to it at least three times.

Button, button who's got the button?
Customers respond well to buttons. They let us know that an action needs to take place. They promote the call-to-action. Try to include at least one button in your design and make it obvious (color, size, etc.). For mobile optimized emails, you may want to consider repeating it twice, once toward the beginning and another towards the end.

Image isn't everything
While strong imagery can reinforce an email messaging, too many images can slow an emails performance. Of course it would be nice if everyone had the newest devices and stellar data service. The fact is, no one likes waiting for images to download to read an email, especially on their phone. Best rule of thumb is to try to keep images under 40k, to improve download speed.

Remember you want your email to not only be read, but to engage viewers. These tips can help drive engagement and break through the inbox email barrier. Check out this email template for Nokia that helped increase response with Nissan customers.

Let's connect.

© Justin Herren 2022 | Creative strategist + design lead