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 

Go to Next Project