Fill your cart with color
The Problem
The current design for the Refinement Panel is outdated and even though we have most of the traffic from the LHN, the users seems to confused. The redesign will bring more clarity into the user journey.
Also, based on our UER testing, most of the users look for attributes like color and size in many categories.
The Solution
Redesigning the refinement panel to match the new brand that ebay is representing, Making the UI more fresh, simple and friendly while answeing the questions about size and color.
Persona
Mike Tran
35 years old male
Salary: 70k-90k
Married
Lives in Texas
Real estate agent
Goals:
-
Get into refining the browse & search results in ebay
-
Being able to find his size quickly
-
Being able to search for a color simply
-
Save time and money on ebay
Frustrations:
-
The refinement panel has bugs
-
The sizes are ordered based on popularity and the system does not remember his size for pants, shoes, etc
-
He feels confused on refinement panel and browse page
Problems on previous design:
-
The user click on “See all” on the LHN, and explore through different components. It is not visible for the user that the right area is scrollable.
-
The aspect that they select will have a checkmark next to it, so filters are not necessary.
-
On average the user selects 2-3 filters, so showcasing the filter pills is not necessary.
The New Design For Refinement Panel
-
Adding a scroll bar to solve the user's confusion
-
Cleaning and simplifying the UI
-
Showing how many results are avalaible based on filtering
The New Design For Size and color
-
Adding size and color in a visual way into the page
-
Cleaning and minimizing the BGM tabs
-
Memorizing the user's selected size for clothes and shoes
-
Having the size chart in a chronological order
-
Developing a grid system that avoids the scroller tabs
Problems with previous design:
-
The color is inconsistent in LHN
-
Users have to scroll a lot to get into results and browse
-
Color does not have the name next to it and is not grouped with size
Flexible Design
-
The Grid changes based on how many aspects in visible. We have designed 4x1, 4x2, 5x1, 5x2, 6x1, & 6x2.
-
Shop by now has 2 more tabs and the space is minimazid
