PRODUCT.md

Product

Register

product

Users

Mongolian consumers shopping for vitamins, supplements, and nutritional products imported from the United States. 99% of traffic is mobile. Users are typically browsing during leisure moments, comparing products by brand and category, and expect a fast, frictionless path from discovery to checkout. Many are repeat buyers who value familiarity and trust.

Product Purpose

Amerik Vitamin makes it easy for Mongolian customers to buy genuine US-imported vitamins and supplements with wide selection, competitive prices, and reliable delivery. Success is measured by conversion rate, cart completion, and repeat purchase frequency — not by time-on-site or content engagement.

Brand Personality

Playful. Unique. Trustworthy.

The interface should feel like a confident local shopkeeper who knows their stock inside-out — not a faceless warehouse or a sterile pharmacy. Warmth and personality must come through the design without sacrificing clarity. Every interaction should reinforce that this is a curated, trustworthy source, not a generic dropshipper.

Anti-references

  • Generic minimalist black-and-white shadcn/ui lookalikes
  • Cold, clinical pharmacy or medical-supply websites
  • Templated Shopify storefronts with stock photography and generic trust badges
  • Overly corporate supplement brands that bury products in lifestyle fluff

Design Principles

  1. Conversion is the only metric that matters — Every layout decision, CTA placement, and animation must justify itself by removing friction from the purchase path. If it doesn't help someone buy faster, it's clutter.

  2. Personality without noise — The playful, unique brand voice should show up in typography weight, border treatments, and micro-interactions, not in decorative illustrations or distracting animations that slow down the mobile experience.

  3. Trust through transparency — Price, stock status, brand origin, and delivery info must be immediately visible. Trust is earned by showing real information upfront, not by plastering generic "secure checkout" badges.

  4. Mobile is the real design surface — Desktop layouts are secondary. Touch targets, thumb-reachable CTAs, fast scroll performance, and bottom-sheet patterns take priority over hover states or wide multi-column grids.

  5. Speed beats polish — A slightly less beautiful page that loads in under 1s and renders immediately on a 3G connection will convert better than a pixel-perfect hero that takes 3s. Performance is a design principle.

Accessibility & Inclusion

  • WCAG 2.1 AA as a baseline
  • Mobile-first touch targets (minimum 44×44dp)
  • Respect prefers-reduced-motion for all animations
  • Ensure sufficient color contrast on the warm yellow accent against both light and dark backgrounds