Miao Club Fashion E-Commerce App
B2B client engagement, delivered as a B2C consumer product
Project Overview
Miao Club is a fashion e-commerce app built to take users from browsing to checkout in a clean, editorial-style flow. The home experience blends curated collections, shoppable lifestyle imagery, and clear category navigation. It's designed to feel more like a fashion magazine than a typical storefront, while keeping core shopping actions fast and easy to reach.
My Role
Sole Product Designer. I worked independently and acted as the bridge between the B2B client and the B2C end-user experience, staying in direct contact with the client throughout.
- Owned the design process end-to-end, based on competitive and benchmark analysis
- Collaborated with the engineering team during development
- Took part in testing and QA alongside the dev team
UX Challenges (from competitive research)
- Checkout is the highest-risk drop-off point: many fashion e-commerce apps spread shipping and payment steps across too many screens without showing progress.
- Hidden costs erode trust: totals, discounts, and delivery fees often aren't visible until the final step, which leads to last-minute cart abandonment.
- Returning users have to re-enter their information: saved addresses and cards aren't shown clearly, which adds friction to repeat purchases.
1. Consolidated cart with transparent pricing
- Problem: Users often abandon carts when costs (shipping, discounts) aren't clear until late in the flow.
- Decision: The cart screen surfaces item total, discount, and grand total upfront, with a live promo code field and a "Similar Products" cross-sell to keep users engaged without leaving the flow.
- Rationale: Full price transparency early reduces surprise-cost abandonment; contextual cross-sell increases basket value without disrupting checkout intent.
2. Step-based checkout with saved information
- Problem: Long, single-page checkouts with no visible progress cause drop-off, especially for users entering payment info for the first time.
- Decision: Checkout is split into three clear steps (Address → Payment → Review) with a persistent progress indicator; saved addresses and cards are shown first, with an inline "Add New Card" form for new entries.
- Rationale: Breaking checkout into steps reduces perceived effort and gives users a sense of progress, while prioritizing saved data speeds up repeat purchases without blocking first-time flows.
3. Editable order review before confirmation
- Problem: Users hesitate to complete a purchase when they can't easily verify or change details before committing.
- Decision: The final review screen shows items, delivery address, and payment method with inline "Edit" actions, so there's no need to go back through the flow.
- Rationale: A clear last checkpoint with easy edits builds confidence and lowers the chance of abandoned or incorrect orders.
4. Immediate, specific order confirmation
- Problem: Post-purchase uncertainty ("did it go through? can I track it?") is a common source of anxiety and unnecessary support requests.
- Decision: A dedicated success screen confirms the order with a clear visual state, order ID, shipping method, and a direct "Track your order" CTA.
- Rationale: Immediate, specific confirmation reduces anxiety right after purchase and reinforces trust in the transaction.
