Challenge Overview
Welcome to the SunShot - Simplify Solar UI Prototype Challenge! The primary objective of this project is to build the redesign web version of Simplify Solar
For this challenge, the goal is to create the HTML prototype based on the provided storyboard design and requirements outlined in the Challenge Details section.
Final Submission Guidelines
General Requirements:
1. All page should be responsive, check the corresponding Mobile PSD from the provided source files to serve as reference and guide for mobile view for all pages.
2. Use Roboto font family from Google Fonts.
3. There are popovers that is visible by default on some pages will provide some help to the user, all text inside of it should be editable. The user should be able to hide these tooltips.
4. Some pages has icons “i” that when hovered will display a tooltip.
Pages:
The following are the pages and functionality needed for this challenge:
1. Pre-Registration pages
1.1. Step 1
- See 01 SimplifySolar_03_PreReg_Step1.jpg as reference for the Desktop version.
- Initially, the user is prompted to enter his full address. We can also use the browser’s geolocation if the user allows it, and automatically fill in the location address of the user.
- Once the user clicks on the “Find My Place” button, the page moves to Step 2 page.
1.2. Step 2
- See 02 SimplifySolar_03_PreReg_Step2.jpg for reference.
- A Google Maps zoomed-in to show the entered location. The use should be allowed to pan and zoom to a preferred location or “house”.
- The user can also add pins (and/or remove them) in the map to identify which roof sections the solar panels will be installed on.
The “Cost Saving” has 3 slider fields. These sliders when slide will update the Monthly Energy Cost chart.
- The “Monthly Energy Cost” chart will be an donut chart that interactively change as well as with the labels on its right side whenever the Utility Rate, Avg Monthly Bill, and Bill Savings Desired values changed. You can get more information on this page.
- “Restart From The Beginning” when clicked will lead to the Step 1 page. On Mobile view storyboard, this element is missing. We should add it back.
- Clicking the “Build” button will lead to Step 3 page.
1.3. Step 3
- See 03 SimplifySolar_03_PreReg_Step3.jpg for reference.
- This page displays different package plans.
- “Restart From The Beginning” when clicked will lead to the Step 1 page.
- “Sign Me Up” buttons should lead to Dashboard page.
1.4. Login
- At anytime the “Login” button is clicked from any of the above mentioned page steps, the login modal should be displayed.
- See 05 SimplifySolar_03_PreReg_Login.jpg for reference.
- The “login” button should lead to Dashboard page.
2. Dashboard
- See “06 SimplifySolar_03_Dashboard.jpg” as reference for Desktop view.
- The progress bar on the top of the page should be updatable to show the current status of customer information. Showing of actual updating of these bars are out of scope in this challenge but it is required to have an instructions how to easily update the status of this progress bar.
- All tabs (Overview, House Details, Installation, Financing, Monitoring, and Experience) should be working. You can use dummy content for other tabs that don’t have specific storyboard.
NOTES:
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.