TEDx Media Uploader

UX Design
An tool that TEDx organizers worldwide use to submit talks to TED for publishing.

TED Conferences

June 2021 - August 2021

Team Size: 4
What: TEDx means independently organized TED events. TED requires all organizers to submit their event's talks for reviewing and publishing. Over 25,000 TEDx organizers worldwide use this tool to upload talk videos after an event.
Why: After several user-reported bugs and issues, this interface needed an upgrade. I redesigned this interface.
What I learnt: Iterating on a product with a global impact and working alongside senior engineers and PMs.

Introduction

TEDx means independently organized TED events. There are over 25,000 TEDx organizers globally. TED provides them with a suite of digital tools to manage and run their event smoothly, while remaining in communication with TED.

One such tool is the media uploader, an interface used by organizers to submit talk videos to TED for review and publication. It works in sync with another tool, the Event Manager, where users input information such as speakers, schedule, etc.

The interface was outdated and had several user-reported bugs that I came in to address.

Problem Research

There were three main problems captured in the bug report:

Editing after submission: The tool collects meta data from the users about the videos so the publication pipeline to YouTube can be made smoother. These details include talk title, speaker names, talk description, tags, etc. Currently, the tool does not allow users to edit the input data upon submission. Users contacted the support team very frequently asking to edit their submission, not realizing at the time of uploading that their submission would be final.

Double population of speaker bios in YouTube description: Remember the Event Manager I mentioned earlier? It collects data about the speaker (their name, bio, etc). When uploading a talk this information is used to fill in metadata about the speaker. Users, not realizing this sync between the two systems, add another speaker bio in the talk description, leading to two instances in the final YouTube description.

Custom thumbnails: Users requested the ability to upload custom thumbnails along with their talk videos.

I did an audit of the existing interface to understand other problem areas:

Original home screen with my notes overlaid

The Video Component

I created different versions of the component that represented a single video that was being uploaded and all the input fields alongside it. Here are some examples:

Different designs for the component that represents a single video that is being uploaded

I considered the speaker bio double population problem from different angles and tried to address it using a variety of design solutions: note at the bottom of the description box, auto-population of bio as soon as a speaker is selected, etc. To minimize a jarring effect while providing information, I discarded auto-population and kept the note disclaimer.

The Preview Screen

Ultimately, a lot of the problems in the interface could be boiled down to the following: a misalignment between what the user thought their final video would look like on YouTube based on their inputs versus what it actually was. To resolve this, I included a "preview" screen in my design. Clicking a preview button does not require the level of commitment as entering a submission flow while calibrating the user's mental model with how the system behaves.

Different designs for the preview screen that represents a single video that is being uploaded

The Submission Flow

Users kept returning to TEDx customer support with edits they wanted to make to their submission. While a possible solution could have been to simply provide editing functionality, from a product perspective we decided to not go down that route.

Instead, I decided to minimize how much a user would require editing by creating a stronger submission flow. Originally, when you click the "submit" button, a pop-up asks you to confirm, and that's it. I redesigned this flow to include a review modal (similar to the Preview screen), a rules compliance modal and finally a confirmation modal. In addition to that, I redesigned the way a "submitted" video appears on the home screen, hiding all the input fields and instead showing only the data, giving it a look of finality.

The goal with an extensive submission flow was to reinforce information at every step, encouraging the user to double-check input data, eventually reducing the need for later editing.

The screens a user goes through when attempting to submit a talk video

Final Prototype & User Testing

You can walk through the final prototype created on Figma here. With this prototype, I created a usertesting plan to validate ideas before we handed off to development.

All of our participants were able to conclude that no editing would be permitted after submission, although some still had some trouble understanding the speaker bio situation. We hope that further iteration and testing would help clarify the system better to users and reduce errors in the future.

Summary

The TEDx Media Uploader is used by thousands of users globally and needed an upgrade. It had several UX issues, such as users not understanding the way information is brought in from the Event Manager, users wanting to edit data after submission and finally some feature requests.

I redesigned the interface to give it a face-lift and bring it up to speed with TED's most recent design system, include a preview screen that allows users to visualize their submission before having to go through with it and finally add a stronger submission flow that reinforces information and encourages fewer errors.

Navigating these problems was complex for a few reasons: I had to gain an in-depth understanding of the product and the larger TEDx organizer flow to concentrate improvements on a single interface. I had to work closely with engineers, PMs and the TEDx stakeholders to better define the problem space, understand feasibility and iterate on solutions.

If I had more time during my internship, I would have conducted some A/B tests in production to validate and iterate on my solutions. I would have designed more specific micro-interactions for certain flows that would increase usability. I would have also interacted more frequently with the stakeholder team to challenge assumptions our team was making about the system.

<--- View Previous
Back to Top
View Next --->