[ MENU ]

[ MENU ]

PRODUCT CARRS
OPTIMIZATION

[ LEAD PROJECT ]

[ UX/UI DESIGN ]

[ 2021 ]

Background

A product card is a visual container that holds a single or related group of product information. Initially, MWG Retailer Group, with two leading websites, Thegioididong.com and Dienmayxanh.com, had no unified pattern or logic in the product cards used across the system.

By 2020, the websites faced challenges with information architecture - the product cards displayed inconsistencies between domains and accumulated over the years, leading to design and tech debt. It badly affected our team's execution speed and morale. More importantly, it likely caused user confusion and potentially impacted revenue.

This project aims to establish a systemic design approach, including clear UX guidelines for the product team and developers. This will ensure product cards create a consistent and meaningful user experience.

Process

Audit current situation

Define what is a good product card

Ideate & Iterate

Designs & Development

Audit

Lack of consistency
  • Some components were not available on some platforms

  • Component features were not aligned across platforms

➔ No source of truth: There was no clarity on where to look when making decisions

The UI distract from scanning information

There are much colors: red, blue, orange, yellow; especially the strong red repeatedly on labels led the users hard to scan the essential information such as room square, product image, price

Evaluate about definite of “Giảm sốc” (shocked discount). Every product was labeled as giảm sốc in result of no product is discount, it giảm sức nặng of sale up

Too much information

Re-think about the "zoom in" concept. MWG successfully applied this concept for a product line that required the user to compare many specifics, especially if the products looked similar. Months by month, it's getting abused.

Good “Zoom in”

When buying laptop, users need to compare many parameter among lots of laptops looked similar. For instance, the product belong to a line but difference about technical specifications. Without this side by side comparison led user feel inconvenient.

When buying laptop, users need to compare many parameter among lots of laptops looked similar. For instance, the product belong to a line but difference about technical specifications. Without this side by side comparison led user feel inconvenient.

Does it need “zoom in” concept?

Regard to watch category, does users initially think about these information? Without side by side comparison, do they feel inconvenient?

Regard to watch category, does users initially think about these information? Without side by side comparison, do they feel inconvenient?

Discovery

Normally, usage data plays a big role in identifying problems. For this case study, I relied on other discovery methods, including desk research, consumer feedbacks, competitor research.

Here are few key highlights:

  1. Product Details = Good

The difference between these two screenshots is obvious: the TV photos are no help in deciding between the products. A guy in a canoe vs. a football player? What, because I watch more football than watersports, I'll buy the TV showing a football player?

This is a good example of why copying the biggest sites' designs is not always good. Because Amazon hawks a monstrously wide product range, they use a standardized gallery layout that sort of works for many different category pages, without being optimized for any individual category.

In contrast, Pottery Barn is optimized for its narrower range of products, so its category pages have more detailed photos.

Source: NNGroup

Thumbnails of bookcases were studied intensely, whereas thumbnails of flat-panel TVs were mainly ignored. In fact, on the full Amazon page (only the top part is shown here), only 18% of the viewing time was spent on the photos, while 82%was spent on the text. On average, for each product, the thumbnail got 0.9 fixations, whereas the description got 4.4 fixations.

Thumbnails of bookcases were studied intensely, whereas thumbnails of flat-panel TVs were mainly ignored. In fact, on the full Amazon page (only the top part is shown here), only 18% of the viewing time was spent on the photos, while 82%was spent on the text. On average, for each product, the thumbnail got 0.9 fixations, whereas the description got 4.4 fixations.

  1. Information-Carrying Image = Good

Through thousands in NNGroup studies, users indeed pay attention to information-carrying images that show content that's relevant to the task at hand. And users ignore purely decorative images that don't add real content to the page. So much fluff — of which there's too much already on the web.

  1. How an effective product card looks like?

Helpful differentiating information for each product listing should include, at a minimum:

  • Concise names that contain important and meaningful product characteristics

  • Photos large enough to identify a known item and show differences between items

  • Indication of other available colors, styles, or options

  • Price (while this latest research from NNGroup focused on B2C e-commerce sites, our earlier studies show that lack of prices is a huge usability problem on B2B sites)

Users also appreciate the extra information that goes above and beyond basic requirements, allowing them to gain further knowledge about an item before committing to a new page load.

Additional product information that can be helpful to users includes:

  • Customer ratings

  • Icons or similar indications to mark items as popular, new, on sale, and so on

  • Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)

  • Link to a quick-view tool to view a brief product description and other details without loading a new page

Iterate & Polish

In the context that lots of products look similar, our goal is to help users scan product information: Quick - Easy (Readable) - Effective (essential information enough to interact).

Highlighted Optimization
  • Thumbnails: Enhance visual clarity by including key product features directly on the thumbnail. This will provide users with a quick overview of the product without requiring additional clicks.

  • Product Names: Simplify product names for better display within limited spaces. Establish a naming convention that highlights essential features. For example, for washing machines, use a format like "[Brand] [Key Feature 1] [Key Feature 2] [Shortened Model Name]" instead of original name "Máy giặt lồng ngang AQD-AH1000G.PS"

  • Tooltips: Provide detailed information through tooltips or zoom-in features, which should only appear when users narrow down their search criteria and seek more in-depth details.

  • Comparison Functionality: Further emphasize the importance of tooltips and zoom-in features by highlighting their value within the product comparison function. This will enable users to make informed decisions based on detailed product information.

Product card anatomy

Pink: required — Blue: Optional, depending on the context

Impact

Future-proof parity

All product cards across 100+ pages in 2+ platform are now unified and future-proof for feature development

Efficient dev process

Efficient feature dev process for product teams and faster time to market.

And my happiest moment in this project is a developer said he appreciated my effort, it has helped a lot in their work, saving time and enhancing productivity ❤️

Coherent user experience

Users now have a coherent product experience across pages and platforms

HA VAN DO

MADE WITH 🍚

MADE WITH 🍚