Immersive & Interactive Email – The I’s Still Have It!

Immersive & Interactive Email – The I’s Still Have It! 

Immersive technology is expanding into the market, moving beyond the realm of a futuristic few with bold ambitions. Last year, the immersive tech space was valued at USD 33.2 billion. Immersive/interactive design is also among the top email marketing trends in 2024. 

You're lagging if you’re stuck on customer service as your highest goal. Your goal should be to offer experiences. Why? You don’t want your audience to sizzle a few touch points now and then, but you want to spend time and, hopefully, stay with your brand for an extended period. To that end, fostering emotional engagement is critical. 

And guess what? That’s precisely where immersive and interactive email design can make a difference.

Active Customer vs. Passive Customer 

Being ‘customer-centric’ is the focal point of all (enlightened) marketing. Any marketer knows that being customer-centric is more about problem-solving than aggressive selling. Customers are people with values, desires, and beliefs. Admittedly, it’s taken marketers a long time to realise just that. 

This understanding leads to a more significant revelation: Customers have agency. Once you realise that, you pause and let them act.

Now, there’s the difference between a passive and active customer. The experimental side of email marketing invites the customer to “act.” So you let the customer be in control. 

“Affording consumers some measure of control over the brand relationship isn’t only a smart marketing practice because it helps customers “feel good,” but it also offers customers the opportunity to internalise their decisions and feel that the outcome of their buying decisions is genuinely self-directed,” explains Mark Ingwer, a business psychologist and founding partner of Insight Consulting Group. 

Whenever an email recipient spins a wheel of fortune, scratches a button to reveal the discount, or participates in a game, they’re in control. That’s what they want. Ultimately, they’re more sure of their decision as they progress through the purchasing funnel. 

It's not about luring or tricking your audience with gimmicks. Instead, it's about fairness since you treat customers as individuals, not just faceless consumers or box score items. You're establishing a relationship with them. 

“Email interactivity brings common web and app experiences into the inbox. In addition to allowing brands to use limited real estate more efficiently in emails, especially above the fold, interactivity significantly lowers the barrier for subscribers to act,” said Patrick Colalillo et al. from Oracle. 

That sums it up nicely. But for your benefit, let’s consider three interactive email case studies from Stripo. 

Interactive Email Case Studies

Intertop, an online clothing store, used AMP content to make their emails more interactive, engaging, and memorable.  

To those unfamiliar, AMP (Accelerated Mobile Pages) is a dynamic email format introduced in 2019 that recreates an app-like environment within an email. Users can explore and buy products using the email itself. 

Stripo and Intertop successfully implemented AMP technology while creating product cards for an Intertop campaign. Here’s how the email looks in action. 

Thanks to the email above, Intertop’s conversion rate shot up 12%. That’s the power of interactivity. Of course, implementing it is never easy. 

“Creating the first emails with interactive product cards took a lot of resources from our and Stripo’s teams because it was a complicated concept to implement,” says Intertop. “We do not use this format often since it has a complicated layout with products in each email.” 

We’ll discuss the implementation of AMP emails later in the article. Meanwhile, here’s the second interactive (gamified) email from Stripo, which they did for the New Year’s newsletter for Shini & Diski. 

“The result was a click-to-open rate increase of 27% compared to email newsletters on a similar day with products and a discount,” says the Stripo team. 

And here’s the third interactive email by Stripo, which uses the quintessential spin-the-wheel game. “For Karcher, we made a newsletter with a roulette wheel of the different cleaning equipment as prizes. Subscribers could spin the roulette wheel in the email to win a gift. This game produced a 17.5% CTR.”

Now that you know that interactive design in emails works, our next section will examine some widely used interactive email functionalities.

Interactive Email Functionalities

Apart from AMP-powered emails and gamification, here are a few core interactive email functionalities for you to consider:

1 – Hamburger Menus

The hamburger menu, so called because it resembles a hamburger, is a hotspot that, when clicked, expands to a dropdown consisting of navigational links to product pages, landing pages, etc. Below is an example of a hamburger menu. 

Interactivity in emails extends the web experience, providing users with a more engaging and helpful interaction. This approach minimises the risk of click overload, especially for users who may not be familiar with your website. Users might wander around the site, struggling to find what they need, resulting in a poor user experience and potentially leading them to abandon your brand.

Everything relevant to a user in email can be found easily because there’s only so much real estate within the template. User engagement is more focused. 

2 – Accordions

Much like a dropdown menu, an accordion is a list of headers where the user can see more information. 

“With an accordion, when someone visits your web page, they will see a list of headers. However, the information underneath the headers will not be revealed until the user interacts with the website. An accordion is a great way to save space and improve the efficiency of your website,” explains Mailchimp.

The accordion works similarly in email. Here is an example of an accordion. As you can see, clicking on a particular header reveals more information. 

3 – Carousels 

