Sealed Air Corporation
POP Design System
2021 - present
Role
Team
Senior UI Designer
3 UI Designers
4 Developers
1 Project Manager
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.
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.
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.
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.
.png)
Open Sans is our secondary UI font family and is used for body copy styles.
.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.
.png)
12 column desktop grid, 1440 px
.png)
6 column tablet grid
.png)
4 column mobile grid, 375px
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.
.png)
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.
Designers can create more complex patterns, like tables, using built-in variables
Table component variables
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.
Accordion component coded in Storybook
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.
Data visualization documentation page
E-commerce desktop page
Informational product page utilizing additional sub-brand colors
E-commerce mobile page
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.