Redesigning Customer Microsite for Higher Merchant Conversion
For independent merchants and multi-outlet retail brands, their mobile customer microsite is the digital front door for direct-to-consumer orders. By auditing drop-off friction points, clarifying variant selection mechanics, and streamlining product detail pages, this redesign directly boosted customer order session conversions by approximately 10%.
The Problem & Friction Analysis
Navigating messy variant trees and high cart abandonment
Customers ordering through merchant mobile web links frequently abandoned purchases during the product configuration stage. Complex product options (sizes, toppings, customizations, temperature) were displayed as confusing nested radio groups, resulting in accidental orders or drop-offs.
Merchants also struggled with duplicate catalog entries because their legacy system couldn't handle flexible modifiers without cloning entire product listings.
UX Architecture & Modifier System
Unifying modifiers to eliminate duplicate products
I architected a structured modifier design pattern that separated mandatory choices (e.g. Size: Regular/Large) from optional add-ons (e.g. Extra Espresso Shot).
The updated bottom-sheet product detail modal features sticky price tallying, visual quantity steppers, and clear error messaging if required choices are missing.
- Sticky Bottom Action Bar: Displays real-time calculated total price based on active modifiers.
- Visual Pill Chips: Instant visual feedback for single-select and multi-select choices.
- Optimized Thumbnail Previews: Compressed high-fidelity imagery with fast progressive loading on 4G networks.
Design System & Responsive Components
Ensuring consistency across diverse merchant brand themes
A modular token-based component library was created in Figma and implemented in production. Merchants can easily customize primary accent colors while ensuring typography scales, contrast ratios, and touch-target sizes (minimum 44x44px) remain strictly accessible.
Measurable Impact
Post-launch analytics revealed a ~10% increase in completed order sessions and a notable reduction in customer support inquiries regarding incorrect order options.
Reflections & Learnings
- Mobile ergonomics matter: Placing key decision-making actions in the thumb-friendly lower 40% of mobile screens drastically reduced interaction friction.
- Design system scalability: Defining modifier components systematically saved months of redundant engineering work across merchant dashboard tools.
Future Opportunities
- Introduce 1-click reordering for returning authenticated customers.
- Implement real-time inventory threshold badges on low-stock variants.