March 2025
March 2025
Role
Role
Role
Role
Timeline
Timeline
Timeline
Timeline
Skills
Skills
Skills
Skills
UI/UX Designer
UI/UX Designer
UI/UX Designer
UI/UX Designer
Product design, Competitive Analysis, Wireframing, Responsive Design
Product design, Competitive Analysis, Wireframing, Responsive Design
Product design, Competitive Analysis, Wireframing, Responsive Design
Product design, Competitive Analysis, Wireframing, Responsive Design
Effective Calls to Action (CTAs)
Effective Calls to Action (CTAs)
Effective Calls to Action (CTAs)
Effective Calls to Action (CTAs)
Customer Reviews and Trust Signals
Customer Reviews and Trust Signals
Customer Reviews and Trust Signals
Customer Reviews and Trust Signals
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.
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.
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.
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.
The Outcome
The Outcome
The Outcome
The Outcome
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 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 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 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.
Competitive Analysis
Competitive Analysis
Competitive Analysis
Competitive Analysis
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.
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.
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.
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.
Design Process
Design Process
Design Process
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.
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.
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.
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
Responsive Design
Responsive Design
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.
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.
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.
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.
User reviews and star ratings were always placed near product titles, helping build immediate credibility and trust with potential buyers.
User reviews and star ratings were always placed near product titles, helping build immediate credibility and trust with potential buyers.
User reviews and star ratings were always placed near product titles, helping build immediate credibility and trust with potential buyers.
User reviews and star ratings were always placed near product titles, helping build immediate credibility and trust with potential buyers.
Familiar and Intuitive Layouts
Familiar and Intuitive Layouts
Familiar and Intuitive Layouts
Familiar and Intuitive Layouts
Prominent and strategically placed CTAs like “Add to Cart,” “Subscribe & Save,” and “Buy Now” encouraged quick decision-making and reinforced the purchasing flow.
Prominent and strategically placed CTAs like “Add to Cart,” “Subscribe & Save,” and “Buy Now” encouraged quick decision-making and reinforced the purchasing flow.
Prominent and strategically placed CTAs like “Add to Cart,” “Subscribe & Save,” and “Buy Now” encouraged quick decision-making and reinforced the purchasing flow.
Prominent and strategically placed CTAs like “Add to Cart,” “Subscribe & Save,” and “Buy Now” encouraged quick decision-making and reinforced the purchasing flow.
Standard notifications often went unnoticed during hectic mornings or workdays.
Standard notifications often went unnoticed during hectic mornings or workdays.
Standard notifications often went unnoticed during hectic mornings or workdays.
Standard notifications often went unnoticed during hectic mornings or workdays.
Subscription Savings Highlighted
Subscription Savings Highlighted
Subscription Savings Highlighted
Subscription Savings Highlighted
All platforms clearly displayed subscription discounts alongside pricing, reinforcing the value of recurring purchases and increasing conversion rates.
All platforms clearly displayed subscription discounts alongside pricing, reinforcing the value of recurring purchases and increasing conversion rates.
All platforms clearly displayed subscription discounts alongside pricing, reinforcing the value of recurring purchases and increasing conversion rates.
All platforms clearly displayed subscription discounts alongside pricing, reinforcing the value of recurring purchases and increasing conversion rates.
March 2025
Haru Skincare
Haru Skincare
Haru Skincare
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.
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.
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.
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.
Problem Statement
Problem Statement
Problem Statement
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?
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?
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?
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?
Haru Skincare
Haru Skincare
Haru Skincare
Haru Skincare
Product Landing Page
Product Landing Page
Product Landing Page
Product Landing Page
Haru Skincare
Product Landing Page
Haru Skincare
Product Landing Page
Haru Skincare
Product Landing Page
Haru Skincare
Product Landing Page
Let’s Connect!
Let’s Connect!
Let’s Connect!
Let’s Connect!