Executive Summary

Why have I chosen this project?

To highlight prioritisation conflicts and overlapping goals and objectives that often occurs between UX and product.
 

Context

The listing feature on Depop still remains in legacy code where designs have not evolved too much since the app’s launch in 2011. Within my first few months of joining, I’ve helped the team identify and prioritise the most impactful UX fixes to tackle, one of them being the lack of inline errors in the listing flow. This causes a lot of confusion for users to complete the task to list.
 

Brief

Create Depop’s first set of inline errors in the Listing flow. With consideration to both FE and BE errors.
 

Hypothesis (Product)

We believe that by introducing inline errors in the listing flow, we can decrease time to list and increase listings.
 

Process

💡
Discover
  • Team kick off
  • Usability test
  • Data analysis
  • User journey audit
  • Copy audit
  • Problem statements
📝
Define & Explore
  • Feature breakdown & Prioritisation
  • Competitor Analysis
  • Ideation
  • Critique
🧪
Develop & Test
  • Iterate
  • Prototype
  • Hand off
  • Test
🚀
Deliver
  • Results
  • Iterate
  • Launch

💡 Discover

Problem ➡️ Opportunity

🤨 As a user, when the difference between mandatory and optional fields are not clear and I’m trying to list an item, I need to use the method of trial and error to complete my listing.
↖️ This problem was addressed in a separate EPIC
🎯 Make the difference between the 2 types of fields more prominent, balancing this with data consideration to wants and needs fields. Eg. some fields help with search on buyer side.
↖️ This opportunity was addressed in a separate EPIC
🤨 As a novice user, the first listing experience feels long to complete because the listing flow only alerts my errors one-by-one when i want to complete my listing.
🎯 Show all errors to fix at once, but not in an overwhelming way.
 
🤨 As a user, it is not clear to me where I need to go to fix the errors i’ve made, therefore i have to scroll to find the problematic fields which then makes the listing process even longer to complete.
🎯 Clearly highlight where the error is eg. use the colour red
🎯 Guide users on how to fix the error with clear and concise copy.

User Research

A usability test was done prior for the Listing team focusing on the List an item task.
One of the priority issues that came up also included tackling errors.
notion image
 

User Journey Audit

UI before inline errors
UI before inline errors
The current live experience did not consist of any inline errors to help guide users to complete their listing task.
→ Users would trigger errors which looked like iOS backend errors when they clicked the ‘Post Listing’ button.
→ Each error would also only appear one at a time.
→ The field of error was not highlighted for the user to ease the resolution of the error.
 
 

Copy Audit

Collaborating with iOS Engineer and BE Engineer to identify current errors in the system and rewrite them alongside UX Copy Writer to fit the current end to end experience.
Audit list of live errors
Audit list of live errors
 

📝 Define & Explore

MVP

✅ Highlight error at specific field
✅ Guide users on how to fix error
✅ Errors appear when user tap to ‘Post Listing’
🚫 Errors appear as and when users fill in each field and makes an error
 

Competitor Analysis

Direct
Vinted — inline errors by field clearly annotated
Vinted — inline errors by field clearly annotated
eBay — iOS alert about resolving errors and individual fields also highlighted with copy to guide fix
eBay — iOS alert about resolving errors and individual fields also highlighted with copy to guide fix
FINDS — Floating error banner which disappears after a delay
FINDS — Floating error banner which disappears after a delay

Ideate

I started off with looking into our design system and also at similar use cases that already existed within the app eg. onboarding errors, then started sketching some potential solutions.
Sketches for inline error design with consideration to existing app patterns
Sketches for inline error design with consideration to existing app patterns
 

🧪 Develop & Test

Prototype

Inline Error — Prototype
Inline Error — Prototype
 

This design aims to:

1️⃣ Notify users of any errors when they tap the action to ‘Post Listing’
**The button will only turn enabled when all errors are resolved
2️⃣ Highlight the error at specific field level
3️⃣ Guide users on how to fix the error with concise copy
 

Validate

Control VS test design
Control VS test design
Before experiment, average time to list was 10m16s. This is a lot longer compared to direct competitors.
To validate the hypothesis, we ran an Optimizely experiment with 50% on iOS, Global users.

Experiment results

✅ Flat on all listing conversion metrics
✅ Time to list -21.1%
 

🚀 Deliver

Key takeaways

  • This added feature will make the experience of form filling within the listing screen so much more fluid and up to date to current patterns available in similar products.
  • We’ve reduce time to list by 21.1% from 10m16s to 8m6s, there is still a long way to go in terms of reducing time to list and the addition of inline errors is a taking the team on the right path towards this goal.
  • We’ve reduced confusion when listing and made the process a lot clearer to users overall.
 

Next steps

✅ Full release, including hold outs.
🪄 Monitor qualitative data through other research tasks which involves list an item task and iterate if needed.
🪄 Work on mandatory vs optional fields EPIC, differentiating between these types of fields will further help users list better, without second guessing themselves.
 

Learnings

What went well

  • After getting this work prioritised I had so much support across the board that it was an impactful piece to focus on. I’ve got great buy in early on and it really helped with cross team collaboration alongside Copy and Engineers. As colleagues agreed it was an important problem to solve urgently.

Things to learn from 📈

  • It took far too long for the work to be prioritised as it was a very functional fix which can sometimes not be the most top of mind in terms of product release priorities. I’m very glad that I kept advocating for it to be worked on as I truly believed that it was a very essential fix to improve the listing experience for our users.
 
 
badge