Core proposition

Decision clarity is the premium experience.

ShopDunk did not need to look more like a marketplace. It needed a clearer route from product interest to a confident purchase.

My contribution

I owned the UX direction for Home, Category/PLP and Checkout, and translated recurring interaction patterns into a shared design system. My work covered audit, information architecture, interaction design, prototyping and design QA with product, engineering, marketing and operations.

ScopeHome · Category/PLP · Checkout · Design System
PlatformsResponsive web · Mobile web

The tension

A premium storefront still has to help people buy.

The purchase journey had to support model comparison, price, promotions, installments, trade-in, availability, delivery and warranty without turning the experience into a dense marketplace.

Brand-first view

Reduce commercial detail to protect focus and perceived quality. The risk: uncertainty is pushed later into the funnel.

Commerce-first view

Expose every offer and purchase option immediately. The risk: competing messages make comparison and prioritization harder.

My position: reduce visual noise, not decision information. The right information should appear when its decision becomes active.

Evidence boundary

What this project can—and cannot—prove.

The portfolio record combines original deliverables with reconstructed explanation. Each source is labeled by what it can support.

InputWhat it supportsWhat it does not proveStatus
2021–2022 final UI artifactsThe delivered Home and Category/PLP hierarchy, responsive direction and product-led visual language.Why users behaved a certain way or whether the interface caused a business uplift.Original artifact
Project scope recordOwnership and delivery scope across Home, Category/PLP, Checkout and Design System.Causality, usability performance or business impact.Project record
Period-matched benchmarkContemporary patterns for product orientation, commerce coverage and decision shortcuts.Why ShopDunk users behaved a certain way or which pattern performed best.Context only
Analytics & test archiveThe evidence required to verify behavioral and business outcomes.No numerical impact can be defended without the source events, metric definition and study record.Not available
Working rule

Original artifacts show what was designed. Reconstructed flows explain the rationale. Only source analytics can support a measured impact claim.

Period-matched benchmark / 2021–2022

Compare the same moment—not today’s market.

To avoid hindsight bias, the comparison is limited to interfaces visible during or near the project timeline. ShopDunk is the baseline; Apple, CellphoneS and TGDD represent three different approaches to commerce hierarchy.

01 ShopDunk baseline · 02 Apple Aug 2021 · 03 CellphoneS iPhone 13 era · 04 TGDD May 2021Period-matched visual reference; not behavioral or conversion evidence.
Sources: supplied ShopDunk artifact · Apple Store, Aug 2021 · CellphoneS period image · TGDD, May 2021
01 / SHOPDUNK BASELINE

Premium foundation

Strength: product-led visual language and restrained presentation. Gap: local commerce decisions still needed a clearer hierarchy. This is the project baseline—not a competitor.

02 / APPLE

Product orientation

Strength: a dedicated Store entry and clear category paths. Trade-off: price, promotion and financing are less dominant than Vietnamese shoppers may expect. Borrow the structure—not the information scarcity.

03 / CELLPHONES

Commerce coverage

Strength: search, categories, offers and pricing are immediately findable. Trade-off: many competing signals increase visual load. Borrow findability—not density.

04 / TGDD

Decision shortcuts

Strength: quick view, visible price and promotion support fast scanning. Trade-off: constant promotional pressure can weaken a premium perception. Borrow clarity—not urgency everywhere.

ShopDunk position

Apple-like restraint + Vietnamese commerce information + staged decision hierarchy. Product leads, price validates, promotion supports and checkout completes.

Root-cause diagnosis

Checkout friction began before checkout.

Instead of treating abandonment as an isolated form problem, I traced where unresolved decisions entered the journey.

WHY 01

Why did checkout carry avoidable effort?

Shoppers could enter it with product, offer or fulfillment questions still unresolved.

WHY 02

Why were those questions unresolved?

Home and listing surfaces did not always give model, price and promotion a stable hierarchy.

WHY 03

Why was the hierarchy inconsistent?

Pages and campaigns solved similar commerce information locally, producing competing patterns.

WHY 04

Why did local solutions keep appearing?

Components standardized appearance more clearly than behavior, state and decision priority.

WHY 05

Why was behavior not shared?

The experience lacked one cross-funnel model defining what each surface should help a shopper decide.

Root cause

A missing cross-funnel decision hierarchy—not simply too much content—allowed the same uncertainty to reappear across pages.

