Staples Promotional Products

Designing an experience to help customers

Creating design solutions to improve product discovery.

About Staples Promotional Products

Staples Promotional Products offers custom printing on promotional products. They carry a large selection of products with fast turnarounds and low minimums.

The Challenge

The goal was to help users explore and find products more easily, especially for those that don’t know what they’re looking for.

My Role

I was responsible for the User Experience (UX) and User Interface (UI) Design.

I Conducted/Designed

Expert Review
Competitive Analysis
Wireframe
Prototype
User Interface Design
Visual Design

The Team

Director of UX / Director of Digital Product Management / Product Manager / Art Director

Design Process

Empathize

Expert Review

Define

The goal

Ideate

Wireframe + Visual Hierarchy

Prototype Wireframe

Feedback + Iterate

Design

User Interface
Interaction
Visual

Navigation

The original design was information heavy. The primary navigation was difficult to find. And repetitive information added to cognitive effort. Based on user needs, content was reorganized or relocated to other areas on the page.

Wireframe

The primary navigation should be easily accessible. Similar content should be consolidated. And unnecessary content should be removed.

Value props were removed because they increased cognitive effort without improving navigation.
The primary navigation was pulled out of a mega menu. From a glance, without clicking or hovering over any elements, users are able to easily determine the products and services that are offered.
One of the primary goals is to help users find products, especially those that don’t know what they’re looking for. The “Get ideas” link was designed to be more visually prominent.
The chat, phone, and help link provided similar content and was consolidated into a “Contact Us” link.

High Fidelity

Feedback from stakeholders were used to iterate wireframes and create high fidelity designs.

Team wanted to move forward with a mega menu. “Products” was changed to “Shop” to align with Staples.com. Since “Shop” was the primary navigation, it was moved from center to left align for easier discovery.
In a mega menu, it’s intuitive to read from top to bottom, and then left to right. Links were reorganized to reflect this reading pattern.
Due to the high volume of calls that are received, it was determined that the phone number was more important than the chat and help links. The phone number was retained, while the chat and help links were moved to the footer.

Homepage

The original design was complicated and ambiguous. The goal was to provide suitable content with visual hierarchy, to help users narrow down their search and guide them through the appropriate user journey.

Wireframe

Primary actions needed to be clear and prominent. And content needed to be relevant.

Since we decided to move forward with a mega menu, products were not accessible without interacting with the interface. To improve accessibility, a list of popular categories were added below he hero.
Focus groups indicated that quick turnarounds were important. Two calls to action were added to the homepage.
An expert review raised concerns about our high minimum order quantities being a potential pain point. The concern was confirmed in focus groups. Customers wanted lower minimums even if it meant the cost per unit would be higher.
Deals is also an important category. Multiple calls to action were added to the homepage.
If a user scrolls through the entire homepage and didn’t take any action, there’s a high possibility they’re not sure what they’re looking for. A “we’re here to help you” message is placed at the bottom of the page to assist these customers.

High Fidelity

The content, copy and visual hierarchy were iterated and refined based on stakeholders feedback.

The number of categories were increased for easier access to more products.
“Make a big impact for less” was changed to “Deals starting under $1”. “Deals” is a conventional word that is commonly used, recognizable, and understood. The copy is more direct and informative.
Value props were added to provide new customers with greater assurance.

Category Page

The original design required extra effort to navigate, had outdated features and inconsistent visuals. The experience was revised to be more efficient and simple with less friction and unnecessary elements.

Main Page

Unnecessary elements were removed. And visual consistency was established.

The “Filters” label was unnecessary and removed. It’s common practice to place filters on the left.
The “Sort by” label was changed to visually match the filter labels on the left to indicate these are related elements.

Sublevel

Interactions should require minimal effort. And features needed to help users achieve their tasks more quickly.

The category section was changed from links to filters. There were two benefits: 1) Efficiency increased. Users can view multiple categories at a time. And 2) Friction decreased. Users no longer needed to navigate back to the previous page to access the list of categories.
To improve usability, selected filters were grouped under the header for quick access.
Based on Full Story sessions, the ability to choose the number of items displayed was rarely used. This feature was removed.