Product Card Redesign

Year.

2023

Role.

Product Designer

Tasks.

• Research
• UI design
• Documentation

Overview

A crucial component of an eCommerce store is the product card, which appears on listing pages and product shelves throughout the customer's journey. Since most of Beerwulf's returning customers shop from listing pages, this component has a significant impact on their shopping experience.

Challenge

If you ask your stakeholders, they will request as much information appears on this component as possible. Therefore, the challenge in redesigning the product card is to ensure the most important information is featured and to maintain information hierarchy. With research and best practices to support my decision making, I assured stakeholders the card should only contain the most relevant details to guide decision making process. The product detail page can include further details about the product and any nuances such as: best seller awards, stock status and others.

“

Minimize Cognitive Load to Maximise Usability

The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks.

The Outcome

I redesigned the card removing any unnecessary elements to reduce cognitive load. Additionally, I applied our new Design System fundamentals to improve spacing and layout whilst also refreshing the UI styling to evolve from the dated look to a more modern standard of design.

With the improved design, product cards now fit within the mobile viewport, which enhanced the browsing experience.

Product card changes:

1. Updated label UI – Enhances clarity and visual hierarchy.
2. Changed heading font – Improves readability for a better browsing experience.
3. New UI to highlight product features – Makes key details more noticeable at a glance.
4. Font size and style update – Strengthens price hierarchy for easier comparison.
5. Removed icons – Reduces cognitive load and streamlines the design.