Challenge Summary
Welcome to the "BH6 - Media Library App Wireframe Challenge Part 2"! Previously we ran a successful wireframe challenge where we ask Topcoder IA members to create, conceptualize and simulate the flow for app user in our Media Library app where the user 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. In this challenge, we want to continue to build the application flow for Information Architect (Administrator) and Developer roles.
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.
00) Information Architect General Requirements
01) As an Information Architect, I can define media lifecycles
02) As an Information Architect, I can configure media item types to be managed by the system
03) As an Information Architect, I can define media policies
04) As an Information Architect, I can configure custom media viewers
05) As an Information Architect, I can configure system level file size limitations
- Note: Submit as much application features as you can for early review.
- Your wireframes need to be clickable
00) Information Architect General Requirements
01) As an Information Architect, I can define media lifecycles
02) As an Information Architect, I can configure media item types to be managed by the system
03) As an Information Architect, I can define media policies
04) As an Information Architect, I can configure custom media viewers
05) As an Information Architect, I can configure system level file size limitations
06) As a Developer, I can control the HTTP headers for media delivery
07) As a Developer, I can access media from within my application code via a REST API
- Note: please address Checkpoint Feedback for your Final Round Submission
- Your wireframes need to be clickable
Background Overview
This new media library application will separates the storage and management of binary files from our WCM (Web Content Management) system's 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 their 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 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
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
Persona information
- The primary user of the media library is the content author/marketer (User), who 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)
- The Information Architect (Administrator) is 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
- The Developer is responsible for building applications that consume media
Challenge Goal
Continue building an awesome, engaging, and well thought out experience for other roles in our new Media Library application (Information Architect and Developer)
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=665948
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
- IMPORTANT! Create the Information Architect and Developer Wireframes separated from User roles wireframe
- 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:
00) Information Architect General Requirements
- Information Architect should be able to manage system settings from controls accessed from within the main application (e.g. settings pages)
- Only users with System Administrator privilege should be able to control who can manage settings
- Should also include control about how frequently trash is purged and option to purge immediately
01) As an Information Architect, I can define media lifecycles
- Information Architect must be able to define simple lifecycle workflows that will be applied to Media Items at the collection level. (see use case/requirements 6 from our challenge part 1 spec)
- The system should come with a small number of lifecycles to cover the primary lifecycle use cases (simple one-step approval and simple two-step approval)
- Information Architect can define a workflow as an ordered list of statuses:
-- Define which statuses are in the workflow, in which order
-- Define who can move an item from one state to another (select from available users or groups, or choose 'anyone')
-- Define whether a media item is generally available in that status (e.g. can this be accessed from outside the system via a public URL - default is no)
-- Define a webhooks call to be made on status change (entry or exit)
-- Define a special "expired" state (once per workflow) and determine if this is this forced on media item expiration date.
-- Whether can item in this state can be moved to the trash or not
02) As an Information Architect, I can configure media item types to be managed by the system
- Media items have a type, driven by the file type of the underlying media resource. Information Architects can control the media types that the system can manage
- When media items are uploaded, they are assigned type based on the file type of the uploaded file - once this is created, it cannot be changed. (see use case/requirements 4 from our challenge part 1 spec)
- The system is pre-loaded with a set of media types: Image, Video, Vector (SVG), Office Document, HTML file, CSS file, JS file, Generic file (Media items uploaded that do not have a recognised file type are assigned this type)
- Information architects can configure the list of available media types as follows:
-- Cannot delete supplied types
-- Can modify settings for supplied media types
-- Can add custom media types
- Each media type defines:
- A list of allowed MIME types and/or filename extensions e.g. we define that an image allows JPG, PNG etc. A given MIME type can belong to only one media type
- The viewer that will be used when the media item is previewed - can opt to choose "default" (which will apply the system default) or select a custom viewer (see use case/requirements 4 from our challenge part 1 spec)
- Custom meta-data fields (select also if these are to be indexed or not)
- Webhook call to be made when a media item of this type is uploaded.
03) As an Information Architect, I can define media policies
- See use case/requirements 10 from our challenge part 1 spec, it is define that media policies can be applied to media items. This use case covers managing the list of available media policies from within the settings area
- The information architect is able to browse a list of available media policies, and add or update existing policies
- For each media policy the Information Architect can define:
-- The Media Types to which the policy will apply
-- The transformation that will be applied when the policy is applied
-- A webhooks call to be made when the transformation is applied
-- Which other media policies cannot also be applied when this policy is applied
---- Choose from "no limitation", "no others of this type", "no other policies"
- Media policies transformations may be
-- Size - generate renditions to the defined set of sizes e.g. small, medium, large, defined in either pixel or one max dimension (max height or max width)
-- SVG overlay - apply an SVG overlay, need to provide SVG file
-- Image transformations - colour depth, brightness/contrast etc
-- And others - a good competitive reference would be this feature set at Amplience - http://hub.amplience.com/display/USERS/Dynamic+Imaging+Service
- Changes to a media policy only apply to subsequent
- Media policies can be deactivated prior to deletion
- Media policies can be deleted
04) As an Information Architect, I can configure custom media viewers
- Custom media viewers can be defined, these will be used to display a media item in the media library. They cannot be used to edit the media item
- Information architect manages the list of custom media viewers, which are defined by a URL to the viewer application and a name
- Custom viewers can be added, edited or removed
05) As an Information Architect, I can configure system level file size limitations
- Information Architects are able to set a global limit on the maximum permissible file size
- Changes only apply to new media items
06) As a Developer, I can control HTTP headers for media delivery
- Developers can set headers to control cache expiration, in order to optimize integration with a CDN
- This is a set of name/value pairs, choosing from standard HTTP header values such as cache control headers
07) As a Developer, I can access media from within my application code via a REST API
- The app provides a set of OpenAPI compliant APIs for accessing Media - these will be defined in a separate challenge
- Developers should have a way to access the URL or API call to media items, collections, and search results
- These should be a control in the UI to allow the user to show/hide developer information so that business users do not have to see this
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
Documentation
Note: Use it as references only, we are still doing finalfix to the Part 1 challenge, we will provide the complete content creator/user wireframe in the middle of this challenge
- Winning wireframes from Part 1 Challenge - User Roles Wireframes.zip
Target Audience
- Internal Employees (Information Architect, Content Creator, Developer)
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 built the wireframes using Plain HTML/CSS/JS or you can generate from the Axure application. Other 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!00) Information Architect General Requirements
01) As an Information Architect, I can define media lifecycles
02) As an Information Architect, I can configure media item types to be managed by the system
03) As an Information Architect, I can define media policies
04) As an Information Architect, I can configure custom media viewers
05) As an Information Architect, I can configure system level file size limitations
- Note: Submit as much application features as you can for early review.
- Your wireframes need to be clickable
Round 2
Final Wireframe (Complete requirements) with checkpoint feedback applied!00) Information Architect General Requirements
01) As an Information Architect, I can define media lifecycles
02) As an Information Architect, I can configure media item types to be managed by the system
03) As an Information Architect, I can define media policies
04) As an Information Architect, I can configure custom media viewers
05) As an Information Architect, I can configure system level file size limitations
06) As a Developer, I can control the HTTP headers for media delivery
07) As a Developer, I can access media from within my application code via a REST API
- Note: please address Checkpoint Feedback for your Final Round Submission
- Your wireframes need to be clickable
Background Overview
This new media library application will separates the storage and management of binary files from our WCM (Web Content Management) system's 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 their 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 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
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
Persona information
- The primary user of the media library is the content author/marketer (User), who 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)
- The Information Architect (Administrator) is 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
- The Developer is responsible for building applications that consume media
Challenge Goal
Continue building an awesome, engaging, and well thought out experience for other roles in our new Media Library application (Information Architect and Developer)
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=665948
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
- IMPORTANT! Create the Information Architect and Developer Wireframes separated from User roles wireframe
- 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:
00) Information Architect General Requirements
- Information Architect should be able to manage system settings from controls accessed from within the main application (e.g. settings pages)
- Only users with System Administrator privilege should be able to control who can manage settings
- Should also include control about how frequently trash is purged and option to purge immediately
01) As an Information Architect, I can define media lifecycles
- Information Architect must be able to define simple lifecycle workflows that will be applied to Media Items at the collection level. (see use case/requirements 6 from our challenge part 1 spec)
- The system should come with a small number of lifecycles to cover the primary lifecycle use cases (simple one-step approval and simple two-step approval)
- Information Architect can define a workflow as an ordered list of statuses:
-- Define which statuses are in the workflow, in which order
-- Define who can move an item from one state to another (select from available users or groups, or choose 'anyone')
-- Define whether a media item is generally available in that status (e.g. can this be accessed from outside the system via a public URL - default is no)
-- Define a webhooks call to be made on status change (entry or exit)
-- Define a special "expired" state (once per workflow) and determine if this is this forced on media item expiration date.
-- Whether can item in this state can be moved to the trash or not
02) As an Information Architect, I can configure media item types to be managed by the system
- Media items have a type, driven by the file type of the underlying media resource. Information Architects can control the media types that the system can manage
- When media items are uploaded, they are assigned type based on the file type of the uploaded file - once this is created, it cannot be changed. (see use case/requirements 4 from our challenge part 1 spec)
- The system is pre-loaded with a set of media types: Image, Video, Vector (SVG), Office Document, HTML file, CSS file, JS file, Generic file (Media items uploaded that do not have a recognised file type are assigned this type)
- Information architects can configure the list of available media types as follows:
-- Cannot delete supplied types
-- Can modify settings for supplied media types
-- Can add custom media types
- Each media type defines:
- A list of allowed MIME types and/or filename extensions e.g. we define that an image allows JPG, PNG etc. A given MIME type can belong to only one media type
- The viewer that will be used when the media item is previewed - can opt to choose "default" (which will apply the system default) or select a custom viewer (see use case/requirements 4 from our challenge part 1 spec)
- Custom meta-data fields (select also if these are to be indexed or not)
- Webhook call to be made when a media item of this type is uploaded.
03) As an Information Architect, I can define media policies
- See use case/requirements 10 from our challenge part 1 spec, it is define that media policies can be applied to media items. This use case covers managing the list of available media policies from within the settings area
- The information architect is able to browse a list of available media policies, and add or update existing policies
- For each media policy the Information Architect can define:
-- The Media Types to which the policy will apply
-- The transformation that will be applied when the policy is applied
-- A webhooks call to be made when the transformation is applied
-- Which other media policies cannot also be applied when this policy is applied
---- Choose from "no limitation", "no others of this type", "no other policies"
- Media policies transformations may be
-- Size - generate renditions to the defined set of sizes e.g. small, medium, large, defined in either pixel or one max dimension (max height or max width)
-- SVG overlay - apply an SVG overlay, need to provide SVG file
-- Image transformations - colour depth, brightness/contrast etc
-- And others - a good competitive reference would be this feature set at Amplience - http://hub.amplience.com/display/USERS/Dynamic+Imaging+Service
- Changes to a media policy only apply to subsequent
- Media policies can be deactivated prior to deletion
- Media policies can be deleted
04) As an Information Architect, I can configure custom media viewers
- Custom media viewers can be defined, these will be used to display a media item in the media library. They cannot be used to edit the media item
- Information architect manages the list of custom media viewers, which are defined by a URL to the viewer application and a name
- Custom viewers can be added, edited or removed
05) As an Information Architect, I can configure system level file size limitations
- Information Architects are able to set a global limit on the maximum permissible file size
- Changes only apply to new media items
06) As a Developer, I can control HTTP headers for media delivery
- Developers can set headers to control cache expiration, in order to optimize integration with a CDN
- This is a set of name/value pairs, choosing from standard HTTP header values such as cache control headers
07) As a Developer, I can access media from within my application code via a REST API
- The app provides a set of OpenAPI compliant APIs for accessing Media - these will be defined in a separate challenge
- Developers should have a way to access the URL or API call to media items, collections, and search results
- These should be a control in the UI to allow the user to show/hide developer information so that business users do not have to see this
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
Documentation
Note: Use it as references only, we are still doing finalfix to the Part 1 challenge, we will provide the complete content creator/user wireframe in the middle of this challenge
- Winning wireframes from Part 1 Challenge - User Roles Wireframes.zip
Target Audience
- Internal Employees (Information Architect, Content Creator, Developer)
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 built the wireframes using Plain HTML/CSS/JS or you can generate from the Axure application. Other 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.