2020 • Marketplace on FB App, iOS & Android
Overview
One of our key goals as the Seller Platform team was improving the performance (reducing load time, bugs, crashes) of Your Listings, the inventory management page for sellers. I saw a rare opportunity to improve the user experience for our shipped/more frequent seller segments if we were rewriting the code from scratch anyway. What inventory management tools were they lacking since this page was originally designed for local pickup C2C sellers?
Team:
Designer | Product Specialist | PM | 1 Engineer • 6mo
Our product team lacked UXR at the time, so I worked with our product specialist to understand user pain points and needs triaged from bug reports instead. Even without research, I could intuit many improvements on my own and design a few experiments with my team to test.
Inventory Management
Problem: Hard to Find Listings
Hypotheses:
Density matters: you can see at most ~3 listings/viewport in the before state, having to scroll more.
Searching is faster: if sellers are looking to manage specific listings, let’s implement search and filters to get them there as fast as possible for those with too many listings to scroll.
Bulk management matters: for sellers with many listings, taking actions on multiple listings at once is extremely valuable.
As a platform team designer, I also had an operational issue: every team adding a new seller action meant that we would have to show that action in one of these CTAs — and rerank the importance of this new action against our existing actions. This would lead to infighting between our teams with my platform team trying to arbitrate, which was not a scalable solution. Could we remove these CTAs and have a win-win for density and operational efficiency?
Iteration: Density Exploration
I created and moderated a day-long workshop at the end of H1 with seller-facing designers across Marketplace to understand the breadth of seller needs for listing management, resulting in design concepts with cross-team alignment to kick off this redesign execution in H2.
Density tests — understanding the tradeoff of removing CTAs and getting in more listings per viewport. Listing actions would be moved to the ••• menu and be standardized in order, reducing cognitive load.
Final UX —
Grid View & Bulk Manage
View Options:
List View: increases density from 3 to 5 listings per viewport
Grid View: ~15 listings per viewport and introduces access to bulk management tools.
Bulk Management:
Sellers can multi-select listings to bulk manage listings.
Filtering is available to find specific listings if needed.
Actions available depend on listing status. The most common will be “Delete Listing.”
Search & Filter
Search:
Entrypoint: button in page header from company design system.
Typeahead: matching pattern of other app search experiences.
Filters: (Borrowed from MP Buyer Experience)
Entrypoint: borrowing MP’s buyer experience entrypoint.
Selecting filters: “Any” is the default selection; when you change your selection, you may either see filtered listings or reset.
Filter Button State: the filter button itself shows how many are active.
Build Constraints
Working with my team’s engineers, I had to concede several pieces of the original design for both increased performance and time constraints against our other projects for the first launch. These included:
The large type header component with button entrypoints for search and composer
Grid view and bulk management actions
Removing CTAs entirely — we were able to pair CTAs on the same line if copy fit.
Shipped screens.
Results
We launched this new inventory management page with infinite scroll, search, filters. Together with massive performance improvements from the new code, we saw these results:
+2.5%
increase in onboarded C2C shipped sellers
+6.8% / $4.8M
increase in boosted listings legal revenue,
adding $4.8M annually from new layout and infinite scroll capability