A Heart-y Dose of Responsive Design, Animation and Clever ALT Text from Hyde Park Jewelers

[ 0 By

It’s no secret that mobile email is growing fast: with an overall increase of 300% since March 2011 and 45% in the last 12 months alone, mobile email opens will soon dominate (and already have for some brands).

Dozens of factors can go into your decision to create mobile-friendly emails. Hyde Park Jewelers, armed with stats (their Email Analytics data shows 38% – 48% of their subscribers viewing emails on mobile) and knowing their high-end buyers were likely carrying smartphones, decided that responsive email design was the right approach.

hyde-park-quote

Jason Meeker, a Strategic Partner at RootedELM, which works with Hyde Park Jewelers, stated that “customizing an email so that the end customer can view it better is going to result in higher click throughs and more engagement from that customer; if they can’t read it, they’re not going to take the time to zoom in, it’s going to the trash…We’ve gone the mobile responsive route since it allows us to fully customize the experience for the mobile audience.”

A Very Mobile-Friendly Valentine’s Day

Hyde Park recently sent a series of mobile-optimized campaigns for Valentine’s Day, promoting their products and helping gift-givers plan for the holiday. Molly Wojcik, Interactive Marketing Director at Hyde Park Jewelers, stated, “We take a multi-tiered approach when planning for campaigns leading up to Hallmark holidays. Our audience is our number one priority, so we strive to keep them top of mind when planning frequency and content.”

Working with RootedELM, they aimed to keep the design of the emails sleek, simple and sophisticated. As Molly explained, “We are a luxury brand, so we never want to compromise our reputation as a fashion-forward, high-end retailer. At the same time, we like to add some playful elements into our design concepts, whether it be through the use of clever copywriting, animation techniques or creative use of some of our jewelry imagery (i.e. heart shape using jewelry images).” Using email as their main form of promotion due to its immediacy and precise timing, they sent 6-7 emails over a two week period leading up to Valentine’s Day — let’s take a look!

Pinterest Contest

  • Date sent: Thursday, January 31st
  • Subject line: Pin It and make her ❤ race

hyde-pinterest

While there has been debate over the use of symbols in subject lines (does it really increase performance?), I thought this was one was cute and appropriate (although, I did receive numerous emails around the same time with a heart in the subject line, so I wonder if this would have gotten lost in my inbox). The subject line provides a cohesive lead-in to the content of the email — which is also full of hearts! While symbols are supported in most major email clients, Outlook 2000-2003 displays the heart symbol as a question mark (“?”) instead. While only 5-9% of Hyde Park subscribers open email in Outlook 2000-2003, frequent inclusion of broken symbols may confuse readers or start to erode trust.

Looking beyond the subject line, I also love the personalization in the preheader: “Lauren, pin 3 images for your sweetheart.” It’s always nice when companies get personalization right — it makes the subscriber feel as if the email was specifically tailored to them.

How cute is this email? It’s bright & cheery, which helps to play up the fun nature of the contest at hand. In the mobile version, there are several modifications that make the email more usable and easier to read on small screens:

  • The navigation bar and banner scale from a single line onto two lines, enlarging the text size and enabling these sections to be touch-friendly
  • The body content swaps from two columns to one column
  • The social buttons and Platinum rewards call-out adjust from two columns to one, creating a sleek and user-friendly experience

Earrings Feature

  • Date sent: Tuesday, February 5th
  • Subject line: Make Her Smile from Ear to Ear

hyde-earrings

Between the navigation bar, header, earrings/heart collage, Pinterest contest details and the Platinum Rewards program information, there is A LOT going on in this email! As a result, I found the desktop version of this email to be extremely busy. However, I was a big fan of the mobile/responsive version — it’s sleek and showcases the earrings in a much more refined way. The collage switches to a one column design, enabling each earring and its description to be the entire width of the mobile device, which better highlights the jewelry.

While I’m unsure whether this particular subscriber viewed the email on a desktop or mobile device, Molly explained that within an hour of sending this email, one of the featured pair of earrings was purchased over the phone. Not too shabby!

Gifts Under $500

  • Date sent: Thursday, February 7th
  • Subject line: Give a gift from the ❤

After receiving the very busy earrings email, this was a nice change of pace. Due to a proper balance of white space & content/imagery, the email looks sleek and attractive. I’m a big fan! In addition, I LOVE the animated GIF in this email:

While the message stays the same — “Gifts from the heart, under $500” — the images swap out to portray three completely different styles of jewelry. This shows the wide array of products that Hyde Park Jewelers has and it showcases them in a fun way.

While the responsive design of this email doesn’t look as complicated as in the previous emails, it still is very effective. The banner & navigation bar both scale and the text, “Gifts from the heart, under $500” are no longer in the middle of the animated GIF, but rather on the top and bottom of the image. As a result, the subject matter of the email — gifts under $500 — is front and center in both the desktop and mobile versions of the email.

$50 Off — One Day Sale

  • Date sent: Saturday, February 9th
  • Subject line: Today Only – Save $50

hyde-50

Similarly to the other two emails, the navigation bar and header scale to better serve the small screen of a mobile device. In addition, the main images switch in the mobile version — a tactic that looks really great. In order to feature the $50 promotion, the tag is moved to the center of the email, so that it overlaps with the earrings (rather than sit beside them like it does in the desktop version). Nice work highlighting the discount in every environment!

Monthly Platinum Rewards Statement

  • Date sent: Monday, February 11th
  • Subject line: Your February Platinum Rewards Statement

hyde-statement

Hyde Park Jewelers even optimizes their transactional emails for mobile! This email was sent to all Platinum Rewards members and includes their rewards balance as of January 31st. While the transactional information is the featured content of the email (in the banner and the first paragraph of text in the email), the rest of the email promotes their complimentary shipping and Pinterest giveaway.

While I fully support cross-selling in transactional emails, I also support the idea of the 80/20 rule; which states that 80% of the email’s content should be transactional, while the other 20% is promotional. This email is about 50/50 — perhaps a little too promotion-focused — the subject line is “Your February Platinum Rewards Statement,” so the majority of the content in the email should focus on that.

Free Overnight Shipping

  • Date sent: Tuesday, February 12th
  • Subject line: You’ll ❤ the shipping, they’ll ❤ the gift

hyde-overnight

After seeing this email, I wondered if the effect of using a heart in the subject line began to fade since it had been used three times in the past six emails. Regardless, like the rest of the emails, this email looks great and is easy to interact with on both large and small screens. Similarly to the gifts under $500 email, the responsive design of this email is really simple — the navigation bar, Pinterest contest and Platinum rewards content all scale so that they are easy to read on a mobile device.

Valentine’s Day

  • Date sent: Thursday, February 14th
  • Subject line: There’s still time to surprise your sweetheart.

hyde-vday

Once again, the responsive design of this email is subtle yet effective. The main call to action (CTA) of the email — to find your store — scales and enlarges on the mobile version, drawing your eye to this area of focus. In both versions, a pink box highlights the primary CTA, further emphasizing the action Hyde Park Jewelers would like subscribers to take.

Two versions of this email were sent — one to Platinum Rewards members, and one to non-members. The secondary CTA changed based on the audience — rewards members were encouraged to shop and use their rewards money, while non-members were asked to join the club. Excellent use of segmentation in conjunction with responsive design!

IMAGES-OFF OPTIMIZATION

Another amazing aspect of Hyde Park Jewelers’ emails is how well they are optimized for images-off viewing. Since they consistently use the same techniques — styled ALT text and background colors — in all of their emails, I’ll only show one images-off email:

hyde-images-off

How great is that? Through the use of background colors, the email maintains not only its hierarchy, but the Valentine’s Day theme as well. In addition, by using styled ALT text they are able to highlight the important items (such as making“$50 Off” bold and large) and make the text pop off the page.

However, while Hyde Park Jewelers does a great job with their images-off optimization, I did notice a spelling error in their ALT text in the Platinum Rewards statement (nit-picky, I know!). It’s minor, but since so many email clients disable images by default, it’s important to spell your ALT text correctly.

SOME SUGGESTIONS

While I already gave some feedback in earlier parts of the post, there are a couple other items I wanted to address. While personalization in email is great, when it’s used incorrectly it can be a major turnoff. In this particular campaign, two of the emails — the Pinterest contest and earring feature — both infer that the recipient of the gifts are female. The subject lines and preheaders of these emails are as follows:

Earring feature:

  • Subject line: Make her smile Ear to Ear
  • Preheader: Lauren, give her something twice as nice

Pinterest contest:

  • Subject line: Pin It and make her ❤ race
  • Preheader: Lauren, pin 3 images for your sweetheart.

While it’s nice that the preheader includes my name, it assumes that my Valentine is female, which isn’t the case. To combat this issue, Hyde Park Jewelers could segment their lists by the gender the subscriber is purchasing for (male or female) or which products they are interested in receiving emails about (female jewelry or male jewelry). They could ask these questions at the time of signup, or they could simply send gender-neutral emails, similar to others in the campaign.

Another aspect that could use some improvement is the arrangement of the preheader. Since many mobile devices display a portion of your preheader text as “preview” or “snippet” text, immediately following the subject line, using these lines of text to your advantage can help boost mobile open rates. You can use preheader text to get your subscribers’ attention, entice with an offer, and even include a call to action.

hyde-preview

Since the first line of the email is “Add us to your contacts to ensure you receive our emails,” it also shows up as preview text in the iPhone’s inbox. In fact, this is the first line in ALL of the emails in their Valentine Day’s campaign. Hyde Park have really nice preheaders for every email, but since they aren’t the first in the layout, they’re being overshadowed by the “add us” messaging. Swapping the unique messaging with the “add us to your contacts” text would eliminate this problem.

THE RESULTS

As you can see, Hyde Park Jewelers really went mobile; they didn’t just use mobile-friendly techniques, they used full-out responsive design and did an amazing job.

Has investing so much into mobile email been worth it? They certainly think so, especially after have such great success with these Valentine’s Day campaigns.

Molly explains that, “Since we have a high entry price-point, many of our clients prefer to shop in-store or over the phone with one of their sales associates that they have worked with in the past – they like the personal contact. It’s not an exact science, but just like in the story of the customer calling and ordering the earrings after seeing the email, it’s always a great feeling to see a campaign work – from concept to transaction.” While they have seen a slight increase in engagement with open and unique click through rates overall, they think that the true success has been the conversion with purchases in the store and purchases made online.

Jason further explained that while it may take a little more time to get each campaign out the door, that it is worth the effort since it enables their subscribers to easily read and engage with Hyde Park Jeweler’s emails no matter which device they are reading it on.

ADDITIONAL RESOURCES

  • “A Campaign to Love” — RootedELM analyzes Hyde Park Jewelers’ Valentine’s Day email campaign.
  • Transactional Emails: A frequently missed opportunity.”