Media Library App Design Challenge

Welcome to the "Media Library App Design Challenge"! In this challenge, we are looking for your help to create the best possible UI/UX for our Media Library Application. This app will be used by Content Author and other user roles to manage and use all files inside the library. Users will be able to more freely reuse images, videos, PDFs and other file-based media between content items. 

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback
01) Media Library Screen
02) Media Item Details Screen
03) Selection Screen
04) Upload Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Media Library Screen
02) Media Item Details Screen
03) Selection Screen
04) Upload Screen
05) Collection Screen
06) Collection Detail Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

CHALLENGE OBJECTIVES

• User interface design
• 6 Main screens +  Screen Interactions
• Desktop App 

PROJECT BACKGROUND

• Create the best possible UI/UX design for our Media Library app where Content Author can use and manage the files inside the library and able to more freely reuse images, videos, PDFs and other file-based media between content items
• Focus on developing the best visual design for content author/marketer (user) roles in this challenge 
• The expected benefit is that our users will be able to more freely reuse images, videos, PDFs and other file-based media between content items and able to manage the lifecycle of this media separately from that of the content items that reference them

MEDIA APP TERMINOLOGY

• Media item - Combination of type-specific meta-data and a media resource. This is the entity that users and developers will mostly interact with
• Media resource - The actual media file, associated with 1 and only 1 Media Item
• Media type - coarse-grained types such as "image", "video", not file type such as "PNG" or "MP4"
• Collection - A collection is like a "folder", in that it is a container of media that can have access control and other policies applied to it

TARGET AUDIENCE

• Content Author/Marketer, Uses the media library to store media for use in the web content management system, and other applications that access the system's APIs (wireframe for this role provided in challenge attachment/forum as references)
• Out of Scope - Information Architect/Administrator, Responsible for setting up the content management system and a media library. They are responsible for tasks like repository setup and config, workflow definition, media processing, access control, and versioning
• Out of Scope - Developer, Responsible for building applications that consume media

SCREEN REQUIREMENTS
Please make sure to create the following screens + interaction design (We are focusing on Content Author Role in this challenge):

01) Media Library Screen

• Wireframe "User 1.0 - Media Library (Uploads In Progress)" and "User 1.1 - Media Library (No Uploads)"
• This screen will show Media Items, sorted by latest uploaded, and the Media items can vary, it can be images, videos, files, etc. 
• Top Header, wf 'User 1.1 - Media Library (No Uploads)', showing a state where user doesn't have any media items get uploaded. Clicking the 'Upload Media' button will bring the user to upload media items screen
• Top Header, wf 'User 1.0 - Media Library (Uploads In Progress)', showing state where several media items being uploaded, click the '6 upload in progress' status will show popup/modal window that shows upload progress for media items (needs to show the minimum state as a one-line progress and maximum state as popup form)
• Top Header, clicking Hamburger menu on the top right will open additional menus to go to other features available in the app.
• Top Header, clicking Hamburger Menu -> 'Trash History' will open a new window/popup/etc contains information of recently deleted items. User will be able to delete it permanently, or restore it back to the app, or set a schedule when all items should be deleted permanently
• User can Browse the Media items from this screen 
• Media tab needs to have screen variations where user can see available media items in various ways – like a list, card (same size), or card (different image sizes)
• There will be a huge quantity of items available in the application, needs a way to organize the browsing interactions so all items not shown at the same time (infinite scroll? pagination? etc)
• User can find specific media items using the following methods:
  • Filter the Media Items based on media type (images, videos, documents, everything)
  • Find Media Items using the search feature, type in the search textbox, and the user can choose to execute new search query or use the previous search suggestion 
  • Click 'Saved Searches' button will open a list of saved search and user can save the current search for future use
  • There is another method to find Media Items, please create the design elements for:
    • Filter form (Collection, Uploaded by, Bookmarked, Lifecycle status, etc)
    • Sorting (ascending and descending)
  • To simulate search result, click 'balloon' in the previous search suggestion and the wireframe will simulate the search result (User 5.0 - Search Results)

02) Media Item Details Screen

