Mediafly - TV Studio Application HTML5 UI Prototype Challenge

Project Overview:

Welcome to the Mediafly - TV Studio Application HTML5 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.

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.

Required Pages:

Below are the required pages which will be developed to support responsiveness on required browsers.

1. Home View:

• -User opens the application and will see the home view (01-0Home-View.png).
• -Use responsive web and fluid layout design for all pages.
• -Use header banner as single image.
• -User can see two sections "Networks", "Favorites" below banner.
• -Click on Networks items, navigate user to Sub-Networks view (02-0Shows_Sub-Networks-View.png).
• -Click on "Edit" link, show user the edit view (01-1Home-View-Edit.png), where user can (i) drag & drop to reorder items, (ii) delete the item from Favorites section.
• -Click on "Done" link, save the changes and show Favorites items in non-edit mode.

2. Sub-Networks View:

• -Once user selects Networks items from Home view, show user the Sub-Networks view (02-0Shows_Sub-Networks-View.png).
• -Click on back bbutton at header, navigate back user to previous page.
• -Use header banner as single image and load corresponding Sub-Network banner.
• -Show breadcumb items below header banner.
• -Populate dropdown with list of all Networks items and default selection would be currently displayed Sub-Network item - (refer screen "02-1Shows_Sub-Networks-View--With-sorting.png").
• -Allow user to select other Sub-Network item from this dropdown.
• -Once user clicks any lifecycles link from "Show" label, display only that section on the page and hide other sections - (in case of "All", display all sections).
• -Display four sections (lifecycles) on this view, such as "Pilots", "New", "Returning", "Past".
• -Allow user to toggle "Show/Hide" hidden shows link at top-right corner of each section.
• -Allow user to "add/remove the Show to Favorites" and "hide/show the Show" as per screens dropdown menu ("02-2Shows_Sub-Networks-View--Favorites,hide.png", "02-3Shows_Sub-Networks-View--Favorites,hide.png").

3. Show View:

• -Once user selects "Show" from Sub-Networks view, show user the show view (03-0Show-View.png).
• -Click on back bbutton at header, navigate back user to previous page.
• -Use header banner as single image and load corresponding "Show" banner.
• -Show breadcumb items below header banner.
• -Populate dropdown with list of Season Episodes with count.
• -Group the Episodes for this Show by their Types and populate content on this view.
• -Display different Show Types with count (below breadcumb row) and corresponding sections, such as "Finals", "Network Cuts", "Studio Cuts", "Dailies", "Laica", "Scripts".
• -Display new banner on some items as per screen ("New_Banners.png").
• -Allow user to click action button as per on screen (04-1Show-View--Action-Button.png).
• -Show download indicators (at header icon), progress bar and completion status (tick mark icon) as per screen (04-0Show-View--Download-Status.png).
• -Click on download indicator icon at header, navigate user to downloader view (07-0Downloader-View.png).

4. Menu Flyout:

• -Once user clicks menu icon at header, show user the menu flyout as per screen (05-0Menu-Flyout.png).
• -Click on Sub-Networks item, show multilevel menus as per screens ("05-1Menu-Flyout-SubNetworks.png", "05-2Menu-Flyout-Shows.png").
• -On selecting last level menu items, show user the corresponding Show view (03-0Show-View.png).

5. Search View:

• -Allow user to search Networks, Shows from search box at header.
• -Display results with grouping as shown on screen (06-0Search.png).

6. Downloader View:

• -Once user clicks on download indicator icon at header, show user downloader view (07-0Downloader-View.png).
• -Click on remove/cancel button (cross icon), remove the selected item from the list.
• -Click on move up button, move the selected item to top of the list.

7. Notifications View:

• -Once user selects bell icon at header, show user the notification view as per screen (08-0Notifications.png).
• -Show the bell icon on Sub-Networks view and Show view - this icon should be on/off with color indications as green/white (refer screen "Bell_Icon-green.png", "Bell_Icon-white.jpg").
• -Click on bell icon, toggle the notification view.

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 - Arial.

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:

We would like to support following desktop browsers on Windows/Mac (landscape) and mobile browsers on iPhone(portrait)/iPad(portrait & landscape).

• IE 10+ Browsers
• Latest Chrome Browsers
• Latest Firefox Browsers
• Latest Safari Browsers
• iPhone 6 and iPad Safari Browsers

Documentation Provided:

Please register to see attached documents.

Final Submission Guidelines