OGIO Email Templates

Redesign and develop email templates that are responsive, avoid spam, and adhere to brand styling.
 

What I Did

Design, development & testing

Project Date

2018 - Onwards

ogio-email-port-1

Overhauling old templates

OGIO puts a huge emphasis on email marketing with weekly promotional sends driving traffic to the site and increasing conversions. My tasks included updating templates to match the newly designed site, removing image-based text to improve accessibility, and overhauling the code to become fully-responsive and pass spam tests across email clients.

hero-example-gif-1

 

The old
templates

The old templates were image-based which increased the likeliness of being marked as spam due to the lack of real, live text. Accessibility was also poor, especially on mobile as image-based text scaled down and was much harder to read.

ogio-welcome-old.600×0-is

Old Template Example

Wireframing modules

I started the redesign process by figuring out what kind of content we'd featured in previous email blasts and providing modules that best fit that content. That included hero banner modules, blog post modules, and product modules. I created a few variations of each so we could keep the emails fresh week-to-week and work with different types of images and amounts of content.

wireframe_hero.2000×0-is
wireframe_product_modules.1381×0-is
wireframe_content_modules.2000×0-is

Hero, Product, and News templates

New templates
in action
 

The new templates are in-keeping with the new designs used across web. Text is now 100% live which has improved accessibility and lowered spam scores. Code is fluid and responsive working across all email clients and scaling down properly on mobile. OGIO's new lifestyle photography has been utilized, while GIFs are utilized to keep emails fun and engaging.

screencapture-e-callawaygolf-pub-sf-formlink-2019-01-29-10_14_03_1.600×0-is
screencapture-e-callawaygolf-pub-sf-formlink-2019-05-01-11_20_10_1.600×0-is
mobile-comp

More Case Studies

OGIO E-Commerce StoreUI UX Design

Advanced Search ToolUI UX Design

Trade In! Trade Up!UI UX Design