Improving Deliverability and Accessibility through Design Engineering
DURATION
January 2025 - March 2026
ROLE
Email Designer / Email Developer
TOOL
Figma, Visual Studio Code
01. OVERVIEW
Before I joined the team, the company relied on static, image-only emails for B2B client communication. This caused significant UX issues, as many email clients block images by default. I redesigned the system from the ground up, transitioning to a coded HTML/CSS approach to ensure message clarity and professional delivery.
02. PROBLEM
Low Visibility
When images were blocked in Outlook, users saw a blank screen, losing the opportunity to engage with the content.
Lack of Consistency
Relying on a single JPG made it difficult to maintain high-quality rendering across different screen sizes.
Accessibility Issues
Static images are not readable by screen readers and cannot be searched or highlighted by users.
03. SOULTION
I separated visual assets from text content. By coding headlines and body text directly in HTML, I ensured the layout remains intact and accessible across all devices.
I optimised the code so that even if images fail to load, the core message and the 'Click' button are immediately visible and functional.
I utilised inline CSS and table-based layouts to ensure a seamless experience across fragmented email clients, including Gmail and Outlook.
04. KEY RESULTS
Enhanced Readability
Users can now understand the email’s intent immediately upon opening, without waiting for large images to download.
Seamless Mobile Responsiveness
By implementing a fluid grid system, I ensured 100% layout integrity across all mobile devices, optimising touch targets for B2B users on the go.
Improved Deliverability
The transition to coded text significantly reduced spam flagging compared to previous image-heavy formats.
Increased Engagement (CTR)
The clearer coded-text structure led to higher click-through rates, helping users engage with the email more quickly.
