UX/UI DESIGN - iCONTACT
iContact is an email marketing and automation platform serving small to medium-sized businesses. The product has recently undergone substantial UX and UI enhancements aimed at simplifying workflows, improving clarity, and creating a more intuitive experience across its tools. These updates are ongoing and rooted in a user-centered design approach.
ADVANCED HTML/CSS EDITOR
iContact modernized its email creation experience by introducing a new drag-and-drop WYSIWYG editor alongside a Dreamweaver-style HTML/CSS editor. This dual-editor approach supports a broad range of users—allowing non-technical marketers to move quickly while giving advanced users precise control over markup, layout, and email-client compatibility.
For an email service provider, an advanced HTML editor is critical. Email rendering varies widely across clients, and fine-grained control over code allows experienced users to troubleshoot issues, optimize performance, and maintain brand consistency beyond the limitations of visual editors.
These designs moved from medium-fidelity concepts directly into development, with some features intentionally refined or removed to prioritize clarity, performance, and real-world usage.
Click to Expand
ACCOUNT USAGE
The Account Usage tool helps iContact customers track key limits within the email marketing platform, including remaining subscribers, message sends, and available image library slots.
Three states were designed to clearly communicate usage at a glance: empty, partially used, and fully used, ensuring users understand their status and next steps at every stage.
HTML EXPORT MODAL
This tool gives users direct access to their HTML and CSS, allowing them to export code from the WYSIWYG editor or continue editing within iContact’s advanced HTML editor. A built-in copy function makes it easy to move code into external workflows, supporting greater flexibility and developer control.
IMAGE COLLAGE TOOL
The Image Collage tool is a unique iContact feature that allows users to combine multiple images into a single, cohesive layout directly within an email. By offering both responsive and fixed-width options, the tool gives users control over how their content behaves across devices and email clients, balancing visual impact with layout reliability.
Click to Expand
ADVANCED BORDER & PADDING TOOL
This tool allows users to precisely adjust table borders and padding within their email templates—an essential capability in email design, where small spacing changes can significantly impact layout and readability across clients.
Up and down control states visually communicate direction, helping users understand the effect of each adjustment before committing to changes.
Click to Expand
