Paramount/ViacomCBS

Global Intranet & Component Library

Screenshots of Design System & Component Library

Contributions at a glance

Figma Libraries/Workflow
Design Audit
Hi-fidelity Visual Design
Wireframing
Interactive Prototyping
HTML/CSS Development
Documentation Site
Implementation Support
Visual QA

Design

I designed low-fidelity wireframes, high-fidelity comps, and interactive prototypes for communication across stakeholders. I also led an initiative to create a design system to capture foundational design decisions and repeatable patterns from the emerging designs.

Development

I developed a custom resource website that displayed each component with its associated HTML/CSS and documentation. This site served several purposes:

Allows the engineering team a view of the 70+ logical components and speed up the implementation effort
Provides the desired presentation and interactions for each component
Demonstrates components assembled to make 25+ fully responsive page layouts
Serves as a resource for visual QA of the implementation

Screenshot of design system. — I audited existing designs to form a basis for the initial set of foundational design components.

Screenshot of prototype. — I wired up prototypes to quickly simulate the experiences for executive stakeholders.

Screenshot of component/page listing. — I developed 70+ logical components and 25+ page layouts — all fully responsive.

Screenshot of coding environment. — I custom built a static site generator to produce a documentation site with Node, Gulp, and Nunjucks.

Screenshot of component page. — Each component had a live demo, HTML/CSS/JS, and supporting documentation.

Return to Featured Projects