Shoppers could start buying with questions about the product, the offer or the delivery still unanswered.
Shopdunk · Decision clarity is the premium experience. An Apple-focused retail website, from discovery to purchase.
- Role
- Sr. Product Design
- Timeline
- 11 months, 2022
- Team
- 4 designers
- Platform
- Website, responsive and mobile web
- Scope
- I owned the UX direction for Home, Category/PLP and Checkout, and turned recurring patterns into a shared design system
- Method
- UX audit, JTBD, competitive benchmark, user-flow analysis, IA, visual hierarchy review
A premium storefront still has to help people buy
Shopdunk did not need to look more like a marketplace. It needed a clearer route from product interest to a confident purchase.
A high-value Apple purchase in Vietnam rarely rests on the product alone. The journey had to carry all of the following without turning into a dense marketplace.
- ChooseModel comparison, variants, and availability.
- PayPrice, promotions, installments and trade-in.
- ReceiveDelivery and warranty.
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 prioritisation harder.
My position: cut visual noise, not decision information. Show each fact when its decision becomes active.
Compare the market of the time, not today's
The comparison is limited to interfaces visible during or near the project, to avoid hindsight bias.
Shopdunk is the baseline. Apple, CellphoneS and TGDD stand for three different approaches to commerce hierarchy, and each one is a source of something to borrow and something to leave.
| Reference | Strength | Trade-off | What I took |
|---|---|---|---|
| Shopdunk baseline | Product-led visual language and restrained presentation. | Gap: local commerce decisions still needed a clearer hierarchy. | A premium foundation. This is the project, not a competitor. |
| Apple | A dedicated Store entry and clear category paths. | Price, promotion and financing are less dominant than Vietnamese shoppers may expect. | The structure, not the information scarcity. |
| CellphoneS, iPhone 13 era | Search, categories, offers and pricing are immediately findable. | Many competing signals increase visual load. | The findability, not the density. |
| TGDD | Quick view, visible price and promotion support fast scanning. | Constant promotional pressure can weaken a premium perception. | The clarity, not urgency everywhere. |
The position: Apple-like restraint, Vietnamese commerce information, and a staged decision hierarchy.
What this benchmark is
A period-matched visual reference. It is not behavioural or conversion evidence, and it cannot say why Shopdunk shoppers behaved a certain way or which pattern performed best.
Checkout friction began before checkout
Rather than treat it as an isolated form problem, I traced where unresolved decisions entered the journey.
Why did checkout carry avoidable effort?
Shoppers could enter it with product, offer or fulfilment questions still unresolved.
Why were those questions unresolved?
Home and listing surfaces did not always give model, price and promotion a stable hierarchy.
Why was the hierarchy inconsistent?
Pages and campaigns solved similar commerce information locally, producing competing patterns.
Why did local solutions keep appearing?
Components standardised appearance more clearly than behaviour, state and decision priority.
Why was behaviour 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, let the same uncertainty reappear across pages.
Product leads, price validates, promotion supports, checkout completes
Each surface got one primary job, so complexity arrived in the order a shopper could use it.
- HomeTurn the home page into a compass, not a campaign wallCampaigns, categories and promotions could compete for the same attention. I separated product-led storytelling from commerce-led entry points and gave each a defined hierarchy.Trade-off Less promotional dominance may reduce campaign exposure, but gives a clearer route into the catalogue.
- Category/PLPMake comparison possible before opening every productImage, name, price, promotion and availability competed inside cards. I standardised card anatomy, meaningful grouping and filters around the information needed to narrow a choice. Cards follow a stable order: image, product, price, offer. Filters narrow within a category instead of replacing its structure.Trade-off More comparison information increases density, so a fixed hierarchy and quiet secondary treatments protect focus.
- CheckoutKeep checkout transactional Reconstructed explanationWith comparison and offer discovery handled upstream, checkout is left to order review, required information, delivery or pickup, payment and confirmation. It keeps the order summary visible and preserves what the shopper typed when an error happens.Moved upstream Category and model comparison, promotion discovery, and the first reading of price and offer.
Resolve comparison before commitment. Keep checkout focused on completing, not rediscovering, the purchase.
For checkout, what to watch is behaviour rather than visual approval: completion against a consistent start event, field errors, step exits, payment failures, completion time and recovery. Cancellation, duplicate orders, support contact and order value are guardrails. These are measures to look at, not results.
Standardise decisions, not just pixels
The system carried the decision hierarchy across Home, Category and Checkout on responsive web and mobile web.
- FoundationsType, spacing, colour, grid, radius and emphasis.
- ComponentsProduct cards, filters, inputs, actions, summaries and feedback.
- StatesPromotion, availability, validation, loading, error and recovery.
- GovernanceShared naming, review rules, design QA and alignment with front-end behaviour.
| Component state | Behaviour rule |
|---|---|
| Product card, promotion | Price leads. The benefit and its condition follow a stable secondary hierarchy. |
| Product card, unavailable | Keep the product discoverable, remove the false purchase action and offer a recovery route. |
| Filter, no result | Preserve the selected criteria and make recovery explicit instead of resetting silently. |
| Checkout, validation error | Keep entered information, identify the field and explain the next valid action. |
| New campaign request | Create a new variant only when behaviour changes, not when content alone changes. |
Good UX does not remove complexity. It decides where complexity belongs.
What this record can and cannot support
Each source is labelled by what it supports.
| Source | Supports | Does not prove | Status |
|---|---|---|---|
| Final UI artifacts | The 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 record | Ownership and delivery scope across Home, Category/PLP, Checkout and the design system. | Causality, usability performance or business impact. | Project record |
| Period-matched benchmark | Contemporary patterns for product orientation, commerce coverage and decision shortcuts. | Why Shopdunk users behaved a certain way, or which pattern performed best. | Context only |
| Analytics and test archive | The evidence needed to verify behavioural and business outcomes. | No numerical impact can be defended without the source events, metric definitions and study record. | Not available |
- Original artifacts show what was designed.
- The checkout rationale is reconstructed explanation, not an archived 2022 file.
- Only source analytics could support a measured impact claim.
What this case does not claim
No conversion uplift, no usability result and no business impact. The defensible result is structural: discovery, comparison and transaction gained distinct responsibilities, and shared components carried behaviour across responsive surfaces. The campaign visual from 2023 is context, not part of the 2022 scope.
Seek Discomfort!
Ready to collaborate? Tell me what you are building.
vuhm.work@gmail.com- Phone
- (+84) 92 7474 800
- Open
- Monday to Friday, 9:00 to 18:00