MAM


NBCU created a media asset management system without thinking about user needs. My team was tasked to re-imagine what MAM could be...

INTRODUCTION

NBCUniversal is a media company with a massive portfolio. We own news channels, brands like Bravo and E!, and Universal productions. There are employees whose workflow needs to find and access our media, such as production people who create our content, trailers, etc.

MAM, or Media Asset Manager, was created to be the central hub where NBCUniversal employees can register, search, organize, and download our content. Although the current software can get the job done, it wasn't designed with much UX thought. The current MAM was built on this table framework that doesn’t focus on the media content and the software overlooks key features users would need.

THE CHALLENGE

To create a new media asset management system outside of the traditional “Translator” table format that takes a UX approach. MAM users need an interface to search, view, organize, move, and upload media assets to support the various workflows that delivers high quality & on-time media.

Why did the current MAM fail?

Bad MAM no UX

Media Asset Page

  • Thumbnails too small

  • No easy way to preview media

  • Too much wasted space

  • Irrelevant Metadata

Bad MAM no UX

Collections

  • Not optimal layout

  • Thumbnails too small

  • Accordion behavior limits visibility of collection items

  • No easy way to preview assets

Bad MAM no UX

Search

  • Unnatural organization of content

  • Large search bar overwhelming to user

  • Dropdown navigation difficult

  • No way to enter multiple search queries before filtering table

INSPIRATION

Bad MAM no UX

Sony Catalyst Browse

  • 3 Panel Layout

  • Can drag & drop assets

  • Recent clips/folders

  • Toggle between list & grid views

Bad MAM no UX

Media Silo

  • Users can "heart" or favorite assets

Bad MAM no UX

Sony Backbone

  • Folder sidebar with hierarchy visualization

  • If click on asset shows list of other assets in collection

  • Left click for actions menu

  • Metadata categorization: General, Video, & Audio

Bad MAM no UX

Bynder

  • Each file has tags

  • Hover over asset card for fuller preview

  • File type illustrated with blue square

  • Adv search turns into filter pills

  • Google like holistic search

  • Can create a collection by dragging square around items

Inspiration

Netflix

  • Cards of content

  • Clicking on a card expands full width view with preview

  • “More like this”

  • Add to “My List”

USER PERSONAS

Based on interviews my team did for another project before I joined NBCU I created a couple proto personas.

Director of Post Production - E! And Bravo

role

ROLE

  • These users are responsible for managing E!’s and Bravo’s content. Produced media assets will be sent to them and they run various QC checks. After they are done with that they sent to EC by dropping in a watch folder. They also manage all their storages by sending media to archival locations or deleting them. The workflow is generally the same for the brands but they have different storage locations

role

GOALS

  • To ensure all media content is up to industry standards and plays beautifully

  • Facilitate the successful delivery of ready-for-air content to EC

  • Keep storages at optimal levels by archiving or deleting files

role

NEEDS

  • Which assets are new and need review

  • Know where the assets came from and who uploaded

  • Ability to send collections

  • Ability to upload new content

  • Ability to assign access to different folders

  • Inbound & outbound collections

  • Ability to know which clips make up a larger video

  • Needs to archive & delete assets

Director of Production - Bravo

role

ROLE

  • These users are responsible for analyzing the weekly producer’s schedule to determine promos that need to be made. They also get project request from various Bravo groups. They will create the promos by combining various clips together and then send out to be QCed

role

GOALS

  • To create a punctual list/schedule schedule of promos his team needs to create to market audience in time for show airing

  • Discover a variety of relevant & beautiful clips to make the promos to make collections for promos

  • Send finished promos to associated parties on time

role

NEEDS

  • The following video metadata: If it has a voiceover, low res vs high res, text versions, split track audio, frames per second, length, tags, first air date, who is producing it, promo code ID, when its going to deliver, who voices spot (if applicable)

  • Ability to search for graphics

  • Ability to search for clips with specific actors, locations, shows, and tags

  • Mark promos as ready-for-air and send to EC

  • Create collections of clips want to use for promos; cam download/send them

  • Search multiple directories for clips

EARLY WIREFRAMES

Based on the current MAM pain points, inspiration, and user personas I created low-fidelity wireframes. My co-worker also made her own version before we combined the best ideas into high-fidelity mockups.

LSM v1 mocks LSM v1 mocks

ADV FILTER

The biggest challenge of this project was the advanced search. I had to rethink how to organize the available metadata and create a UI that easily allowed users to find what they were looking for and is dynamic.

I started by conducting three rounds of card sorting with myself. Below is a snapshot of the final result...

MAM card sorting

Card Sorting the Available Metadata in Current MAM

At this point I ideated many ideas of what the advanced filter could look like..

“Fail early, fail often, but always fail forward.”

MAM adv search
MAM adv search
MAM adv search
MAM adv search

Iterations of Adv Filter Wireframes

HUMANIZING THE ADV FILTER

Our team ultimately agreed to create an advanced filter in natural language form. Those types of advanced searches are a big hype in the tech world now because of AI software and our team thought “Why can’t NBC have a natural language search?”. To help me architecture the adv language filter I made a user journey tree map..

User Journey Tree Map - Adv Filter

MAM adv search

Early Wireframe of the Adv Filter in Natural Language Form

FINAL MOCKS

My coworker and I combined the best ideas from our individual wireframes to create the high-fidelity mocks below.

MAM final

Home Dashboard

MAM Final

Opened Media Asset with Proxy Player & Metadata

MAM Final

Full View Proxy Player with Collection at top

MAM adv search

Advanced Filter in Natural Language Form

View full details of the mocks in the annotations below...

FULL ANNOTATIONS