DMD Media Screener App UI Prototype Challenge

Welcome to the DMD Media Screener App UI Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application based on provided storyboards using AngularJS framework and Bootstrap for iPad Safari Browsers.

This website application theme will be built on Mediafly Interactives Framework (http://www.mediafly.com, http://devdocs.mediafly.com/interactives).

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop Responsive HTML5 Prototype based on provided storyboard designs. You need to implement click through UI Prototype as per required pages documented below and follow the branding/theme from the provided storyboard designs. Your prototype must work properly in all the required browsers listed below.

Please ask questions in forum for any clarifications needed on the spec requirements or storyboard designs.

Note: Instead of using ngRoute of AngularJS, you could use ui-router framework for navigation (https://github.com/angular-ui/ui-router).

Required Pages:

Below are the required pages which will be developed to support responsiveness on both portrait and landscape views.

1. Landing Page:

• -User opens the application and will see the main landing page (01A Dashboard.jpg).
• -Use responsive web and fluid layout design for all pages.
• -Use header bar as fixed at top of the page.
• -There are 8 thumbnail items on dashboard page, which will have 8 different color theme for brand pages (refer screens - "02A", "02B", "02C").
• -All 8 color theme can be found on "02D Brands" screen.
• -Click on each thumbnail item or header buttons, navigate user to corresponding brand page (refer first item - 02A Brand A.jpg).
• -Click on menu icon at header top-left corner, show user the left navigation menu (01B Main Nagivation.jpg).

2. Brand Page:

• -Once user selects items from dashboard view, show user the corresponding brand pages (02A Brand A.jpg).
• -We need 8 different color theme for corresponding brand pages (refer screens - "02A", "02E", "02F", "02D Brands").
• -Click on any item from header buttons, load corresponding brand page.
• -The main content will have auto rotate carousel items.
• -Click on 'view all shows' button at bottom of the page, display user all shows (03A Shows.jpg).
• -Click on 'view less' button at top of the page, show user the brand landing page.
• -User can filter and sort items from top dropdowns on shows page.
• -Once user selects any show item from bottom section, navigate user to the series page (04A Series.jpg).
• -Use dead link for more info link for now.
• -Click on 'show all recent releases' button, navigate user to shows page (03A Shows.jpg).

3. Shows Page:

• -Once user selects "view all shows" from brand page, display user the shows page (03A Shows.jpg).
• -Populate corresponding dropdown option from provided "data.txt" file.
• -User can filter the shows by selecting dropdown values (03B Shows - Filter.jpg).
• -Click on 'view less' button at top of the page, display user the brand page (02A Brand A.jpg).
• -Click on list view icon at top-right corner, show user the list view (similar to "04C Series - List" page).
• -Click on each show item, navigate user to the series page (04A Series.jpg).
• -Once used click show, then mark that show as "watched".

4. Series Page:

• -Once user selects any show item from shows page, display user the series page (04A Series.jpg).
• -Click on 'view all episodes' button at bottom of the page, show user all series page (04B Series - Grid.jpg).
• -Click on 'view less' button at top of the page, show user the series page (04A Series.jpg).
• -User can sort the items by selecting dropdown sorting items.
• -Click on list view icon at top-right corner, show user the list view (04C Series - List.jpg).
• -Click on grid view icon at top-right corner, show user the grid view (04B Series - Grid.jpg).
• -Click on add icon, show user the add to playlist popup (04C Series - Add to Playlist.jpg).
• -Click on "Add to Playlist" button, add the item to my playlist and close popup.
• -Click on subscribe & download buttons, show similar popup for adding the item to corresponding section.
• -Click on play icon or item image, navigate user to player page (05 Player.jpg).

5. Player View:

• -Once user selects play button, show user player view (05 Player.jpg).
• -Use sample video file to demostrate the video play.

7. Main Navigation:

• -Once user selects menu icon at header top-left corner, show user the left navigation menu (01B Main Nagivation.jpg).
• -Show animation flyout from left to right while displaying left menu panel.
• -Click on 'DMD Home', navigate user to main landing page (01A Dashboard.jpg).
• -Click on 'My Playlists', navigate user to my playlists page (01C My Playlists.jpg).
• -Click on 'Downloads', navigate user to downloads page (01D Downloads.jpg).
• -Click on 'My Profile', navigate user to my profile page (01E My Profile.jpg).
• -Click on back arrow icon at top of the menu panel, close the left menu panel with animation.

6. Other Pages:

• -My Playlists (refer screen "01C My Playlists.jpg")
  • --User can enter name and click create button to add new playlist at left panel.
  • --User can remove playlist from left panel.
  • --User can select playlist from left panel and see the video on right panel.
  • --User can rearrange the videos, remove videos, play videos (show in player view).
  • --User can sort videos from top dropdown.
• -Downloads (refer screen "01D Downloads.jpg")
  • --User can see current download progress on this page.
  • --User can rearrange videos, remove videos and play videos (show in player view).
• -My Profile (refer screen "01E My Profile.jpg")
  • --User can view profile details.
  • --User can rearrange subscriptions, remove submissions.

Specific HTML/CSS/JavaScript Requirements:

• -Your HTML code must be valid HTML5 and follow best practices
• -Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• -Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• -No inline CSS styles - all styles must be placed in an external style-sheet.
• -Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• -Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
• -Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.

Font Requirements:

Use font - "ABC Modern Font" (attached).

JavaScript Requirements:

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• iPad Safari Browsers

Documentation Provided:

Please register to see attached documents.

Final Submission Guidelines