Scope: Product Listing Page, Product Detail Page, Product Card System, Promotion Modules, Stock / Availability States, Mobile Layout, Design System Foundation

Note: Certain business metrics are limited analytics access.

1. Context

Before making a decision, they usually need to cross-check multiple layers of information simultaneously: the product version, storage capacity, color availability, current price competitiveness, installment options, trade-in programs, warranty policies, and online versus in-store availability.

Previously, product cards were presented differently across various sections. Pricing and promotions lacked a unified logic. CTAs were inconsistent. Stock status was sometimes treated as a secondary line of text, and other times it directly affected purchasability but was not handled clearly enough. For the internal team, every new campaign or landing page meant reworking similar patterns.

If the design is too minimalist, the website looks premium but lacks the necessary information for decision-making. If too many promotions are pushed at once, short-term sales might spike, but the sense of trust is compromised.

The Problem: How can an Apple retailer website maintain a premium feel without obscuring the commercial information Vietnamese users need to confidently make a purchase?

2. UX Audit

When auditing the website, I followed the user's decision-making process:

• Does a product card help me quickly understand what this product is?

• Do I know if the specific product/color/variant I want is in stock?

• What is the price?

• What are the promotions, and which one is the primary offer?

• On mobile, does the critical information remain within the primary viewing area?

Through this audit, I uncovered a crucial insight: users do not just compare Apple products using technical specs. They compare them based on perceived purchasing value:

• Is the desired product/color/capacity available?

• How much does it cost?

• What is the main promotion?

• Are there installment options?

• What is the warranty?

• Is the seller trustworthy?

This shifted how I viewed the product card. It is no longer just a small block to display a product; it is the first decision-making point. If the product card fails to answer basic questions, users are forced to dig deeper just to find information that should have been clear from the start.

3. Root Problems

Following the audit, I grouped the issues into four main categories:

1. Unclear Product Hierarchy: Product name, price, promotions, stock status, and CTA are all important, but they should not share the same visual weight. For high-value products, this slows down decision-making because users lack a clear reading order.

2. Promotion Overload: E-commerce relies on promotions. However, ShopDunk had multiple concurrent offers: discounts, installments, trade-ins, gifts, warranties, and campaign-specific conditions. If everything is emphasized equally, users cannot identify the primary offer. When everything stands out, nothing really stands out.

3. Availability Not Treated as a System: For Apple products, "in stock" is not a simple binary. A product might be available in black but out of stock in white, available in 128GB but out of stock in 256GB, or available in-store but out of stock online. If the system does not clearly reflect these states, users might click to buy only to discover they cannot—a minor UI flaw that causes a major breach of trust.

4. Fragmented Design System: The same type of content was presented differently across the site. A new campaign could spawn a new UI variant. A new product card could introduce a new CTA treatment. Over time, these minor variations accumulated as design debt, making consistency hard to maintain, engineering implementation difficult, and design QA highly subjective.

4. Design Direction

I started with the patterns that had the highest impact on purchasing behavior.

The Product Card as a Decision Unit

The product card appears on the homepage, category pages, recommendation blocks, campaign pages, and related product sections. Therefore, improving the product card naturally improves many parts of the website simultaneously.

My goal was for the product card to answer five questions in a single scan:

• What is this product?

• What does it look like?

• How much is it?

• What colors are available?

I deliberately avoided cramming every detail into the card; it should only contain enough information for users to decide whether to investigate further. Deeper details belong on the Product Detail Page.

Stratified Promotions

I stopped viewing promotions as isolated banners and instead divided them into layers:

• Primary offer: The main incentive that needs to be seen first.

• Secondary benefit: Supporting perks like installments, gifts, or trade-ins.

• Condition: Application rules, which are necessary but should not compete with the main offer.

• Trust signal: Information that builds confidence, such as authenticity, warranties, and return policies.

This stratification significantly reduced internal team debates.

Stock Status Must Impact CTAs

I treated availability as a core UX component, not just secondary text.

• If in stock, the Buy CTA must be clear.

• If out of stock, the Buy CTA should be disabled.

• If a specific variant is out of stock, only that variant should be disabled.

• If coming soon, the appropriate action is Get Notified.

• If only available in-store, the action should be Check In-Store Availability.

