Group.png

Eikos Partners: Custom HTML Email

Eikos Partners

An HTML Email Development

Group2.png

Introduction

 

Eikos Partners is a financial tech consultancy that helps buy-side and sell-side institutions to solve complex technology and operational challenges.

 
 

role

Designer & Developer

team structure

1 designer/developer
2 stakeholders

activities

Graphic Design
Brand Design
Brand Strategy
HTML Email Development

 
 

Goals & Requirements

 

business goal

Eikos Partners wants to showcase their JavaScript toolkit release and popular blog articles to existing and potential clients. In the spirit of the holidays, they want to send a custom email with a festive theme. 

 
 

business requirements

 
 
  • Design a custom theme that portrays Eikos Partners brand
  • Build an inclusive,  holiday-themed responsive design for email
  • Include content with CTA actions that links to website
  • Theme must render well in Outlook email clients 2003 and 2013
 
 

Current Email Template

 

The current email template is standard for all emails. The template portrays Eikos Partners brand (ie. black background, grey text, and yellow accents), and is optimized for all devices such as phones, tablets, and desktops. The email design, mentioned by the partners, is "not good" and they wanted "a more modern look". 

 
A roadmap to mobilizing your enterprise.png
 

Initial Conversations

 

starting point

The design direction always starts with a good conversation with the partners. I initiated the conversation by email, but later talked off-line about inclusive design and its impact on users.

 
Screen Shot 2017-12-10 at 7.13.45 PM.png
 

Design Iterations

 

After the conversation, I went ahead and worked out different layouts for the custom email. The constraints I used in the designs were:

  • Brand colors (ie. black, grey, and yellow)
  • Flat design to match current design trends
  • 1-column body to accommodate Outlook
 
 

first iteration

 

second iteration

Final Designs

Tablet.png
 

Assets

 
Styleguide

Styleguide

Icons

Icons

Fonts

Fonts

Banners

Banners

 

HTML Implementation

 

planning out

I printed out the design on paper, and marked areas to create the HTML structure. This was helpful to organize my thoughts before diving right into coding. This activity, as a result, shortened the time to build out the structure. 

IMG_20171213_100545.jpg
 

implementation

With the structure out of the way, I took my time with the styling. Email clients strip away any styling, and replaces it with their own. But inline styling takes precedence, so I applied CSS in the HTML file.

Screen Shot 2017-12-13 at 8.51.08 AM.png
 
 
 

Email Testing

email result.png
 
 

Conclusion

 

final thoughts

The design and implementation took about a week, and I learned a lot about inclusive design and HTML email development. This project validated my thoughts on the value of inclusive design - exclusion happens when designers use their own biases to solve problems. Thus, recognizing those exclusions is critical, so they could be used as opportunities to create inclusive designs. 

Another big takeaway from this project was building custom HTML emails. Formatting emails nicely on email clients can be tricky, especially for Outlook 2003 and 2013. Outlook 2003 uses IE6 to preprocess HTML and CSS. Outlook 2013 and later uses Microsoft Word. It's peculiar, I know. Gmail has the most aggressive preprocessor, but has been more accommodating to inline styles than other email clients. I plan to write a medium blog about this to collect my thoughts, so stay tuned for that!  

 

resources

These are the following resources that I used to help me build HTML templates: