Internal Tool: Video Collection

role: UX designer

TOOL: FIGMA

DEVICE: DESKTOP

TIMELINE: 1 SPRINT

Background

Content Managers use an internal platform to manage millions of videos available worldwide on dailymotion.com. Collections are an important feature on the site that allows users to explore and discover videos but are time-consuming and cumbersome for Content Managers to curate. This project is focused on improving the collection management experience. 

How I started

The PM and I interviewed 5 content managers to understand the process of creating a video collection to identify pain points and opportunities.

What we learned

• Content managers don't always start from scratch when creating a collection. Instead, they often import videos from an existing playlist.

• New collections typically contain 2-5 videos

• Collections are time-sensitive and expire after a week

• Content managers frequently reuse expired collections

Goals

Help Content Managers:

• Create, edit, and manage a collection

• Manage videos within a collection

Problems

In the current content tool, changes are immediately pushed to the website (and visible to viewers) after the content manager saves their edits. There is no distinction between "save" and "publish".

In the initial interviews, Content Managers said this was stressful because they can't save their progress as they go and they have to make sure everything is correct before saving (and publishing) the collection.

Brainstorm & Ideation

I’ve had a few assumptions that could potentially solve the problems.

[1st Assumption]

Introduce statuses to allow users to easily distinguish between published, draft, and expired collections.

The action menus for these 3 statuses are slightly different.

[2RD ASSUMPTION]

The second assumption is to allow users to autosave will prevent users from losing their progress.

For creating and editing a collection, I wanted to introduce an auto-saving function to help users to save their progress throughout the form. Even if they navigate away, they will still see this collection saved as a draft when they come back to the collection homepage. 

I drew out all the key screens and made paper prototypes to test the concepts.

Concept Validation

Before meeting with users, I had a sync with the PM and the engineers to get feedback and understand the technical feasibility.

To validate the initial designs, I conducted 5 concept tests with Content Managers.

• Content Managers found it easier to identify a collection with the new status indicators

• Content Managers were concerned that saving changes automatically on a published collection could lead them to accidentally push typos to the live Dailymotion site.

• Content Managers said it would be helpful to know the creation and last updated date when they are editing a collection

Design Iterations

Based on these findings, I focused on how might we help users save their progress but not publish the changes on the homepage automatically.

I did some competitive research to see how other products solve this problem.

The blog platforms Medium and Blogger both offer auto-saving functions.

When creating a post, both platforms help users autosave the post as a draft; When editing a draft, it autosaves the progress.

When editing a published post, Medium auto-saves the changes but users need to click “save and publish” to publish the changes.

Blogger disabled the auto-saving hence the cloud icon disappeared. Users have to click “Update” to update the changes.

Based on the validation feedback and competitive inspiration, I decided to offer auto-saving functions throughout the process except for the published collection. When editing a published collection, users have to manually save the progress, otherwise, we will push a pop-up message if they are navigating away without saving.

Final Design

When content managers land on the content tool, they will select a region to work with. At this moment, they are focusing on managing the videos for viewers in France.

When editing the published collection, users have to save the changes manually.

When editing the draft collection, the changes got saved automatically.

Here is the Figma prototype with both editing and creation workflow.

Challenges

The product manager only planned 1 sprint for this design discovery. So I had to act fast and validate my assumptions as quickly as possible. Additionally, since our users were internal Content Managers, there were a large number of stakeholders across the business involved. To make sure everyone was on the same page, we met twice a week to check in on project status and milestones.