Executive Summary

Why have I chosen this project?

To showcase an integral change in design and tech patterns within the listing area that has significantly improved user experience, satisfaction and product metrics.
 

Context

Field suggestions or auto-population within Listing have not existed prior to this project. We were tasked to design a pattern and build this feature into the Listing flow.
 

Brief

To utilise machine learning and AI technology within the listing flow in a seamless way that will be helpful and faster for users to list. Creating a consistent suggestion or auto-population UI pattern.
 

Opportunity

Being one of the first teams in the business with ML resources, I was tasked to set out the design pattern for ML and AI use through out the Depop iOS app.
 

Process

💡
Discover
  • Field inputs audit
  • User journey
  • Competitor Analysis
 
📝
Define & Explore
  • Ideation
  • Prototype
  • Concept & Usability test
🧪
Develop & Test
  • Experiment
  • Iterate
🚀
Deliver
  • Results
  • Launch

💡 Discover

Prior to this project, we have used visual AI technology from an external supplier to predict product detail fields from photos that users uploaded when they list. And more recently we have acquired a new team member who specialise in machine learning who builds and tests ML models within the listing journey.

Field inputs audit

In collaboration with engineers in the team, I’ve audited each field’s inputs and decided which field would use which technology.
The different paths to field population includes:
  • 📝 Text-based Machine Learning
  • 🖼️ Photo-based visual Artificial Intelligence
  • 🔃 Based on past listings
📝 Text-based ML
⬅️ Taken from: text that user inputs into Description field
➡️ Fills in: Brand, Category, Condition, Size
🖼️ Photo-based visual AI
⬅️ Taken from: Photos that user uploads when listing
➡️ Fills in: Colour, Style
🔃 Based on past listings
⬅️ Taken from: Previous listings inputs
➡️ Fills in: Location, Address

User journey

The current user journey involves 10 mandatory steps and 7 optional steps.
Steps starred(*) are great candidates for text-based ML suggestions.
 
TASK: List an item
  1. Add photos
  1. Add description
  1. Select category*
  1. Select brand*
  1. Select size*
  1. Add quantity
  1. Add item price
  1. Add domestic shipping price
  1. Add international shipping price
  1. Add item location
Depop — Listing Screen & Steps
Depop — Listing Screen & Steps

Setting clear intentions ➡️ Scope

Mission Statement
✨ Make it easier than ever to effectively list desirable items. ✨ 
 
Starting with the team’s mission and objectives for the quarter, we made clear that:
→ We want to make the experience more intuitive and ‘smart’ for our users.
 
MVP
We want to benchmark our tech to our competitors.
 
Post MVP
We want to do better, populate even more fields accurately.
 

Problem statements

  • As a student who lists their unused items on Depop, I need to be able to list my items quickly as I am time poor with other activities I have going on in my life.
  • As an entrepreneur who cross lists on multiple platforms, I need to be able to efficiently and accurately list high volume of items everyday as I have a large amount of inventory.

User Research

Existing research suggests that:
  • Users expect Depop to auto-populate or provide suggestions when form-filling/listing as our biggest competitor’s listing flow allows this. ie. Vinted
  • Users expect listing on Depop to be a lot quicker and less ‘clunky’ and ‘buggy’ overall.
 

Data

We know that it currently takes users too long to list on Depop.
Average speed by user group:
  • New listers 6 minutes (0-3 live items)
  • Casual sellers 3.5 minutes (3-9 live items)
  • High volume sellers 4.4 minutes (9+ live items)
 

Competitor Analysis

Vinted — Listing
Vinted — Listing
Looking at our biggest competitor Vinted, we can see that they have opted for a more subtle approach in their UI when surfacing suggestions. ➡️ ➡️ ➡️
  • Up to 3 suggestions are available for users to choose from
  • Popular brand are surfaced below this
⚠️ VS Depop’s current state being an alphabetical list of brands on this particular screen in the flow.
 
Vinted — Brand Suggestions
Vinted — Brand Suggestions

Hypothesis

With all the information gathered and data at hand, I crafted a hypothesis in agreement with the team to start my ideation process.
Hypothesis
Hypothesis

📝 Define & Explore

Ideate

Starting off with sketching out ideas of how the patterns may work
Ideation — Suggestion VS Auto Populate
Ideation — Suggestion VS Auto Populate

Comparing 2 Patterns

Thinking about the front and back end systems and what the user will need to do during these 2 different patterns. Auto populate may require few clicks but suggestions may be more accurate for users as a design pattern.
 
