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
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.
Only six weeks were allowed for creating this page. The project would use the agile design and development process. The timeline was shown below.
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:
Complex redirects caused user frustration. So the task flow should be simplified and the interaction should be more intuitive.
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.
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).
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.
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.
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.
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.
By synthesizing the research and analysis above, I finally got these primary requirements:
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.
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.
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.
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.
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.
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.
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.)
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.
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.