The final design successfully streamlined the user journey, making it easier for customers to discover, understand, and subscribe to Haru Skincare’s new product. By applying familiar e-commerce patterns, the interface reduced friction and improved clarity, especially around subscription benefits. The responsive layout ensured consistency across devices, while strategic placement of CTAs and trust signals guided users naturally toward conversion.
Despite the time constraints, this project demonstrated how leveraging existing user expectations can lead to effective, scalable, and user-centered design outcomes.
The Outcome
Contact
Let’s
Connect!
Role
Timeline
Skills
March 2025
UI/UX Designer
Product design, Competitive Analysis, Wireframing, Responsive Design
Haru Skincare
In this fictional case study, I was tasked with designing a product page for Haru Skincare, a brand preparing to launch a new subscription-based skincare product. The challenge was to create a page that clearly communicated product value, emphasized subscription savings, and reduced user hesitation—ultimately driving long-term customer engagement through an intuitive and familiar flow.
Given the limited timeline of this project, I prioritized a competitive analysis over direct user research to quickly gather actionable insights. I analyzed top-performing skincare and e-commerce platforms—Sephora, Ulta, and Amazon—to identify established patterns that could be adapted for Haru Skincare’s product page.
This approach was grounded in the UX principle of leveraging familiarity, which emphasizes recognition over recall. Familiar layouts reduce cognitive friction, allowing users to focus on product content and benefits instead of adjusting to an unfamiliar interface.
Problem Statement
How might we design a user-friendly product page that not only showcases the new skincare item but also encourages subscription adoption—without overwhelming or confusing users?
Competitive Analysis
Familiar and Intuitive Layouts
Effective Calls to Action (CTAs)
Prominent and strategically placed CTAs like “Add to Cart,” “Subscribe & Save,” and “Buy Now” encouraged quick decision-making and reinforced the purchasing flow.
Design Process
With insights from the competitive analysis, I mapped the user flow to ensure a smooth path from product discovery to subscription checkout. This helped anchor layout decisions in real user tasks, focusing on clarity and reduced friction.
I then created two wireframe variations that explored layout structures based on common e-commerce conventions. Key design considerations included:
Clarity of product information
Ease of navigation
Visibility of subscription savings
Effective calls to action
After evaluating both versions, Wireframe 2 was selected because:
It featured a prominent banner to highlight the new launch.
The content followed a logical, conversion-focused flow, naturally guiding users from discovery to action.
It better aligned with Haru Skincare’s business goals by emphasizing recurring purchase benefits.
This iteration process, rooted in user behavior and UX best practices, ensured that the final structure maximized engagement and subscription potential.
Responsive Design
To ensure a seamless experience across devices, I designed the product page using a mobile-first approach. Key actions like subscribing, reading reviews, and viewing product details remain easily accessible on smaller screens.
I implemented a flexible grid system and scalable components to adapt layouts from mobile to desktop. Interactive elements were optimized for touch accessibility and fast loading, reducing friction and improving usability for all users.
Once the layout and flow were finalized, I designed high-fidelity prototypes in Figma to visualize the user experience end-to-end.
These prototypes were used for stakeholder reviews and usability testing, helping validate both interaction and visual direction.
Product Landing Page
Haru Skincare
Haru Skincare
Product Landing Page
Standard notifications often went unnoticed during hectic mornings or workdays.
Subscription Savings Highlighted
All platforms clearly displayed subscription discounts alongside pricing, reinforcing the value of recurring purchases and increasing conversion rates.
Customer Reviews and Trust Signals
User reviews and star ratings were always placed near product titles, helping build immediate credibility and trust with potential buyers.
Scholarly
DailyDose