Scenario: E-commerce Design
Split the work into “structure templates + content swaps”: lock hierarchy first, then polish style and atmosphere.
Deliverables
A typical e-commerce set includes:
- Hero image: 1 (or multiple carousel images)
- Detail page: 1 long image (selling points, specs, scenes, guarantees, etc.)
- Campaign assets: banners, coupon visuals, corner badges, atmosphere graphics (per channel sizes)
Hero image structure
The goal is “understood in 3 seconds”. Organize information by priority:
- Product first: clearest angle with enough whitespace
- One-line selling point: be specific (e.g. “320g” beats “lightweight”)
- Offer: final price / gifts / limited-time promo via tags or badges
- Trust: brand proof, certifications, free shipping, after-sales, etc.
Detail page structure
Follow the buyer decision path:
- Top: restate positioning and 1–2 core selling points
- Deep dive: one selling point per section, with scenes and measurable proof
- Specs & comparison: spec table, model comparisons, who it’s for
- Guarantees: shipping, returns, warranty, after-sales promises
- Close: restate the reason to buy and a clear CTA
SKU & campaign variants
- Extract variables: price, gifts, specs, color, promo badges
- Keep structure fixed: consistent hierarchy lowers mistakes
- Standardize components: price cards, tags, buttons, spec tables
- Batch-generate: create SKU/campaign versions from one template
Pre-launch checklist
- Compliance: price, gifts, promo dates, restricted words are correct
- Clarity: product and key text are readable on mobile
- Contrast: avoid light-on-light or gradient-over-text readability issues
- Safe margins: avoid edge clipping by platforms