new sort button

How I refactored the sort feature and why it was harder than I expected.

Time to read: 4 minutes

Table of contents

My role

Product designer

Year

2023

Timeline

2 weeks

Team

  • 1 full-stack engineers

Product

Zipsale – software for professional resellers in the UK.

Problem we solve:

Numbers: launched 3 years ago, hundreds of paying customers, 2,500,000+ listings made.

Task

Provide users with more flexible sort functionality.

Why users needed a new sort

We were about to launch a new paid feature that would allow users to boost sales.

To utilize this new feature users need to sort or filter their inventory by "listed at" date. The lack of a more powerful sort was a blocker.

Metrics I (would) have tracked

Adoption rate


What: The share of users who have adopted the new sort functionality

Why: To check if users are aware of the sort feature

Frequency of use


What: The average number of times users use the new sort functionality within a specific time period (e.g., daily, weekly, or monthly)

Why: To track if users find the new sort functionality valuable and are incorporating it into their regular workflows

Users' feedback


What: Qualitative feedback and suggestions provided by users about the new sort functionality

Why: The qualitative feedback coming from users directly can indicate their satisfaction with the new sort functionality

In reality, the metrics weren't tracked due to the lack of time and resources.

Researching sort in other products

The sort function is present in a lot of products already. I didn't want to reinvent the wheel. That's why I focused on e-commerce and no-code software with database functionality. Also checked out Dribbble and Behance.

Outcomes of research

  1. Notion as the main inspiration. Our product is data-heavy so I decided to use sort by Notion as a main source of inspiration.
  2. User-friendly wording. One of the design principles suggests reducing the cognitive load of UIs. Using "New first" instead of "Ascending" does that.
  3. Immediate vs action-based sort. Applying sort after clicking "Apply" is more user-friendly for cases with granular settings such as ours. It also implies fewer requests to our backend and was supported by our engineers later.

Brainstorming with engineers

After research, I had a general idea for UI. But are there any potential roadblocks? I approached our engineering team with two questions in mind:

  1. Is there anything I must consider engineering-wise when designing the feature?
  2. How to display all the dates without ruining the interface? I was stuck and needed help. See my initial idea below.

I wanted to provide users with feedback when sort is applied. But how to achieve it without cluttering the dashboard? At the moment, I couldn't come up with anything better than showing dates for all items and marketplaces.

Important info isn't avaliable at a glance

Ideas after meeting with engineers:

  1. We don't store dates needed to sort by listing date. The data need to be imported before we launch the new sort.
  2. One of the engineers suggested a brilliant idea: allow to sort within only one marketplace hence we need to show dates only for one marketplace. I decided to proceed with this solution.

Launching in stages

The rolling-out process wasn't smooth because of the tight timeline and constraints on the engineering side. Importing data for millions of items would be extremely resource-demanding so we decided to rollout the new sort for paid subscribers first. Stages:

  1. added sort for Ebay for paid subscribers only;
  2. added sort for Ebay for all users;
  3. added sort for Depop for paid subscribers only;
  4. added sort for Depop for all users.

I provided users with a tooltip explaining our future plans and current limitations.

Final design: before and after

Before

old sort

After

Key takeways

Lessons learned

Next steps

Other case studies