Simplifying Web Content

Mobile Passport Control (MPC) Web Page Redesign

What I did: Usability testing, Figma prototyping, web design system, plain language

Overview

MPC is a free mobile app designed to help travelers move through Customs more quickly when returning to the U.S. after an international flight. During usability testing on websites for traveler programs, we discovered that many travelers were confused about MPC after reading the program’s informational content. They didn’t understand its purpose, who should use it, or how it differs from Global Entry, a paid service. A common misconception was that MPC was only for making declarations.

As part of a comprehensive evaluation of the program, I redesigned its public web page using the U.S. Web Design System (USWDS) and plain language to ensure consistency with other government websites and enhance clarity for users. The redesign addressed the issue of poorly communicated program details: the original page featuring a cluttered layout with an embedded video, long paragraphs of text, and FAQs hidden in accordions.

During usability testing, users struggled to find basic information, and even when they did, they had difficulty understanding its meaning. These findings were supported by a high bounce rate—as we observed first-hand, users were giving up. Improving user experiences on this simple web page—especially since it’s the first link produced by a Google search for the program—proved a low-lift, high-impact solution to increase MPC adoption among travelers.


6.5M - MPC pageviews in FY24

54% - bounce rate from MPC page

Using the U.S. Web Design System (USWDS)

I designed the page with the goal of making it as straightforward as possible for developers in CBP’s Office of Public Affairs to implement after the handoff. Specifically, I focused on

  1. Designing for desktop and mobile viewports using the USWDS Figma component library

    Although the page is static and informational, it would become the go-to resource for millions of travelers looking to reduce their Customs wait times. I wanted to present this information in a trustworthy way, meeting user expectations based on their experiences with other government websites. To achieve this, I followed several key USWDS design principles, including:

    Promote continuity: Minimize disruption and provide a consistent experience: throughout services, over time, and across agencies, platforms, and devices. 

    Listen: Evaluate and improve your product by listening to your audience and learning from what you hear. 

    Accessibility: Accessibility is about real people who use our services — it’s usability for people who interact with products differently. Everyone who works on government websites has a role to play in making federal resources accessible and inclusive.

  2. Providing documentation of the “why” behind the components used in the wireframes

    I wanted to facilitate a trusted handoff, giving developers the flexibility to make adjustments if needed while still aligning with user needs from research and business objectives from CBP stakeholders.

Takeaways

  1. Bottom line up front (BLUF).

  2. Paint a picture.

  3. No more hiding.

Bottom line up front (BLUF).

When asked to define MPC, some test participants focused on the shorter line in the Customs arrival area, while others emphasized the mobile app. Several participants even assumed that MPC was only for submitting declarations. Without a clear BLUF and the purpose of the program easily visible, travelers may overlook the opportunity to use MPC and shorten their travel time. Users should be able to immediately envision how they can use MPC; if they can't, they'll likely default to what they know—waiting in the regular line for hours.

Paint a picture.

Proactive travelers are more likely to participate when they know what to expect at every step of the process. By contextualizing the benefits at each stage of the experience, users can better envision a smooth journey from deboarding to baggage claim. It's important that travelers understand exactly what is required for a successful experience.

No more hiding.

The original web page organized most program information in accordion-style FAQs, forcing users to guess which header contained the answers they needed. Even with both the Global Entry and MPC pages open, users struggled to articulate the differences between the two programs.

Following plain language best practices, I moved critical information out of the FAQs and into the main body content of the page. This included a comparison table that clearly highlights the differences between MPC and Global Entry.

Previous
Previous

Enabling Trade Modernization

Next
Next

Expediting the Traveler Journey