Commerce mini program
08 / 08Xinyan Medical Beauty Mini Program
Designing an 80+ screen commerce flow with a consistent visual system
At a glance
ContextAn external partnership explored a medical beauty commerce service in a WeChat Mini Program.
DeliveryA complete flow covering home, catalog, product detail, orders, payment result, and account.
Evidence boundaryThe archive documents the design system and screen delivery. It does not include launch or business results.
Visual System
Professional enough for care, active enough for commerce
The interface had to hold two different expectations: medical services needed clarity, while the storefront still needed energy.
I used a compact type scale, a bright primary palette, and consistent spacing rules to keep the large screen set coherent.
Core Experience
Keep product, order, and account information easy to scan
The home page separated campaigns, category entry points, and popular products. Square product imagery carried into list and detail views so the content did not change shape between screens.
Product details exposed service information, doctor and environment content. The account area used card groups and stronger icons for primary actions, while spacing replaced unnecessary divider lines.
Delivery & Evidence Boundary
A complete design delivery, not a claimed business result
The project produced more than 80 screens across browsing, purchase, payment, orders, and account management.
The archived material does not confirm launch status, conversion, retention, or user feedback. I present this as evidence of end-to-end UI delivery and system consistency, not product impact.
Next Project