Spigen Redesign Project
Objectives:
Spigen began a redesign of its product page.
There were too many products shown in one page and it was hard for users to find what they wanted in the collection page.
The goal of this particular project was to implement filter systems and categorize over 100+ different products.
In addition, a new collection page needed to include the status of each product and mobile-friendly design.
Role:
Lead Designer, User Research, Visual Design, Prototyping & Testing, Content Creation.
Figuring out the Problems:
We created a survey within the team to discover the difficulties of using
current collection page and it was revealed that:
Difficult to find right products for each individual’s preference.
Too many choices of product that are not categorized.
Even if you choose the products that you want, they let you know it’s out of stock after you go on to the next page.
Mobile version of the collection page is hard to use and 70% of Spigen customers are coming through mobile to shop.
Product Listing Page
Collection page for Spigen consists of more than 70 different products without filter system to modify for users.
Product Page
Product description page was packed with information where customers found hard to explore options and there weren’t any hierarchy.
Defining the Solutions:
After we discover the pain point and difficulties of the current product page, we look for references and come up with the solution.
Visible filter system to provide options for users to choose what they want.
Categorize all products and divide all products into that category for users to find and
recognize what they are looking into.Display status of each product to inform users to know what’s available and what’s not.
Create a mobile-friendly product page dedicated for mobile users.
Ideation:
After we discover the solutions, me and my team analyze references for what’s working and what’s not. We narrowed down what we will need in the final prototype and started to sketch our ideations.
Prototype: Product Listing Page
We created several different versions of the collection page and shared with the sales team and marketing team in order to narrow down what’s working and what’s not working. We kept the essential features and finalized the design.
Version 1
Filter system on the left side with drop-down menu options. Product image with grey box for cohesiveness from the various different design.
Version 2
Simple filter system on the left side with blue indicators to match the CTA of Spigen website. Change out the title images from 45º angles to flat back view for customers to easily view design of each products.
Version 3
Follow the same filter system from Version 1 with orange color indicators.
Prototype: Product Page
After we set up some prototypes for Product Listing page, we started to create prototype for product page according to our ideation.
Version 1
Product images are shown on the left and description on the right. Description parts are scrollable due to additional informations.
Version 2
Simplify the product description part with icons. Product images portray essential angles of the product. Reviews and additional information are shown with accordion menu.
Version 3
Similar to version 2 layout except product images and accordion menu located on the bottom of the product images.
