Spigen Revamp
Objectives
Spigen undertook a redesign of its Product Collection and Product Listing pages to address usability issues caused by an overwhelming number of products displayed on a single page. The project aimed to introduce a comprehensive filtering system and product categorization for over 100 items, while also ensuring the interface was optimized for mobile users. A key requirement was to enhance clarity around product availability and stock levels directly on the collection page.
Role
Design Lead
User Research
Visual Design
Prototyping & Testing Content Creation.
Deliverables
Product Listing Pages
Product Description Page
Web & Mobile
Design System
Identifying the Problem
To gain deeper insight into existing user pain points, I conducted an internal survey with team members across departments. The research highlighted several core issues:
Many users had difficulty narrowing down the product list to match their individual needs—such as phone model compatibility, color preferences, or desired features.
The absence of clear filters and a lack of personalized sorting options created friction in the browsing experience, often leading to frustration and decision fatigue.
Stock availability was not clearly communicated, often leading users to discover an item was out of stock only after navigating to the product page.
The mobile experience was underperforming, despite 70% of traffic coming from mobile devices.
With a clear understanding of the challenges, the team and I explored strategic solutions, drawing on best practices and competitor analysis. Our key solutions included:
Filter System: Introducing an intuitive, visible filtering mechanism to help users quickly narrow down relevant product options.
Product Categorization: Organizing the collection into clearly defined categories for easier navigation.
Stock Visibility: Displaying real-time product availability directly on the collection page to reduce user frustration.
Mobile Optimization: Redesigning the collection experience for mobile, ensuring accessibility, performance, and ease of use across devices.
Design Approach & Solution
We conducted a competitive analysis to understand how leading brands implement filter systems and product categorization on their listing pages. By identifying effective patterns and usability strengths, we gathered insights to inform a more intuitive experience for our platform.
After reviewing inspirational websites, we explored how other brands structure and present their product listing pages. Key takeaways around layout, hierarchy, and content clarity helped shape our own design direction.
We began by auditing the existing design to determine what elements were effective and what required improvement. Based on our findings, we created early ideation sketches focused on solving key usability issues. These low-fidelity concepts helped inform the structure and features prioritized in our prototypes.
Ideation & Design Process
We developed multiple versions of the redesigned collection page and shared them with the Sales and Marketing teams for feedback. This collaborative process helped us refine the design, retain the most effective features, and ultimately finalize a version that addressed both user needs and business goals.
Prototype
The final design prioritized clarity, scalability, and responsiveness, resulting in a more intuitive and efficient shopping experience across devices. Clear product categorization and real-time availability indicators simplified decision-making and reduced user frustration. For mobile users—who represent the majority of Spigen’s customer base—the experience was significantly improved with collapsible filters, thumb-friendly navigation, and optimized content layout. These enhancements led to increased product discoverability, higher mobile engagement, and a noticeable reduction in cart abandonment. The iterative design process, supported by ongoing feedback from cross-functional teams, ensured strong alignment between user needs and business goals.
