Email Redesign and Dev

Correcting user experience and delivery challenges with our Master Email

Fragmented user experience:

Most of users engage with our emails on mobile yet their experience wasn’t cohesive with our brand or responsive. 

• Various long scrolls on every email. 
  
• Hard to maintain code
  

Delivery Challenges:

Lack of ADA and Dark Mode support created delivery challenges for a portion of our email users list.

• Designers & devs required to pull old sections from past emails, resulting in design inconsistency, bugs and time inefficiency due to constant code editing.
  
• Very large files caused email to crop on Gmail (due to their html size limit 125 kb)
  

What I did:

Strategized Proposal for Marketing Executives on the need of a redesign 

• User Research, UX & UI Design, Prototyping
  
• Created reusable templates, Responsiveness, Clean unnecessary code (to reduce size)
  
• Ensure Accessibility & correct Dark Mode delivery
  
• Redesign project implementation and launch
  

Challenges:

• Gmail & Microsoft forced fonts and quirky css  forced rules. Outlook ignores a lot of classes required to keep email clean by forcing you to inline everything. Gmail is hard to debug due to their strict CSS guidelines, where the smallest error could break the entire email.
  

Accessibility Upgrades:

• Added role="presentation" presentation to every table
  
• Implemented the use of live text in almost every section
  
• Added relevant descriptions to images with the alt="text"
• Added the role="button" to every a tag
  
• Contrast tests for every color
  
• Layout and readability
  

Dark Mode:

Gmail app in dark mode does a full invert of colors, yet it doesn’t respect contrast. To correct the issue and provide a consistent email experience, I used blending modes and linear- gradients. This resulted in Dark Mode working properly for our entire user email list and use of blending modes and linear- gradients in all emails (transactional & automated)