The key principle is that when a purchase cannot be made, the system should not abandon the user; it needs to guide them to the next logical step.

Mobile is About Reprioritization, Not Shrinking Desktop

On desktop, users have space to compare. On mobile, every viewport must be carefully curated. I prioritized mobile information as follows:

• Product Name / Image / Capacity / Colors → Stock Status → Price → Primary Offer → CTA → Secondary Info.

This allows mobile users to comprehend the product quickly before needing to scroll deeper.

5. Solutions Across Key Touchpoints

Product Listing Page (PLP)

At the PLP level, product cards were standardized to follow a natural scanning order: image, product name, key specs (capacity or color), current price, original price or discount, primary offer, stock status, trust indicator, and CTA.

The goal was to prevent the card from becoming a "mini promotional flyer." Cramming too much information into the card gives the illusion of more content, but actually degrades the user's ability to compare items. A listing page should excel at one thing: helping users scan multiple products rapidly and decide which ones deserve a click.

Product Detail Page (PDP)

The PDP was structured around the decision-making flow. The top section prioritizes information directly impacting the purchase decision: product images, name, variants, price, primary offer, stock status, installments, and CTA. In-depth research materials—such as technical specifications, descriptions, policies, reviews, and related products—were pushed further down.

For variant selection, availability is displayed precisely at the interaction point. If a color or capacity is out of stock, users see it immediately. They do not need to proceed several steps just to discover they cannot complete the purchase.

Promotion Module

Promotion modules were redesigned to prevent campaigns from spawning unique layouts. The primary offer is the most prominent. Secondary benefits act as supporting information. Conditions are present but visually subdued so as not to compete with the main offer. This ensures marketing successfully delivers its sales message without destroying the website's visual hierarchy after every campaign.

Stock State System

The principle: stock status must honestly reflect purchasing capability. CTAs should not create false expectations. However, being out of stock should not be a dead end either.

6. Design System

I started by asking: Which UI decisions is the team repeating far too often? From there, the system was divided into three layers:

• Foundation: Typography, spacing, grids, breakpoints, color usage, button hierarchy, form patterns, and content hierarchy. This layer maintains the website's visual rhythm.

• Components: Product cards, price blocks, promotion tags, stock badges, CTA groups, variant selectors, filters, specification tables, campaign banners, empty states, and notification states. Each component includes UI elements as well as rules: when to use it, mandatory content, available states, and mobile responsive behavior.

• Templates: Product listing pages, product detail pages, campaign landing pages, homepage sections, and content pages. Templates allow the team to build new pages without redesigning the information architecture from scratch.

Crucially, the Design System could not be too rigid. Retail websites constantly feature new products, campaigns, inventory fluctuations, and differing marketing needs. The system had to be strict enough to maintain consistency, yet flexible enough to handle real-world scenarios.

7. Collaboration & Trade-offs

• Marketing wanted prominent promotions to boost sales.

• Design wanted to maintain a premium feel and reduce visual noise.

• Engineering needed clarity and ease of implementation.

• Product wanted comprehensive information display.

• Operations needed stock status to accurately reflect inventory.

The most obvious trade-off involved promotions. Giving equal visual weight to discounts, installments, trade-ins, gifts, and warranties made the card unscannable. However, cutting too much would weaken the campaign's sales power.

I resolved this by redefining the role of information. Primary offers take precedence. Secondary benefits play a supporting role. Detailed conditions are assigned a lower tier. Trust signals appear precisely when needed to boost confidence.

For engineering: an overly flexible Design System bloats implementation, while too few variants leave marketing restricted. Therefore, I grouped them into structured variants: compact / expanded, with-condition / without-condition, in-stock / out-of-stock, and available variant / unavailable variant. During handoff, I documented component logic, state mapping, responsive behavior, and usage rules so engineering understood the reasoning behind the UI.

8. Measurement & Impact

Due to limited analytics access, conversion rate or revenue uplifts cannot be presented. Instead, I utilized proxy metrics within the scope of design operations.

These metrics are internal estimates at the design operation level, based on UI inventory, component audits, design review tracking, and pre/post QA comparisons. While they do not replace business metrics, they help prove that the Design System successfully reduced repetitive UI decisions, improved consistency, and clarified handoffs.