Challenge Overview
Welcome to Hercules TV Web Apps News and Lifestyle Pages V2 UI Prototype Challenge
Our client primarily interacts with its customers via a TV set top box. They want to find ways to aggregate this video content and surface to their users on the TV. The two main types of content they being prioritized are News & Lifestyle content.
The main task of this UI Prototype is to create Hercules Web Apps News and Lifestyle Pages for TV platform. based on the requirements listed in spec details. On this challenge, we need you focus to create UI prototype with plain HTML5/CSS3/Javascript based code and some latest library and tools like Webpack and SASS/SCSS
Good luck and we’re looking forward to your submissions!
https://drive.google.com/a/copilots.topcoder.com/folderview?id=0B31nrwic_6z0S1VCZXRLOExqMHc&usp=sharing
Storyboard.zip - Use this storyboard design
UI-Prototype-X1-V2.zip - UI Prototype as Reference that pass testing on our TV application for ratio scaling and navigation functionality
Important!
- All X1 Interactive TV Screen will be Responsive.
- It’s important that prototype code be well organized and easy to read.
- Use Webpack for whole prototype assets. You can also use NodeJs for this challenge
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS/SCSS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You need check and test by re-size the browser to make sure all elements inside the page need adjusted in proper ratios. Refer how the attached prototype works. Let us know if you need clarification.
- A user will navigate your design by TV Remote, please suggest proper flow when you build the remote tv interactions
- We will develop your design into various TV sizes.
- All text and graphics in your submissions need to be editable
- Match every buttons styling on default, and selected. Pay attention to the transparency and other design setting
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- Check the attached UI Prototype as Reference that pass testing on our TV application. You can follow the code format for keyboard navigation or how video player works. Let us know if you need some clarification about what codes can be used or not.
- Press Delete/Backspace button take user back to Previous Pages
- Use JSON to store all data
0). Index Page
- Create index page that will contains of these 2 pages:
1). News
Screenshot: 01A ~ News.jpg
- This is News page look and feel
- Background image need covered whole browser screen
- “News” text on top will be a plain text
- User need able to navigate the sub-menu
- Change to different sub-menu need load different thumbnail set (Screenshot: 01E ~ News.jpg)
- Match styling for highlighted menu (Screenshot: 01F ~ News.jpg, 01G ~ News.jpg, 01H ~ News.jpg)
- By default need select the 1st thumbnails
- Follow the thumbnail size differences.
- User need able to press left/right/up/down to navigate all slides
- Suggest proper navigation to highlighted all thumbnails
- To reach top menu from thumbnails, user need press up/down arrow via keyboard
- When we add more slide, make sure navigation still works
- This is highlighted state for for thumbnails (Screenshot: 01B ~ News.jpg, 01C ~ News.jpg, 01D ~ News.jpg)
- Match overlay and border styling
- Change to another slide need apply same styling to different thumbnail sizes (Screenshot: 01A ~ News.jpg)
- Use blue color theme for all News flow
- Press enter button on highlighted thumbnails need take to Video detail page explained below
- Xfinity logo placed on the bottom of thumbnails
2). Lifestyle
Screenshot: 02A ~ Sports.jpg
- Use yellow colored border for all Lifestyle flow
- Basically re-use same function like News page but need follow storyboard look
- This selected styling for thumbnails (Screenshot: 02B ~ Sports.jpg)
- No need build this (Screenshot: 02C ~ Sports.jpg), press enter take user to Video Detail Page
3). Video Detail Page
Screenshot: 03B ~ Full Screen Play.jpg
- This is Video Detail page
- Color theme need to be blue if triggered from News section
- Color theme need to be yellow if triggered from Lifestyle section
- Video need to be auto playing when landed on this screen
- Content on the bottom need load if user press any buttons (left/right/up/down)
- There are tabs for General, Related and About
- Use dummy content for another tabs
- If possible build the pause and video playing time also the progress bar
- If not possible, let us know the reasons.
- Press delete/backspace need take user back to previous page
- No need build this (03A ~ Full Screen Play.jpg)
Client Priorities (The items that are considered highest prototype priorities)
- UI Prototype need to be lightweight and use best practice to achieve best load time
- Creating quality and efficient HTML/CSS code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Consistency Margin/Spacing on your UI Prototype
- Usage of Webpack, Sass/SCSS and latest technology
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SASS/SCSS
- Use SASS/SCSS as CSS Pre-Processor.
- Provide comments on the SASS/SCSS code. We need SASS/SCSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS/SCSS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
Javascript
- 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.
- Use Webpack for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Our client primarily interacts with its customers via a TV set top box. They want to find ways to aggregate this video content and surface to their users on the TV. The two main types of content they being prioritized are News & Lifestyle content.
The main task of this UI Prototype is to create Hercules Web Apps News and Lifestyle Pages for TV platform. based on the requirements listed in spec details. On this challenge, we need you focus to create UI prototype with plain HTML5/CSS3/Javascript based code and some latest library and tools like Webpack and SASS/SCSS
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:https://drive.google.com/a/copilots.topcoder.com/folderview?id=0B31nrwic_6z0S1VCZXRLOExqMHc&usp=sharing
Storyboard.zip - Use this storyboard design
UI-Prototype-X1-V2.zip - UI Prototype as Reference that pass testing on our TV application for ratio scaling and navigation functionality
Important!
- All X1 Interactive TV Screen will be Responsive.
- It’s important that prototype code be well organized and easy to read.
- Use Webpack for whole prototype assets. You can also use NodeJs for this challenge
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS/SCSS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You need check and test by re-size the browser to make sure all elements inside the page need adjusted in proper ratios. Refer how the attached prototype works. Let us know if you need clarification.
- A user will navigate your design by TV Remote, please suggest proper flow when you build the remote tv interactions
- We will develop your design into various TV sizes.
- All text and graphics in your submissions need to be editable
- Match every buttons styling on default, and selected. Pay attention to the transparency and other design setting
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- Check the attached UI Prototype as Reference that pass testing on our TV application. You can follow the code format for keyboard navigation or how video player works. Let us know if you need some clarification about what codes can be used or not.
- Press Delete/Backspace button take user back to Previous Pages
- Use JSON to store all data
0). Index Page
- Create index page that will contains of these 2 pages:
1). News
Screenshot: 01A ~ News.jpg
- This is News page look and feel
- Background image need covered whole browser screen
- “News” text on top will be a plain text
- User need able to navigate the sub-menu
- Change to different sub-menu need load different thumbnail set (Screenshot: 01E ~ News.jpg)
- Match styling for highlighted menu (Screenshot: 01F ~ News.jpg, 01G ~ News.jpg, 01H ~ News.jpg)
- By default need select the 1st thumbnails
- Follow the thumbnail size differences.
- User need able to press left/right/up/down to navigate all slides
- Suggest proper navigation to highlighted all thumbnails
- To reach top menu from thumbnails, user need press up/down arrow via keyboard
- When we add more slide, make sure navigation still works
- This is highlighted state for for thumbnails (Screenshot: 01B ~ News.jpg, 01C ~ News.jpg, 01D ~ News.jpg)
- Match overlay and border styling
- Change to another slide need apply same styling to different thumbnail sizes (Screenshot: 01A ~ News.jpg)
- Use blue color theme for all News flow
- Press enter button on highlighted thumbnails need take to Video detail page explained below
- Xfinity logo placed on the bottom of thumbnails
2). Lifestyle
Screenshot: 02A ~ Sports.jpg
- Use yellow colored border for all Lifestyle flow
- Basically re-use same function like News page but need follow storyboard look
- This selected styling for thumbnails (Screenshot: 02B ~ Sports.jpg)
- No need build this (Screenshot: 02C ~ Sports.jpg), press enter take user to Video Detail Page
3). Video Detail Page
Screenshot: 03B ~ Full Screen Play.jpg
- This is Video Detail page
- Color theme need to be blue if triggered from News section
- Color theme need to be yellow if triggered from Lifestyle section
- Video need to be auto playing when landed on this screen
- Content on the bottom need load if user press any buttons (left/right/up/down)
- There are tabs for General, Related and About
- Use dummy content for another tabs
- If possible build the pause and video playing time also the progress bar
- If not possible, let us know the reasons.
- Press delete/backspace need take user back to previous page
- No need build this (03A ~ Full Screen Play.jpg)
Client Priorities (The items that are considered highest prototype priorities)
- UI Prototype need to be lightweight and use best practice to achieve best load time
- Creating quality and efficient HTML/CSS code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Consistency Margin/Spacing on your UI Prototype
- Usage of Webpack, Sass/SCSS and latest technology
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SASS/SCSS
- Use SASS/SCSS as CSS Pre-Processor.
- Provide comments on the SASS/SCSS code. We need SASS/SCSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS/SCSS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
Javascript
- 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.
- Use Webpack for Library Package Manager
- Create separate files if you plan to create custom functions
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser