iHerb
UI Design
2025
ABOUT
A redesign of iHerb’s product detail page focused on improving clarity, readability, and user flow. The goal was to create a clean, responsive interface that reflects iHerb’s natural wellness values through a calm, balanced visual language.
ROLE
UI Design,Art Direction
TEAM
Solo Project
Tools
Figma, Sora
DURATION
3 months
The navigation was redesigned to be clearer, more structured, and easier to scan, helping users quickly find the categories and products they need.
Multiple product card states were developed to create a scalable system, allowing users to quickly compare options and understand key information at a glance.
Shifting from one long page to three focused content areas reduces cognitive load, improves clarity, and helps users quickly access relevant information without feeling overwhelmed.
Responsive UI
This responsive design adapts seamlessly across mobile and tablet, restructuring the product page for optimal readability, clearer hierarchy, and smoother navigation. Key actions—such as potency selection, quantity options, pricing, and autoship benefits—remain prominent and accessible at every breakpoint, ensuring a consistent and efficient shopping experience regardless of device.
Key Insights
This was my first project working with both Figma and an e-commerce platform, and it challenged me to understand a large amount of product data and a complex site map. The learning curve was significant, but it pushed me to study information architecture, flow, and usability in depth — and ultimately shaped the strong design decisions shown in this case study.
Back to Top
Next project