USPS Redesign

Responsive Web Design Case Study

#UX UI #accessibility #responsive web

I. INTRO

OVERVIEW

USPS.com’s purpose is to foster an online presence for local United States Post Office outposts and to facilitate customer service exchanges that take place in physical office locations. Its target user base is rooted in public consumers who are looking to manage their personal/business mail transactions via interactions such as creating shipping labels, purchasing postal products, tracking mail & packages, and receiving estimates based on destination and time, at both an individual and business scale.

CHALLENGE

The audience base that USPS.com serves is as wide and varied as the United States population itself. There is no ‘typical’ USPS user so much as there is no one defined, typical American.

As a federal agency providing a basic service to the gamut of the entire country’s population, its website needed to be easily maneuverable and accessible to an enormously diverse pool of users -- ranging from all levels in technological savviness, language fluency, and general understanding of how the postal service works.

GOALS

With this in mind, my goal as a UX designer was to create a responsive redesign for USPS.com that understood the breadth of its customer base and was widely usable with as little learning curve or intimidation as possible.

I aimed to fully comprehend what common behaviors and and shared characteristics lay beneath the needs of its site’s users, despite physical, cognitive, & sociocultural differences that spanned between them.

I sought to do this by breaking down the current website design via heuristic evaluation and analysis, and by conducting interviews and testing sessions in order to understand underlying mental models behind our users and to shape design decisions.

“The first step toward the goal of universal usability is to discard the notion that we are designing for a ‘typical’ user. Universal usability accounts for users of all ages, experience levels, and physical or sensory limitations.”
- Patrick J. Lynch & Sarah Horton
Web Style Guide, 4th Edition: Foundations of User Experience Design
PROTO-PERSONA DEVLEOPMENT
Considering these assumptions about our user base, I crafted two proto-personas with vastly different identities; but both had some basic needs to be fulfilled via the postal service. How might they navigate through the site in order to achieve their respective goals?

1/2
2/2

II. USER INTERFACE ANALYSIS & TESTING

USER PATH & WIREFLOWS, HEURISTIC EVALUATION, & ACCESSIBILITY ANALYSIS
I completed several preliminary wireflow annotation exercises in order to get fully acclimated with the user flows for some primary functions on the USPS website. By breaking down the details and analyzing each visual element as it was presented on the page(s), I began to evaluate its success in its current context, both within the page itself and its placement within the overall schematics of the site map.

Homepage analysis: bodystorming & general notes

Tracking: heuristic evaluation

HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS

When entering in an incorrect or invalid tracking number, it will take you the tracking status page with Status Not Available, suggesting to verify the number or to try again later.

Is their tracking number way over/under the designated digit limit of the barcode? Did they accidentally add an invalid character? Is there an opportunity to integrate a QR code scanner to mitigate copy+pasting and/or manually entering numbers? Ought we place the FAQ link into the main body field instead of right-hand nav, in order to immediately orient users for further troubleshooting?

Recommendation: Add further troubleshooting actions that a user can take immediately when receiving this message.

Goal: Optimize this page so that the user does not feel ‘stuck’ at the end of an attempted flow.

HELP & DOCUMENTATION

When troubleshooting where a package might be, the user is directed to a FAQ table.

Recommendation: Add a linked index/table of contents so users can find their specific problem immediately without having to scroll through and browse

Goal: Prompt flexibility & efficiency of use and user control & freedom. Create an hierarchy of information with headers, body text, and calls-to-action in order to better visually digest and piece the blocks of information, as this is a text-heavy page.
ACCESSIBILITY
A general accessibility analysis showed that, overall, the current USPS web design was successful in accommodating folks with disabilities, based on WCAG guiding principles dictating that web content ought to be perceivable, operable, understandable, and robust.

1. ALT TEXT: Appropriate alt text has been consistently applied to images, offering viable text alternatives to users who do not see the image and may be using a screen reader.

img
2. COLOR CONTRAST: The color palette passed contrast WCAG standards to accommodate those who cannot read text if there is not enough contrast between content + background.
img
3. KEYBOARD NAVIGATION: Links were accessible via keyboard, including the drop-down menu navigation.
img
By getting into the weeds and annotating visual components at an individual level, I was able to glean a better understanding on what worked well on the site, and what areas might need a bit of improvement. I utilized heuristic standards in order to make these evaluations against a set of established usability principles and best practices. I would then substantiate or challenge these judgments against user interviews and testing sessions to see if they held water.
USABILITY TESTING

Participants were asked to execute tasks such as track a package, create a shipping label, and try to get a shipping estimate for a package considering time and destination.

Paria
Graphic Designer
Atlanta, GA
Ana
Student & Intern
New York, NY
Ashley
Architect
Minneapolis, MN
Cristian
Real Estate Agent
New York, NY
Joe
Teacher
Danville, VT
Melissa
Marketing
New York, NY
It was important to seek out a diversified participant test pool when it came to age, gender, occupation, cultural & socio-economic background, geographic location, and living environment.

The purpose here was to shed light on commonalities between success and frustration points that weaved these different folks together in their shared experience of navigating the site.

TESTING FINDINGS: ICONS & IMAGERY

When it comes to icons, users respond positively when a combination of both text + imagery is used, especially when the icons themselves aren’t necessarily widespreadly used or found in other web environments.

Icons provide a visual indication of what something might do, and the corresponding text will affirm & validate that speculation within the user’s mindset.

Multiple participants said that they would not know by icon or image alone what an action may represent.

TESTING FINDINGS: TRACKING PACKAGES

USPS tracking links & info integrated with e-commerce retailers
Tested users indicated that in real situations in their daily life, they use the Track Packages function the most frequently when they interact with USPS.com, mainly for tracking online purchases or returns.

