top of page

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

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
bottom of page