The Challenge
I evaluated Depop’s list-an-item flow using Nielsen Norman’s 10 usability heuristics.
I made changes to screens in order to solve usability issues.
Confirmation Screen
Heuristic:
Error Prevention
Problem:
There is no confirmation screen before a user posts their listing.
This is especially important since this post involves a potential monetary transaction.
Solution:
I designed a confirmation screen so the user can review their listing before making it live.
Before
After
Filled States, Categories
Heuristic:
Visibility of System Status + Error Prevention
Problem:
There is no clear distinction between categories that have been filled and those that have not.
This can lead to users trying to move on without filling all necessary inputs.
Solution:
I created filled states by adding a check mark icon and increasing text weight of filled categories.
Before
After
Disabled “Next” Button
Heuristic:
Visibility of System Status + Error Prevention
Problem:
The next button is in its default state even when all necessary form fields have not been filled out.
This increases the chance that a user tries to move on before completing the necessary steps.
Solution:
I created a disabled state for this button by reducing the brightness of the button.
Before
After
Empty State, Condition Category
Heuristic:
Error Prevention
Problem:
Condition category comes automatically filled out as soon as users lands on this screen.
This increases the chance that a user posts a listing with the incorrect condition.
Solution:
I fixed this error by creating a default state that was not pre-filled for the user.
Before
After
System feedback, Checkmark
Heuristic:
Visibility of System Status
Problem:
When entering price of product there is nothing to indicate to the user that they are on the right track or what to do next.
This leads to confusion for the user.
Solution:
I fixed this error by adding a checkmark in the top right corner once the user has entered something for the price.
Before
After
Icon Labels
Heuristic:
Consistency & Standards
Problem:
Bottom navigation icons lack labels.
These need to be included as a standard especially since left most icon & middle icon look so similar
Solution:
I added labels below each icon to increase clarity.
Before
After
Error State, Image Upload
Heuristic:
Recognize Diagnose & Recover from Errors
Problem:
When a user tries to move on without adding a photo, there is no error state for image input.
Solution:
I added a red stroke to image input. To further increase clarity I increased brightness and weight of error message.
Before
After
Key Learnings
Heuristic Evaluation Summary
Patterns Observed
Error prevention was the most violated heuristic in this evaluation.
This stemmed mostly from a lack of disabled, error and filled states for form fields.
Adding each state to all form fields would make this flow much more intuitive and result in users completing the task quicker.
Top Priority
The most vital suggested change is adding a confirmation screen.
A confirmation screen is extremely important for this flow since users will be posting a listing that will include a monetary transaction in the future.
Preventing mistakes before the listing is posted is vital in this use case and will reduce friction in scenarios where users made mistakes when initially filling out the listing form.
Lets keep the conversation going!
linkedin.com/agathamolchanov
agathamolchanov@gmail.com
©2024 by Agatha Molchanov.