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.
UX design: Researching requirements, ideating, and creating prototypes.
Project management: Planning, coordinating resources, and leading two developers.
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.
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.
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.
Time was limited, but the research step was indispensable. I’ve mainly done these 3 parts of research.
From the discussion with the marketing department, I’ve known that
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.
By analyzing the past clearance promotion data in Google Analytics and conducting the expert review for the previous solution, I identified these problems:
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.
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.
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.
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.
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.
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.
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.
By synthesizing the analysis above, I finally got these detail requirements:
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.
The original filter for the mobile is a button which can trigger out a filter drawer panel.
If we apply the extend mode for the strong filter, the filter would be like below.
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.
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.
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.
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.
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.
This is the minimal development requirement. The category filter should be added. And the mobile filter's UI should be changed.
This is the expanded version of the regular filter. Only the desktop version has this module.
This is the expected vertion that can meet the minimal requirements. This version is expected to be complete on week 5.
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.
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.