icontact

Building Better Email

DETAILS

We built an intuitive react app that would allow users to easily craft beautiful emails and campaigns on the fly while enabling users to build from custom themes and layouts, with precision control.

The Challenge

If you've ever had to design for email, you know it can be a clunky & unintuitive process. We set out to make that easier through an easily understood system built around themes, layouts and globally controlled styles.

Layouts

The first step of the design process has users choose from a set of base layout options to jumpstart their creations and save them time with common configurations. Users can quickly see what their email will look like and even swap through themes.

Themes

We developed a base set of themes for users to quickly jump between - covering the color spectrum allowing users to easily make their emails match their branding. Users can also store custom themes for future use as well.

Global Styles

We gave users the freedom to take our themes and layouts and go rouge – developing their own global styles and color palettes which could be saved for future use.  The styling palette offers nearly complete control over every aspect of the email's design.

CUSTOM TOOLS

Our development team built a custom module for that allowed me to build out themes and layouts with the actual icontact interface, eventually outputting to the final .json files that the app would utilize. This lead to our team being able to quickly and collaboratively move through the design stages of the project, and gave me the freedom to code visually while still maintaining our code standards.

Custom Tools

Our development team built a custom module for that allowed me to build out themes and layouts with the actual icontact interface, eventually outputting to the final .json files that the app would utilize. This lead to our team being able to quickly and collaboratively move through the design stages of the project, and gave me the freedom to code visually while still maintaining our code standards.
Screenshots

Layout / Theming Preview

This gif shows an example of the setup user flow. Users are able to select an email layout, quickly preview themes or pre-styled examples, then jump right into editing their email – all in the browser.

Back to Work