Challenge Overview
Welcome to Hercules Retail ToolKit iPad and Desktop UI Prototype Challenge
The main task of this challenge is to create Responsive UI Prototype of the Hercules Retail ToolKit based on the provided Storyboard design and specification below. For this challenge, we just want HTML/CSS ONLY, No (or very limited) Javascript. The next phase will be a code challenge to add Angular and service integrations.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Downloadable Files:
https://drive.google.com/folderview?id=0B31nrwic_6z0NnBES2NUbWlaSmc&usp=sharing
Storyboard.zip - Use this storyboard design when build UI Prototype
Links-20160828T042356Z.zip - Graphic Assets
Fonts.zip - Fonts
Retail_Toolkit_it10.3_v3.pdf - Screenshots of Application Flow
General Notes
- You need build the layout based on Retail Toolkit flow like provided document (Retail_Toolkit_it10.3_v3.pdf)
- Storyboard design files created on Adobe Illustrator (.ai format) and Adobe InDesign (.indd)
- Provided storyboard using Landscape Tablet layout, your submission need use fluid layout for Tablet Portrait and whole Desktop screen size.
- Your UI Prototype need apply best practice responsive solution that will works on Tablet (1024px x 768px) and Desktop (1024px and upper) screen size.
- Your prototype must look sharp on Retina and Standard View!
- Use provided fonts in your prototype, suggest proper typography!
- You can use Base of prototype by using Bootstrap layout or come up with your method
- All form element as possible need to use browser based style OR from bootstrap style
- For some missing graphic/icons, please re-create them by using icon fonts from these websites:
http://fontawesome.io/icons/
http://fontello.com/
https://icomoon.io/#icon-font
- Please use your best judgement about consistency layout and functions. Let us know if you need clarification about via challenge forum.
UI Prototype Page Requirements
Note: Refer to Retail_Toolkit_it10.3_v3.pdf for storyboard flow
1). Login
Pdf: page 1
- Application logo placed on top
- Form need placed centered of browser screen
- There are text placeholder by default
- Match styling for both input
- Login button using rounded corner
- Hover state on Login button need use blue colored background (Pdf: page 2)
- Error validation show up on top of text inputs (Pdf: page 3)
- Click Login button again take user to Check-In page (Pdf: page 4)
2). Dashboard
Pdf: page 5
- On the header bar, there’s application logo placed on the left side
- Header bar should be fixed on top
- Dropdown menu next to the logo
- Click dropdown need load the dropdown options (Pdf: page 27 & page 28)
- Follow dropdown styling and apply consistently for all dropdown in this prototype
- Username and Setting button placed on the right side
- Click Setting button need load the right sidebar (Pdf: page 21)
- Follow hover state style for the right sidebar menu (Pdf: page 22)
- Click Xfinity Store Location need load different page explained below (Pdf: page 22)
- Check-In and Profile Tabs placed below the header
- Match active/inactive state for tab
Check-In tab
Pdf: page 5
- On the top part, menu button placed on the left side
- Another sub-tab for My Day and My Store placed centered
- And, + button on the right side
- Set My Store as active tab with arrow pointed down
- You can use same data for My Day like My Store for now
- On the blue light background, text need to be editable.
- On the blue dark background, is bar for day navigator. On the left side is calendar icon and on the right side is next button
- Match table rows like storyboard
- Highlighted rows with yellow background
- Match the typography and text
- There’s arrow on the right side of each rows
- For missing graphics/Icons need recreated from the font icons as explained above
Profile tab
Pdf: page 6
- For this Profile tab, you need display search input to Look Up Customer
- Scan Bill or Device placed on the right side
- Sample screen on tablet when user start typing (Pdf: page 7)
- Error validation message placed on top with red color (Pdf: page 8)
- Search results shows up in the bottom as table layout
- on Desktop, press enter need load the table
- Each row need hoverable with blue colored text (Pdf: page 9)
- Click the row need load the modal window (Pdf: page 10)
Customer Modal Window
Pdf: page 10
- Match text like provided storyboard
- There are selection for type of validation
- On selected boxes, need use blue colored border and background (Pdf: page 14)
- There’s a link for “ID does not match above address, or no ID available” on the bottom of boxes
- Click this need load another different content to let user filled Social security (Pdf: page 11)
- Message placed on top
- Text input placed below with Enter button
- Click the button need display the error message (Pdf: page 12)
- Click Enter need load failed message (Pdf: page 13)
- Click x button need close the modal
- After modal close need load Customer Detail Page explained below
3). Customer Detail
Pdf: page 15
- Notice there is Customer name next to Recent Customer dropdown
- Click X button need load Close Customer Account modal window, explained below
- Page divided by Customer information and Appointments
Customer information
- Match content like storyboard
- There are blue colored links on the right side of information
- Hover state for links (Pdf: page 17)
- For missing graphics/Icons need recreated from the font icons as explained above
Appointments
- On the left side is the upcoming list for Appointments
- Table layout with colored cells placed on the right side
- There are label for x and y axis
- User can click each cells
- Click Truck Rolls for Past 7 Days need load the modal window (Pdf: page 16)
- Display table layout for the content
4). Compare Bills
Pdf: page 18
- Back button take user to Customer Detail screen
- User can expand/collapse each rows by click the button on the left side (Pdf: page 19)
- This is expanded row look (Pdf: page 20)
- Match content like storyboard
- Click Expand all link need expand all rows
- Expand All change to "Collapse all" after expand all rows
- For months column, table header displayed dropdowns
- Match color for each rows on the last column
5). Xfinity Store Location
(Pdf: page 23)
- Content of this screen loaded as iframe from this site: https://customer.xfinity.com/service-center-locations
- You need put bar contains the title
- X button take user back to dashboard page
6). Close Customer Account
(Pdf: page 24)
- Match modal window content
- There are No and Close button placed on the bottom right (Pdf: page 25)
- After click Yes button need load Profile tab with Look Up Customer (Pdf: page 26)
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.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS 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 Bower 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
- Safari on iPad
The main task of this challenge is to create Responsive UI Prototype of the Hercules Retail ToolKit based on the provided Storyboard design and specification below. For this challenge, we just want HTML/CSS ONLY, No (or very limited) Javascript. The next phase will be a code challenge to add Angular and service integrations.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Project Details:Downloadable Files:
https://drive.google.com/folderview?id=0B31nrwic_6z0NnBES2NUbWlaSmc&usp=sharing
Storyboard.zip - Use this storyboard design when build UI Prototype
Links-20160828T042356Z.zip - Graphic Assets
Fonts.zip - Fonts
Retail_Toolkit_it10.3_v3.pdf - Screenshots of Application Flow
General Notes
- You need build the layout based on Retail Toolkit flow like provided document (Retail_Toolkit_it10.3_v3.pdf)
- Storyboard design files created on Adobe Illustrator (.ai format) and Adobe InDesign (.indd)
- Provided storyboard using Landscape Tablet layout, your submission need use fluid layout for Tablet Portrait and whole Desktop screen size.
- Your UI Prototype need apply best practice responsive solution that will works on Tablet (1024px x 768px) and Desktop (1024px and upper) screen size.
- Your prototype must look sharp on Retina and Standard View!
- Use provided fonts in your prototype, suggest proper typography!
- You can use Base of prototype by using Bootstrap layout or come up with your method
- All form element as possible need to use browser based style OR from bootstrap style
- For some missing graphic/icons, please re-create them by using icon fonts from these websites:
http://fontawesome.io/icons/
http://fontello.com/
https://icomoon.io/#icon-font
- Please use your best judgement about consistency layout and functions. Let us know if you need clarification about via challenge forum.
UI Prototype Page Requirements
Note: Refer to Retail_Toolkit_it10.3_v3.pdf for storyboard flow
1). Login
Pdf: page 1
- Application logo placed on top
- Form need placed centered of browser screen
- There are text placeholder by default
- Match styling for both input
- Login button using rounded corner
- Hover state on Login button need use blue colored background (Pdf: page 2)
- Error validation show up on top of text inputs (Pdf: page 3)
- Click Login button again take user to Check-In page (Pdf: page 4)
2). Dashboard
Pdf: page 5
- On the header bar, there’s application logo placed on the left side
- Header bar should be fixed on top
- Dropdown menu next to the logo
- Click dropdown need load the dropdown options (Pdf: page 27 & page 28)
- Follow dropdown styling and apply consistently for all dropdown in this prototype
- Username and Setting button placed on the right side
- Click Setting button need load the right sidebar (Pdf: page 21)
- Follow hover state style for the right sidebar menu (Pdf: page 22)
- Click Xfinity Store Location need load different page explained below (Pdf: page 22)
- Check-In and Profile Tabs placed below the header
- Match active/inactive state for tab
Check-In tab
Pdf: page 5
- On the top part, menu button placed on the left side
- Another sub-tab for My Day and My Store placed centered
- And, + button on the right side
- Set My Store as active tab with arrow pointed down
- You can use same data for My Day like My Store for now
- On the blue light background, text need to be editable.
- On the blue dark background, is bar for day navigator. On the left side is calendar icon and on the right side is next button
- Match table rows like storyboard
- Highlighted rows with yellow background
- Match the typography and text
- There’s arrow on the right side of each rows
- For missing graphics/Icons need recreated from the font icons as explained above
Profile tab
Pdf: page 6
- For this Profile tab, you need display search input to Look Up Customer
- Scan Bill or Device placed on the right side
- Sample screen on tablet when user start typing (Pdf: page 7)
- Error validation message placed on top with red color (Pdf: page 8)
- Search results shows up in the bottom as table layout
- on Desktop, press enter need load the table
- Each row need hoverable with blue colored text (Pdf: page 9)
- Click the row need load the modal window (Pdf: page 10)
Customer Modal Window
Pdf: page 10
- Match text like provided storyboard
- There are selection for type of validation
- On selected boxes, need use blue colored border and background (Pdf: page 14)
- There’s a link for “ID does not match above address, or no ID available” on the bottom of boxes
- Click this need load another different content to let user filled Social security (Pdf: page 11)
- Message placed on top
- Text input placed below with Enter button
- Click the button need display the error message (Pdf: page 12)
- Click Enter need load failed message (Pdf: page 13)
- Click x button need close the modal
- After modal close need load Customer Detail Page explained below
3). Customer Detail
Pdf: page 15
- Notice there is Customer name next to Recent Customer dropdown
- Click X button need load Close Customer Account modal window, explained below
- Page divided by Customer information and Appointments
Customer information
- Match content like storyboard
- There are blue colored links on the right side of information
- Hover state for links (Pdf: page 17)
- For missing graphics/Icons need recreated from the font icons as explained above
Appointments
- On the left side is the upcoming list for Appointments
- Table layout with colored cells placed on the right side
- There are label for x and y axis
- User can click each cells
- Click Truck Rolls for Past 7 Days need load the modal window (Pdf: page 16)
- Display table layout for the content
4). Compare Bills
Pdf: page 18
- Back button take user to Customer Detail screen
- User can expand/collapse each rows by click the button on the left side (Pdf: page 19)
- This is expanded row look (Pdf: page 20)
- Match content like storyboard
- Click Expand all link need expand all rows
- Expand All change to "Collapse all" after expand all rows
- For months column, table header displayed dropdowns
- Match color for each rows on the last column
5). Xfinity Store Location
(Pdf: page 23)
- Content of this screen loaded as iframe from this site: https://customer.xfinity.com/service-center-locations
- You need put bar contains the title
- X button take user back to dashboard page
6). Close Customer Account
(Pdf: page 24)
- Match modal window content
- There are No and Close button placed on the bottom right (Pdf: page 25)
- After click Yes button need load Profile tab with Look Up Customer (Pdf: page 26)
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.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS 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 Bower 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
- Safari on iPad