TL;DR:
Redesigned Family Dollar’s weekly marketing emails from static images to responsive, code-based email. Resulted in improved open and interaction rates. Circa Summer 2013.
Background:
Ubiquity can make us forget origins. Nowadays, Responsive Design is everywhere – it’s an assumed, implied necessity. It was not always so.
Responsive Web Design didn’t really exist until 2010, when Ethan Marcotte’s seminal article on the topic was published. The concepts simmered for about a year, then interest took off like a rocket ship. Search interest peaked in 2013, as designers and developers everywhere began exploring techniques.
I was working as a web designer for Family Dollar around this time when I – myself a relative newbie to interactive design – began noticing the trend. More importantly, I became disillusioned with a number of my own mobile interactions: many websites looked awful on mobile, emails we’re illegible, email links tried to take you to a desktop site instead of a mobile site. There had to be a better way.
That disillusionment pushed me to research and propose a responsive redesign for the company’s weekly emails. More importantly for me, it was also my launching point into the UX field.
Process
There were two specific flaws in the existing emails that I wanted to fix. They were:
1) The email should be legible without pinching or side-scrolling
2) You should be able to interact with it even if images aren’t displayed
I proposed my redesign idea to my manager, who was indifferent but agreed with a pair of expected caveats: don’t bail on your normal work, and it has to beat out the existing design in A/B tests before we commit to changes.
Once approved, I started by conceptualizing a design. Our existing emails were designed to look like their printed counterparts, so a responsive design would require a new, simpler layout.
Results
After a few weeks of designing, coding, tweaking and testing in every email client imaginable, I had a finalized design. I arrived at a simple block-based layout that gave us a feature image, a headline + short text, some key buttons, two smaller blocks for ads, and a simple header/footer.
Once my co-designer and manager signed off the design concepts, it was time to try the designs. Working with our email specialist, I did consecutive weeks of A/B split testing. Unsurprisingly, the responsive design beat out the old design in open and click rates – both by significant percentage points.
With that, the team was persuaded and we switched to using the new email format full-time.