Give each surface one primary job, then let the system carry the rules across them.

01

Orient

Where should I start?

Home
02

Narrow

Which products and offers are relevant?

Category · PLP
03

Complete

Can I finish quickly and recover from errors?

Checkout
04

Scale

How should the same behavior repeat?

Design System
Design principle

Resolve comparison before commitment. Keep checkout focused on completing—not rediscovering—the purchase.

User flow & scope boundary

Show the whole journey. Claim only the part I owned.

Shoppers entered discovery with two different intents: search for a known item or explore a category. Both routes converge before the transaction. Home, Category/PLP and Checkout were my scope; Search, PDP and Cart remain visible as product dependencies.

Reconstructed from project scope and final interface behavior
01 / OWNED · ORIENT

Home

Recognize the product family or begin with a specific need.

02 / FIND

Two entry intents

Known itemSearchExploringCategory / PLP · Owned
03 / DEPENDENCY

PDP

Confirm model, color and storage, then add to cart.

04 / DEPENDENCY

Cart

Review item, quantity and price before proceeding.

05 / OWNED · COMPLETE

Checkout

Customer details → fulfillment → payment.

06 / SHARED OUTCOME

Confirmation

Receive an order reference and fulfillment status.

Owned scopeProduct dependencyShared outcome
Availability branchSelected item becomes unavailablePreserve filters and return to comparable alternatives instead of restarting discovery.
Payment branchPayment is declined or interruptedPreserve customer and order information, then allow retry or another payment method.

One card problem. Three possible priorities.

This reconstructed wireframe trail makes the design choice inspectable. It explains the alternatives behind the final PLP hierarchy; it is not presented as an archived 2022 low-fi file.

A · Campaign-ledRejected

Maximizes campaign visibility, but makes the offer compete with the product being compared.

B · Minimal product-ledRejected

Protects visual restraint, but withholds price and offer information needed to narrow a choice.

C · Comparison-ledSelected direction

Keeps product, payable price and relevant offer in a stable scan order while secondary actions remain quiet.

Decision 01 / Discovery

Turn the home page into a compass—not a campaign wall.

Product families and major shopping paths should lead. Promotion should create urgency without obscuring where to go next.

Problem

Campaigns, categories and promotions could compete for the same attention.

My decision

Separate product-led storytelling from commerce-led entry points and give each a defined hierarchy.

Trade-off

Less promotional dominance may reduce campaign exposure, but creates a clearer route into the catalogue.

Design evidenceCampaign storytelling opens the experience; product families immediately convert attention into a shopping path.
01

One dominant campaign message instead of competing promotional modules.

02

Persistent product navigation keeps purchase intent within reach.

03

Product families create the next decision directly below the hero.

Decision 02 / Category & PLP

Make comparison possible before opening every product.

Category structure and product cards became a shared comparison surface—not a collection of campaign tiles.

Problem

Product image, name, price, promotion and availability could compete inside cards, increasing scan effort.

My decision

Standardize card anatomy, meaningful grouping and filters around the information needed to narrow a choice.

Trade-off

More comparison information increases density, so a fixed hierarchy and secondary treatments protect focus.

Design evidenceThe left-hand mobile surface keeps category, promotion and product entry points within one scan path.
01

Product cards follow a stable order: image → product → price → offer.

02

Filters narrow options within a clear category instead of replacing the category structure.

03

Mobile keeps comparison-critical information visible while deferring secondary detail.

Completion

The primary success criterion: help shoppers finish the intended purchase correctly, with clear recovery when something fails.

Decision 03 / Checkout

Keep checkout transactional.

Once product choice and offer discovery had been handled upstream, checkout could focus on order review, required information, fulfillment, payment and confirmation.

01 / INPUT

Audit signals

Review unclear required actions, repeated decisions, validation failures and recovery friction.

02 / HYPOTHESIS

Reduce transaction effort

If order context and action order remain clear, shoppers should complete with fewer corrections.

03 / RESPONSE

Predictable flow

Group required information, keep the order summary visible and preserve input when errors occur.

04 / SIGNALS

Behavior over preference

Track completion, field errors, payment failure, time to complete and recovery—not visual approval alone.

Moved upstream

Decisions checkout should not reopen

  • Category and model comparison
  • Promotion discovery
  • Initial price and offer interpretation
