Redesigning illy’s Modular Template
Overview:
After updating their brand, illy came to Shaw/Scott hoping to refresh the design of their modular template for email. The goal of the project was to translate elements from illy’s new UI Kit to email, ensuring a visually consistent experience across digital touchpoints.
Role:
Visual Design
Credits:
Created at Shaw/Scott
Creative Director: Katya Hoogerhuis
Art Director: 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.
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.
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.
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.
