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.
Foundations
Foundations
Foundations
Component reference pages in POP's working Figma file
Table component variables
Primary Brand Colors
Utility Colors
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.
Open Sans is our secondary UI font family and is used for body copy styles.
All type can be scaled by increments of 8 points.
Layout
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.
Problem Space
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.
Problem Space
Problem Space
.png)
POP Design System
2021 - 2022
Components
We began by building a set of common components for POP's UI library. Designers could also request a new specific component. I'd then explore ideas, produce iterations, and present the work to the POP design and dev teams to ensure the functionality was sound and ready for development. Overall, I created 20+ new components for POP.
Components
Components
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
We published a global library for POP's color and typography styles, sizing and spacing tokens, and UI components. I crafted usage and implementation guidelines for components, along with specs to ensure developers had consistent instructions on how to build out designs and interactions.
Documentation
Documentation
Documentation
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.
In Context
In Context
Office Hours
Our team held bi-weekly office hours for all using or interested in using POP. Teams would bring up issues they have with the system, components or patterns they'd like us to build, or updates they want added to the guidelines.
Support Meetings
In addition to office hours, we met with teams to further discuss product-specific POP adoption. If a product needs a specialized component or style change, we worked with them to customize their POP library.
Newsletter
I sent out a quarterly newsletter detailing new features and updates, POP swag, and resources on how to best utilize POP.
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 were just beginning to adopt POP, while others had been using it for months. To manage all those users and their specific needs, we set up several avenues for feedback.
Adoption
Adoption
Adoption
Client
Sealed Air Corporation
Role
Lead designer
UX design
Interface design
Interaction design
Team
3 designers
4 developers
1 project manager
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.
Problem Space
Brief
My team at Fidelity's Center for Advanced Technology received company funding to build a client management interface for the sales department. Our project's objectives were to consolidate existing tools on a single platform and incorporate AI insights for sales opportunities.
Client
Fidelity Investments
Role
Visual designer
UX research
UX design
Interaction design
Prototyping
Team
3 designers
1 product manager
1 business analyst
4 developers
Brief
My team was tasked with improving LG's ownership support experience across their current site. As a design lead for this project, I was responsible for establishing visual guidelines for the interface that maintain LG brand standards.
Client
LG Electronics
Role
Visual design lead
Experience design
Visual design
Interaction design
Team
5 designers
1 design director
1 product manager
1 client partner
4 product owners
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.
Role
3 designers
4 developers
1 project manager
Team
Lead designer
UX design
Interface design
Interaction design
Client
Sealed Air Corporation
