Updating the Staples.ca Product Card
Users on the Staples.ca homepage need a way to view a representative sample of products. The current 'Product Card' did not provide an easy to scan and concise summary of product details:
No clear hierarchy of typography
Unnecessary white space creates 'floating' content
Takes up over 90% of the viewport on a mobile device
Lots of general design issues
While working with the design system teams guidance, I put together a new and improved product card for Staples.ca that addressed the above issues and more.
The old product card designs are presented on the left, with the new one on the right.
Process Work
With the numerous requirements provided from Staples teams the product card needed to check many boxes. There were B2B requirements as well as B2C requirements that all needed to live in harmony with one another.
As the project evolved, the number of new requirements and dependancies grew. There were numerous exploration sessions to test different elements and additions to the tile.
Eventually we were able to narrow down and consolidate design decisions to create a flexible, final product tile that demonstrated our the Staples business requirements that were asked for while also adhering to accessibility standards and design principles.
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.
What Improvements Were Made?
The tile has been enhanced in numerous ways:
Content is much more legible via increased font sizes and strategic colour choices.
It’s much easier for the user to recognize the price of a product and if said product is on sale.
Key items within the product card (Image, product description, price, and the Add To Cart button) have all been enhanced for easier recognition.
Tile content is organized well and grouped together (ex: price items all together).
Larger image for better scanning and product recognition
improved hover states.
The new and improved product tile showing items both on sale and not on sale
Secondary Thumbnail
on Hover
Thumbnails are heavily relied on when users are scanning product lists.
When thumbnails don't display enough information for users to evaluate products, these items are overlooked or discarded. The Solution is to introduce a secondary thumbnail to reveal additional product information (Feature Cutout, Cutout, or Lifestyle).
Feature Cutout Thumbnail
Cutout Thumbnail
Lifestyle Thumbnail
Anatomy of the Tile
The product tile is comprised of 11 assets that can be added or removed providing Staples.ca with flexibility when displaying product tiles. Some assets of the tile must always be shown while others do not always need to be present.
Assets can be turned on and off within the Figma component
Results
Since this project is fairly new we do not have enough data on the success of the tile currently. However, the usability enhancements for the Product Card can be quantified using Baymard's eCommerce Review Tool. While there is not a specific category for Product Cards, we were able to test individual portions of the tile itself in Baymard.
