Challenge Overview
Welcome to Hercules TV Web Apps News and Lifestyle Pages V1 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/folderview?id=0B31nrwic_6z0MDBBQ0dHYnk3dlU&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.
- 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
0). Index Page
- Create index page that will contains of these 2 pages:
A). News
1). News - Landing Page
Screenshot: 01_1_main_news.png
- This is News page look and feel
- Use different color for the News grouping title
- Page divided by 2 sections, top part will be for slideshow with looping function
- Slideshow need display the background image
- Make sure slideshow easy to config the transition timer
- After some seconds, need load another slide (Screenshot: 01_2_main_news.png)
- Notice there’s dots pagination placed on the bottom of slideshow area
- Also, match active/inactive state for dots pagination
- When we add new slide for the main slideshow, dots pagination need automatically detected number of slides
- View button always highlighted by default (use blue background and white color)
- Press enter button via keyboard need load the Detail page
- If user press right via keyboard, you need highlight the search button that placed on the right side
- Put dead link for search button
- Use blue background for selected style of search button
- On the bottom part, there’s slideshow based on Category and Channel
- Category selected by default
- Press down from View button need highlight the 1st slide of Category
- If user press left then need able to let user change from Category or Channel
- When we add new slide for the Category or Channel slideshow, should not break the slideshow function.
- Press up/down need change the slide content for Category or Channel (Screenshot: 01_3_main_news.png)
- Channel logo can be image based, we’ll swap with correct image in the future
- Press right again need take to Category or Channel slideshow
- Press enter via keyboard will take to another pages explained below
- This is how selection look for slideshow (Screenshot: 01_4_main_news_selecting_channel.png)
2). News - By Channel
Screenshot: 02_1_Browse_news_by_channel.png
- This Page divided by 2 area
- Left side area with fixed width for Channel logo and Channel names
- Channel logo can be image based, we’ll swap with correct image in the future
- And the right side for Thumbnails in grid view area, use 3 columns layout
- User need able to scrolling down both left and thumbnail sections if filled with more data
- Match active/inactive state
- User can press up/down to navigate different thumbnail of news
- Press right need able to highlighted the thumbnail (Screenshot: 02_Browse_news_by_channel_selecting_video.png)
- Highlighted thumbnail need show different height that contains more text/information
- Notice other thumbnails transparency reduced when on thumbnails highlighted
- Highlighted thumbnails need display quick information below normal title
- Press enter button via keyboard need load the Detail page
3). News - By Category
Screenshot: 03_Browse_news_by_category.png
- Basically this page use same layout like News - By Channel
- Text title need to be editable
- Match content differences like storyboard look
4). News - Detail Page
Screenshot: 04_video.png
- This is Detail page look
- Page divided by 2 columns
- Left side for the video area and on the right side for video description
- User need able to scroll down the video description
- Play button selected by default
- Press enter via keyboard need load full view of the video, explained more detail below
- Press down need able to highlight back button. Also, press Delete/Backspace button take user back to Previous Pages
- Press right need let user navigate to Related Videos and Comments
5). News - Full Size Video
Screenshot: 05_1_play_video.png
- This is full view of Video
- We will build video using HTML5 player
- Grab sample video from provided UI Prototype
- If possible build the pause and video playing time also the progress bar
- If not possible, let us know the reasons.
- When video ends, you need show up this screen (Screenshot: 05_2_video_ends.png)
- Video title placed on the left side.
- Replay button selected by default, press enter need reload the video
- Suggestion slide placed on the bottom
- Press down from the replay button need highlight the video thumbnail
B). Lifestyle
1). Lifestyle - Landing Page
Screenshot: 06_1_main_lifestyle.png
- This is landing page of Lifestyle
- Basically it will use same function like News but with different styling and placement
- Slideshow and dots pagination placed on top
- Show different slide for Lifestyle (Screenshot: 06_3_main_lifestyle.png)
- Match background and text styling
2). Lifestyle - By Channel
Screenshot: 07_Browse_lifestyle_by_channel.png
- This is By Channel look and feel
- Sidebar placed on the right side
- You need apply same effect for thumbnail selection
- User need able to scroll down/up both sections
3). Lifestyle - By Category
Screenshot: 08_Browse_lifestyle_by_category.png
- This is By Category look and feel
- Sidebar placed on the right side
- You need apply same effect for thumbnail selection
- User need able to scroll down/up both sections
4). Lifestyle - Detail Page
Screenshot: 09_video_lifestyle.png
- Match styling like storyboard look
- User need able to scrolling the description area
- Press enter need load Full Size Video
5). Lifestyle - Full Size Video
Screenshot: 10_1_play_lifestyle_video.png
- Re-use consistent Video implementation like News version
- Use different video for Lifestyle
- When video ends, need load this screen, match styling like storyboard look (Screenshot: 10_2_video_ends.png)
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/folderview?id=0B31nrwic_6z0MDBBQ0dHYnk3dlU&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.
- 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
0). Index Page
- Create index page that will contains of these 2 pages:
A). News
1). News - Landing Page
Screenshot: 01_1_main_news.png
- This is News page look and feel
- Use different color for the News grouping title
- Page divided by 2 sections, top part will be for slideshow with looping function
- Slideshow need display the background image
- Make sure slideshow easy to config the transition timer
- After some seconds, need load another slide (Screenshot: 01_2_main_news.png)
- Notice there’s dots pagination placed on the bottom of slideshow area
- Also, match active/inactive state for dots pagination
- When we add new slide for the main slideshow, dots pagination need automatically detected number of slides
- View button always highlighted by default (use blue background and white color)
- Press enter button via keyboard need load the Detail page
- If user press right via keyboard, you need highlight the search button that placed on the right side
- Put dead link for search button
- Use blue background for selected style of search button
- On the bottom part, there’s slideshow based on Category and Channel
- Category selected by default
- Press down from View button need highlight the 1st slide of Category
- If user press left then need able to let user change from Category or Channel
- When we add new slide for the Category or Channel slideshow, should not break the slideshow function.
- Press up/down need change the slide content for Category or Channel (Screenshot: 01_3_main_news.png)
- Channel logo can be image based, we’ll swap with correct image in the future
- Press right again need take to Category or Channel slideshow
- Press enter via keyboard will take to another pages explained below
- This is how selection look for slideshow (Screenshot: 01_4_main_news_selecting_channel.png)
2). News - By Channel
Screenshot: 02_1_Browse_news_by_channel.png
- This Page divided by 2 area
- Left side area with fixed width for Channel logo and Channel names
- Channel logo can be image based, we’ll swap with correct image in the future
- And the right side for Thumbnails in grid view area, use 3 columns layout
- User need able to scrolling down both left and thumbnail sections if filled with more data
- Match active/inactive state
- User can press up/down to navigate different thumbnail of news
- Press right need able to highlighted the thumbnail (Screenshot: 02_Browse_news_by_channel_selecting_video.png)
- Highlighted thumbnail need show different height that contains more text/information
- Notice other thumbnails transparency reduced when on thumbnails highlighted
- Highlighted thumbnails need display quick information below normal title
- Press enter button via keyboard need load the Detail page
3). News - By Category
Screenshot: 03_Browse_news_by_category.png
- Basically this page use same layout like News - By Channel
- Text title need to be editable
- Match content differences like storyboard look
4). News - Detail Page
Screenshot: 04_video.png
- This is Detail page look
- Page divided by 2 columns
- Left side for the video area and on the right side for video description
- User need able to scroll down the video description
- Play button selected by default
- Press enter via keyboard need load full view of the video, explained more detail below
- Press down need able to highlight back button. Also, press Delete/Backspace button take user back to Previous Pages
- Press right need let user navigate to Related Videos and Comments
5). News - Full Size Video
Screenshot: 05_1_play_video.png
- This is full view of Video
- We will build video using HTML5 player
- Grab sample video from provided UI Prototype
- If possible build the pause and video playing time also the progress bar
- If not possible, let us know the reasons.
- When video ends, you need show up this screen (Screenshot: 05_2_video_ends.png)
- Video title placed on the left side.
- Replay button selected by default, press enter need reload the video
- Suggestion slide placed on the bottom
- Press down from the replay button need highlight the video thumbnail
B). Lifestyle
1). Lifestyle - Landing Page
Screenshot: 06_1_main_lifestyle.png
- This is landing page of Lifestyle
- Basically it will use same function like News but with different styling and placement
- Slideshow and dots pagination placed on top
- Show different slide for Lifestyle (Screenshot: 06_3_main_lifestyle.png)
- Match background and text styling
2). Lifestyle - By Channel
Screenshot: 07_Browse_lifestyle_by_channel.png
- This is By Channel look and feel
- Sidebar placed on the right side
- You need apply same effect for thumbnail selection
- User need able to scroll down/up both sections
3). Lifestyle - By Category
Screenshot: 08_Browse_lifestyle_by_category.png
- This is By Category look and feel
- Sidebar placed on the right side
- You need apply same effect for thumbnail selection
- User need able to scroll down/up both sections
4). Lifestyle - Detail Page
Screenshot: 09_video_lifestyle.png
- Match styling like storyboard look
- User need able to scrolling the description area
- Press enter need load Full Size Video
5). Lifestyle - Full Size Video
Screenshot: 10_1_play_lifestyle_video.png
- Re-use consistent Video implementation like News version
- Use different video for Lifestyle
- When video ends, need load this screen, match styling like storyboard look (Screenshot: 10_2_video_ends.png)
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