Email Marketing Newsletter & Alerts - Template

by Rubayath Rahman

Overview

For this project, I designed and developed a responsive email template for UPS’s newsletter and alerts system, integrated with their CRM (Salesforce). The template was crafted using email-friendly HTML, tables, and CSS to ensure consistent rendering across different email clients. Additionally, I applied UPS’s newly introduced design system, incorporating their latest color palette and branding guidelines.

The design emphasized user experience with clean layouts, accessibility, and optimization for both desktop and mobile devices. This project showcased my ability to create functional and visually appealing email campaigns while adhering to strict design standards and technical requirements.

Design Process

  • Project Brief: I collaborated with UPS stakeholders to understand the requirements for a responsive email template that integrated with Salesforce, ensuring it followed UPS’s new design system and branding guidelines.
  • Research & Analysis: I researched industry best practices for email design and analyzed existing templates to ensure compatibility across all major email clients, focusing on responsive design and accessibility.
  • Wireframing & Prototyping: Using Figma, I created wireframes and prototypes to establish a clear content layout, visual hierarchy, and seamless user experience for both desktop and mobile.
  • Design & Development: I designed and coded the email template using email-friendly HTML, tables, and inline CSS, ensuring mobile optimization through media queries and adhering to UPS’s new color palette and design standards.
  • Testing: The templates were tested across multiple email clients and devices using Litmus and BrowserStack, ensuring cross-client compatibility and Salesforce integration.
  • Iteration & Delivery: After incorporating feedback, I delivered the final template along with documentation for the UPS team, ensuring future usability and compliance with WCAG 2.1 AA standards.

Build with
Adobe Creative Suite
0
%
Adobe Premiere Pro
0
%
Video Editing & Production
0
%
Getty images
0
%
Font Helvetica
0
%
Audio Shutterstock
0
%

Full Screenshots Below

arrow
Previous
prev image
Back to projects
Next
arrow
prev image