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.
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.
Thumbnails too small
No easy way to preview media
Too much wasted space
Not optimal layout
Thumbnails too small
Accordion behavior limits visibility of collection items
No easy way to preview assets
Unnatural organization of content
Large search bar overwhelming to user
Dropdown navigation difficult
No way to enter multiple search queries before filtering table
3 Panel Layout
Can drag & drop assets
Toggle between list & grid views
Users can "heart" or favorite assets
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
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
Cards of content
Clicking on a card expands full width view with preview
“More like this”
Add to “My List”
Based on interviews my team did for another project before I joined NBCU I created a couple proto personas.
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
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
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
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
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
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
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.
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...
At this point I ideated many ideas of what the advanced filter could look like..
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..
My coworker and I combined the best ideas from our individual wireframes to create the high-fidelity mocks below.
View full details of the mocks in the annotations below...