This was a function I would later prioritize in my redesign, as it seems as though most, if not all, tested users communicated that its use was a fairly necessary one in their lives.

III. INFORMATION ARCHITECTURE

CARD SORTING
In order to better understand how an individual USPS consumer thinks and navigates through the information living within the site, I facilitated 4 closed card sorting exercises.

This allowed me to substantiate each page’s placement within our developing information architecture, ensuring that our design model matched the user’s mental model.

Card sorting results, collected via OptimalSort
SITE MAP
With the insights discovered via user card sorting, I created a site map that users could comprehend and successfully navigate through. “Help & Support”, “FAQ,” and “Search”
Because we witnessed some user ambiguity during the card sorting exercise, I decided to place these pages within the primary navigation to eliminate categorical grey area.

Next steps of further testing will confirm the placement of these units and/or establish clarity on where they might best live.

LO-FI WIREFRAMING

IV. RESPONSIVE DESIGN, PROTOTYPING, & TESTING

HOMEPAGE: ‘QUICK TOOLS’ NAVIGATION

One particular change I applied from the original USPS design was to move “Quick Tools” from the top header navigation to a spot directly above the fold on the homepage, wanting to make this even more quickly & readily available at the fingertips.

However, there were too many options included in the original design under the Quick Tools header. This was meant to live as a menu of shortcut navigation options, and not to serve as the primary navigation.

I distilled this further and reduced the number of options that were available in Quick Tools in order to establish clearer user workflows and to not clutter the user with too many navigation patterns available to them when they were already on the fast track to their goals.

Furthermore, the naming “Quick Tools” did not inherently give an indication of what lived inside the menu. I changed this to “What can we help you with today?” to facilitate a more personable customer service communication interaction between the system and the user.
DESKTOP WEB PROTOTYPING
DESKTOP PROTOTYPE TESTING: TRACKING PACKAGES

In this round of testing, I opted to test for tracking packages as the main task flow. For many users, this was their first touchpoint within the site and a main reason for their visit. Therefore, its success was critical.

Retaining the “track packages” search function as a top and prominent element within the information hierarchy, and having a clear indicator of delivery status and tracking history yielded positive results in user success and satisfaction.
ITERATIONS: TRACKING TROUBLESHOOTING

While testing was generally successful for tracking, it raised the question:

What happens when a user’s journey does not end at the status bar page, and there are still needs that have yet to be met (tracking not updating, status inaccurate, etc)?

Therefore, next steps & iterations included:

1. Incorporating FAQs that would provide potential explanations to commonly experienced package tracking problems

2. Adding additional links & actions to help the user troubleshoot when a package’s status was not meeting expectations

...by applying these changes, we’ll ensure that users do not feel abandoned or frustrated at the apparent “end” of a workflow. The goal was to foster peace of mind and reassurance when they are already preoccupied with wondering where their packages are. By providing additional calls-to-action, we can give the user a feeling of control.

ITERATIONS: BREADCRUMB NAVIGATION

Because there are so many different ways that a user can travel throughout the USPS site, it became evident that there was a need to immediately orient the user and to keep them anchored no matter how far they wandered away from the homepage. I did this by adding in breadcrumb navigation.

MOBILE PROTOTYPING
ITERATIONS: EMPHASIZING TIMESTAMPS ON STATUS UPDATES

When it came to the Tracking Status page, tested users said that they preferred to see time & date prominently presented when thinking about where their packages were -- if a package wasn’t delivered yet, when would it arrive? If it was delivered, how long was it sitting at the front door?

In consideration of the LATCH method of organizing information, I separated time & location as two distinct decipherable information points in order to aid visual digestion and present what the user cared the most about to the forefront of their eye.

MICROINTERACTIONS

IV. POST-MORTEM: FINAL THOUGHTS

LANGUAGE

While all the users tested for this project were English speakers, part of considering universal usability meant acknowledging users whose first language is not English. The 2019 Census Bureau reports at least 350 languages spoken across households in the United States.

On the USPS website, only two additional languages besides English - Spanish and Chinese - are available, and not all elements are fully translated.

Spanish & Chinese translation versions of USPS.com

As a potential next step, it would be a great opportunity to be able to create multiple language versions of the site that represented the scope of languages spoken by USPS consumers. Testing among native speakers of respective languages would deliver insight into the sets of visual cues and communicative signifiers that lie within each culture group itself. This could further help inform ease of use & delight for an individual user.

PERSONAL TAKEAWAYS

Prioritization was a challenge. Due to the limited time constraint of the project, I had to select a few task flows to focus on, rather than attempt to overhaul the entire site.

Because my intention was rooted in creating solutions that would hold significant relevance for as many people as possible, I prioritized the homepage navigation and tracking task flows, so I could cast as wide of a net as I could when it came to testing. My aim was to test people who had familiarity with these actions in their daily lives so they could offer meaningful qualitative data to build from.

Moving forward, I would likely approach this by continuing to work on most common use cases, and work my way back in terms of what needed to be prioritized by considering what is most applicable & relevant for the users.

That being said, because we have such a widespread pool of postal service users, this may not always be as clear as homepage navigation and tracking packages.

It would have been enormously beneficial to have access to large-scale quantitative data gathered internally within the site -- such as page view metrics, heat maps, and on-screen viewability rates. Coupled with the qualitative data gathered, this would be powerful in telling a bigger story surrounding the vast audience we’re working with.

Additionally, I would have loved the opportunity to engage with USPS stakeholders to understand their concerns and preferences.

THANK YOU FOR READING!

Questions, comments, or feedback? I'd love to hear it. Please drop me a line
here.