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.