CLIENT:

AutoRentals.com

MY ROLE:

 Responsive Email Marketing Designer

OVERVIEW

AutoRentals.com email campaign designs was causing a significant negative impact on click through rates. Why? Because their email design was non-responsive. AutoRentals.com emails were design to truly fit a one-size-fits-all email. They were built to typically be seen on a desktop computer. With today’s consumers using more and more mobile devices, AutoRentals.com made it a priority to addressed the problem, and hire me to fix it.

THE PROBLEM

As mobile email opens consistently stay above 50%, it’s increasingly clear that email campaigns need to be designed with mobile subscribers in mind. AutoRentals.com emails were not using best practices.
The design code lack the use of fluid tables and images to make content flow across different screen sizes.

OLD EMAIL creative

OLD EMAIL on Mobile device

If you take a look below you can see the email does not adjust to screen size.
This was causing the users to zoom in in order to read the content. Many users after this point were just closing the email and not engaging with it.

THE SOLUTION

After establishing the user’s core problem we decided that the best solution was to design a template formatted to look great on phones, tablets, and other mobile devices. Using HTML & CSS media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens I develop a responsive email’s template that users can click, book, subscribe, and download from any device, making a better experience for the end-user.

THE RESULTS

responsive mobile design

Play Video

responsive desktop design

Play Video

THE PROCESS

Discovery & Research

Multiple sessions with the client following the process helped reveal, requirements, and industry standards that dictated potential experience needs.

Visual Design

Once the Discovery phase was over, we explore visual design options as high-level  using Adobe Photoshop to establish a solid design.

UI Design & Development

After designs were approved, I then proceed to the development phase to build the template following HTML and CSS best pratices.

Testing

Once the development was completed I implemented real data, and conducted several rounds of testing using Litmus.com to ensure design responsiveness was accurate across all devices and clean of bugs. This process ensures users can receive a 100% device compatibility and better engagement.

DESIGN PRESENTATION

DESIGN STYLESCAPE

TEMPLATE BLOCK ELEMENTS

Scroll to Top