Carousels, also known as sliders, enable users to browse additional content blocks by clicking arrow-shaped controls. Sometimes, a carousel can also be timed to rotate content. So, it’s not always dependent on user prompts.

A carousel menu is handy for mobile viewing, where vertical real estate is limited. Here is an example of an (untimed) carousel in an email. 

Items in a carousel should be related to each other. You don’t want to gather a scroll of unconnected items, confusing the viewer. “…people will be able to predict the type of content they will discover if they engage with the carousel,” says Raluca Budiu of the Neilsen Norman group. 

In addition, you should consider making content in the carousel accessible in other ways. Budiu explains, “If the content is critical, there should be another path. 

4 – Hotspots 

An interactive hotspot is a dynamic feature for viewing additional content and CTAs in an image. When you click on a hotspot, an overlay appears on the top of the image. If it’s a product image, it will contain product details and a CTA. For example, here is a product which consists of interactive hotspots in three places. 

Clicking one of these live hotspots will allow you to view product details and a CTA that will redirect you to the relevant landing page. 

15 Immersive/Interactive Email Examples 

As we mentioned, your aim isn’t just to provide excellent customer service and create memorable experiences. Let’s check out some emails that do just that.

1 – Adestra

Adestra’s simple interactive email invites the viewer to act. Now, here’s something important for designers to consider. Nearly all interactive emails have two stages: before the user takes action and after. Because they're interactive, the initial design, i.e. the first stage, should be straightforward. 

Why? Because you don’t want to overwhelm the viewer with too many things at once in the name of providing an immersive experience. Therefore, ensure the user is not expected to click more than once in the first stage. 

2 – B&Q

Interactive emails shine when it comes to product demos. In the above email, B&Q allows the user to test the products in the email itself. Now, after flipping the switch, the email may be unable to recreate the live experience for a T. But it’s still a powerful testimony to the potential of interactive design in email. 

3 – Nike 

Nike's promotional email utilises interactive hotspots within the first image. Clicking on these hotspots reveals product details and allows users to proceed directly to the checkout page. Essentially, these hotspots function as invisible links.

If you want, you can use hotspots throughout the template as well. 

4 – Output 

Embedding short-form video is also a form of interactivity in email. Since in-email viewing isn't feasible, incorporating thumbnails for video content in emails becomes essential. In Output's scenario, when the user clicks the play button on the thumbnail, they'll be directed to the landing page where the video is hosted. 

5 – Showtime 

Here’s another example of video content in email. Unlike Output, Showtime embeds multiple video thumbnails in their email. When clicking the play button, the user will be directed to the page that hosts the teaser/trailer.  

6 – Jarrang

Jarrang's Christmas and New Year email employs a feature called “reveals,” where clicking on certain elements unveils additional content. Once again, the viewer is being encouraged to act. Notably, Jarrang utilises various shapes for the reveal boxes to maintain visual interest and prolong the dwell time. 

7 – Royal Caribbean International

This has to be one of the most economical and profitable ways of incorporating interactive hotspots in email. 

Royal Caribbean International’s interactive map enlightens the viewer on their terms. If you look closer, some of the hotspots are video content. After experiencing the entire email, the user will be more informed, excited, and confident of their decision. 

8 – Bose 

Bose’s interactive email employs the classic “scratch to see” feature to announce a special offer. Note the size of the scratch space. The designer has ensured that the viewer spends at least ten seconds scratching, allowing for prolonged engagement. 

Although it may not involve much action, this approach does provide the viewer with a solid sense of control. Ultimately, that feeling of agency defines the experience of interacting with anything.

9 – Domino’s 

Domino's email encourages recipients to discover their new range of dishes, opting for an approach where users must click multiple times rather than just including a single CTA button. 

This strategy increases engagement as users are prompted to click multiple times, once for each of the five new dishes, ultimately enhancing user interaction. Usually, emails act as transit points. The subscriber receives an update, clicks a CTA button, and interacts with the brand on a new tab. Interactivity brings the focus back to the emails themselves. 

10 – Table TR TD

Designers should consider the HTML weight of an email (more on this later). Table TR TD's short, interactive email has a bare-bones vibe that holds the viewer's attention. You can say it’s a gamified email. There’s no call to action, although an interactive CTA might emerge once the user completes building the pizza. Note that the alternative web version option is also at the top. Important! 

11 – Penguin Random House

Penguin Random House features the “reveals” functionality. Like Jarrang, the boxes feature different images, sustaining the visual appeal. Each box may contain a CTA to the checkout page for the concerned title, but we don’t know for sure.

The boxes might also feature personalised books, so no two recipients will see the duplicate titles. In sum, engagement of this kind stimulates the user to explore, pause, and consider—almost recreating the experience of a physical bookstore. 

12 – TOMS