Checkout retains

The minimum transaction sequence

  • Review the selected order
  • Provide customer information
  • Choose delivery or pickup
  • Select payment and handle failure
  • Confirm the final purchase
Primary metricCheckout completion rate, defined against a consistent checkout-start event
Diagnostic signalsField errors, step exits, payment failures, completion time and recovery success
GuardrailsCancellation, duplicate order, support contact and order-value changes

Prototype & validation

Test the moments most likely to break confidence.

The prototype makes the checkout state model tangible across review, validation, payment recovery and confirmation.

Order review

Confirm before paying

All required information is ready for review.
Selected product
ProductiPhone 13 · 128GB
ColorBlue
Quantity1
Next decision
DeliveryHome delivery
PaymentNot selected
Continue to payment

Evidence status: interactive portfolio reconstruction based on the project’s checkout logic. It is not represented as the original 2022 prototype or as proof that usability sessions were completed.

TASK 01

Find a product path

Can a shopper move from Home to the relevant category without campaign distraction?

TASK 02

Narrow the choice

Can they compare product, price and offer from the listing surface?

TASK 03

Recover from failure

Do unavailable stock, validation and payment errors preserve context?

TASK 04

Confirm completion

Does the customer understand order status and the next operational step?

System thinking

Standardize decisions—not just pixels.

The design system connected visual consistency with component states, commerce rules and design QA across responsive web and mobile.

01 / Foundations

One visual grammar

Type, spacing, color, grid, radius and emphasis.

02 / Components

Reusable anatomy

Product cards, filters, inputs, actions, summaries and feedback.

03 / States

Behavior included

Promotion, availability, validation, loading, error and recovery.

04 / Governance

Change with control

Shared naming, review rules, design QA and alignment with front-end behavior.

Component stateBehavior rule
Product card · promotionPrice leads; the benefit and its condition follow a stable secondary hierarchy.
Product card · unavailableKeep the product discoverable, remove the false purchase action and offer a recovery route.
Filter · no resultPreserve the selected criteria and make recovery explicit instead of resetting silently.
Checkout · validation errorKeep entered information, identify the field and explain the next valid action.
New campaign requestCreate a new variant only when behavior changes—not when content alone changes.

Result

What changed across the purchase journey.

The defensible result is structural: discovery, comparison and transaction gained distinct responsibilities, while shared components carried behavior across responsive surfaces.

SurfaceEarlier conditionDelivered directionEvidence
HomeCampaigns and product entry points could compete for attention.A product-led hierarchy connects one campaign story to clear category paths.Final UI artifact
Category / PLPCard information could shift priority across product and campaign contexts.A shared scan order aligns product, price, offer, filtering and availability behavior.Final UI artifact
CheckoutProduct questions and transaction steps could compete near commitment.A transaction-focused sequence preserves context through validation and payment recovery.Logic reconstruction
Design SystemPage-level solutions made the same commerce behavior easier to recreate inconsistently.Foundations, components, states and governance make recurring decisions reusable.Documented rules
Delivered value

A clearer operating model for commerce UX

Teams could design Home, Category/PLP and Checkout against one decision hierarchy instead of solving each page in isolation.

Evidence boundary

Impact remains qualitative

Source analytics are not available, so this portfolio claims delivered direction and system behavior—not a conversion uplift.

Evidence map

The complete design argument—and the evidence behind each step.

01

Problem

Decision uncertainty accumulated across the funnel.

Supported
02

User flow

The full purchase path shows owned surfaces and dependencies.

Reconstructed
03

Wireframe

Three PLP priorities expose the trade-off behind the chosen hierarchy.

Reconstructed
04

Decision

Move comparison upstream and progressively disclose commerce detail.

Supported
05

UI

Home and Category/PLP mockups show the delivered visual direction.

Original artifact
06

Prototype

Checkout states demonstrate validation, recovery and confirmation logic.

Reconstructed
07

Result

The delivered direction is documented across the owned surfaces.

Project artifact

Reflection

Good UX does not remove complexity. It decides where complexity belongs.
01

Conversion begins before checkout

Unresolved product and price questions enter the transaction as friction.

02

Premium is behavioral

Predictability and confidence matter as much as whitespace and photography.

03

Systems make change durable

Shared behavior rules reduce the chance that the same friction returns elsewhere.