Challenge Overview
Welcome to the SunShot - Simplify Solar Choose Financing UI Prototype Challenge! The primary objective of this project is to build a SINGLE page with only 7 tabs for the “Choose Financing” of Simplify Solar.
For this challenge, the goal is to create the HTML prototype based on the provided PDF file, HTML prototype, and requirements outlined in the Challenge Details section with reference from the provided storyboard for the design.
Final Submission Guidelines
The following are the general guidelines and requirements for this challenge:
1. See the provided AdmiralsIntegration.pdf as a wireframe reference for this challenge to. This PDF file will be the basis of the content for the page that we are going to build.
2. The design of the page should be similar to “06 SimplifySolar_03_Dashboard.jpg” for desktop view and “11 SimplifySolar_03_Dashboard_Mobile.jpg” for mobile view. The page should be responsive. In mobile view, corresponding sections should be expandable/collapsable.
3. Re-use any existing code, markup, and images from the provided prototype.
4. The header (including the section before the progress bar) and footer should copy the one in the provided storyboard.
5. Change “View Notes” and “View Project Documents” from the storyboard into “Contact Me” and “Apply Now” from the PDF file respectively.
6. Progress bar will be similar to the provided storyboard but it should reflect the tabs in the provided PDF for each points.
7. Create the page with the following tabs:
- Start App
- Personal Info
- Property Info
- Income Info
- Asset Info
- Expenses Info
- Submit App
8. Tabs should be located in the left side just like the design in the storyboard instead of top location. Use the following icons accordingly:
- Start App - house icon
- Personal Info - overview icon
- Property Info - installation icon
- Income Info - financing icon
- Asset Info - monitoring icon
- Expenses Info - financing icon
- Submit App - experience icon
9. “Next” button moves the user to the next tab.
10. “Back” link moves the user to the previous tab.
11. “Save” button will be a dead link.
12. Use Roboto font family from Google Fonts as the primary font family but it should cascade to Arial font stack in the absense of Roboto.
13. Change the “?” icon from the PDF into “i” icon that when hovered will display a tooltip. This can be placed at the right side of each section header right after the text “Fields marked with * are mandatory”.
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
- iPhone
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.
- You are allowed to use Bootstrap for this challenge.
- 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.
- You are allowed to jQuery or AngularJS 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.