Sealed Air country & language selector

What we achieved

The problem

The country and language selector is an integral piece of the Sealed Air web experience. Users from across the globe need to change the region, country, and language they associate with. The feature also corresponds to which products are available, so it can disrupt shopping if it is not addressed correctly.

“As a user I want to be able to select the country site that I want to go to as well as the language that I want for the content to be displayed in.”

Areas of opportunity

The previous modal only required regional changes. A few key areas needed focus:

• No selection state

  Choosing a region did not show a clear state change, so people could not tell what was current.

• Weak hover states

  Links lacked usable hover feedback, which made the list feel inactive.

• Ambiguous click targets

  Categories and links were styled the same, but not everything was clickable.

• Unclear regional IDs

  Codes like AM and EMEA did not help someone choose a country or language.

• Unstyled header

  The panel had no designed header row for an exit control or dropdown.

Research approach

I researched standard practices for region and language selectors. I focused on e-commerce sites and indirect competitors, because most direct competitors did not provide strong examples. The patterns that stood out separated region and language from each other.

• Separate the two choices

  High-usability examples let people pick a country site and a content language as distinct fields, not one mixed region list.

• Nielsen Norman Group

  Their guidance on locale selectors helped me sort common pitfalls from patterns worth carrying into POP components.

• Utility nav, not primary nav

  The selector needed to sit with account and locale tools on desktop, then get a mobile pattern that did not collide with the main menu.

Design process

I started by creating components that matched the new navigation and the competitive analysis. I wanted the language selector in utility navigation on desktop, but mobile still needed a solution.

1. Step 1

   Component variants

   What changed

   I used variants for hover and selected states and added a flag so the current country was recognizable at a glance.

   Design intent

   Build the locale control as a system piece first, then place it — not the other way around.

   

2. Step 2

   An early mobile miss

   What changed

   The first mobile pattern put the selector in a footer toggle that revealed from the bottom. The full-screen exit icon overlaid the original main menu, which made the header feel like two products at once.

   Design intent

   The modal needed a header that could host overlays. That meant redesigning the mobile menu chrome, not just the locale form.

   

3. Step 3

   A scannable country list

   What changed

   I designed a dropdown with hover states and flags. The first shipped iteration would use native dropdowns for accessibility; the custom list showed how people could scan countries later.

   Design intent

   Native controls first for access, with a designed list ready once the pattern was proven.

Desktop design

Once testing identified the pattern, I designed every required breakpoint and built responsive Figma components from desktop to mobile. I created states for categories, subcategories, and list items, updated the utility navigation bar, and built high-fidelity prototypes for menu interactions and animations.

Mobile design

To fix the overlapping modal, I tried a version with padding from the screen edges so it sat on the hero instead of the main menu. That helped, but as the mobile navigation evolved, so did the modal.

As a team we decided to address the modal experience as a whole. This project became a catalyst for changing the entire navigation going forward.