From Clearance Page Design To Filter Redesign

The systematic thinking behind the webpage design

July, 2018

Background

Working as a UX designer in a fast-growing e-commerce company, I am mainly responsible for our website design. Recently, the marketing department needed a new webpage to sell the clearance products, like bras, panties, and lingerie. More than 400 kinds of products would be involved in this clearance promotion. To match the marketing department’s promotional plan, we had six weeks to nail it down.

My Roles

UX design: Researching requirements, ideating, and creating prototypes.

Project management: Planning, coordinating resources, and leading two developers.

Previous solution - Quick but Defective

Stock clearance is a common and important practice that every seller would do. It is also a long-lasting performance. For an e-commerce company like us, whose products are various and have many different sizes and colors, stock clearance page design is challenging. The hardest part is to guide users to narrow down the products to what they want and which are also available.

The original clearance page is like below. It contains a title, a fixed filter, the product list, and a pagination.

Though the page is simple, it meets users' basic needs for browsing products.

However, it can not fulfill its duty when the number of products enlarges. The most conspicuous reason is that there is no product category filter when the products are mixed. The users may not complain about it when the clearance products are less than 200(which can be shown in 4 pages). But if the products take up to 10 more pages, users are less likely to browse page by page to find out the products they want. And they'll leave with disappointment at last. Therefore, the marketing department wants a page from which users can choose a category and sizes first so as to narrow down the product pool.

Due to the urgent need, the category filter cannot be built that fast. Thus, an expedient solution was created instead. This solution - a clearance landing page - is the previous solution and looks like below. Users will be leading to the product list page after completed these steps.

Step 1 - Choose a category
Step 2 - Select sizes
Step 3 - Confirm

Indeed, this page solved the problem to some extent. However, I know it has several other lethal problems. Therefore, when the marketing department planned to redo the clearance promotion, I proposed this page’s redesign work. I wanted to create a longer-lasting, more effective page for the clearance products.

Project planning

We have only six weeks for creating this page. The two developers I led are both new graduates. They may need more time for developing. So the design process should run faster than regular. Also I plan to let them join the project discussion at the conceptual design checkpoint, so that they can be more prepared for coding. The project will use Agile design and development process. The timeline is shown below.

Research

Time was limited, but the research step was indispensable. I’ve mainly done these 3 parts of research.

1. Requirement gathering

From the discussion with the marketing department, I’ve known that

  1. More than 400 kinds of products would be involved in this clearance promotion. That would take about 30 pages.
  2. There are mainly 5 product categories, which are bras, panties, sleepwear, swimwear, and sportswear.
  3. The page should be convenient for users to choose different categories and sizes.

2. Competitive analysis

I’ve researched on some of our competitors' websites and some famous e-commerce websites. Due to the well-developed e-commerce market, they share almost the same modules for the clearance page, which are the promotional banner, filters and the product list.

3. Data analysis and the expert review

By analyzing the past clearance promotion data in Google Analytics and conducting the expert review for the previous solution, I identified these problems:

  1. The clearance landing page requires users take several actions before seeing the products, which will probably result in the traffic loss.
  2. Users can not jump from a category to another within the product list page, but rather they have to start over from the landing page.
  3. The landing page can not be accessed on the product list page. Users have to access it from the site navigation.

Actually, all these problems can be seen as one root problem - complexed redirecting. So, in order to solve it radically, the page redirecting should be more smooth and intuitive.

Define

To solve the redirecting problem, I decided to remove the clearance landing page and improve the filter function so that category can be filtered. Therefore, the main modules of the clearance page would be the clearance title, the filters, and the product list. Among these, the filter is the most complexed module to be designed and developed. So I did a separate research on filters from these angles.

  1. Filter’s exhibiting methods and interaction for both desktop and mobile.
    Let's see how big brand like Nike and small brand Soma do with their filters on their desktop websites. Nike uses the side filter vertically, while Soma uses the top filter horizontally.
    Nike
    Soma
  2. Filter’s variations in different application scenarios.
    Let's take Victoria's Secret's filter for example. It shows differently when looking at a specific category, like Bra>Demi, and when searching, like Search>Demi.
    When checking: Bra>Demi
    When checking: Search>Demi
  3. Current filter status.
    I found that the order of our filters doesn't match their use rate after looking into GA's data report. A two-month filter usage data are showed on the picture below, which indicates that the order of filters could be more reasonable.

Updating the filter function will affect many pages of our website. So it can not just be treated as a component of the clearance page. Instead, it should be designed systematically in the context of our whole website. So I rethought the filter in 3 ways.

1. Scenario-based filter design

In different application scenarios, the importance of filters might differ. It is often used as an inconspicuously auxiliary function. When users are browsing the products under the clothing category, if they want to narrow down the result by size or color, they will look for the function subconsciously.

However, in other cases like in the clearance page, the filter function should be highlighted from the user experience angle. We intend to notify users that the filter is ready to use and be better used before browsing the product list, because there are tons of products and some of the products are short in size or color.

So I call the filter in the first use case "The Regular Filter", and "The Strong Filter" in the second.

2. Filters’ customization

As required, categories can be filtered. And that's the first step of filters' customization - Making possible filters available. If we go further, the next step could be that when certain filters are applied, the other filters could be changed to suit users' needs better. For example, when users have selected a specific category, the kinds and orders of the rest filters will change. The last step would be arranging the filter options in a more usable way in different application scenarios.

3. Sorting methods

In the past, we only have three sorting methods, default, price high-to-low, and price low to high. Adding more sorting methods can be more helpful, such as sort by rating, discount, or arrival date.

Price sensitive users

Our primary customers are young females aging from 18~35, which takes about 70 percent of all our customers. Since this group has comparatively low income comparing to the elders, we speculate that they are price sensitive. The clearance page will mainly attract customers by the beautiful prices. If we can highlight the "beautiful" such as showing the discount percentage, it might be helpful for customers to make decision faster. Don't forget that most people are too lazy to calculate the discount percentage.

Requirements Summary

By synthesizing the analysis above, I finally got these detail requirements:

Main works:

  1. Make category as a filter
  2. Filters can be customizable
  3. More sort options
  4. Data collection for future improvements

Extra features:

  1. Discount percentage indicator
  2. Strong filter sticky function
  3. Progress indicator when filters are applying
  4. Quantity indicator for each filter
  5. Promotion banners

Ideation

Our original filters were exhibited in a horizontal bar, which can make full use of the screen width. In order to minimize the change, I inherited the horizontal showing method. So our regular filter for desktop will be like this.

For pages that need to highlight the filter function, I plan to expand the filters so that they can get more attention and are easier to use. Also, if the category filter is the primary filter, it can be featured at the top.

Strong Filter
Strong Filter - Featured

Mobile version

The original filter for the mobile is a button which can trigger out a filter drawer panel.

Mobile Filter
Drawer Panel
Filter Selected

If we apply the extend mode for the strong filter, the filter would be like below.


Mobile - Strong Filter

From the angle of the consistency, the extend filter wins. However, the cost is not cheap: more screen space occupied, more cognitive burden of new interaction, and more time for implementation. After having weighed the pros and cons, I discarded the thought of the extended filters on the mobile version. I have identified some UI/UX issues of the original mobile filter. So I'll refine it and make the category filter can be access outside of the drawer panel.

Conceptual Design Review

At the end of the first week, I held a meeting about the conceptual design review. The marketing department liked this idea and the tech lead confirmed the feasibility of this design.

I presented the broad overview of this project at an early point, so that the engineers can have more time for researching the tech solution.

Lo-Fi Design

Data flow plays an important role in the implementation process. Design cannot be achieved if the data is not ready. So several data related problems were discussed in the Lo-Fi design process.

  1. Should the options of the category filter fixed or flexible?
  2. The order of filters in different scenarios.
  3. Every filter’s options and sequence.

After discussing with the marketing and development team, we had reached a consensus and formed a filter option table for implementation.

The Lo-Fi design took me about a week. Then I organized the second review meeting in which many design details got confirmed.

The Lo-Fi design are very similar to the Hi-Fi design, so I only show the designs in the Hi-Fi section.

Hi-Fi Design

Another week was taken for the Hi-Fi design. Besides the interaction and visual design, I’ve also prioritized the developmental tasks and created the operating plan.

1. The regular filter module.

This is the minimal development requirement. The category filter should be added. And the mobile filter's UI should be changed.

Desktop Regular Filter
Desktop Regular Filter - Selected
Mobile Regular Filter
Drawer Panel
Selected

2. The strong filter module.

This is the expanded version of the regular filter. Only the desktop version has this module.

Desktop strong Filter
Desktop Strong Filter - Selected

3. The strong filter module with featured category filter.

This is the expected vertion that can meet the minimal requirements. This version is expected to be complete on week 5.

Clearance page - Desktop
Clearance page - Mobile

4. More features

If the main function has been implemented on time, more features can be added in the clearance page, such as the discount tag, more sort options, and sticky filter function. What's more, the filter related tags for Google Analytics should also be implemented for the future improvements.

Test and evaluation

On the week 5, the expected version has been developed. All other features were also been implemented within the last week. Four post-implementation design reviews were conducted in the last two weeks and most bugs were fixed on time. You can try the online version HERE.

Google Analytics was collecting the user data. I'll update the data result when enough data get collected.

Conclusion

With limited time and resources, we complete the project on time. The result is amazing. Planning in advance and communication seamlessly are the key to the success. Thank Zihao for enduring my perfectionism when he was doing the front-end work. Thank Kai for the super challenging data and back-end work. Thank the tech lead and marketing department's cooperation.

Work Projects

https://drive.google.com/uc?export=view&id=1uj8UV9JpsslqAhFivXzhmNIroNY4VkHZ

E-commerce Website Clearance Page Design

UX/UI | PM | Research

Created a webpage for the online clearance sale. Emphasized on redesigning the site-wide filtering tool.

July 2018

https://drive.google.com/uc?export=view&id=10XhXrImNdnoNvCHIL_nu8YlvwF8HCRru

Design System Establishing

UX/UI | PM | Research

Initiated and developed a design system to facilitate designers and developers in the company.

June 2018

https://drive.google.com/uc?export=view&id=1NzdcJhuxM9izwalcsQ0xGxYF6r9PcBhR

Navigation Redesign

UX/UI | Research

Redesigned the navigation of an e-commerce website for a better browsing and product finding experience.

September 2017

https://drive.google.com/uc?export=view&id=1p-pDgk7Uf08BYkrtSpAqsOd-tofL1NvE

Direct Mail Design

Graphic | Print | UX thoughts

Ideated a new mail layout and applied it in the print mail pieces in the 2016 nonprofit fundraising campaign.

December 2016