TOMS uses interactive design to highlight their glow-in-the-dark shoes. Users are prompted to flip a switch (embedded as a toggle) to see the demo. The email remains light and straightforward. Once again, it empowers the user by putting them in control of the experience.

Incidentally, crafting this email likely posed extra challenges because it would need to briefly switch to Dark Mode (for the glow effect to be visible), potentially causing compatibility issues. 

13 – McDonald’s 

McDonald’s incorporates two interactive features in their email. Above the fold, there’s gamification, and below the fold, toward the end of the template, there’s an untimed carousel. Both these interactive elements breathe life into the email. Users might stay with the message for at least two to three minutes, which is significant considering that the average time spent on an email is just under nine seconds!

The entire email is a fun experience from first to last. As the user feels more drawn to the message, they will heartily engage with it for as long as needed. Ultimately, this impacts their decision to make a purchase. They have been in control throughout, so if they choose to buy, they know it’s their decision. 

To reiterate, this is not about manipulating your audience. It’s about honouring their agency. In McDonald’s email, it’s also about communal engagement. 

14 – Google 

Google implements a “partial” AMP in which the user can choose the product colour and add the item but must complete the transaction on the checkout page. 

The partial implementation might stem from the launch of a new product.

The Add to Cart process is limited to just one product, and there’s no product carousel. But it’s still an interactive email. The initial touchpoints of the buying process begin in an email, so there are at least two fewer clicks on the checkout page. 

15 – Litmus

Our final interactive email example is from Litmus. From top to bottom, Litmus’s email newsletter features many interactive assets. The template alternates between static and dynamic elements, but it starts and ends with an interactive design. 

Litmus's newsletter stands out for being enjoyable, informative, and lightweight. Integrating interactivity into a newsletter is clever, as newsletters typically consist of numerous stacked CTAs block after block, redirecting users away from the email. 

However, with interactivity, Litmus's newsletter balances both informative and entertaining aspects of the email viewing experience.

Interactive Emails: The Limitations

While interactive emails go a long way in improving the email experience, it is essential to consider their limitations. Here are some of them:

1. Accessibility issues

Most email interactivity is not accessible! Now, there’s a bitter pill to swallow. Even when interactive elements are keyboard-accessible, they might not be fully navigable. Including aria-labels to explain the function of each interactive element is a good practice, helping subscribers understand their purpose.

2. Fallbacks needed

Since interactivity in email is not always accessible, you will need workarounds so that your subscribers can view your email correctly. To that end, follow these best practices:

• Select alternative fonts if the email client doesn’t support your preferred font.
  
• Ensure that the first animation frame functions even if the entire animation is not supported. The viewers will at least get a solid initial impression.
  
• Include alt-text and HTML text if images are not supported or blocked.
  
• When HTML MIME isn't supported, sending a plain text MIME ensures the viewer can at least access the plain text of the email and understand the message.

3. Email weight issues

Gmail clips weighty emails. However, adding interactive elements involves quite a bit of extra coding. 

Your email's HTML weight must not exceed 102 KB; if it does, Gmail does not show any content. Instead, it clips the message with a link to “View the entire message.” This can disrupt the viewing experience. The clipping also makes the unsubscribe link invisible, potentially leading to spam complaints. 

4. AMP emails challenges

One of the core challenges of AMP technology is that it is not widely supported in Europe and the US. “Currently, it’s supported by Gmail, Yahoo Mail, and Russian email client Mail.ru for senders that maintain a good reputation. Microsoft piloted AMP for email after its launch but, shortly after that, halted it. But the more important holdout is Apple, whose Mail app is used to open most emails in the US,” writes email expert Chad S. White. 

In addition, mastering AMP code is complex. Many ESPs also need to enable support for AMP. “Only 22% of ESPs have made the necessary changes to their platforms to support their users sending AMP MIME parts,” says White. 

White also blames the global pandemic for turning attention away from AMP. Thanks to the changes it necessitated, most marketers went back to focusing on the fundamental aspects of email, not “extras” like AMP. 

Significantly, Google, which launched the standard in 2019, divorced itself from AMP to make it standalone. “However, as a result, promotion of AMP for Email became much quieter,” White explains. 

5. Limited use encouraged

Limitations or not, overusing interactivity in email is not encouraged. Because it’s an experience, there’s a chance overusing it would lead to subscriber fatigue. Reserve it for select campaigns, such as seasonal campaigns, holiday emails, etc. 

Plus, it’s hard to design interactive emails. Their inherent limitations make them time-consuming and quite challenging to pull off. So use them sparingly. 

Wrapping Up!

The primary aim of interactive emails is to enhance user experience. Brands prioritising experience alongside customer service can reasonably expect their target audience to engage. 

Despite the technical hurdles in interactive design, it's worth exploring periodically. The objective is to provide diverse experiences. With interactive emails, even standard ones can contribute to the overall brand experience. This holds significance both psychologically, in terms of communication, and economically, in revenue generation.

FAQs