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.

Zina Szőgyényi
Sep 4, 2018 · 6 min read
Image for post
Mandatory unsplash photo so the preview looks good

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.

Image for post
Before: The box of tips is visible on the right side of the drop area

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.

Image for post
Etsy’s product photo upload solution

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.

Image for post
After I upload two photos they push the upload CTA further away

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.

Image for post
Screen recording of the multi-drop zone photo upload page

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.

What do you think? What would have been your solution? Will you try this one at home?

Tripaneer Techblog

The Tripaneer technology blog

Thanks to Mário Silva

Zina Szőgyényi

Written by

A Digital Product Designer, traveler with addiction to fitness, based in Ottawa, discovering new places, foods and craft beers

Tripaneer Techblog

The Tripaneer technology blog

Zina Szőgyényi

Written by

A Digital Product Designer, traveler with addiction to fitness, based in Ottawa, discovering new places, foods and craft beers

Tripaneer Techblog

The Tripaneer technology blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store