Challenge Overview
Welcome to the Stream Responsive UI Prototype Challenge!
The goal of this challenge is to create a Responsive HTML5 Prototype application using Bootstrap based on provided storyboard screen and challenge requirements.
Final Submission Guidelines
Important!
- Responsive layout need build using Bootstrap. Grab from this site
- This site can be your starting point to build Bootstrap breakpoints
- Create Best Practice of Responsive Design Web. Follow good tips and trick from this site
- Embed client's font in your prototype submission.
- Let us know if you face any problem related responsive layout on required platforms
- Your prototype submission must adapt fluid layout when we resize into tablet/mobile width
Files Downloadable
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6WGtzc1pjMXNBWkE&usp=sharing - Storyboard screens, PSD files and Fonts (Request Access First! Download early, big file size)
Challenge Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all required browsers.
UI Prototype Page Requirements
Each page is laid out in Desktop > Tablet > Mobile view and should respond to standard window sizes.
FYI: Best practice for responsive layout build is to build the mobile layout first before creating another layout for tablet and desktop.
1. Landing Page
Storyboard Folder: 1.0 Landing
screenshot: stream_1.0_landing.jpg
- All background image/colors need covered whole browser screen
- Main content area fixed on centered of page
- Logo can be dead link
- Background image, when we resized into wider screen, you need make all area covered with background image
- Implement fluid background image solution, see this site for example: http://unstoppablerobotninja.com/entry/fluid-images/
- Match introductory text layout and typography.
- “Get Started” buttons in page need load “Let’s Get Started” modal window. Read more details below
- “Pricing & Other Info” links in page can be dead link
- See there are some graphics in page, for desktop version, when we viewed on wider screen, you need show complete image that not look cut-off the browser screen
- Landing Page content divided by “Live TV”, “Cloud DVR”, “HBO Go” and “Don’t miss out on the awesomeness” sections
- Show same alignment for each sections like storyboard look
- Notice there’s icons when explains each sections
- Rounded in user image need build using CSS properties
- Don’t miss out on the awesomeness section, match 3 column format and each icons and text are just plain text
- Footer background need covered whole screen area
- Copyright message is plain text link
Tablet Version
screenshot: stream_1.0_landing_tablet.jpg
- For tablet version, background image on top use same size, you just need adjust the text placement
- “Live TV” section, move the laptop image below the text
- “Cloud DVR” section, icons and texts use stacked layout
- “HBO Go” section, basically remain same, just need adjust smaller width
- “Don’t miss out on the awesomeness” section, updated into 2 column format
Mobile Version
screenshot: stream_1.0_landing_mobile.jpg
- For tablet version, background image on top need resized based on device screen width
- “Get Started” button expand the width
- Notice the “The fastest WIFI around”, “HBO Go included” and “Streaming TV on any device” show as separate line
- “Plans from $60.00” hidden on mobile version
- “Live TV” section, move the laptop image below the text and adjust width based on mobile screen
- “Cloud DVR” section, move the graphic image below the text and icons and texts use stacked layout
- “HBO Go” section, move the graphic image below the text and icons and texts place below the graphic
- “Don’t miss out on the awesomeness” section, updated into 1 column format
2. Let’s Get Started Modal Window
Storyboard Folder: 2.0 Localize
screenshot: stream_2.0_Localize.jpg
- This modal always placed centered of browser screen
- Overlay background need covered all browser screen
- Match all input style
- “Existing Customer” can be dead link
- Show validation error when click “Continue” button (screenshot: stream_2.0_Localize_error.jpg)
- When validation error show up, modal height need increased.
- There’s message show up on top of modal and error input show red border
- User can close the modal by click the “x” button
- Click “Continue” button again take user to Customize page
Tablet Version
screenshot: stream_2.0_Localize_tablet.jpg
- For tablet, modal window basically look same
- You need make sure overlay covered all area on tablet width
- Show validation error message (screenshot: stream_2.0_Localize_tablet_error.jpg)
Mobile Version
screenshot: stream_2.0_Localize_mobile.jpg
- For mobile version, modal window need fluid width as mobile screen width
- Modal window placement for mobile need displayed on top of screen
- All input placed in separated line
- “Continue” button need adjust the width based on window screen
- “Existing Customer” link move down on mobile version
- Show validation error message (stream_2.0_Localize_mobile_error.jpg)
3. Customize
Storyboard Folder: 2.1 Customize
screenshot: stream_2.1_Customize-1.jpg
- This page use fluid background color that covered all area
- Logo placed in the left side
- Breadcrumb placed on top of page
- White colored text is link, grey colored texts are not clickable
- Click “My Order Summary” button need load flyout. Explains more details below
- “Monthly Total” displayed in the right side
- “Each Customize” section need use collapsible function.
- On collapsed stated, you just need display title and quick information text. Arrow need updated into right side
- For each section only 1 option can be selected
- All boxes area are selectable and marked with green colored border
- When user click “Upgrade” button, the previous “Include” button become disable (screenshot: stream_2.1_Customize-2.jpg)
- “Cancel” button will revert the action.
- Click “View channel line up” need show the modal window(screenshot: stream_2.1_Customize_3.jpg)
- User can close the modal by click “x” button
- Match background color style
- Show list of Channel list in table format
- For “Choose Modem”, create custom radio button style for selected and not selected state
- “Details and Restrictions” can be dead link
- “Begin Checkout” button take user to Checkout page
Tablet Version
screenshot: stream_2.1_Customize_tablet_1.jpg
- For tablet view, Breadcrumb move to the right side
- Make sure layout adapting landscape and portrait view
- Logo look more aligned with content
- Collapsible arrows aligned with boxes
- Channel Lineup look for tablet view (screenshot: stream_2.1_Customize_tablet_2.jpg)
Mobile Version
screenshot: stream_2.1_Customize_mobile_1.jpg
- Black header bar can stay fixed on top for mobile version
- Logo placed in top left
- Breadcrumb just show current step in the right side. There’s Step 1 of 4 text added for mobile version
- “My Order Summary” button turn into button with arrow. Text become hidden.
- “Monthly Total” placed in the right side
- You need adjust font size to follow storyboard look
- Each sections use fluid width
- Notice collapsible arrow not have rounded in mobile version
- “Include” and “Upgrade” become full width buttons
- You also need create “Remove” button for select the “Upgrade” flow
- Channel Lineup look for mobile view (screenshot: stream_2.1_Customize_mobile_2.jpg)
- Footer use center alignment in mobile version
Order Summary Flyout
Storyboard Folder: 2.1.1 Order Summary
screenshot: stream_2.1.1_Order_Summary.jpg
- “Order Summary” show up after click “My Order Summary” button
- You can use slide down/up effect to show the Order Summary Content
- Show alternate background color for table row
- Match typography for Order Summary screen
- Click the button again in hide the flyout
Tablet Version
screenshot: stream_2.1.1_Order_Summary_mobile.jpg
- Basically look same with desktop version, just need adapt fluid width
Mobile Version
screenshot: stream_2.1.1_Order_Summary_tablet.jpg
- “My Order Summary” button turn into button with arrow. Text become hidden.
- Order Summary form adapt fluid width
4. Checkout
Storyboard Folder: 2.2 Checkout
screenshot: stream_2.2_Checkout_1.jpg
- This Checkout page look and feel
- User can click completed step on breadcrumb
- Click My Order Summary button need load the flyout.
- “Account Holder Details”, form divided by 2 columns
- “This is not my service address” can be dead link
- Match input style and width
- Checkboxes need use custom style
- “Shipping Address” use toggle options
- “Select different address” need load another form (screenshot: stream_2.2_Checkout_2.jpg)
- “Shipping Speed” section, User can select between 2 options
- “Payment Information”, “Credit Card” icons show only 1 active credit card
- Inactive state show grey colored icons
- Match Payment Information form content and layout
- "BIlling Address” placed in the bottom of page
- Show “CVV tooltip” when user hover at “?” button (screenshot: stream_2.2_Checkout_5.jpg)
- User can close the tooltip when click “x” button
- “Back” button take to Customize page
- “Review” button take to Review Order page
- Click “Review” button need show validation error message on top of page and red border on inputs (screenshot: stream_2.2_Checkout_3.jpg)
- Create separated page to show another Checkout page version with “Schedule Installation” section (screenshot: stream_2.2_Checkout_4.jpg)
- User can navigate the calendar by click Arrow left and right
- Show available date with white colored background
- Selected date marked with green border
- Create custom style for drop down
Tablet Version
screenshot: stream_2.2_Checkout_tablet_1.jpg
- Basically this page look same with desktop version
- Collapsible arrows aligned with boxes
- “Select different address” need load another form (screenshot: stream_2.2_Checkout_tablet_2.jpg)
- Click “Review” button need show validation error message on top of page and red border on inputs (screenshot: stream_2.2_Checkout_tablet_3.jpg)
- Show “CVV tooltip” when user tap at “?” button (screenshot: stream_2.2_Checkout_tablet_5.jpg)
- Create separated page to show another Checkout page version with “Schedule Installation” section (screenshot: stream_2.2_Checkout_tablet_4.jpg)
Mobile Version
screenshot: stream_2.2_Checkout_mobile_1.jpg
- For mobile version each sections need adapt fluid layout
- Check each sections for column layout and how forms placed
- “Select different address” need load another form (screenshot: stream_2.2_Checkout_mobile_2.jpg)
- Click “Review” button need show validation error message on top of page and red border on inputs (screenshot: stream_2.2_Checkout_mobile_3.jpg)
- Show “CVV tooltip” when user tap “?” button (screenshot: stream_2.2_Checkout_mobile_5.jpg)
- Create separated page to show another Checkout page version with “Schedule Installation” section (screenshot: stream_2.2_Checkout_mobile_4.jpg)
- For mobile version, calendar no need the cell background, just different color for dates.
- “Review Order” and “Back” button displayed as stacked row
5. Review Order
Storyboard Folder: 2.3 Review Order
screenshot: stream_2.3_Review_Order_1.jpg
- This is Review Order screen
- “Stream Option” displayed as table format
- Put dead link for Edit button
- Create alternate row for table list
- Order Information displayed content as 2 column layout
- This is not my service address can be dead link
- Checkbox displayed in the bottom
- “Details and Restriction” can be dead link
- “Back” button take to Checkout page
- Click Submit button need show Validation Error message and red colored text (screenshot: stream_2.3_Review_Order_2.jpg)
- Show error message on top of page and text in Order Information
- Click Submit button take to Create Account page
Tablet Version
screenshot: stream_2.3_Review_Order_tablet_1.jpg
- Basically tablet version not show much differences, you need adapt fluid layout
- Click Submit button need show Validation Error message and red colored text (screenshot: stream_2.3_Review_Order_tablet_2.jpg)
Mobile Version
screenshot: stream_2.3_Review_Order_mobile_1.jpg
- For mobile version, each section show collapsible function
- Arrow to toggle section placed before the title
- Table need to be fluid width
- Order Information show content as separated lines
- Click Submit button need show Validation Error message and red colored text (screenshot: stream_2.3_Review_Order_mobile_2.jpg)
6. Create Account
Storyboard Folder: 2.4 Create Account
screenshot: stream_2.4_Create_Account.jpg
- Use existing Confirmation page below as base of this screen
- Create Account Modal need load by default
- Form divided by 2 columns layout
- You need create custom style for drop down
- “Submit” button need close the modal and then show up Confirmation on top of Landing page. Read more details below
Tablet Version
screenshot: stream_2.4_Create_Account_tablet.jpg
- Tablet version basically look same, you need make sure overlay adapt tablet screen
Mobile Version
screenshot: stream_2.4_Create_Account_mobile.jpg
- For mobile version, modal window need adapt browser screen width
- All inputs display as separated line
- User should be able to scroll the modal window in less height screen like on iPhone 4 screen
7. Confirmation
Storyboard Folder: 3.0 Confirmation
screenshot: stream_3.0_Confirmation.jpg
- This is confirmation page
- Blue bar and black bar show up on top of page, and need filled whole browser screen
- All text with underline style are links, put dead link for now
- “Add to Calendar” button can be dead link
- Background image need covered whole area
- “App Store”, “Google Play” and “Amazon” buttons are clickable, put dead link for now
- Match different alignment for “Get your HBO” and “Find Hotspot” section
Tablet Version
screenshot: stream_3.0_Confirmation_tablet.jpg
- For tablet version, background image need adapt browser screen width
- Blue and black header height need auto expand when content inside it move down
- “App Store”, “Google Play” and “Amazon” buttons placement need adapt tablet width
Mobile Version
screenshot: stream_3.0_Confirmation_mobile.jpg
- For Mobile version, Blue and black header height need auto expand when content inside it move down
- “Watch TV” section show different content
- “Xfinity” and “App Store” buttons can be dead link
- “Get your HBO” section, show image and buttons in separated lines
- “Get your HBO” section, show different app buttons.
- “Find Hotspot” section, show image and buttons in separated lines
- “Find Hotspot” section, show different app buttons.
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)