Challenge Overview
Welcome to the SunShot - Solar Merchant - Platform Responsive UI Prototype Challenge! Solar Merchant is a platform for commercial developers to scope new projects. The businesses who don’t own building is very difficult for them to go solar. The goal of this project is to simplify and shorten the purchasing of solar for selling to commercial businesses.
For this challenge, the goal is to create the responsive HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery or AngularJS for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the responsive HTML prototype of this app by using industry standard best practices.
Primary Requirements:
1. Main browser requirements will be IE8.
2. IE7 should be supported as well but not priority during the submission phase. Any issues should be fixed during the final fix. You can use third party files to support Bootstrap for IE7 (ex. https://github.com/coliff/bootstrap-ie7)
3. All video placeholders should embed responsive youtube video. You can get sample videos here.
4. All buttons should utilize the color coded buttons from Bootstrap. Adjust them accordingly to fit in with the storyboard.
5. Make sure to use Bootstrap’s Form elements/markup but make necessary adjustments to match the storyboard.
6. Implement retina version of the pages. Retina files are in the “2x” folder.
7. Page layout is fluid. The sidebar will be in fixed width, while the right pane will be fluid.
8. Minimum width should bet set to have a similar width as with the “1x” storyboard.
Page and Screen Requirements:
The following are the screens and functionalities needed for this challenge.
1. Intro page
- See Home-Page.png for reference.
- Login button - this will trigger a standard Bootstrap modal with username, password, and a button that will lead the user to the Wizard page.
- Get Started button leads to the Wizard page.
2. Wizard page
- Sidebar will be collapsable with smooth slide/push in/out nav transition on left side. Add a “hamburger” icon on the left side of the logo to trigger the slide/push in/out of the sidebar navigation.
- There should be smooth transition (ex. slide) when moving from 1 screen to another screen.
- User can go back to previous screen by selecting a colored green nav item in the left side navigation.
- The following are the required screens:
2.1. Customer
- See Page-1.png for reference.
- The elements below the “Please Select” are toggle options.
- By default, there should be no selected option and the Continue button should be disabled.
- Selecting an option will enable the Continue button.
- Once the Continue button is enabled, the user can click it and it will transition to the next screen.
2.2. Financing
- See Page-2.png for reference.
- Same functionality as with the Customer screen, by default there will be no selected toggle option and the Continue button is disabled.
2.3. Electric Bill
- See Page-3.png for reference.
- By default, the Continue button is disabled.
- It will only enabled when user click on the “Download Bill Data Instantly” button or when the user uploaded a file via the “Upload Copy Of My Bill” button.
2.4. Schedule Project Review Meeting
- See Page-4.png for reference.
- Phone Numbers field by default have no value. These fields should have input mask that will auto move the cursor to the next field when a user supply a correct value and format.
- Calendar by default have the current date selected.
- Toggle options by default should have no selected option.
- Continue button should be enabled when there is Phone numbers and selected option.
2.5. Building Info
- See Page-5.png for reference.
- Dropdown fields should make the first option selected by default.
- Toggle options by default should have no selected option.
- Input field by default should have no value.
- Continue button should be enabled when all fields have values or selected options.
2.6. Roof Info
- See Page-6.png for reference.
- Dropdown fields should make the first option selected by default.
- Toggle options by default should have no selected option.
- Input field by default should have no value.
- Continue button should be enabled when all fields have values or selected options.
2.7. Company Info
- See Page-7.png for reference.
- State dropdown field by default should have blank value.
- Input fields by default should have no value.
- Continue button should be enabled when all fields have values or selected options.
2.8. Post Project For Bidders
- On initial display of this screen, it will show the “Talk Soon” message. See Page-8.png for reference.
- After about 5 seconds, show the “Great News” message. See Page-9.png for reference.
2.9. Review Bids
- See Page-11.png for reference.
- Options are image tag base.
- “Pick My Solar top choice” can be image base. There should be an easy way in the HTML code to move this from any options.
2.10. Contract
- See Page-12.png for reference.
- Back button will transition back to the “Review Bids” screen.
- “Contract Details” will be an iframe or something similar with embedded PDF file. Please use dummy PDF file.
- “Download Contract” should be linked to the PDF file.
- “What’s Included” and “What’s not included” section are list items. You can use the default bullet styling of Bootstrap and use dummy text for now. Their container should be fixed in height and show vertical scrollbar when the list is long. Please use the same scrollbar style from the “Contract Details” section.
2.11. Go Solar
- As per the storyboard, see Page-10.png for reference.
Browser Compatibility:
- IE8+
- IE7 (can be fixed during the final fix phase)
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- Tablet browsers
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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.
CSS
- CSS code should be valid level 3
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
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.
- You are allowed to use jQuery or Angular JS library for this challenge.
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.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.