Challenge Overview
Welcome to the Stream Responsive Continuation Updates UI Prototype Challenge!
The goal of this challenge is to update existing Responsive HTML5 Prototype application based on provided storyboard screen and challenge requirements explained more details below.
Final Submission Guidelines
Files Downloadable
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6WGtzc1pjMXNBWkE&usp=sharing - Storyboard screens, PSD files and Fonts (Request Access First! Download early, 300Mb file size)
UI-Prototype.zip - UI Prototype as Base Updates
Challenge Overview
The main task of this competition is to update existing Responsive HTML5 prototype based on the provided storyboard designs and challenge requirements below. Your prototype must work properly in all required browsers.
UI Prototype Update Requirements
General Updates
- UI Prototype using Responsive layout that built on bootstrap library
- Follow current coding style and rules for all HTML/CSS/JS files
- Let us know if you face any problem related responsive layout on required platforms
- Your prototype submission must remain fluid layout when we resize into tablet/mobile width
- All images created on Retina image sizes, make sure you apply same solution. Image need look sharp when viewed on Retina and Standard devices
- Make logo asset in top left transparent, instead of white box
- Overall where it says “Client” in text let’s remove and just have “Stream”
- We need tabbing with keyboard working to navigate from one input to another
- We need error validation works for every sections.
- Error messages should function as anchor links to respective sections of the page
- No storyboard uploaded for Tablet and Mobile, we need your best adjustment when implement new updates. Let us know if you need clarification on any things.
1. Landing Page
screenshot: 1.0_Landing.jpg
page to update: landing.html
- The white bar with the “Get started” button on right (just below the learn more arrow as you scroll down) is intended to floating at the top of the page as you continue to scroll (screenshot: 1.0_Landing_Sticky_Nav.jpg)
- The “Sticky Bar” need shadow in the bottom.
- The “Sticky Bar” navigation will be hidden by default and when user reach top area
- User shouldn’t even see the “Sticky Bar” until they have scrolled past the “Learn More“ button (it should fade in); it’s not supposed to actually be between the hero and the lower portion of the page. Likewise, it should fade out as soon as the bottom of “Learn More“ comes into view.
- We need add Rotating Carousel, you can add below main image in landing page
- You can grab code and function from this site http://www.comcast.com/ OR create your own custom code.
- We need carousel use responsive layout when viewed on Desktop/Tablet and mobile.
- There are many other changes to the layout and content on this page illustrated in the latest PSD. Pay attention to small details
- Update main image text like storyboard new look
- Reduce main image area to fit within 768px height, You might need adjust the margin/spacing for all elements.
- Update “Get Started” button style
- Arrow below “Learn More” button updated
- “Pricing and Other info” link no need underline
- Click “Pricing and other info” popup need show Modal Window. Apply for all links (screenshot: 1.0_Landing_Pricing.jpg)
- The “Get started” call to action button should be consistent and should reflect our most effective coloring and wording
- “Get Started” Modal Window look (screenshot: 1.0_Landing_Get_Started.jpg)
- Update title bar into new color
- Update close button into new color like button style
- We need update Apartment into not required field. You can remove red border on error validation
- We need apply Validation Error function, when user type error not show up
- Text link updated into new color
- “Continue” button update the style
- Notice, we change “Client Stream” bar into “Sticky Nav” as stated above
- Update every image, text and icon based on new storyboard look
- “Get Started” button style updated with new color
- “Pricing and Other Info” updated with new color
- Footer need updated content
2. Customize
screenshot: 2.1_Customize_Default.jpg
page to update: customize.html
- We need the monthly total in “My Order Summary” actually work based on user selection on this page (screenshot: 2.1.1_Order_Summary.jpg)
- Base price is $60 that will reflected on “My Order Summary” for all sections
- “Order Total” placed in the bottom of flyout
- Showtime $10 was defaulted in the order summary when it was not pre selected (it should not be defaulted)
- Modem option: “I need a modem should be default” selected
- Global: Channel lineup overlays should not use “drop in” transition, they should just appear on click of “view channel” button (screenshot: 2.1_Customize_Lineup.jpg)
- Premium Channels (Incorrectly labeled as “On Demand Subscriptions": After clicking “Add” the “Cancel" option should say “Remove” (“Cancel” is correct for the “Upgrade” option on Channels and Speed though). screenshot: 2.1_Customize_Upgrade.jpg
- Premium Channels: Details and Restrictions link should open an overlay similar to “Pricing and other info” (screenshot: 1.0_Landing_Pricing.jpg)
- “Details & Restriction” should be clickable, show modal window like (screenshot: 1.0_Landing_Pricing.jpg) with updated “Details/Restriction” as the title
- “List Approved Modems” should be clickable, show modal window like (screenshot: 1.0_Landing_Pricing.jpg) with updated “List Approved Modems” as the title
- There are many other changes to the layout and content on this page illustrated in the latest PSD. Pay attention to small details
- “Begin Checkout” button use different styling
- “My Order Summary button” use different styling
- There’s message below “Monthly Total”
- Footer use different color
3. Checkout
screenshot: 2.2_Checkout.jpg
page to update: customize.html & checkout-tech.html
- Same as Customize, we need the monthly total in “My Order Summary” actually work based on user selection on this page
- Base price is $60 that will reflected on “My Order Summary” for all sections
- We need tabbing with keyboard working to navigate from one input to another
- We need error validation works for every sections (screenshot: 2.2_Checkout_error.jpg)
- Error messages should function as anchor links to respective sections of the page
- Add a different shipping address: remove the address values that show up by default (should be blank by default) (screenshot: 2.2_Checkout_Different_Shipping.jpg)
- Shipping speed: Need correct Price: Standard SIK $9.95 | Expedited SIK $39.95 | Pro Install $33.35
- Add new row for “Pro Install ”
- Billing address: Should say “Add a different billing address"
- Add a different billing address: remove the address values that show up by default (should be blank by default)
- Account Holder Details: “This is not my service address” should produce modal window overlay (screenshot: 2.2.1_Checkout_NotMyAddress.jpg)
- Account Holder Details: Please add “Password” field next to “Email address” field . You can grab from this modal (confirm.html)
- Also need add “?” button to show the tooltip
- Re-use existing tooltip function from “CVV” tooltip
- When click the “Password” tooltip need show this message “Must be between 8-16 characters, include letters, numbers or special characters. Do not include space. Password is case sensitive”
- Shipping Speed: Swap the delivery time estimates under the shipping options, this was a mistake in the PSD (1-3 days should be Expedited not Standard)
- Payment Information: Respective card icon should highlight upon entry of first 4 digits
- “Begin Checkout” button use different styling
- “Back” button use different styling. Refer this screenshot (2.3_Review_Order_Billing_Address.jpg)
4. Order Review
screenshot: 2.3_Review_Order.jpg
screenshot: 2.3_Review_Order_Billing_Address.jpg
screenshot: 2.3_Review_Order_Error.jpg
screenshot: 2.3_Review_Order_Same_Default.jpg
page to update: review.html
- Same as Customize, we need the table display correct content based on user selection on previous page
- Bottom $XX.XX fields should reflect amounts above
-“Edit” links should jump back to related previous step
-“This is not my service address” should produce respective overlay. Refer “This is not my service address” modal window (screenshot: 2.2.1_Checkout_NotMyAddress.jpg)
- Checkbox for “I am over 18 years…” should not be checked by default and page should throw an error if “Submit…” is clicked without checking
- Details and Restrictions link should open an overlay to “Pricing and other info” (screenshot: 1.0_Landing_Pricing.jpg)
- Pricing at bottom of page needs to reflect the “Order Total” which is different than the one-time and monthly charges.
5. Confirmation
screenshot: 3.0_Confirmation.jpg
page to update: confirm.html
- Remove “Password” and “Confirm” fields from this modal
- “Order details” link should open “Print Receipt”
- There are many other changes to the layout and content on this page illustrated in the latest PSD. Pay attention to small details
- Update “Success” bar color
- Update main background theme
- Use different social button style
- Remove “Get your HBO on” section
- “Find Hotspot” content use different theme and styling
- Footer use different color
6. Print Receipt
(screenshot: 3.0.1_Confirmation_PrintReceipt.jpg)
- This is new page
- You can re-use table content like in Order Review page
- Match content like storyboard look
- There’s Print button in the top right of page
- For now now, click Print button take user to Confirmation page
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML5/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build 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 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 own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in 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
Windows & Mac OS
- Firefox latest
- Chrome latest
Tablet/Mobile
- Chrome Browser on iPad (Landscape & Portrait)
- Chrome Browser on iPhone (Landscape & Portrait)