Client
Paramount+
Role
Lead UI/UX Design
Tools
Figma / HTML
Duration
8-10 Weeks
Email Templates Audit 📮 For HTML Conversion & Design System Preparation
At the beginning of Paramount+ launch, the primary goal for Lifecycle business team was to grow subscribers and emails were one of the main focus, but Paramount+ didn't have a clear framework for emails. They weren't in HTML but image based, didn't meet accessibility standard hence they added friction in the user experience. I had been the driving force to re-design and transition all the templates to HTML framework and so I started the initial template design for subscriber newsletters, which will become the master template for the whole Paramount+ email template ecosystem in the years to come.
I examined all the existing emails from many categories we had. They were inconsistent in styles, content etc. and a lot of elements weren't feasible in HTML. I suggested team to start from weekly subscriber-newsletter templates, as it contained all sort of modules and functionality for different kinds of content, would be a good candidate to test the prototypes. I drafted and created the initial master templates under time constraint. They were launched as prototype tests first then deployed for a few months. There were demands from many parties (retention, originals creative, CBS Sports, legal…etc.) to promote all sorts of things or to insert their content through newsletter campaigns. Each party had their own requirements. Before I could start building the whole design system and created further master templates for many other categories, I needed to ensure the prototype templates worked as planned. For a few months, I've observed and documented usages, feedbacks, post-deployment metrics and identified different problems in these initial templates and came to a conclusion that a full audit was needed, along with guideline for contents, usages and styles for all the teams to adhere and align moving forward.
Audit Findings
🪓 Should we eliminate the navigation bar?
While retention team would like to have the NAV bar that linked to each show genre landing page, I had quite a valid reason to doubt its existence. It could lead users to leave the email before getting to the main message and the primary CTA below in the hero section. This was up for discussion.
Hero module (primary content) height might push important content below the fold on small devices. 🕳
Body copy with hyperlinks and CTA buttons weren't visible above the fold on small devices.
👽 Hero image dimension was too tall and push the CTA button below the fold.
While creative team would like to have a tall image bucket to feature their art, retention team would like the primary CTA button to always stay above the fold.
💥 No clear & safe image format to ensure featured show art displayed creative elements consistently, resulted in context being lost and added friction to user journey.
Creative team's requirement was to have certain treatment on title lockup and/or tune-in format. They wouldn't want the email headline that usually overlayed on top-most of the image, interfered with title lockup, especially for Originals show titles.
🐽 CTA button design needed to be iterated to have one clear primary button and 2 other secondary ones.
Retention/Content strategy teams's requirement was to have 3 CTAs in the hero section.
Color contrast issue when color invert occurs on dark mode. 🌚
🪠 Centered text format caused layout issue when the section headline gets longer.
☄️ HTML "star" character displayed inconsistently in comparison to Paramount+ "star" brand graphic.
Excessive use of "stars" in the templates 🌟🌟🌟
Stars were used in each row of section headlines, poster flags, in both HTML character and images.
🥾 Clutter footer, color contrast isn't good on dark mode, disconnection on P+ branding.
👟 Footer centered text alignment caused line-break issue on both desktop and mobile responsive layouts, affected legal text legibility and didn't meet mobile good accessibility.
Legal team's requirement was to have disclaimer paragraphs in the footer. They needed to be readable and legible based on real users's complaints when they got confused with shows availability according to their different subscription plans.
🚢 The Outcome
I analyzed each findings and iterated the designs, built the prototypes, collaborated with developers to conduct A/B testings and user-testings thoroughly with teams to ensure solutions that meet the requirements and users's delight.
🎯 This templates audit had proven to be invaluable. It sets the right foundation to the design system and all of the P+ template ecosystem I created afterward, many teams are actively using and adopting it presently. 🚀
△ Some of the shipped designs using updated components that were revised according to the audit findings.
My Role
Lead UI/UX Design & Audit, Prototype, QA HTML/CSS Tests
Tools
Created for
Desktop / Mobile / Dark Mode
Duration