Updating the Staples.ca Product Card
Product cards play an important role in helping customers quickly evaluate products as they browse Staples.ca. The existing Product Card made that difficult, with several usability and visual design issues:
No clear typographic hierarchy
Excessive white space created disconnected, "floating" content
The card occupied more than 90% of the viewport on some mobile devices
Inconsistent spacing and visual treatment made information harder to scan
Working with guidance from the Staples Design System team, I redesigned the Product Card to create a clearer, more compact, and scalable experience across Staples.ca.
The old product card designs are presented on the left, with the new one on the right.
The Product Card needed to accommodate a wide range of requirements from teams across Staples, including the different needs of both B2B and B2C customers.
As the project evolved, new requirements and dependencies continued to emerge. I explored different layouts, content combinations, and component variations to understand how each addition would affect the overall experience.
Through multiple rounds of exploration and refinement, we consolidated these requirements into a flexible Product Card that could support different use cases while maintaining a clear hierarchy, accessibility standards, and established design principles.
Process Work
A log of all changes, updates, and decisions were kept within sticky notes within the file for organizational purposes as numerous teams were involved and paper trails needed to be kept.
The redesigned Product Card improved readability, hierarchy, and interaction across the experience:
Increased font sizes and stronger colour contrast improved legibility.
Pricing and sale information were given greater visual prominence.
Key elements, including the product image, description, price, and Add to Cart button, became easier to identify and scan.
Related information was grouped more clearly, such as pricing details.
Larger product imagery improved recognition while browsing.
Hover states were refined to provide clearer interaction feedback.
What Improvements Were Made?
The redesigned Product Card showing both sale and regular-priced products.
Product thumbnails play an important role when customers are scanning product listings.
When a single image doesn’t provide enough information to evaluate a product, customers may overlook it. To provide more context without adding clutter to the Product Card, I introduced a secondary image on hover, allowing customers to quickly view an alternate product image such as a Feature Cutout, Cutout, or Lifestyle image.
Secondary Thumbnail on Hover
Feature Cutout Thumbnail
Cutout Thumbnail
Lifestyle Thumbnail
Anatomy of the Product Card
The Product Card is made up of 11 modular elements that can be added or removed depending on the product and use case. Some elements are required to maintain a consistent experience, while others are optional, giving Staples.ca the flexibility to support different product types and content needs.
Assets can be turned on and off within the Figma component
At the time of evaluation, there was not yet enough post-launch data to measure the Product Card’s impact. To assess the usability improvements, we used Baymard’s e-commerce UX benchmarks to evaluate individual elements of the card.
While Baymard does not provide a dedicated category for Product Cards, several aspects of the component could be assessed against its established usability guidelines.
Results