• Wireframe "User 1.0 - Media Library (Uploads In Progress)", "User 5.0 - Search Results", and "User 1.1 - Media Library (No Uploads)"
• Please simulate the search interaction from the above scenario
• Notice in the search result (User 5.0 - Search Results), there are 3 media items checked using a green border, click one of them will open the Media Item details information
• When the user hovers the media item, there will be an ability to bookmarked the media item for future search
• When the user hovers the media item, there will be a 3 vertical dotted appear and it will show sub-menus. Clicking 'Move To Trash' will delete the item from Media Item list and the user will get a notification about the deletion
• When user click the media item, it will show the Media Item Details, and the user can choose to see the information presented in two kinds of view, Full-Screen view, and Minimum view
• Notice the Media Item details have hidden information in it, click the expand/collapse area and please create the full-screen design with all this information
• Needs to have the Media Item details in read-only state and edit mode state

03) Selection Screen

• Wireframe "User 3.0 - Selection"
• From the Media Library Screen, click on the selection (checked icon) button on the wireframe, and it will bring the user to wf 'User 3.0 - Selection' page where user can select media items and apply particular actions to multiple selected items 
• Click the 'Super balloon in snow with long name' image to open the actions popup/modal window where user can select what kind of actions that can be done for the selected items
• The user also can manage the policies by clicking the 'manage policies' button. The manage policies popup/modal window needs to be created along with the interactions

04) Upload Screen

• Wireframe "User 4.0 - Upload Media"
• User will be able to add/upload new media to the application via this page
• Need an ability to upload media item via drag n drop functionality
• Ability to see multiple upload progress of the Media Items
• Ability to set Collection and Category
• Ability to Edit Metadata (popup/modal window) 

05) Collection Screen

• Wireframe "User 2.0 - Collections"
• User will be able to see media items based on collection in this screen
• Needs screen to "Add New Collection"
• Ability to see collections via thumbnail or list
• Ability to dig down and see collection details 

06) Collection Detail Screen

• Wireframe "User 2.1 - Collection Details"
• User will be able to see Media Items from particular collection in this screen
• Ability to see Media Collection information by clicking the "Manage Collection" button
• Ability to edit Media Collection information content
• Ability to bookmark a collection
• Ability to delete collection

FORM FACTORS

• Web/Desktop: minimum 1366px Width with Height adjusted accordingly

BRANDING GUIDELINES

• Follow our Sketch Design System and Branding guidelines 
• IMPORTANT!! This is mandatory, submissions that do not use the Our 'Design System' and 'Branding guidelines' will not be considered
• In case there is any design components from our 'Design System' Library that not yet exist/available but needed for the Media Library application, please create those design elements and mention it in your declaration files or in the Marvel app (so developers should see, which components need to be added)

DOCUMENTATION

• All Design Assets available in this Google Drive Link: https://drive.google.com/drive/folders/1M9ZdDC_19p5tGkOgMbEnYbyEROQkUJPt?usp=sharing
  • Wireframes (You can download it from the google drive or view it online from this link Wireframes)
  • Branding Guidelines, use this as reference for logo, iconography, typeface, etc 
  • Sketch Design System, extract UI Elements for your design from this file. If there are any elements needed in your design but it's not available in this file, you can create the new design elements, just make sure to give some notes inside your declaration files or in the Marvel app.

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts
  • How well does your design align with the objectives of the challenge
  • Execution and thoughtfulness put into solving the problem
  • The Overall design and user experience
  • Cleanliness of screen design and user flow
  • Ease of use

FINAL DELIVERABLES

• Declaration Files about all stock photos, stock icons, and font link source used in your design 
• All original design files in JPG/PNG for client review
• All original design files in Sketch (Most Preferable), XD, or Photoshop (Least Preferable) and saved as a layered editable files
• Marvel Prototype:
  • We need you to upload your screens to Marvel App
  • Please send your marvel app request in the challenge forum
  • You MUST include your Marvel app sharing URL link as a text file in your submission (in your marvel app prototype, click on share and then copy the link)

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.