CATEGORY PAGE RE-DESIGN

STEP 1 : FIND OUT USER PROBLEMS
I ran 6 sessions of unmoderated user-testings. The goal of testing was to hear and see what's user pain points when browsing our current category page.  Here are some key takeaway from testings

“It is annoying that i can’t select multiple filter options at one time”
“It is not obvious for me that I can narrow down products by using filter function”
“When I selected filter attributes the results didn’t match with my choice, I am not sure the filter function is working properly.”
“ I hate to click into a product that i can’t buy”
 
cometitor-long.png

STEP 2: COMPETITOR ANALYSIS
It is important to learn how our competitors solved the similar problems. In this exercise I looked at few thing:
/ Who is doing what / Are there any trends / Any cool features mobile-optimized / Most importantly what works for us

 
 sketches from design studio session

sketches from design studio session

STEP 3 : COLLABORATED WITH STAKEHOLDERS AND DEVELOPERS
To align the direction of redesign from cross organization, I held a design studio session with key stakeholders, developers and product managers. In this session I shared my researches with them and invite them to have a quick sketch session together. At the end of design studio session we achieved: 

Get all stakeholders to hear user pain points and aligned our vision of redesign. No more silos
Scope all users pain points into 3 separate release-start with improving filter experience
Lots of sketches
 

STEP 4: WIREFRAMING
Transfer sketches and ideas from design studio to interactive wireframes. 

cate-wire.png
 

STEP 5: MORE TESTING


THE FINAL DESIGN

 
 

1. Surfacing filter function to the side rail to encourage usage. On mobile, I created a sticky filter button,
users can access to it anytime when they were browsing.

2. Loading twice amount of products by default and remove pagination use “load more baubles” button to create a seamless shopping experience, no thinking required.

3. Enhancing filter function by collaborated with merchandise and developer team to clean up color filter mapping and products displaying logic.  Previously, it did not display the correct product when a color was chosen.

4. 
Creating products status badging system. No more “quick fix” style of badging. Through the consistent UI treatment our users can quickly learn where to look for product status information. In addition the system can easily be expanded for further marketing programs.