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. 

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:

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

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

STEP 4

Document & Scale Through Code

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