Client
Paramount+
Role
Design Lead
Tools
Figma/Adobe CC
Design System, Component Library and Design Tokens for Paramount+ Emails.
Paramount+ email campaigns needed to be transitioned from image based emails to HTML emails in order to ensure better accessibility to the growing subscribers, to improve user experiences, for designers to be able to produce the work quicker and deploy the campaigns in higher volumes to meet retention business demands. Part 1 delves into my design journey, in undertaking the creation of the design system and component library, to create an intuitive, efficient, future-proof system for teams.
My Role
Design Lead, Design System, Component Library, Design Tokens, Developer Collaboration, Tests QA, Documentations for Devs and Designers, Team Mentorship Lead
Tools
Created for
Desktop / Mobile / Dark Mode
Timeframe
1-2 months per phase - ongoing
🤔 How might we establish a unified design system to ensure consistency, structure, and scalability across all teams?
Challenges
🪫 Building design system from the initial stage with limited resources
I was the pioneer and advocate of design system usage for email design in this team as it has never been done before. I was the sole designer initiating and leading the system creation.
🦠 Restrictions with brand assets and color palette
The Paramount brand guideline that I was given, consists of assets and styles primarily for broadcast, motion and traditional mediums (print/display), but they don't neccessary work for web/mobile design purposes and had to be thoroughly re-examine (ie; not enough color ranges especially neutral tones that would be useful to help preserve the design when color invert occurs on email clients dark mode setting per user's preferences etc.).
Non-tech savvy users 🗿
Designers who will use the system aren't familiar with coding or web design tools and how to design within HTML/CSS standards. This system needs to be intuitive and helps them customize the designs successfully without having coding knowledges.
Inefficient ways / disconnection on designer's hand-offs and QA with developers 🧨
Design team was using photoshop to create designs for handing off to dev team as JPG files. In some cases, HTML specs were laid out mannually and provided as spec sheets (also JPGs). Developers then rebuilt the whole thing aiming to match the specs/jpgs provided using their own tools. Both parties spent a lot of time on these processes. Mistakes and confusions happened often on both ends and it was inefficient to fix. They need a centralized system to collaborate.
Outcomes
🚢 Overhaul of the entire email campaign design
I extensively re-examined and re-created new components that are more feasible to build in HTML/CSS and created new color palettes that works when designing for dark mode, meet best practices but still aesthetically beautiful and adhere to the brand guideline.
Design system as a tool for designers 🎨
I established the design system and component library for designers not as familiar with Figma and web design tools to be able to customize templates using the intuitive interfaces to select pre-designed components as needed. The system helps turn heavy-lifting work to an easy-peasy instant clicks and done. It greatly reduces their time spent on customizing the same type of assets when having the right tools to work with.
Improving design consitency with design tokens 🧿
I created design tokens using variables in Figma as part of the design system and implemented these tokens across master templates. This helps designers and developers refer to the only source of truth when it comes to different design parameters (colors, text styles, spacing etc.). It significantly improves productivity, collaboration and QA process.
🚀 Designing the future-proof and scalable system for developers
During the entire process, I've also been updating the component library and/or releasing new components with detailed version history notes each time. The component library helps make feature customizations much faster and very precise in the future projects. I also created documentations with essential key parts for developers, to make my designs future proof and so they can work independently without designers's help.
👩🏻💻 Leading design mentorship monthly sessions
After the design system was launched to teams, I initiated numerous training sessions and acting as a thought leader in helping them defining the "how" on design system and template strategy.
Conclusion:
🎯 The Design System Helps Empowering Future-Proof Design, Customizations and Collaborations
The design system was built and rolled-out in phases and it is constantly evolving and will be updated over time to reflect the brand and business changes. It has proven to set the right foundation for teams to be able to design and develop the work much more efficiently than before. On the next phase (Part 2), I used the design system component library and design tokens from variables I created, to lead the overhaul re-designing project of all the Paramount+ master templates in different categories.
Sample Images: Paramonunt+ Email Design System, Component Tool Bar and Design Tokens 🧿
△ Sample image components for show poster and banner modules. The system was built to accommodate the design for both desktop/mobile, especially mobile devices are the primary targets for email deployments.
▽ The headline components with many styles, colors, alignments to choose from, giving designers flexibility to customize their designs, because not every headline should be the same…
▽ One of the most useful features in the system that incredibly make the template customization very easy, productive and mistake-free are the image components. With the ability to change different image formats (horizontal, vertical), how many columns in the layouts (1, 2 or 3 columns), toggle headline label, or to choose whether to have the call-out blue flags above the show images and how many lines.
▽ The design system consists of well-organized button collections. Button components help make it easier for designers to choose the right button for the job. The button colors range from blue, black, white, with or without + My List add-on. There are also selections for button colored borders in semantic names to choose from (black-on-white, black-on-grey, black-on-blue...etc.), such as "black-on-white" - Black is the button color, used on white surface, so it has a thin white border around it that is invisible when users view the email on default light mode. These border properties are very useful to ensure a button shape remains visible when HTML background color around the button inverts on dark mode per users' settings (especially for a black button on white HTML background, the background inverts to black on dark mode, without the white border, the button shape disappears).
▽ Image component tool, there are variety of options to choose image size/format, how many images in a row (1, 2 or 3), with or without the call-out blue flags above the show images and how many flag lines.
▽ Various header and headline components for both desktop/mobile.
△ Color token samples, each token has semantic name that's intuitive and easy for team to recognize.
△ Color invert on email clients/browsers per users's settings is a crucial part to consider when designing for emails. With variables I set up in the design system, designers can preview dark mode layouts during work in progress, helps elevate the design quality and accuracy.