Challenge Overview
Welcome to Hercules Release Note UI Design V2 Prototype Update Challenge
The main task of this UI Prototype is to create Hercules X1 Release Note V2 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:
Release-Note-Storyboard.zip - Storyboard as Base Updates
X1-V2-UIPrototype.zip - Reference Prototype of proper ratio implement on Client TV Application
XFinity-Sans-Fonts.zip - Fonts to use in your submission
Important!
- You need build this prototype using Responsive solution.
- Provided storyboard using 1920px × 1080px. You need check and test by re-size in all required browser all elements inside the page need scale up/down in proper ratios.
- We provide you prototype that runs well on our TV application. Please follow the code implementation (X1-V2-UIPrototype.zip)
- User will navigate every element by TV Remote, in your prototype that will achieved by press some buttons via keyboard
- 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 other design setting
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- All data content need load from JSON files
- Your prototype submission needs to be “lightweight”, minimize the amount of HTML/CSS/JS in use as these will need to run on the “low” processor boxes
0.) Create Index Page
- You need create Index page contains of these 2 links explained below
- User need able to press up and down to navigate 2 links for Notification Flow and Project App Release Notes
Flow
- Prototype need open in same page
1). Notification Flow
Screenshot: 01-Hercules X1 Interactive TV Application pushes a notification to a user.jpg
- After landed on this page, press delete/backspace on this page need take user back to Index page
- Just need display Background image by default
- After some seconds, notification modal window pop up
- View Details button selected by default. Press enter button take user to Release Note Detail page
- This is Release Note Detail page (Screenshot: 02-A-Release note details with some content variations.jpg)
- Follow safe area guideline (Screenshot: 05-Safe Area.jpg)
- Logo and title placed on top lef
- Exit button placed on the right side. This is just label.
- Press delete/backspace on this page need take user back to previous landing page
- Month/Year navigator placed on top
- 1st option selected by default, user need press left/right to navigate
- Notice there’s gradient style on the last option and arrrow
- Press down and up need scrolling the page of selected month/year (Screenshot: 02-B-Release notes details (scroll down).jpg)
- Match content like storyboard look
- This is screen when user change to another month/year (Screenshot: 03-A-User see Previous Release Notes.jpg)
- Display different content
- Match font properties of release note content
- Scrolling down the page (Screenshot: 03-B-Previous Release notes details (scroll down).jpg)
- Another sample when navigate to another month/year (Screenshot: 04-A-User see Previous Release Notes.jpg)
- Scrolling down the page (Screenshot: 04-B-Previous Release notes details (scroll down).jpg)
- Ignore this selected image on your prototype. Just need put plain image (Screenshot: 04-C-Previous Release notes details (selected).jpg)
2). Project App Release Notes Flow
- User landed to this from Project App Setting Flow on Index page
- Follow safe area guideline (Screenshot: 07-Safe Area.jpg)
- Selected month/year need remain use top/bottom border
- Need select 1st option by default
- For this page, you need display Product Navigator left sidebar (Screenshot: 05-A-List products.jpg)
- 1st option need selected by default for Product Navigator
- User press up/down need scrolling the page (Screenshot: 05-B-List products(scroll).jpg)
- This is sample when user navigate to another product (Screenshot: 05-C-List products.jpg)
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 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.
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.
BROWSER REQUIREMENTS
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser