https://drive.google.com/uc?export=view&id=1vI9ddMEH-t6SRHCCSUqN55NdnAegzlhT

E-commerce Clearance Page Design

July, 2018

Overview

The company needed a clearance page to sell over 400 items for its semi-annual sales. Recognizing the poor product filtering experience, I expanded the project from a webpage design to include site-wide filter function redesign. See the live site here.


My Roles: UX/UI design; Project management

Time Frame: 6 weeks

Challenge And A Defective Solution

It is crucial for e-Commerce companies to move stale inventory through various sales promotions. A good sales turnover goes hand in hand with a well-designed web page. This page's main task and also the main challenge is to help users narrow down the product catalog by their preference. The original clearance page was a simple product list page. It met users' basic needs for browsing products.

The original clearance page
https://drive.google.com/uc?export=view&id=1cLsRJc1ox_vUTiFJkfedMrWjV4nyRcH8

However, with the increase of the clearance products, users were less likely to find something they wanted and available because:

  1. Many products were short in sizes and colors.
  2. The filter provided limited functionality. (e.g. lacking the category filter)

To solve this problem quickly as required by the marketing department, an expedient solution - a landing page - was created. Customers needed to choose a category and sizes first in the landing page, and then they could see the filtered result in another page.

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

Indeed, the landing page solved the problem to some extent. However, it raised new problems. So when the marketing department planned to redo the clearance promotion, I proposed to redesign it for better user experience.

Project planning

Only six weeks were allowed for creating this page. The project would use the agile design and development process. The timeline was shown below.

Research and Problems

After communicating with the marketing team, I knew that five product categories, over 400 kinds of products would be involved in this clearance promotion, which would take about 30 pages to display if no filter applied.

By analyzing competitive examples, I found that a clearance page usually includes promotional banners, filters, and display of products. Since the E-commerce is a relatively mature field, I would take advantage of this convention.

From Google Analytics's data, I knew that young females aging from 18~35 took up about 70% of all our customers. Their comparatively low income made them sensitive to the product price. So for the clearance page, we could highlight the "beautiful" price so as to make more sales.

At last, by conducting the cognitive walkthrough, I identified these problems:

  1. Users needed to take multiple steps at the clearance landing page to reach the product list page.
  2. Users could not switch category on the product list page. They had to start over from the landing page for a different filter search.
  3. Users could not access the clearance landing page without going back to the website homepage.

Complex redirects caused user frustration. So the task flow should be simplified and the interaction should be more intuitive.

Filter Research and Requirements Defining

The redirecting problem was brought up by the landing page. In order to radically solve it, I decided to remove the landing page. But without it, it became harder for users to narrow down the product catalog because of the weak filtering function. Thus, the key to solving the problem was to improve the filtering tool to provide users a better experience on finding a product. Since the filtering tool was a site-wide widget, I did a separate research and designed it systematically.

1. Showing filters by scenarios

Users have different levels of need for filters in different scenarios. I generally divided it into two types.

When users are browsing a specific category, the filter will be used as an inconspicuously auxiliary function. It usually occupies small space and shows in most cases. For better referring, let's call this kind of filters "The Regular Filter".

When users are browsing a complexed catalog, the filter will play a more important role and becomes more complexed and powerful. It occupies larger space and shows in special pages, so let's call it "The Strong Filter".

Let's take a look at Victoria's Secret's filters for example. The first picture shows the regular filter when looking at a specific category(Bra>Demi); while the second shows the strong filter when searching(Search>Demi).

When browsing: Bra>Demi
When browsing: Search>Demi

By inspecting our user flows, I found that showing filters by scenarios suits our needs very well. And the strong filter could be applied perfectly on the clearance page.

2. Filters’ customization

The original filters were 5 generic site-wide attributes. If we could add more filtering types like the category filter, and provided category-specific filters when a category was selected, it would provide users a better experience. What's more, we could optimize the filter sequence according to the Google Analytics's usage data. Below shows the filter's usage count in two months.

3. Sorting methods

The product list page provided 3 sorting methods: Recommend, Price high-to-low, and Price low-to-high. Adding more sorting methods, such as sorting by rating, discount, or arrival date, would be another way to improve the product browsing experience.

Discount percentage tags

The clearance page will mainly attract customers by the beautiful prices. If we provided more price related information such as showing the discount percentage, it could possibly increase customers' spending impulses. Afterall not all people are willing to calculate the discount when browsing products.

Requirements Summary

By synthesizing the research and analysis above, I finally got these primary requirements:

  1. Add the category filter and customize filters in different conditions.
  2. Apply scenario-based filter showing method.
  3. Provide more sorting options.

Other minor requirements were: showing discount percentage tag, making a sticky filter widget, exhibiting quantity indicator for each filter options, and showing a clearance promotion banner.

Ideation

The original filters were exhibited in a horizontal bar. In order to minimize the change, I inherited the horizontal showing method. So the regular filter for the desktop would be like this.

Regular Filter

For the strong filter, I planned to expand the filtering options so that they could get more attention and become more convenient to use. Also, if there was a promoted filter, it could be featured at the top, such as the category filter.

Strong Filter
Strong Filter - Featured

Mobile Design

The original filter for the mobile was a button which could trigger out a filter drawer panel, like shown below.

Mobile Filter
Mobile - Drawer Panel
Mobile - Filter Selected

Considering the small screen size of mobile, the regular filter didn't need to change. If we applied the strong filter on mobile, the filter would be like below.


Mobile - Strong Filter
...

From the angle of the consistency, the expanded filter should be implemented. However, considering the high cost - more screen space occupied, more cognitive burdens for new interactions, and more time for implementation, I discarded this idea and decided to just refine the UI of the original mobile filter.

Conceptual Design Review

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

Final Design

The Lo-Fi design took a week. Meanwhile, the filter customization metrics were correlated with the product data. Another week was taken for the Hi-Fi design. Besides generating the interaction and visual design, I also prioritized the developmental tasks and created the operating plan. Below are detailed four implementation steps.

1. The regular filter module

The category filter and more sorting options should be added. The mobile filter's UI should be modified.

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

2. The strong filter module

Only the desktop version would have this module.

Desktop Strong Filter
Desktop Strong Filter - Selected

3. The clearance page

The clearance page would contain the strong filter module with the featured category filter and other components. The featured strong filter was the minimal developmental requirement, and was expected to be completed in week 5.


(Now, it is alive. You can try the online version HERE.)

Clearance page - Desktop
Clearance page - Tablet
Clearance page - Mobile

4. More features

If the main functions had been implemented on time, more features would be added in the clearance page, such as the discount tag, and the sticky filter widget. What's more, the filter-related tags for Google Analytics should also be implemented for the future improvements.

Test and evaluation

In week 5, the expected version was 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.

Google Analytics is collecting the usage data. I will update the data result when enough data get collected.

Conclusion

With limited time and resources, we completed the project on time. The implementation is amazing. Planning in advance and communicating seamlessly is the key to the success. Thank Zihao for enduring my perfectionism when he was doing the front-end work. Thank Kai for completing the super challenging data and back-end work. Thank the tech lead and the 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