Context

Tigroc is a health and wellness brand focused on the benefits of Tiger Milk Mushroom, a traditional medicinal ingredient known for boosting respiratory and immune health. As awareness of natural remedies grows post-pandemic, TIGROC needed a premium online store to educate customers and offer its health supplement in various package deals.

To support this, I designed and developed a Shopify-powered website that delivers a clear product showcase, educational content, and an easy-to-navigate layout, the site effectively communicates Tigroc’s value proposition while providing a seamless user experience across all devices. The design features earthy tones, organic shapes, and high-quality imagery to convey trust and wellness.

Goal

• Establish credibility for 虎乳芝 in the digital space
• Educate customers about its health benefits, history, and scientific backing
• Clearly promote and differentiate package options (e.g., trial pack, full course, family pack)
• Build a scalable and mobile-first e-commerce site that supports growth
• Drive trust and conversion for a single-product health brand

Research & Discovery

• Competitor reviews: local TCM brands, single-product wellness shops
• Common pain points: users unsure about 虎乳芝 benefits, how to consume, and package differences
• Identified the need for education-first layout, supported by visual trust elements
• Found mobile experience often lacked clarity on dosage and pricing
• Health-conscious customers want proof: lab tests, sourcing, certifications
• Package comparisons help first-time buyers make faster decisions
• Gifting options and limited-time bundles encourage bulk buying

UX Strategy

• Landing-page style homepage: Structured as a guided journey—educate → compare → convert—tailored to a single-product shop
• Package differentiation: Introduced a clear visual layout to compare bundles (e.g., Trial, Full Course, Family Set), highlighting savings and who each is for.
• Educational storytelling: Broke down complex information (e.g., health benefits, sourcing, usage instructions) into scannable, visual sections.
• Sticky navigation and CTA bar: Ensured users can add to cart or jump to packages from anywhere on the page—especially important for mobile.
• Trust-enhancing design: Integrated certification badges, testimonials, and product origin info at key decision points.
• Localized user flow: Considered Malaysian user habits with simplified language, mobile-first checkout, and WhatsApp support integration.

Wireframes

Designed for a smooth scroll experience, optimized for both education and purchase:

• Hero Section: Product image + key benefit
• Health Benefits: Icon + short copy per benefit (lungs, cough relief, energy)
• How It Works: Tiger Milk Mushroom explained (history + science)
• Testimonials from local customers

Design System

• Corporate font: Minimalist sans serif with slight humanist touch for warmth
• Color Palette: Earthy brown
• UI Components: Call-to-action buttons: High contrast, Promo badges: “Save 15%”, “Best Seller”, “Limited Time”, Icon-based info blocks: e.g., “Locally Grown”, “No Additives”, “100% Natural”, Modular product cards for packages

Final Design Screens

• Homepage: Hero banner, product benefits, package overview, reviews, science-backed section
• Product Detail Page: Clear copywriting on each bundle, health disclaimers, certifications
• FAQ Page: Answers about dosage, side effects, shipping, and returns
• Responsive Layout: Optimized UI across devices
• Custom Shopify Sections: For easy content updates and seasonal offers

Outcome

• Created a focused, high-trust Shopify site tailored to a single product
• Improved user confidence through educational storytelling and package clarity
• Laid the foundation for future brand expansion (e.g., new health products, partnerships)

Project Insights

• Niche health products need storytelling + science + clarity to convert
• A single-product store can still feel rich and dynamic with thoughtful UX
• Trust-building elements like sourcing, testimonials, and visual badges make a major difference
• Mobile-first thinking, Mobile-friendly experience built for growth