The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Community Contest: Creative Data Design in Email

UPDATE: This contest has officially ended.

We were thrilled with last month’s Community Contest entries—naturally we want to keep that momentum going. So, as promised, here’s this month’s Community Contest:

Design an email that displays data in an interesting way.

While data drives the strategy and design behind a lot of email marketing, we haven’t seen a ton of emails that actually display data in an email in a creative way. So, we want to see what you can come up with.

Design an email that displays data—real, imaginary, whatever—in the actual campaign. It can be a nicely designed table full of stats or a full-blown, responsive infographic (here’s some inspiration). Just share the results below for your chance to win some cool prizes.

We’ll be judging based on creativity, overall design, code implementation, and email client support. The contest ends Friday, May 29th. The Litmus team will then judge the entries and announce the winner a few days later.

Prizes

Once again, we’re partnering with our good friends at Code School to bring you some great prizes this month. The winning entry will receive the following:

2 free months of Code School

2 free months of Litmus Plus

A care package full of Litmus and Code School goodies

About Code School

Founded in 2011, Code School is an online learning destination for existing and aspiring developers that teaches through entertaining content. With more than 40 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging, high-quality content that’s been inspired by its community and network of partners. More than one million people around the world come to Code School to improve their development skills and learn by doing. For more information, visit www.codeschool.com

Requirements:

If you want your entry counted, make sure to follow these guidelines:

Entry must be built for this contest. While you can use a concept you've sent before, don't just post the web link to something you shipped last month.

Disclaimers

I'm not eligible for the contest as I'm part of the Code School team!

I don't work for Spotify (See #1)

This contest has 2 of my favorite things, email and data, so I brought in a third with music. I've been recording this data since the beginning of the year for fun and to learn data viz with JS. Who needs JavaScript when you have HTML tables though, amirite?

A couple things: this is proof that you probably don't ever want to actually do what I did here. It was totally fun to build but it's past the clipping point for the web clients and it hurt Mailbox so bad that it just outputs some of the text and links to an HTML file. The tests look good, though! (Except old Outlook cause I'm using nested 100% tables without conditional restrictive tables).

Hello Litmus Community! I am excited to present this submission on the behalf of eROI, a digital agency in Portland, OR, of where I am a developer.

For our “Data Visualization” submission, we conceived an email campaign that number-crunches subscriber preferences to calculate a score. This score, as well as our campaign, is called The Brunch Index.

One of the most popular weekend activities in Portland, rain or shine, is going out for brunch with your friends, your family, even your dog. But finding the perfect spot can be difficult. We wanted there to be a tool beyond skimming pseudo-helpful Yelp reviews or zooming in around your house in Google Maps and searching “brunch.” A tool that could cull from all the brunch spots in town and let us know what restaurant we would probably like the most, because there are a lot of different factors and preferences that make a great brunch spot: Is it easy to get a table for a bigger group of friends? Can I sit outside with my dog? Is it across the street, or all the way across town? This tool would be like an OKCupid for breakfast sausage and mimosas.

We visualized different data points to make it fun and useful for the subscriber. Below are some factors we visualized in the email:

Weather: Whatever the forecast was for the day, we would use the headline treatment to visualize that. Rain had a cheeky headline with CSS animated raindrops, while a sunny day indicates sunbeams. This function drops out in non-webkit clients. We change background colors based on the forecast, and the score would give less weight to factors like outdoor seating.

Radar Chart: We use an animated SVG that’s dynamically generated server-side to visualize how the five most-important factors are associated with highest match. To ensure that each subscriber would see a graph regardless of what email client they use, we display the SVG in webkit clients, a background PNG for all non-webkit and non-Outlook clients, and finally an embedded image on Outlook clients. The screenshots won’t show the SVG in its full glory, so view it in the builder or as the stand-alone web page and refresh to see the animation.

Brunch Index Score Bar: When the email is opened, a bar animates from 0 to the Brunch Index score for each brunch spot using CSS animations. In non-webkit clients, it defaults to what would have been the end state of the animation.

Stylized Title Tags: The data points represent the most important filters to each subscriber and when an icon is hovered over, a stylized title tag appears to explain each icon for clients that support :hover, :before and :after selectors. Since these selectors are not supported in a lot of clients, it’s more useful if viewed on a separate webpage.

Animated Ad: To support this campaign, and so that the designers could have a bit more fun, we put an ad space at the very bottom of the email (instead of the top, to not annoy our subscriber) that we animate to provide more incentive for our advertisers. Who doesn’t love Bottomless Mimosas?

I want to note here that some features are more proof-of-concept and not actually implemented, such as the dynamically generated radar chart, as well as the preference center itself. A lot of elements here would be dynamically generated and styled through data from a preference center.

We chose to limit the options in the email to three to prevent choice-overload. I could talk ad-nauseam about all the cool things we love about this email, but I’ll just let you check it out.

Here is my entry:
A Data driven Customer Revoo Scored Lookup-table powered by AmpScript.
Customers who have viewed a 4K TV on the website for "Electronic Boutiques" would get a specific email asking wether they would be interested in highest rated Customer Revoo scored 4K TVs to re-spark their interest. (https://www.reevoo.com/products/ratings-and-reviews/)

For this build I included comments. At line 88 (at the top of the <body>) I have all the AmpScript set up as proof-of-principle & throughout the Markup to show where the data driven variables would be injected.
*Please inspect the markup to see the comments. Also added the word "DYNAMIC" which you can search for to clearly see where these variables sit.
Felt it was better to leave the creative in-tact and comment the code, otherwise the email would have no visual representation.

The Marketing team at Nielsen decided to go meta with this contest and design an email using data about that email. :-)

We redesigned our weekly newsletter so that our readers know exactly what they're getting with each edition. The top of the newsletter has animated gifs showing how many articles from each category are included, and we use color strategically throughout the email to indicate category. Each article also has a "hotness" graph to show the popularity of that article when the newsletter was sent (based on shares over time from the ShareThis tool). If anyone has ideas for how to make the hotness piece update in real-time, we'd love to hear them!

Here is mine. It's an email I coded for work. It's not the best but it took me two days of coding and testing to make sure it looked good in Outlook (big surprise) It's not perfect, but it's the best email I've ever done. It was super time consuming to get the tables with different colors side by side and to not have overlap.

Long time fans, first time posters here from PitchBook Data, a financial information provider for leading dealmakers and advisors. As in-house graphic designers, miss Jess Chaidez and I held our first design hackathon where we holed ourselves up with snacks, a whiteboard, and our custom swag coffee mugs on a mission to create something wonderful. Our theme was email design, specifically data design in email for this contest :-) We really wanted to work on/emphasize the responsive/mobile-friendliness of the email since it's an issue we struggle with marketing for a B2B company. It was definitely a lot of fun, a lot of work, and a huge learning experience!

Here's what we came up with, with a blog post on our process to follow soon!