wevplex-logo

Viacom Design System

ROLE
UI Design
TIMELINE
2018 - current
TEAM
Amanda Russo
Jason Grotrian
SUMMARY

Create a global design system that powers all Viacom brands using scalable components and templates.

THE CHALLENGE
Viacom has many global brands that has sites designed by different teams during different times. It became increasingly difficult to maintain old sites as well as onboarding new brands due to the tech and design debt.
We set out to create a design system - WebPlex - that can power the sites for all brands (domestic and international) while retaining the identity and personality of the respective brands. 
brands
STEP 1

Conduct a Visual Audit

We started by creating a visual list of all current sites and their designs. Then, we broke down the sites to the main components and kept a list of common patterns.

Before design system:
webplex-before
STEP 2

Create Visual Design Language

Because of the 9+ brands under the Viacom umbrella, it was unfeasible to create designs over and over again for every brand. We created a white label design system which we would use for all designs and templates. The design system consisted of:

  • Colors (brand colors, UI colors, text colors, etc.)
  • Typography (fonts and type scales)
  • Sizing & Spacing (grid systems, spacing scale, etc.)
  • Imagery (icons, image sizing standards, etc.)
webplex-sg
STEP 3

Create a UI/Pattern Library

After developing the design language, we built out the common components for all brands across shows, events, news, etc.

We then mapped out the fonts, colors, etc. using CSS variables so that we can easily swap out brand stylings.

WebPlex Default
webplex-cards-1
STEP 4

Document & Scale Through Code

We then created the system through inVision DSM and Storybook with our engineering team and scaled with code

cc-cards-2
paramount-cards
paramount-designs
cc-designs

More Projects

MTV Video Music AwardsWeb Voting Experience

VidConWebsite Design

A Winter's TaleWindow Display

Cardboard TurntablePhysical Computing

Web AnimationsCreative Coding

Pop-Up CardsPaper Crafting