Challenge Summary
Welcome to the "BH6 - Media Library App Wireframe Challenge Part 1"! In this challenge, we are looking to conceptualize and simulate the flow for our new Media Library web application that will be used in our internal company where the user can use and manage the files inside the library. Users will be able to more freely reuse images, videos, PDFs and other file-based media between content items. We will have a follow-up wireframe challenge to create Admin and Developer Part, so make sure to jump in early!
We are looking for an intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think about what are the best UI/UX practices when creating this wireframe.
01) As an Application User, I can browse the media library, search within it and visualize individual entries
02) As an Application user, I can upload media in single or in a bulk
03) As an Application user, I can define "collections" in which media is organized and control access to them
04) As an Application user, I can define media item metadata
05) As an Application user, I can specify how an asset is to be used in localized content
06) As an Application user, I can control the lifecycle of media
- Note: Submit as much application features as you can for early review.
- IMPORTANT! Your wireframes need to be clickable
01) As an Application User, I can browse the media library, search within it and visualize individual entries
02) As an Application user, I can upload media in single or in a bulk
03) As an Application user, I can define "collections" in which media is organized, and control access to them
04) As an Application user, I can define media item metadata
05) As an Application user, I can specify how an asset is to be used in localized content
06) As an Application user, I can control the lifecycle of media
07) As an Application user, I can define a permanent URL to the media resource
08) As an Application user, I can version media and update content that refers to it
09) As an Application user, I can visualize which content items refer to a given media item (and vice versa)
10) As an Application user, I can apply policies to media that transform it in some way
11) Open Questions - Needs your ideas!
- Note: please address Checkpoint Feedback for your Final Round Submission
- IMPORTANT! Your wireframes need to be clickable
Background Overview
This new media library application will separate the storage and management of binary files from WCM (Web Content Management) content items into a separate service. Content items can refer to media as required, and this permits easy reuse of media across the system. Media can also be directly addressed, for example by custom applications
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. They will be able to manage the lifecycle of this media separately from that of the content items that reference them. Developers will be to use the media library within script applications, without needing to set up configure the rest of WCM
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 to 1 and only 1 Media Item
- Media Type – Coarsely 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
For example, an image media item has metadata such as the title, alt text, description, XMP data and a binary resource of one of the allowed types
Challenge Goal
Create a wireframe that engaging and well thought out experience for our new Media Library application that allows the user to manage and re-use all media files in the app
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=662883
Flow and UX Consideration
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non-tech users
- We would prefer to utilize design language https://www.carbondesignsystem.com in the app, please use this as your reference when building the wireframes if possible - though at this stage we are more interested in your ideas around user experience than the specifics of the design language
- The target device for this application is Web
- We are looking for your ideas here!
Wireframe Expectations
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- The application must be very easy to use and intuitive. Keep that in mind when creating your solution for the layout and flow information
Screen/Features Required for the App
Below are some of the screens that we suggest based on the above concept, feel free to expand on your concepts:
01) As an Application User, I can browse the media library, search within it and visualize individual entries
- Users have a modern GUI that they can use to access the media library where they can browse Media Items
- Within this epic, there are several user stories to flesh out, which you should consider in your wireframe
-- Views available – list vs card, are they configurable
-- Which media attributes are indexed?
-- Search faceting?
-- Save searches?
-- Open individual Media Items
---- How does display vary by Media Type
---- Can the display be customized in some way
02) As an Application user, I can upload media in single or in a bulk
- User can create Media Items by uploading files
- The file type uploaded determines the Media Type that will be created – e.g. uploading a PNG will create a Media Item of type "image"
- When uploading media I must select or create the collection that I'm uploading to
- Media Items can be created one at a time or in bulk via both the GUI and the REST API
- Media Items cannot be created without at least 1 resource; Media Resource cannot be created without 1 and only 1 Media Item
- Upload should be restartable (but may depend on configured storage)
- Unless a limit is defined at the system/collection level, there should be no limit on the maximum file size allowed
- Some Media metadata can be set at upload:
-- Collection (which determines applicable lifecycle)
-- Category
-- Others?
- When uploading a media, the system checks whether the same file has been uploaded before and warns the user if so (at least based on filename, ideally on checksum too)
03) As an Application user, I can define "collections" in which media is organized and control access to them
- Users can define collections that are used to organize Media Items. All media items belong to one collection
- A given Media Item can be in only 1 collection(s), since the collection defines the applicable lifecycle and maximum file size
- Collections can probably not be nested, show us your ideas here
- Access control to a collection can be limited in the following ways:
-- Limit who can contribute to a collection
-- Limit who can browse and select media from a collection
-- Limit who can view published media
- Access to individual Media Items and Media Resources cannot be controlled - access control applies at the collection level only
- The applicable Media lifecycle is defined/enforced at a collection level
- Maybe allow max file size to be defined per collection?
04) As an Application user, I can define media item metadata
- Media metadata can be added to define:
-- Usage rights
-- Embargo and Expiration dates
-- Categories and/or tags
- Some metadata may be generated:
-- Images – dominant colours
-- File size
-- File type/MIME type
- Various media types have also got type-specific meta-data
-- Images – alt text, description, embedded XMP data e.g. camera data, location
-- Video – description, start/stop points, duration
-- Files – type, size, etc
05) As an Application user, I can specify how an asset is to be used in localized content
- Per media item, specify which locales apply or do not apply to a given media item.
- Presumption is that a media item applies to all locales unless an allowed or exclusion list is specified. Cannot specify both allowed and exclusion list:
-- Allowed – Only the listed locales
-- Exclusion – All locales Except the listed ones
06) As an Application user, I can control the lifecycle of media
- There are two primary uses of the media lifecycle:
-- Control when agency submissions are accepted for general use in the system
-- Control when media is approved for publication
- Additionally, lifecycle may be used to make expired media unavailable (at the risk of breaking content items that leverage the media, so this should perhaps be an option?)
- Users can control the lifecycle status of a Media Item within the constraints of the lifecycle that the collection imposes on them. Since the rights to change lifecycle status may be constrained by privileges, lifecycle status changes may be construed as approval and rendered in the UI that way
- When media items/resources are referred to by content items, media lifecycle must be able to be coordinated with content lifecycle. Media lifecycle must be includable in a WCM project
- Media Items have one and only one lifecycle status
- Media Resources inherit the lifecycle status of the Media Item that refers to them
- Media Items and Media Resources without an explicitly defined lifecycle status are assumed to be published and available
- Note that to start with, media lifecycle is likely WCM workflow/projects
07) As an Application user, I can define a permanent URL to the media resource
- Media Items may have multiple media resources, to support versioning of the binary file that underpins the item
- A permanent URL can be defined so that calling code can always access the primary media resource associated to a media item
- Related case – when a media item is removed from publication, can system be set to return an appropriate HTTP response code?
08) As an Application user, I can version media and update content that refers to it
- Changes to a media item and the associated media resource should be versioned
- Changes to the media resource result in a new media resource being stored. New media resources must be from the allowed list of file types for the media item type
- A versioning comment may be added when creating a new version
- Content items always refer to the latest version of the media item and media resource. When updating (adding or rolling back) the media version, users are warned about which content items will be affected by this change
- Users may roll back to a previous version. This creates a new latest version and does not discard the interim versions. A versioning comment is automatically added that the change was rolled back from a given version number
09) As an Application user, I can visualize which content items refer to a given media item (and vice versa)
- From a given media item, I can see which content items refer to it and what their status is. I can open up the content items from this view, and return to the media item
- From a given content item, I can see which media items are referred to, and what their status is. I can open up the media items from this view, and return to the content item
- From a given WCM project, I can see which media items are referred to by the content items in the project, and what their status is. I can open up the content items from this view, and return to the media item
10) As an Application user, I can apply policies to media that transform it in some way
- Media policies define a transformation that can be applied to media. As such they are specific to a given media type
- The types of action that policies can be used for include:
-- Image transformations e.g. colour correction, black and white
-- Standardising image sizes
-- SVG overlay e.g. applying a “discount” sticker
-- Applying video filters
-- Generate image renditions?
- Where are the policies applied – collection, lifecycle or somewhere else?
- If I was to change my mind about a policy, how would I re-apply it to a whole set of media. For example, if I wanted to go back and apply an SVG overlay to this season's products..where does that happen?
- Can we combine policies, variations and renditions, so that a user can specify "generate me a 200x300 version of this image in black and white and resample to 150dpi"
11) Open Questions - Needs your ideas!
- How should we support video streaming services - do we look to provide that ourselves or enable customers to manage media on Brightcove, Vimeo, etc. from within the Media Library? Maybe we could have a "remote video" type, where the resource is just a URL, but then again maybe that's just content?
- Should we distinguish between authoring and delivery - i.e. what does it mean for a media item to be published? Is it physically moved somewhere, or is it just a status change?
- What about localization support?
- What about image renditions, meaning different sizes or resolutions of an image for different purposes?
- What about image variations, meaning variations like colour variations, with text overlay etc? Could this be combined with image renditions?
New to axure RP, get started right-away!!
- Here are some quick tutorials to help you get started http://www.axure.com/support
Screen Size
- Desktop: 1366px(w) & height up to your design
Target Audience
- Internal Employees
Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required fields on every page
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Wireframes should be clickable and can be opened in all major browser without issue
- IMPORTANT! Make sure all the content is listed and the pages are linked together to show page flow.
- Keep your source files out from this submission folder.
Source Files
- All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
- You can build the wireframes using Plain HTML/CSS/JS or you can generate from the Axure application. Another option is using Sketch with Black/White theme (needs to be clickable)
Final Fixes
As part of the final fixes phase, you may be asked to modify content or user click paths
We are looking for an intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think about what are the best UI/UX practices when creating this wireframe.
Round 1
Initial Wireframe for client review!01) As an Application User, I can browse the media library, search within it and visualize individual entries
02) As an Application user, I can upload media in single or in a bulk
03) As an Application user, I can define "collections" in which media is organized and control access to them
04) As an Application user, I can define media item metadata
05) As an Application user, I can specify how an asset is to be used in localized content
06) As an Application user, I can control the lifecycle of media
- Note: Submit as much application features as you can for early review.
- IMPORTANT! Your wireframes need to be clickable
Round 2
Final Wireframe (Complete requirements) with checkpoint feedback applied!01) As an Application User, I can browse the media library, search within it and visualize individual entries
02) As an Application user, I can upload media in single or in a bulk
03) As an Application user, I can define "collections" in which media is organized, and control access to them
04) As an Application user, I can define media item metadata
05) As an Application user, I can specify how an asset is to be used in localized content
06) As an Application user, I can control the lifecycle of media
07) As an Application user, I can define a permanent URL to the media resource
08) As an Application user, I can version media and update content that refers to it
09) As an Application user, I can visualize which content items refer to a given media item (and vice versa)
10) As an Application user, I can apply policies to media that transform it in some way
11) Open Questions - Needs your ideas!
- Note: please address Checkpoint Feedback for your Final Round Submission
- IMPORTANT! Your wireframes need to be clickable
Background Overview
This new media library application will separate the storage and management of binary files from WCM (Web Content Management) content items into a separate service. Content items can refer to media as required, and this permits easy reuse of media across the system. Media can also be directly addressed, for example by custom applications
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. They will be able to manage the lifecycle of this media separately from that of the content items that reference them. Developers will be to use the media library within script applications, without needing to set up configure the rest of WCM
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 to 1 and only 1 Media Item
- Media Type – Coarsely 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
For example, an image media item has metadata such as the title, alt text, description, XMP data and a binary resource of one of the allowed types
Challenge Goal
Create a wireframe that engaging and well thought out experience for our new Media Library application that allows the user to manage and re-use all media files in the app
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=662883
Flow and UX Consideration
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non-tech users
- We would prefer to utilize design language https://www.carbondesignsystem.com in the app, please use this as your reference when building the wireframes if possible - though at this stage we are more interested in your ideas around user experience than the specifics of the design language
- The target device for this application is Web
- We are looking for your ideas here!
Wireframe Expectations
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- The application must be very easy to use and intuitive. Keep that in mind when creating your solution for the layout and flow information
Screen/Features Required for the App
Below are some of the screens that we suggest based on the above concept, feel free to expand on your concepts:
01) As an Application User, I can browse the media library, search within it and visualize individual entries
- Users have a modern GUI that they can use to access the media library where they can browse Media Items
- Within this epic, there are several user stories to flesh out, which you should consider in your wireframe
-- Views available – list vs card, are they configurable
-- Which media attributes are indexed?
-- Search faceting?
-- Save searches?
-- Open individual Media Items
---- How does display vary by Media Type
---- Can the display be customized in some way
02) As an Application user, I can upload media in single or in a bulk
- User can create Media Items by uploading files
- The file type uploaded determines the Media Type that will be created – e.g. uploading a PNG will create a Media Item of type "image"
- When uploading media I must select or create the collection that I'm uploading to
- Media Items can be created one at a time or in bulk via both the GUI and the REST API
- Media Items cannot be created without at least 1 resource; Media Resource cannot be created without 1 and only 1 Media Item
- Upload should be restartable (but may depend on configured storage)
- Unless a limit is defined at the system/collection level, there should be no limit on the maximum file size allowed
- Some Media metadata can be set at upload:
-- Collection (which determines applicable lifecycle)
-- Category
-- Others?
- When uploading a media, the system checks whether the same file has been uploaded before and warns the user if so (at least based on filename, ideally on checksum too)
03) As an Application user, I can define "collections" in which media is organized and control access to them
- Users can define collections that are used to organize Media Items. All media items belong to one collection
- A given Media Item can be in only 1 collection(s), since the collection defines the applicable lifecycle and maximum file size
- Collections can probably not be nested, show us your ideas here
- Access control to a collection can be limited in the following ways:
-- Limit who can contribute to a collection
-- Limit who can browse and select media from a collection
-- Limit who can view published media
- Access to individual Media Items and Media Resources cannot be controlled - access control applies at the collection level only
- The applicable Media lifecycle is defined/enforced at a collection level
- Maybe allow max file size to be defined per collection?
04) As an Application user, I can define media item metadata
- Media metadata can be added to define:
-- Usage rights
-- Embargo and Expiration dates
-- Categories and/or tags
- Some metadata may be generated:
-- Images – dominant colours
-- File size
-- File type/MIME type
- Various media types have also got type-specific meta-data
-- Images – alt text, description, embedded XMP data e.g. camera data, location
-- Video – description, start/stop points, duration
-- Files – type, size, etc
05) As an Application user, I can specify how an asset is to be used in localized content
- Per media item, specify which locales apply or do not apply to a given media item.
- Presumption is that a media item applies to all locales unless an allowed or exclusion list is specified. Cannot specify both allowed and exclusion list:
-- Allowed – Only the listed locales
-- Exclusion – All locales Except the listed ones
06) As an Application user, I can control the lifecycle of media
- There are two primary uses of the media lifecycle:
-- Control when agency submissions are accepted for general use in the system
-- Control when media is approved for publication
- Additionally, lifecycle may be used to make expired media unavailable (at the risk of breaking content items that leverage the media, so this should perhaps be an option?)
- Users can control the lifecycle status of a Media Item within the constraints of the lifecycle that the collection imposes on them. Since the rights to change lifecycle status may be constrained by privileges, lifecycle status changes may be construed as approval and rendered in the UI that way
- When media items/resources are referred to by content items, media lifecycle must be able to be coordinated with content lifecycle. Media lifecycle must be includable in a WCM project
- Media Items have one and only one lifecycle status
- Media Resources inherit the lifecycle status of the Media Item that refers to them
- Media Items and Media Resources without an explicitly defined lifecycle status are assumed to be published and available
- Note that to start with, media lifecycle is likely WCM workflow/projects
07) As an Application user, I can define a permanent URL to the media resource
- Media Items may have multiple media resources, to support versioning of the binary file that underpins the item
- A permanent URL can be defined so that calling code can always access the primary media resource associated to a media item
- Related case – when a media item is removed from publication, can system be set to return an appropriate HTTP response code?
08) As an Application user, I can version media and update content that refers to it
- Changes to a media item and the associated media resource should be versioned
- Changes to the media resource result in a new media resource being stored. New media resources must be from the allowed list of file types for the media item type
- A versioning comment may be added when creating a new version
- Content items always refer to the latest version of the media item and media resource. When updating (adding or rolling back) the media version, users are warned about which content items will be affected by this change
- Users may roll back to a previous version. This creates a new latest version and does not discard the interim versions. A versioning comment is automatically added that the change was rolled back from a given version number
09) As an Application user, I can visualize which content items refer to a given media item (and vice versa)
- From a given media item, I can see which content items refer to it and what their status is. I can open up the content items from this view, and return to the media item
- From a given content item, I can see which media items are referred to, and what their status is. I can open up the media items from this view, and return to the content item
- From a given WCM project, I can see which media items are referred to by the content items in the project, and what their status is. I can open up the content items from this view, and return to the media item
10) As an Application user, I can apply policies to media that transform it in some way
- Media policies define a transformation that can be applied to media. As such they are specific to a given media type
- The types of action that policies can be used for include:
-- Image transformations e.g. colour correction, black and white
-- Standardising image sizes
-- SVG overlay e.g. applying a “discount” sticker
-- Applying video filters
-- Generate image renditions?
- Where are the policies applied – collection, lifecycle or somewhere else?
- If I was to change my mind about a policy, how would I re-apply it to a whole set of media. For example, if I wanted to go back and apply an SVG overlay to this season's products..where does that happen?
- Can we combine policies, variations and renditions, so that a user can specify "generate me a 200x300 version of this image in black and white and resample to 150dpi"
11) Open Questions - Needs your ideas!
- How should we support video streaming services - do we look to provide that ourselves or enable customers to manage media on Brightcove, Vimeo, etc. from within the Media Library? Maybe we could have a "remote video" type, where the resource is just a URL, but then again maybe that's just content?
- Should we distinguish between authoring and delivery - i.e. what does it mean for a media item to be published? Is it physically moved somewhere, or is it just a status change?
- What about localization support?
- What about image renditions, meaning different sizes or resolutions of an image for different purposes?
- What about image variations, meaning variations like colour variations, with text overlay etc? Could this be combined with image renditions?
New to axure RP, get started right-away!!
- Here are some quick tutorials to help you get started http://www.axure.com/support
Screen Size
- Desktop: 1366px(w) & height up to your design
Target Audience
- Internal Employees
Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required fields on every page
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Wireframes should be clickable and can be opened in all major browser without issue
- IMPORTANT! Make sure all the content is listed and the pages are linked together to show page flow.
- Keep your source files out from this submission folder.
Source Files
- All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
- You can build the wireframes using Plain HTML/CSS/JS or you can generate from the Axure application. Another option is using Sketch with Black/White theme (needs to be clickable)
Final Fixes
As part of the final fixes phase, you may be asked to modify content or user click paths
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.