Challenge Overview
Welcome to Hercules X1 Interactive Advertising Template V2 UI Prototype Challenge
Hercules is experimenting with displaying "full-screen" interactive TV advertising pages that will feature a specific product, brand or program. Essentially an interactive Ad but on your TV.
The main task of this UI Prototype is to create Hercules X1 UI Prototype 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.
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files (Check Challenge Forum!)
Storyboard.zip - Use this storyboard design
GE-Fonts-All.zip - Font for your prototype
sample-videos.zip - Sample videos for your submission
x1-ads-1st-prototype.zip - X1 Interactive Advertising UI Prototype 1st Variant
Important!
- All X1 Interactive TV Screen will use Responsive solution.
- You need check and test by re-size the browser, to make sure all elements inside the page need to be adjusted in proper ratios. We provide x1-ads-1st-prototype.zip to let you follow the expected ratio implementation.
- A user will navigate every element by TV Remote, in your prototype that will achieve by press some explained buttons via keyboard
- We will develop your design into various TV sizes.
- Use client's provided font size in your submission (XFinity-Sans-Fonts.zip)
- 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 another design setting
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- All required screens need to be rendered in a single dynamic page, no need to load to another HTML pages.
1). Homepage
Safe Area Screen:
screenshot: 00-Safe-Area-guide-02.png & 00-Safe-Area-guide-03 with grid system.png
- This screen is showing safe area for HDTV size
- Action buttons/clickable things need to be placed inside the green color area
- Background and text area can cover the red color area
- Use %(Percentage) format for the width of the safe area.
Actual Screen
screenshot: HDTV-Interactive-Ads-01-Home-Defaullts.png
- This is default Advertising page look and feel
- Use black background as body background
- On top of screen, there’s application title
- There’s filter next to the application indicated by different colored shapes and alphabet
- By default, you need show featured slider in the bottom of header area
- When user press different alphabet (A, B, C and D) on the keyboard, you need show different slideshow content below.
- Use random slideshow data and title to make us aware about the differences
- By default, press Up, Down, Left and Right need auto select the 1st slide
- Notice in some slide there’s content with one single image and another slide with stacked format
- This is selected state with blue colored glow on the border (screenshot: HDTV-Interactive-Ads-02-Home-selected-move.png)
- Display dark overlay background on top of slide
- There’s logo, title and view button that will open different detail page explained below.
- User will see the detail screen after press Enter button via keyboard
- Content on selected slide need placed vertically centered based on slide height
- Press right and left buttons only need to navigate to next and previous slide (screenshot: HDTV-Interactive-Ads-03-Home-selected-move.png)
- If next slide is stacked format, press right always need navigate to top first then press right again take user to the bottom slide (screenshot: HDTV-Interactive-Ads-04-Home-selected-move.png)
- This screen show when user navigate to the next screen (screenshot: HDTV-Interactive-Ads-06-Home-selected-move.png)
- No need looping function when to each the last slide. User need press left button to navigate to previous slide
1). Detail Ford
Safe Area Screen:
screenshot: 00-Safe-Area-guide-01.png & 00-Safe-Area-guide-04 with grid system.png
- This screens showing safe area for HDTV size
- Action buttons/clickable things need placed inside the green color area
- Background and text area can covered the red color area
- Use %(Percentage) format for the width of safe area.
Actual Screen:
screenshot: HDTV-Interactive-Ads-A-Video-01.png
- User see this screen after press enter when selected the Ford slide on Homepage
- Page layout divided by:
Left section
- Close button placed on top this section.
- Logo, title and quick information displayed in this area.
- There’s favorite icon on the right side of logo.
- User can toggle this icon by press the “C” alphabet on keyboard (screenshot: HDTV-Interactive-Ads-A-Video-01x-Favorites.png)
- Press Up, down, left and right by default need auto selected to Find Out more button (screenshot: HDTV-Interactive-Ads-A-Video-04-Hover-button.png)
- Press up need navigate to close button. Use red color text for selected close button
- Press enter when selected the close button need hide this detail page and take user back to Homepage
- Then, Press down need take back to Find Out more button (screenshot: HDTV-Interactive-Ads-A-Video-04-Hover-button.png)
- Find out more button need load different screen explained below when user press enter on keyboard
- Press right button need highlight the Start Shopping button (screenshot: HDTV-Interactive-Ads-A-Video-05-Hover-button.png)
- Use dead link for Start Shopping button
Right Section
- Re-use provided video
- Use HTML5 video player
- Video need to be auto-play
- No need build the progress bar (screenshot: HDTV-Interactive-Ads-A-Video-02-bar-progress.png)
- When reach 10 seconds before the video ended, you need show the banner on top of of video that will load the next advertisement (screenshot: HDTV-Interactive-Ads-A-Video-03-Next-Adv-preview.png)
Banner section
- Whole of this banner section can be single image based
- User can click this banner after click down button when Find out more or start shopping button selected
Option section
- This section placed in the bottom
- Create function for all options when click the related alphabet (A, B, C & D)
- Press A button take user to previous Advertisement, you can display the the Detail AMC screen
- Press B button take user to Related Advertisement, you can display the the Detail Ford Alternative
- Press C button need toggle the Favorite icon
- Press D button take user to Next Advertisement, you can display the the Detail Subway screen
2). Detail Ford Alternative
screenshot: HDTV-Interactive-Ads-AA-Video-01-Alternative-layout.png
- This is the alternative layout for Detail Ford
- For this version, video player placed on top and width need covered the screen width
- Close button by default need to use white colored
- Button navigation need to be consistent like Ford version
- Make sure user can navigate to another Options by press different alphabet
3). Detail Subway
screenshot: HDTV-Interactive-Ads-B-Slideshow-animation-01.png
- This is Detail page for Subway advertising
- Page layout divided by:
Left section
- Match content for the left section
- Press Up, down, left and right by default need auto selected to Start your order button (screenshot: HDTV-Interactive-Ads-B-Slideshow-animation-02-hover.png)
- Press right button need navigate to the 1st slide on the right section
- There’s QR code information on the bottom of left section
- Use dead link for Start your order button
Right section
- This right section is video player with image thumbnails in the bottom
- By default 1st thumbnail need to be autoplay
- Active thumbnail indicated by colored thumbnail
- Show grayscale for inactive thumbnail
- Press next button need navigate to next thumbnail and change currently playing video (screenshot: HDTV-Interactive-Ads-B-Slideshow-animation-03-hover.png, HDTV-Interactive-Ads-B-Slideshow-animation-04-hover.png, HDTV-Interactive-Ads-B-Slideshow-animation-05-hover.png)
Option Section
- Option section need works consistently like the explained section above
4). Detail AMC
screenshot: HDTV-Interactive-Ads-C-Interactive-movie-01.png, HDTV-Interactive-Ads-C-Interactive-movie-02-hover.png, HDTV-Interactive-Ads-C-Interactive-movie-03-hover.png
- User see this screen after press enter when selected the AMC slide on Homepage
- Use consistent layout and function like “1). Detail Ford” screen
- Match content like storyboard look
5). Find Out More
screenshot: HDTV-Interactive-Ads-C-Interactive-movie-04-FindOutmore.png
- This is Find out More screen
- Close button placed on fixed placement
- For this screen, user need able to scrolling up/down the page by press the up/down buttons
- Press left or right button need auto select the Close button by default
- Click right button need highlighted the Available Media from the 1st row
- Press right and left button need able to navigate all rows
- Each row can be dead link
- On top of screen is a background image
- All text/information below the image need to be editable
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give the 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 on the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build the different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when to create all styling.
- 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 scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere on the code.
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.
Browsers Requirements
- IE11
- Latest Chrome Browser (Windows & Mac)
- Latest Firefox Browser (Windows & Mac)
- Latest Safari Browser (Windows & Mac)