User Journey — Suggest
User Journey — Suggest
User Journey — Auto-Populate
User Journey — Auto-Populate

Prototype / Designs

Suggestion
Prototype — Suggest
Prototype — Suggest
✅ By surfacing options we believe the user might input, this reduces time to find the actual value.
✅ Covering our bases through surfacing valuable suggestions but not populating values straight away incase they are incorrect.
⚠️ An extra click or step to consider when selecting a value to input.
Auto-population
Prototype — Auto-Populate
Prototype — Auto-Populate
✅ It is the quickest way to populate a field.
✅ The user may perceive the product as smart and experience delight using it.
⚠️ The user may miss this action happening all together. So although Listing Completion metric may be higher, the listing itself may be inaccurate.
🔴 The value may be incorrect, therefore unhelpful to the user.

User Research

In collaboration with User Research I initiated a concept test to understand our users perspective on the two types of patterns: auto-populate and suggestions.
 
✅ Users find the auto-populate variant ‘innovative’ and ‘saves time’.
⚠️ Some users raised questions about how accurate the data may be and what would happen if they missed it being filled (auto-populate variant).
Summary of concept test — Suggestions VS Auto-Populate
Summary of concept test — Suggestions VS Auto-Populate

🧪 Develop & Test

Experiment A — Brand Prediction Model

To quickly test our hypothesis, we decided to start this text-based ML prediction project off with testing the most obvious text prediction of all, Brand. Which in most cases, users would input into their text description when listing an item.
We tested both the suggest and auto-population patterns in the effort to increase our listing completion metric, which adds up to our company-wide Better Matching initiative. Working closely between buyers and sellers side of the marketplace to ensure users finding the right items they’d like to purchase.

Hypothesis

We believe that by making it super easy to populate brand information from the description field, we can increase listings with brands adopted, and in turn, over time, increase brand coverage of our inventory.
Prototype — Brand Prediction Test
Prototype — Brand Prediction Test

Results & Conclusions

Win on the auto-populate variant, by populating brands from description we increased metrics below:
✅ +9.8% on listings with brands selected
✅ +4.28% on complete listings posted
✅ +2.37% on items sold
🔧 Moving forward, when predicting future attributes we will consolidate the patterns to match the listing experience as a whole.
 

Experiment B — Visual AI Blue Pills

This experiment involves photo-based visual AI technology. When thinking about the listing task as a whole, we have existing UI components in the form of selection pills as seen in the images here.
Consulted and in agreement with the wider design team, I’ve decided to implement suggestion pills as a new addition to the design system as part of this work for suggestion patterns.
 

Hypothesis

We believe that using Visual-AI technology will aid in streamlining the attribute input/selection process and increasing Complete Listings Posted as a result.
Prototype — Blue Pills: Style Section
Prototype — Blue Pills: Style Section
 
Prototype — Blue Pills: Enhance Section
Prototype — Blue Pills: Enhance Section
User flow above shows how the journey works in action: Suggestions appear from photo data input, it is then available for the user to easily and accurately select each attribute to complete their listing.

Results & Conclusions

We were able to significantly improve listing completion while keeping listing conversion flat.
With time to list going up as users are taking more time to get familiar with the feature and deciding to adopt attributes. It is an interesting metric to balance as more accurate listings are favourable but we also should be wary as we also want to make it quicker and easier to list at the same time.
✅ +51% Completed listings posted
⚠️ +12% Time to list
 

🚀 Deliver

Combining learnings and iterations from previous experiments, involving the team to consolidate and critique which method/pattern we should go for as the final solution. I was a strong advocate for choosing only one pattern and most of us preferred the suggestions pattern as the best solution for our users.

OLD vs NEW

Before 👵🏻
notion image
 
New Design ✨🆕
notion image

Experiment results

  • ✅ +7% Listings with colour selected
  • ✅ +22% Listings with style selected
  • ✅ +9.8% Complete listings posted

Next steps

  • Health metrics and design feedback are both very positive. I will continue to iterate from the data and in alignment to team goals.
 

Learnings

What went well

  • Designing new component states in consideration with current states and collaborating with other designers to decide on which to build.
  • Doing multiple small experiments to learn quickly felt very lean and I worked very closely with front end developers on the new components. And also ML engineer to learn more about how these models work.

Things to learn from 📈

  • Doing multiple small experiments in the start was helpful for quick data to understand how users are responding to new features. However it was challenging to incorporate different findings to come to a final decision on which pathway of pattern to go down as it will dictate how this flow may look like in other areas of the app as well.
badge