Redesigning illy’s modular template

I worked with the creative team at shaw/scott (an email-focused design and enablement agency) to refresh the design of a modular email template for illy, a global coffee brand. The primary goal of the project was to translate elements from illy’s new UI Kit to email, ensuring a visually consistent experience across digital touchpoints.

My Role: Design
Creative Direction: Katya Hoogerhuis
Art Direction: Jenny Drucker

 

Approach

The project was broken up into two phases - the design and development of the first 13 template modules and then the completion of the final modules (24 total). The review process involved several rounds of creative review and then client feedback. After incorporating feedback, I handed off static templates to the internal developers at shaw/scott and worked with them to make sure each design worked responsively.

illy-in-use-desktop_mobile-copy.jpg
 

Original template

The original email template I worked from had been designed in 2016 and featured components and font styles that needed to be updated. illy also wanted to see a design which would showcase their product, meaning lots of space for photos.

Old Template Hero.jpg

UI Kit Interpretation

There were some gaps in what the UI Kit covered when applied to email. For example, one of the modules in the template displayed a row of four products, each meant to have its own button. Fitting a button into each product container meant that I would not be able to incorporate the specified 60px of padding to the left and right of the button CTA. Working with the stakeholders at illy, we decided to deviate slightly from the UI Kit guidelines to make the design work.

In other instances, we applied a stricter interpretation of the style rules. For example, rectangular CTAs were excluded from the new styles. I updated all buttons to fit with the rounded corner style without exception.

template-requirements.jpg

Updated hero modules


Updated secondary sections


Updated tertiary sections

Outcome

Illy has fully adopted the new template into their marketing program, providing customers with a consistent brand experience across all digital digital touch points.