Sealed Air

POP Design System

2021 - present
Role
Team
Senior UI Designer
3 UI Designers
4 Developers
1 Project Manager
POPCover Copy.png
The Brief

Design a visual interface system that scales across all Sealed Air's digital products and helps teams efficiently build and deploy high-quality digital experiences, while promoting the company's brand standards.

The Solution

My team built POP Design System, a robust design library that provides designers and developers at Sealed Air with visual and structural guidelines, repeatable interface components and patterns, and development specs and tokens. POP is currently being adopted by all digital teams.

PART 1
Problem Space
"
We need a single source of truth
"
-  audit observation

We set up regular meetings with teams to understand the range of Sealed Air products, the interfaces required for those products, and the visual guidelines in place to support production. Through these audits, our team identified these key pain points:

Consistency

Digital platforms were inconsistent across both design and branding, which negatively impacted user experience.

Scale

We had no company wide design or code standards. Designers used a range of colors, typography, and components that varied from product to product.

Speed

The lack of standards slowed a team's ability to make decisions, execute changes, and, as a result, push a product to market.

PART 2
Foundations

Because Sealed Air's digital products followed no consistent visual elements, our team started by consolidating and defining branding, type, spacing, and layout structures. I would regularly work with teams across the company to ensure their prototypes and deliverables met POP's foundational standards.

Color

We kept the Sealed Air brand palette but created a color scale to give designers variety for visual hierarchy and improve accessibility. 

Color Palette.png
Typography

Forza is the primary UI font family and conveys the Sealed Air brand - modern, industrial, angular but still friendly. Forza is used for display type and button labels.

Forza (1).png

Open Sans is our secondary UI font family and is used for body copy styles.

Open Sans (1).png

All type can be scaled by increments of 8 points, depending on the dimensions of the interface and its respective users' requirements.  

Spacing + Grids

To keep component construction and layout consistent across mockups, we set spacing to 8 pixel increments. POP also provides three grid templates, for desktop, tablet, and mobile.

Frame 159 (1).png
12 column desktop grid, 1440 px
Frame 160 (1).png
6 column tablet grid
Frame 161 (1).png
4 column mobile grid, 375px
PART 3
Components

I created UI components for designers to build out prototypes.  I'd begin by auditing existing examples of the component to determine what worked and what didn't, explore ideas and produce different iterations, and then review my work with the design and development teams. 

Components (2).png
PART 4
Documentation

We used a network of platforms to document POP Design System to ensure that designers and developers had access to all our provided resources.

Figma

Because designers at Sealed Air use Figma for mockups and prototyping, it was the ideal platform to build and house POP. We published a global library for POP's color palette, typography, sizing and spacing tokens, and components. Designers can drag in and manipulate these UI elements to fit product requirements.

Screen Shot 2022-07-29 at 3.16.38 PM.png
Screen Shot 2022-07-29 at 3.16.51 PM.png
Screen Shot 2022-07-29 at 1.21.02 PM.png
Designers can create more complex patterns, like tables, using built-in variables
Table component variables
Screen Shot 2022-07-29 at 1.18.58 PM.png
Screen Shot 2022-07-29 at 1.19.14 PM.png
Component reference pages in POP's working Figma file
Storybook

All coded POP components and styling tokens were stored in Storybook. I met regularly with our developers to make sure that the UI was pixel-perfect to the design's specifications and the functionality was working correctly.

Screen Shot 2022-07-29 at 1.24.17 PM.png
Accordion component coded in Storybook
PART 5
POP in Context

This design system had to scale across Sealed Air's platforms, which range from external web presences to internal e-commerce product and checkout pages. Here are examples of POP being used across the company.

Desktop - 4.png
Data visualization documentation page
Company Account - Address Book - 062821.png
E-commerce desktop page
prismiq-LandingMockup-draft.png
Informational product page utilizing additional sub-brand colors 
375.png
E-commerce mobile page
PART 6
Adoption

Building a design system is a complex endeavor that requires input and cooperation from multiple disciplines. I've learned that a good design system is never finished, and POP is constantly evolving. Some teams are just beginning to adopt POP, while others have been using it for months. To manage all these users and their specific needs, we've set up several avenues for feedback.

"
A good design system is never finished
"
Office Hours

Our team holds bi-weekly office hours for all using or interested in using POP. Teams can bring up issues they have components, components or patterns they'd like us to build, or changes they have made to UI elements following POP guidelines.

Support Meetings

In addition to office hours, we will meet with teams to further discuss product-specific POP adoption. If a product needs a specialized component or style change, we can work with them to customize their POP library.

Newsletter

I send out a quarterly newsletter detailing new features and updates, POP swag, and resources on how to best utilize POP.