Multichannel Listing Tool
E-commerce Startup | Sole Designer & Researcher
OVERVIEW
I revolutionized the user experience for online resellers and brands to list products faster and more accurately across multiple sales channels, reducing offer listing time by 90% and minimizing publishing errors by 80%.
As the sole designer, I led this project end-to-end, collaborating with PMs, engineering, customer support, sales, and customers to gather requirements, research, and create iterative designs for the MVP, which I oversaw.
This project involved updating workflows for adding single products, bundles, and variations, while also developing their first design system and updating other parts of the product.
background
As part of our acquisition strategy, stakeholders aimed to boost user engagement and conversions with a free trial. The main product offering of listing products to multiple sales channels was fraught with challenges.
Non-Intuitive Workflow: The existing workflow caused many customer support requests and a growing backlog of tickets.
Poor UX: This led some customers to leave and others to avoid the UI, relying on file uploads and downloads for product management.
High Error Rates: Users encountered publishing errors 80% of the time.
ORIGINAL STEPS TO MANUALLY LIST A PRODUCT:
Create products from the Product Workspace.
Stage products as listings.
Complete the product listing information.
Publish the listing to each channel separately.
I stepped back to understand the broader context of the user’s goal. After reviewing the manual product listing process, I created a high-level customer journey map to help my team empathize with users, identify interactions, and analyze pain points in the user journey.
To address these issues, the PM proposed starting with improvements to the initial product addition step, to make the interface easier for trial users.
RESEARCH & DISCOVERY
As a newcomer to the team, I dove in to learn more and uncovered several key insights that validated our direction.
My research highlighted the growing need for customers to create unique product listings from scratch rather than finding existing products on a sales channel to resell.
KEY RESEARCH TAKEAWAYS:
Streamlined Guided Approach: Users disliked seeing the bundle and variation tabs within their single product view when not needed. They said they knew the product type from the onset.
Unified Listing Process: Users viewed listing products as a single task, not separate tasks of adding their product catalog and then creating the listings, as the existing product was set up.
Avoiding Redundant Content: Users wanted to enter product and listing information once, have it cascade to all sales channels, and customize it if needed.
High Publishing Error Rates: Users were frustrated by the high percentage of publishing errors due to missing channel requirements, caused by poor UX and tech debt.
Goal
How might we design an intuitive user experience for “The Lister” to add and list products during a self-service trial?
ADDITIONAL GOALS:
Enhance Listing Experience: Improve the in-app listing experience for customers listing products on multiple sales channels, including new features, and preventing publishing errors.
Reduce Support Tickets: Decrease customer support tickets caused by poor user experience and errors.
Attract Trial Users: Design an intuitive interface that appeals to future free trial users.
I referenced the relevant ‘Lister’ user persona I had created soon after joining the company.
DESIGN EXPLORATION
I created a quick sketch to run by the PM, focused on making the workflow more explicit for users to add products by method and type.
MY PRODUCT ADDITION SUGGESTIONS:
Relocate the "Create" button to the front of the toolbar menu for better visibility and rename it "Add" to accommodate both methods (Search & Create).
Emphasize both methods equally, as our user base increasingly prefers creating products from scratch.
Display the three product types upfront to streamline the subsequent dialog.
Then I proposed adopting a UI wizard to replace the existing tabs in the subsequent dialog.
To guide users through all the required steps for publishing a listing, I suggested implementing a UI wizard. This would simplify complex tasks by providing a user-friendly interface, similar to those found in applications like tax software.
KEY IMPROVEMENTS OF THE UI WIZARD:
Structured Navigation: Main pages would be sections of the wizard, with tabs within these sections distinguishing between required and optional input fields. This would clarify listing requirements and reduce publishing errors.
User Experience: It would address a major cause of user frustration and errors by streamlining the process.
Since the wizard concept was new to this product, I integrated it within the existing design patterns of the web app, which resembled traditional desktop software rather than modern vertically scrolling pages.
I aimed for minimal changes to expedite the rollout and created low-fi wireframes to detail the wizard screens.
View an early workflow - includes adding an existing Amazon product, creating a bundle, and a variation set.
I continued updating wireframe flows based on continuous internal user feedback and PM requests.
ADDITIONAL FEATURE REQUESTS:
Ability to add multiple product images and reorder them.
Allow users to prioritize fulfillment centers per item.
Add a dynamic reference guide to help users price items.
Include a product listing summary on the last step before publishing to ensure major details are correct.
When I shared the flows with the dev team, they informed me that the order of operations in my designs wouldn’t work due to technical dependencies so I revised it.
There were technical issues and dependencies in listing different product types. For instance, variation options depended on sales channel categories, and the system couldn’t display relevant fields until a category was chosen. Additionally, the product title and SKU had to be saved to the backend before launching the wizard, with the SKU being uneditable after saving.
To understand the listing process and dependencies, I created flowcharts for the engineering team’s feedback. This helped me craft a reusable wizard component and streamline the flow for listing single, variation, or bundle products.
USER FEEDBACK
Customers were excited about the new design direction and inquired about its release timeline.
They also provided additional suggestions. To avoid delaying the release, the project manager and I discussed features that would be low effort for the dev team yet yield high rewards for the customer.
KEY FEATURES I INCORPORATED:
Category Shortcuts: Quickly categorize new product listings by selecting from their most used categories.
Recommended Fields: Break up non-required ‘optional’ properties into recommended and additional.
Price Field Additions: Add MAP and MSRP fields to the price page.
Further design exploration
I proposed modernizing the layout, but the PM prioritized resolving other pressing customer issues and resource constraints over this change for the MVP.
ONE OF MY SUGGESTED CONCEPTS:
FINAL DESIGN
My final designs incorporated feedback from customers, the dev team, and the internal managed services team to optimize the workflow and promptly deploy requested features. The new workflow effectively guided users through the listing process.
KEY BENEFITS OF THE NEW WORKFLOW:
Users are no longer forced to go through irrelevant steps.
Easy to complete all requirements for each sales channel and avoid listing errors.
Streamlined efficiency for setting global property and listing details, cascading to all channels.
Easy-to-find channel customizations located next to the respective global property.
An in-app dynamic reference guide to help users transparently price items for profit.
Preview what you’re about to publish, preventing mistakes.
Ability to publish to multiple sales channels at once.
Option to continuously add more products within the existing flow, saving time.
While I created wireframes and flows for listing each product type and listing method with all possible permutations, the examples below represent only the single product listing flow.
SINGLE PRODUCT FLOW & DESIGNS:
Impact
Customers were delighted! The updated design greatly sped up the user workflow and reduced publishing errors, underscoring the power of collaborative iterative design.
The new flow and designs were intuitive and efficient - users successfully published new listings quickly and more accurately across multiple sales channels, saving headaches and time for both customers and the customer support team. View a video of the released design.
WINS:
Offer listing time was reduced by 90%.
Publishing errors were reduced by 80%.
A backlog of support tickets was cleared & support calls were reduced by 20%.
10+ highly anticipated features were introduced.
LOSSES:
Due to the delays caused by the company acquisition, the release of the new product listing wizard took longer than expected. Although we deployed some incremental changes, duplicating some coding efforts would have allowed us to roll out more updates and new features to customers more quickly.
NEXT STEPS:
While reviewing customer videos for usability, I noticed a findability issue for editing custom properties. I quickly created a revised design to resolve this which we deployed soon after. View a video of the updated design.
Where do you want to go next?