Part 1: Design System, Component Library and Design Tokens for Paramount+ Emails, Empowering Future-Proof Design, Customizations and Collaborations

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 damands. This case study delves into my design journey part 1, 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 Dev and Designers, Team Mentorship Lead

Tools

Created for

Desktop / Mobile / Dark Mode

Timeframe

2-6 months per phase - constantly maintaining

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 occurred on email clients dark mode settings per user's preferences etc.).

Non-tech savvy users

Designers who would use the system aren't familiar with coding or web design tools, to understand 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 numerous graphic assets, established new color palettes and created new design components that are more compatible with HTML/CSS builds, 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 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. I also created documentations with essential key parts for developers, to make my designs future proof and independent of designers help.

Leading design mentorship monthly sessions

After the design system was launched to teams, I initiated 15+ training sessions so far 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 re-designing project of all the Paramount+ master templates in different categories.

Request Design System Demo

Part 2: Template Designs

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 emails.

▽ The headline component tool with many styles, colors, alignments to choose from, giving flexibility in design 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 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), with the toggle switch for 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. The button component tools help make it easier to customize 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 (black-on-white, black-on-grey, black-on-blue...etc.). Black is the button color, on white background, so it has a thin white border around it that is invisible when using the button 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 (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, shown extensive options to choose image size/format, how many images in a row (1, 2, 3), the call-out blue flags above the show images and how many lines.