Challenge Overview
Welcome to Hercules Sales Space Responsive UI Prototype Challenge
The main task of this challenge is to create the Hercules Internet Responsive UI Prototype based on the provided wireframe basic layout and function. We also provide .ai Illustrator file to guide of our expected layout and element design
On this challenge, we need you focus to create responsive prototype with Bootstrap base.
Final Submission Guidelines
Documentation Provided
101215_SalesSpace-Wireframes.pdf - Wireframe Layout
Storyboard.zip - .AI Adobe Illustrator format Storyboard Design
XFinity-Sans-Fonts.zip - Client font
General Notes
- For this challenge you need build the layout based on wireframe layout (101215_SalesSpace-Wireframes.pdf). And the same time apply expected layout and design from storybaord design (Storyboard.zip)
- All pages of UI Prototype must support responsive design solution!
- Use provided font (XFinity-Sans-Fonts.zip), suggest proper typography!
- No framework allowed for this challenge, you need build using HTML plain UI Prototype
- Base of prototype need created using Bootstrap layout.
- All form element as possible need to use browser based style OR from bootstrap style
- Re-create all icons in your prototype based on XFINITY_Sans_Icon-Font OR Bootstrap Icons
- Create interaction/functions by using Bootstrap component and Bootstrap Javascript
- Use JSON to load and save all datas
- 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:
Refer to 101215_SalesSpace-Wireframes.pdf for page explained below
1). Sign On
wireframe: 101215_SalesSpace-Wireframes.pdf > page 2
storyboard: Not provided
- This is Sign On page look and feel
- Sign On form need to be centered
- Logo placed on center of page. Grab logo from storyboard. Use Proper size
- Show welcome message below the logo
- Re-create all icons in your prototype based on XFINITY_Sans_Icon-Font OR Bootstrap Icons
- Login input are Network ID and Password
- There’s checkbox for remember my Network id
- And Sign in button, click this button take user to Dashboard screen
- Windows Auto Sign in button can be dead link for now
- For mobile version, layout can remain same as desktop version. Just need make sure all elements use fluid layout
2). Dashboard
A. Desktop version
storyboard: 01-Dashboard-Desktop.png
- This is Desktop look and feel
- Prototype need use fluid layout
- Header bar need always fixed on top of browser screen
- In the left site, there’s icon to activate submenu (01-Dashboard-Desktop-Menu.png)
- Show separated sections for sub-menu
- Icons in the left side and title in the right side
- Icons need created using css, match the styling
- Use red colored icons when sub-menu activated
- When submenu show up, you need show overlay background that covered whole content area, except the header bar
- User icon placed next to sub-menu icon. Put dead link for now
- Then, main navigation placed next to user icon
- Create active and inactive state for menu
- In the right side, there’s SalesSpace logo, put dead link for now
- Main content area need use 2 columns layout format
- Each boxes need use fluid width, also the content inside it
RGUs to Quota
- Show vertical chart for this box
- Need show legend in the bottom of chart
- There’s number show above each bar
- Use dotted line for vertical background
- Need able to turn on/off the bar by click the legend rectangle
Commonly Used Apps
- Use 3 columns layout for each boxes
- Buttons need created using css, match the styling
- All buttons need clickable, put dead link for now
Conversion Rate
- Show horizontal chart for this box
- Need show legend in the bottom of chart
- There’s percentage show above each bar
- Use dotted line for horizontal background
- Need able to turn on/off the bar by click the legend rectangle
Quick Links
- In the title area, place number indicator. Make sure number not break when filled with longer character
- Each row need clickable, put dead links for now
- Show arrow button in the right
- Match the links color
Alert
- Show red colored border and number indicator
- In the title area, place number indicator. Make sure number not break when filled with longer character
- Each row need clickable, put dead links for now
- View All button placed in the bottom, put dead link for now
- Match each row content with date and title
Time to Assist
- This box will be table format
- Need create alternating table row
- Show different time with different icon and arrow
News
- Show grey colored border and number indicator
- Need show border like other boxes
- In the title area, place number indicator. Make sure number not break when filled with longer character
- Each row need clickable, put dead links for now
- Show arrow button in the right
- View All button placed in the bottom, put dead link for now
- Match each row content with date and title
B. Mobile Version
storyboard: 02-Dashboard-Mobile.png
02-Dashboard-Mobile-menu.png
- For mobile version, header bar divided by 2 sections
- Sub menu and user icons place in the top area, logo in the right side
- Main navigation is swipeable
- All boxes need accommodate whole browser screen
- Every title boxes use center alignment for mobile version
RGUs to Quota
- Label in the left side need move on top of bar
- Need make sure every sizes reduced properly
Commonly Used Apps
- Use 2 columns layout for mobile version
Conversion Rate
- No layout differences than desktop version
- Need make sure every sizes reduced properly
Quick Links
- No layout differences than desktop version
- Need make sure every sizes reduced properly
Alert
- View all button accommodate whole box screen
Time to Assist
- Table use still 2 columns format
News
- View all button accommodate whole box screen
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.
- Using best practice of Responsive Design Solution!
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.
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.
- Make sure your submission look sharp for Retina and Standard devices
Browser Requirements
- Safari Latest Browser
- Firefox Latest Browser
- Chrome Latest Browser
- Safari on Mobile Devices
- Safari on Tablet Devices