skincare e-commerce website
Sanmarine Website
ROLE
Web designer
TIMELINE
2 month
YEAR
2024
Project description
San Marine is an e-commerce website redesign focused on improving usability, visual clarity, and the overall shopping experience for a premium skincare brand.
The Challenge:
How might we elevate a cluttered e-commerce experience into a clean, premium, and conversion-focused shopping platform?
The Problem
Although the products were positioned as premium, the website failed to reflect that quality.
Experience Gaps
The layout felt visually cluttered.
Information hierarchy lacked clarity.
Spacing and balance were inconsistent.
Accessibility was not considered systematically.
Conversion & Usability Gaps
Reaching the cart required unnecessary steps.
Navigation created friction in product discovery.
CTAs lacked visual emphasis.
The checkout flow did not reinforce trust or clarity.
The digital experience weakened the brand’s premium perception.
My Approach
I approached the redesign with a dual focus: brand elevation and conversion optimization.
• Audited the existing structure and identified hierarchy breakdowns
• Mapped critical shopping flows from homepage to checkout
• Simplified navigation and reduced unnecessary steps
• Rebuilt visual hierarchy to prioritize products and CTAs
• Designed a scalable system for long-term consistency
The Solution
The redesign introduced a clean, conversion-oriented experience aligned with the brand’s identity.
Elevated Visual Experience
A minimal layout shifted focus to product imagery.
Clear typographic hierarchy improved readability.
Structured spacing created visual balance and consistency.
Conversion Optimization
Navigation was simplified to reduce path-to-cart friction.
CTAs became visually prominent and strategically placed.
Product pages were redesigned with stronger emphasis on benefits and clarity.
Checkout was streamlined to increase confidence and reduce drop-off.
System & Scalability
A custom design system ensured consistency across pages.
Reusable components supported product listings and promotions.
Responsive optimization ensured seamless performance across devices.
The final solution was fully implemented in WordPress (Elementor Pro).
Key Product Decisions
• Reduced visual noise to reinforce premium positioning
• Shortened the path-to-cart by eliminating unnecessary steps
• Strengthened CTA hierarchy to guide user action
• Designed trust cues within checkout to increase purchase confidence
• Built a reusable system to support future product expansion
Results
The redesign aligned the digital experience with the brand’s premium positioning and reduced friction across the shopping journey.
Usability Impact
Improved visual clarity and stronger product focus.
More intuitive navigation and faster path to cart.
Enhanced readability and accessibility.
Conversion Readiness
Clearer CTAs increased action visibility.
Checkout flow reduced cognitive friction.
Stronger hierarchy improved scanning and decision-making.
Long-Term Value
Scalable design system supporting future growth.
Fully implemented and optimized across devices.
What I learned?
-In e-commerce, visual hierarchy is directly tied to perceived brand value.
-Reducing friction is often more impactful than adding features.
-Premium positioning must be supported by structural clarity, not only aesthetics.