E-Commerce UI redesign & animation

Animation and product card revision

Currently, the website features a unique product card for each product and color, leading to (currently) 8 pages of products across the men's catalogue.

The card was designed to show the available colors on a single card, rather than multiple, separate cards resulting in cutting the number of products displayed from 200 cards across 8 pages, to 67 cards across 3 (...without any filters!) for a more streamlined browsing experience.

The animation was designed to allow the product thumbnails to spring in-and-out from underneath the picture on hover.

Product card redesign details

Keeping the card's dimensions, typography, & palette the same, the following adjustments were made:

• I went with left aligned text for readability purposes.

• Hierarchy and white space was adjusted on product description & user ratings

• After revising all font sizing to 16 pt, the product price was bumped up to 20 which allows users to look at the second most important piece of information - price (as well as being able to communicate how much $$$ users would save with sale pricing). This also resulted in improving readability on the price itself as it no longer blends together with the rating stars.

• Thumbnails of available colorways were added to streamline the browsing experience and cut down on the number of product cards necessary.

• Finally, because the pictures do all of the talking, there was no longer a need to state the item's color on the product title, saving even more space.