SnapBox Automated Emails

These are part of a set of automated emails I designed for SnapBox. By automated, I mean that these emails are triggered by certain user actions such as a welcome series of emails being sent when a user signs up for the email newsletter. This project called for a complete design overhaul of all automated type emails for SnapBox so that they could not only be refreshed for the first time in a few years but also so that they would now all maintain a consistent style.

In designing these, I strived for a look that would be clear (useful) and clean (pretty) in order to truly engage the user. This involved using modern font styling from SnapBox’s branding and professional imagery sourced from Stocksy with some product photography shot by me where needed. Designing the series as artboards in Photoshop CC aided me in maintaining a consistent style across all of the emails and also allowed me to easily share similar assets between each since I could see and work with everything all in one PSD.

Once the designs were completed and approved, I set up the HTML emails for each design in SnapBox’s email marketing tool (Bronto) along with SnapBox’s standard email header and footer.

ClientSnapBoxTypeDesign, WebToolsPhotoshop CCYear2016

// Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } });