A Photo Upload tool: invent the UX patterns, don’t follow them
In a previous story I talked about how I managed to resolve the issue of multi-selecting from a very long list, which happened to be the second step of the listing creation process facing our providers. The same process had another challenging point: the lack of variety of the uploaded photos.
Our content quality team, who reviews the provider created listings kept requesting them to upload more photos in certain topics, because they found the uploaded ones insufficient to publish the listing. This doesn’t only delay the time to put the content live, but also costs more editing resources.
What can I do on the product side to improve this?
Back in the days when we developed this process we added tips to guide the providers on the way. The information is there of what kind of photos we were expecting but no real restriction on the uploaded images themselves. And we know people do not read. So I had to find a more visual approach.
After doing research at some competitors’ and other significant players’ websites I found Esty’s solution the friendliest: they have a grid of examples which show what type of photos shall you upload of your product.
Too bad it’s only a visual gimmick, you can’t actually drop your relevant photos onto the designated drop area (it could feel like completing a puzzle, which is fun). As you add the photos they just start covering the helper icons and push the “Add a photo” call to action to the right.
It’s only visual, not functional, but it got me inspired.
What if we would have multiple drop areas for the different photo categories?
Whoa that’s a bold idea. Let’s do a little risk analysis before we jump in:
Cons
- not an existing UI pattern (or at least I haven’t seen it anywhere while researching), it could take a lot of brain bandwidth to process
- it could cause issues with the sorting if we separate the upload groups
- it could take longer to upload the photos, more providers might drop out of the process
Pros
- clear visual clues, providers don’t have to read the tips to know what we expect from them
- we can set restrictions on the number of photos uploaded per category
From the initial risk analysis it seemed that the pros and cons balanced each other out, so I gave the green light prioritizing the story and scheduled it into the next sprint.
Of course the little UX-pattern devil sat on my shoulder, telling me that it’ll be an instant failure. The angel on my other shoulder kept encouraging me that as long as we keep monitoring our relevant metrics and we understand what they mean everything will be alright.
So I put together a really quick prototype of the desired functionality and passed it on to our developers to build it.
Putting the actual multi-drop zone photo upload tool together wasn’t nearly as easy as the prototype itself. The original script was not ready to deal with multiple sources, multiple buttons, and saving extra information, such as the category the image was dropped to.
Two developers gave up on it, almost three times.
As a designer it’s one of the most painful feelings, acknowledging that your amazing idea might not be feasible. I did believe in the idea and wanted to see the results of a test, but not at all costs.
I sat down with the developers to find out what the main showstoppers were, and we adjusted the idea to something that still serves the original purpose and is deliverable within a reasonable amount of time.
Big thanks for xandi and Mohamed Samir Mohamed for hanging on!
The test, the metrics and the result
As the traffic exposed to the test was pretty small, we kept it running for about a month. Most of the recorded quantitative metrics were very unreliable with such a small test group (300 users in both variants), so we decided to seek qualitative feedback to bring to the table.
Before the test I picked the number of uploaded photos and the amount of providers getting stuck on this step as the main quantitative metric, and the feedback from our editor team as qualitative metric.
When the test ended this amount of information seemed to be not sufficient to make a good decision. The difference between the number of uploaded photos was not statistically significant (14 in the single zone vs. 16.6 in the multi-zone), and I wanted to find a few more metrics that could help me see the bigger picture.
Luckily, we record when an editor asks for photos with more variety, and the total number of requests for more photos were 40% less in the new variation! The feedback from our editors also reinforced this metric:
“I can also say that I haven’t used the improvement point for photos too much in the last 3 weeks either, compared to the past. “
“I also noticed that I used less improvement points for photo and do notice the variety of photos added is better now. I could say that I only use the photo improvement point to ask the organizer to provide better quality of photos.”
There was one metric which I wasn’t really comfortable with: the amount of time it took for providers to complete this step. Compared to the old version’s 14 minutes (including uploading, cropping and sorting) it increased to 26 minutes… Almost doubled.
Some increase makes sense, since now they have to browse their files 4 times, picking the relevant ones, instead of just going into their browser once and selecting all. But almost double the time?
This was the time to look into the engagement.
I watched all the inspectlet recordings to find out if there’s any struggle. I checked the drop out rate of this page. I digged deep into the feedback loop we integrated into this page for negative feedback. And I didn’t find anything. No struggles, no unhappy emojis. They just spent more time on it, to categorize their photos.
It seems that reducing the time spent on a step doesn’t always relate to better user experience and content quality.
Why the multi-drop zone photo upload works?
There are some persuasion techniques I applied in my original idea, which could have something to do with the result.
Set completion
The closer a collection is to being complete, the more we desire collecting all pieces — the fact that this is the last step of the process, the users wanted to complete it, that’s why there was no higher drop out rate.
Pattern Recognition
Our brains seek ways to organize and simplify complex information, even when there is no pattern — we gave them 4 drop zones, which is new, but the pattern and design was the same as it used to be, therefore it seemed to be less unconventional.
Appropriate Challenges
We delight in challenges, especially ones that strike a balance between overwhelming and boring — completing 4 fields with a few photos each is not much extra work compared to one big field. The investment is a little higher, but not too massive.
I would love to make it even more playful and look a bit more like a game, similarly to Etsy’s approach. As a follow up I’ll try to illustrate the drop zones with some icons, so the providers will need to read even less.
