CONNECT WITH US

Next

A Litmus Community Contest Entry: Visualizing Data in email, featuring The Brunch Index

It is an intrinsic tenet of business that every entity needs the right tools to make their jobs easier and more efficient. As an email developer, no tool, other than maybe a text editor and the Internet, is more important to my success than Litmus.

Litmus is an email testing service that, among providing email analytics and spam filter testing, shows what an HTML email might look like in the most popular email clients. Beyond providing these tools, they are also pioneers in the email marketing industry by consistently pushing the envelope to what’s possible in email. Recently, they sent out an impressive email with a live Twitter feed in it. Litmus fosters this trail-blazing philosophy by cultivating a community of email marketers, designers, and developers. Starting early this year, they have held a few email contests to encourage the community to think outside of the box (You might even say “think outside of the table cell,” but I’m going to try to refrain from making terrible email development jokes for the rest of this post).

Last month’s contest was to design an email that displays data in an interesting way.

Heidi, our Senior Developer, learned about the contest early last month and sent out an email to see who would be interested in brainstorming and executing an idea for the contest. Our collective enthusiasm for data and email compelled almost a quarter of the entire agency to help conceive of a campaign that could not only satisfy the requirements of the contest, but could also have the potential to be a successful real-world campaign. Here is what we came up with. (You can also check it out on Litmus’ community discussion for the contest here.)

Update: Our entry won the contest!

Introducing… 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:

neither rain nor sleet nor snow nor hail will halt The Brunch Index 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 also change background colors based on the forecast. If it calls for rain, then the Brunch Index score would give less weight to weather-dependent factors like outdoor seating.

Example radar chart and data information regarding a brunch spot.

RADAR CHART

We use an animated SVG that would be 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.

Example score bars for brunch recommendations.

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.

An example of our stylized title tags for The Brunch Index. Hovering over the values or the icons on the left will give more context into the data.

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. You can view the web version of the rainy version here, and the sunny version here.

Bottomless Mimosas?! *sound of footsteps running away in haste* *sound of a door slam* *car engine starts* *car revs engine and peels out*

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?

Check out our two examples of The Brunch Index.

View this version on the web here.

View this version on the web here.

We had a lot of fun creating this project, and trying new processes that we had to invent in order to get a campaign brainstormed, strategized, designed, developed, and QAd in three weeks really pushed us. In the end, we laid the blueprints for an idea that has a lot of potential. If you want to see the email in action, check it out our entry on Litmus’ contest page, where you can view the email code and how it renders.

But be warned, you won’t find a brunch spot in Portland that has more tables than our email! Ha ha! Another email dev joke! Matt Grantski strikes again!

About eROI

eROI crafts compelling digital experiences across email, web, and social channels. Our work has been consistently successful in driving revenue and exceeding goals for our partners.

VIEW OUR WORK → LEARN ABOUT OUR AGENCY →