UX/UI • Information architecture • RWD

E-commerce Site Redesign

ROLE

Sole UX/UI Designer & Strategist

timeline

Nov 2025 - Jan 2026

Tools

Figma, Square Web Builder

Overview

I led the comprehensive web redesign for Yepo Cosmetics to help them transition into a massive multi-brand catalog of 3,000+ SKUs. As the sole product designer, I focused on cleaning up the broken information architecture and turning a chaotic inventory into a highly structured, effortless shopping experience. The final system unifies desktop and mobile experiences into a single, intuitive framework built to drive product discoverability, maximize SEO performance, and deliver higher conversion.

impact

62.37%

Organic Traffic Growth

within 3 months

44.72%

Increased Page Views

by Improving Navigation

3m 14s

Average Engagement Time

THe challenge

Yepo Cosmetics manages a massive Asian beauty catalog of 3,000+ SKUs. However, the original structure wasn’t built for this scale. Users were overwhelmed by a lack of hierarchy, making it nearly impossible to discover products without frustration. My goal was to transform this chaotic inventory into a logical, scalable system.

Phase 1. Information architecture

The primary objective of this phase was to transition from a rigid, over-consolidated structure to a scalable framework capable of supporting 3,000+ SKUs while reducing cognitive load for the user.

01. Analyzing the Existing Structure

The Problem
Before the redesign, the website’s architecture was not built for the current scale of the inventory. The lack of hierarchy created significant barriers to product discovery:

Over-Consolidated Navigation
By funneling 3,000+ products through a single "Shop All" entry point, the system created an immediate bottleneck, overwhelming users with choice paralysis.
Inconsistent Data Standards
Redundant and case-sensitive category naming (e.g., "Cleansing Oil" vs. "cleansing oil") fragmented the user journey and negatively impacted SEO indexing.
Competing Data Types
Individual product SKUs were placed on the same hierarchical level as broad categories, disrupting the mental model of a standard e-commerce experience.
Absence of Sub-categorization
Without a granular taxonomy, users were forced into an "Endless List" scenario, leading to high drop-off rates due to the inability to filter results.

The Problem
Before the redesign, the website’s architecture was not built for the current scale of the inventory. The lack of hierarchy created significant barriers to product discovery:

Over-Consolidated Navigation
By funneling 3,000+ products through a single “Shop All” entry point, the system created an immediate bottleneck, overwhelming users with choice paralysis.
Inconsistent Data Standards
Redundant and case-sensitive category naming (e.g., “Cleansing Oil” vs. “cleansing oil”) fragmented the user journey and negatively impacted SEO indexing.
Competing Data Types
Individual product SKUs were placed on the same hierarchical level as broad categories, disrupting the mental model of a standard e-commerce experience.
Absence of Sub-categorization
Without a granular taxonomy, users were forced into an “Endless List” scenario, leading to high drop-off rates due to the inability to filter results.

02. Building a User-Centric Navigation System

The Solution
The redesigned architecture focuses on intuitive discovery and scalability. By implementing a hierarchical system, I optimized the path to purchase for both "browsing" and "searching" user personas:

Tiered Global Navigation
I established clear, high-level entry points (Skincare, Makeup, Hair, Body) to distribute traffic and provide immediate context to the brand’s offerings.
Faceted Search Logic
To cater to "Skintellectuals," I designed a comprehensive filtering system based on Skin Type, Skin Concern, and Active Ingredients, allowing for highly personalized product discovery.
Standardized Taxonomy
I consolidated redundant categories into a unified naming convention, improving internal search accuracy, optimizing search engine indexing (SEO), and ensuring a cleaner data structure for future inventory expansion.
Conversion-Oriented Pathways
Strategic placements for "Best Sellers," "New Arrivals," and "Sale" items were integrated into the primary navigation to prioritize high-intent traffic, contributing to the 62.37% increase in unique visits.

The Solution
The redesigned architecture focuses on intuitive discovery and scalability. By implementing a hierarchical system, I optimized the path to purchase for both “browsing” and “searching” user personas:

Tiered Global Navigation
I established clear, high-level entry points (Skincare, Makeup, Hair, Body) to distribute traffic and provide immediate context to the brand’s offerings.
Faceted Search Logic
To cater to “Skintellectuals,” I designed a comprehensive filtering system based on Skin Type, Skin Concern, and Active Ingredients, allowing for highly personalized product discovery.
Standardized Taxonomy
I consolidated redundant categories into a unified naming convention, improving internal search accuracy, optimizing search engine indexing (SEO), and ensuring a cleaner data structure for future inventory expansion.
Conversion-Oriented Pathways
Strategic placements for “Best Sellers,” “New Arrivals,” and “Sale” items were integrated into the primary navigation to prioritize high-intent traffic, contributing to the 62.37% increase in unique visits.

Phase 2. Desktop & Mobile Experiences

The primary objective of this phase was to translate the logic-driven architecture into an intuitive visual interface. By focusing on visual hierarchy, responsive scalability, and consistent brand identity, I aimed to transform the complexity of 3,000+ SKUs into a seamless, high-conversion shopping journey across all devices.

01. Desktop Renovation (Before & After)

Scrollable homepage screenshots

Before

After

Redesigned the homepage to prioritize product discovery. I transformed a fragmented layout into a cohesive, conversion-focused experience that maintains the "Pretty" brand identity while handling a large-scale inventory.

Redesigned the homepage to prioritize product discovery. I transformed a fragmented layout into a cohesive, conversion-focused experience that maintains the “Pretty” brand identity while handling a large-scale inventory.

02. Desktop Mega Menu

An expanded view of the 'Skincare' menu as an example, showcasing how the new multi-level menu hierarchy and promotional banners scale across massive number of products.

An expanded view of the ‘Skincare’ menu as an example, showcasing how the new multi-level menu hierarchy and promotional banners scale across massive number of products.

03. Responsive Web Design (Homepage & hamburger menu)

Scrollable Homepage

Scrollable main menu

Scrollable 'Skincare' menu

To maintain design cohesion across all breakpoints, the mobile site mirrors the desktop's structured taxonomy and layout principles within a compact interface.

To maintain design cohesion across all breakpoints, the mobile site mirrors the desktop’s structured taxonomy and layout principles within a compact interface.

Outcome

The responsive e-commerce site redesign successfully solved product discovery issues, yielding immediate performance gains within 3 months. By restructuring the massive taxonomy into an SEO-optimized architecture, the project drove a 62.37% growth in organic traffic and a 44.72% increase in page views through improved navigation. Furthermore, the cohesive cross-platform experience kept users highly active, achieving a 3m 14s average engagement time reflecting a highly positive shift in user behavior.