I’m a UX designer at JWP (the best online video platform in the world) on the Media Front-End team. We are sort of like traveling mercenaries, pitch-hitting solutions for other teams that lack front-end resources, but our most basic and sacred objective is to improve and maintain media flows.

I accepted a position on this team enthusiastically; not just because the team worked within my time zone but because this could be a way to accomplish my holy grail: giving our media upload flow a much needed makeover.

When I started this project, the upload page sent you straight back to 2012, having sat untouched for a decade despite being the most fundamental user experience in our dashboard. Uploading media should be kind of exciting, but as of the beginning of this project it just felt kind of weird and disorienting.

Problem 2:
Editing metadata takes forever

Our users need to attach metadata to everything they upload in order for it to show up in front of the correct viewers.But our upload flow didn’t include metadata at all— so editors would have to hunt down every newly-uploaded file in order to attach custom parameters and tags to each of them.

Separately.

"But what if they are uploading 100 files?" you gasp, scandalized. The answer: They'd better clear their afternoon 🙃

Problem 3: 
Can't leave the upload page OR ELSE

The user was required to remain in the same non-design-system-compliant, gradient-fill-having, no-clear-CTA, old-school dashboard page until the final item had finished uploading… or else their uploads would be irretrievably lost! 😱

I partnered with my team’s incredible product manager, Alison, for the research portion of this project. She conducted a really thorough round of competitive analysis for this feature, noting the presence or absence of 6 common features in competing products. From this, we learned about what a really great upload flow can allow a user to do.

It was the customer research, though, that brought the biggest surprises! By reading SERV tickets, talking with customers, and referring to the deliciously detailed persona needs maps made by my illustrious colleagues Sandra and Martina, we were able to contextualize the relative importance of the features discovered during Competitive Analysis.

About Jodie:

• Uploads videos that she then pops into her company’s website.
• Uses the dashboard exclusively— never touches the API
• Uses a lot of tags and key value pairs to organize media

She wants to:

• Waste less time editing metadata
• Quickly grab the media ID of an uploaded item to send to the CMS guys

About Jake:

• Uses the dashboard for live streaming and managing his team’s OTT video app
• Adds media by registering URLs from a licenser’s S3 bucket instead of uploading files
• Organizes media using Content Types, a JWP feature that creates metadata behind-the-scenes via a simple form

He wants to:

• Add media from URLs
• Attach a content type to media in bulk

What features do they really need?

The team huddled up and established what we could do to create a buttery-smooth upload workflow for Jodie and Jake. Just really hook them up.

Since this project had a due date, the limitations of both the API and human working hours had to be taken into account. See the “will not” column below. This is my favorite column. Getting consensus on no-gos ahead of time keeps expectations managed and prevents late-breaking “what if we”s in the late stages of a project’s development cycle.

Now that we had decided on a feature set, I created a flow that would adapt to the type of customer using it— providing slightly different experiences for Jodie and Jake so they only see options they care about.

JWP is lucky to have a pretty developed design system so the actual designs took shape pretty quickly. Here's how it all came together!

File and URL uploads are centralized in one easy-to-find place

Users can attach metadata before uploading their media— saving lots of editing time later!

Jodie and Jake are both responsible for applying metadata to the media they upload. The two of them do this in slightly different ways:

Jodie uses tags and custom parameters that allow her company’s CMS to serve media to the correct users.
‍

Jake uses Content Types, a proprietary JWP feature that creates a user-friendly form to organize media into shelves and playlists for their viewers.
‍

This metadata tile displays different fields for Publishing customers and Broadcasting customers, allowing them to apply metadata in bulk. This is a HUGE time saver, preventing the frantic one-at-a-time treasure hunt through uploaded media that was previously required.

Prior to releasing this feature to the public, we (myself and aforementioned PM Alison) rounded up 6 customers to test with. Having learned a lesson from previous user testing sessions in which bewildered managers were asked to perform tasks in a dashboard they never use, we were really specific that testers must be content editors who are familiar with the dashboard.

The tests revealed something I never expected— Nobody ran into any problems! Even our least tech-savvy customers! The tests went super smoothly and the product released with no big issues... UNTIL 1 day after the release when we got a panicked email from one of the customers that we had tested with. He HATED the new flow and it wasn’t working for him like it had in our testing session. We hopped on a call with him and watched what was happening:

• The mini-modal was closed by default so he had no idea that he could use the modal to click into his uploaded files
• The modal disappeared when he refreshed the screen
• He was refreshing the screen A LOT because he needed to access the media he had just chosen to upload, and because the mini-modal was tiny he couldn’t do it any other way

This was surprising because the product wasn’t supposed to do these things! As often happens, the engineers had done a little freestyling after we had tested the initial designs, and the changes wound up confusing the customers.

This angry customer ended up being a great gift to us because his confusion reinforced the strength of our initial designs. We were able to use this issue as evidence that we needed to roll back the last-minute changes and stick with the initial plan-- and users went right back to loving it!