Challenge Overview
Welcome to the SunShot - EnerWise - Responsive Website UI Prototype Challenge! EnerWise is your personal energy concierge. It is also a web application that guides a homeowner / home buyer through the process of analyzing their home’s current/expected energy usage and potential savings from adding solar and performing energy efficiency upgrades. We then connect the homeowner to the best source of capital and qualified installers to maximize their investment.
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 HTML5/CSS3/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 AngularJS for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the responsive HTML5 prototype of this app by using industry standard best practices.
Primary Requirements:
1. Build all the pages mentions in the page requirements outlined below.
2. Layout
2.1. The pages should be responsive.
2.2. Mobile layout - please refer to the “Mobile” folder.
2.3. Tablet (portrait) will have mobile layout.
2.4. Tablet (landscape) will have desktop layout.
2.5. Small desktops (laptops) will have desktop layout.
3. Fonts
3.1. Open Sans, you can embed fonts or direct link from Google fonts.
3.2. Helvetica Neue - use font stack (Helvetica Neue, Helvetica, Arial).
4. Charts - all charts should be made using the D3JS library.
5. Header
5.1. Logo should be image base.
5.2. The welcome name (“Welcome John Smith”) will show a dropdown menu when mouse hover. Please refer to 4B.Admin-Functionality-Logout.jpg for reference on this part.
5.3. Logout link leads to Homepage.
6. Footer
6.1. Left side contains logo (image base) and text below it.
6.2. Center part are navigation links, please link them accordingly. Use dead links for non-existing page.
6.3. Use dead links for the social media icons.
7. Need to validate all form fields and show a message when there is an error.
8. Data needs to be read from a JSON file, use the provided DummyData.pdf to build your JSON file.
9. Apply uniformed hover style for links and buttons.
Page Requirements:
The following are the pages and functionalities needed for this challenge.
1. Homepage
- Refer to 01A.Homepage.jpg and 01B.Homepage-MouseOver.jpg for reference.
- “Sign In” leads to Sign In page.
- There are four buttons in the home page. User clicks on any of these buttons will lead to Create Account page.
- The app should remember what user is selected and it should reflect it to the “Account Type” field in Create Account page. Example, if user clicks “Home Owner”, the default selected “Account Type” in Create Account page should be set to “Home Owner”.
2. Create Account
- Refer to 02A.Create-Account.jpg for reference.
- To simulate navigation per user role, redirect the user to:
-- “Homeowner” page if the Account Type is Home Owner.
-- Financier redirects the user to “Financier” page.
-- Realtor and Energy Installer go to Thank You confirmation page.
- Validate the form with required field, proper field format, and show password strength indicator (02B.Create-Account2.jpg).
- Show message if there’s an error with a field (02C.Create-Account-PasswodIssue.jpg).
2.1. Thank You confirmation page
- This will just have a simple message “Thank you, we’ll be in touch soon”.
- Use the same overall box style from 02A.Create-Account.jpg
3. Sign In
- Refer to 03A.Sign-In.jpg for reference.
- Sign in with social media accounts are deadlinks for now.
- We need to simulate different account type sign in.
- If email is "homeowner@enerwise.io" and password is "welcomeH0me" then go to Homeowner page.
- If email is "money@enerwise.io" and password is "cashM0ney" then go to Financier page.
- If email is "admin@enerwise.io" and password is "likeAB0ss" then go to Admin Panel page.
- The “click here” from the Forgot password text links to Forgot Password page.
3.1. Forgot Password
- Refer to 03B.Sign-In-ForgotPassword.jpg for reference.
- Reset Password button leads to Sign In page.
4. Admin Panel
- Refer to 4A.Admin-Functionality.jpg for reference.
- This will list all “pending houses” that do not yet have a complete solar report.
- “Upload Photo” will trigger a file upload and will dynamically display a preview/thumbnail of that photo.
- The next 12 fields are text inputs for monthly solar production numbers. These fields should be validated and accept integer/floating numbers. Example inputs are 213.4, 782.6, etc.
- Next field is also a text input for electricity rate that homeowner can sell electricity to the grid. This too should be validated and should accept integer/floating numbers. Example inputs are 0.17, 0.24, etc.
- Next is another text input that is for the expected cost for the system. Validate the field and should only accept integer/floating numbers.
- When admin user clicks “Done”, validate row’s fields and completed house will be removed from the list and show an indication of complete operation (Refer to 4C.Admin-Functionality-SuccessMessage.jpg).
- When there’s a validation error, show the error message (Refer to 4D.Admin-Functionality-SomethingWrong.jpg).
5. Homeowner
- Refer to 05A1.Homeowner-HomeInfo1.jpg.
- This page will have two main tabs (Home Info and Home Analysis).
5.1. Homeowner Info
- This will be the default tab.
- This tab contains wizard type form.
- Under the header “Household Details”, add a standard dismissable Bootstrap alert info with a message “report is not yet finished, it can take up to 48 hours to complete. You’ll receive an email when it’s done.”
- User can only goes back to next screens by clicking the Next button.
- User can go back to previous screen by clicking the Prev button or by clicking the wizard tabs (refer to 05A2.Homeowner-HomeInfo2.jpg).
- Each address will have “View Analysis” button that when clicked will display the data on the Homeowner Analysis tab (refer to 05A3.Homeowner-HomeInfo3.jpg and 05A4.Homeowner-HomeInfo4.jpg).
- “Add House” button will dynamically add new address form fields (refer to 05A4.Homeowner-HomeInfo4.jpg).
- Once the homeowner adds a new address, it will not have the option to view analysis.
- User will have the ability to remove newly added address. Add an “x” circled red icon to the upper right part of each newly address address to trigger this functionality. You can use glyphicon-remove-circle for the icon.
- Make sure the data are save in js data scope when user clicks the “Update Information” button.
- Show success message when there’s no error (05A5.Homeowner-HomeInfo-Notofication.jpg).
- Show the error message when validation fails.
5.2. Homeowner Analysis
- Refer to 05B1.Homeowner-HomeAnalysis1.jpg for reference.
- User will have the option to change the address of what analysis to view by selecting from the dropdown field (05B2.Homeowner-HomeAnalysis2.jpg).
- Use the provided dummy data (DummyData.pdf) for the chart on this page. Earnings From Solar = Solar Production, Normal Utility = Electricity Consumption.
- This chart will show 12 months of:
-- electricity cost data (electricity consumption * electicity rate = PMYT$)
-- solar revenue data (solar production * sell rate = REV$)
- Annual Savings = REV$ - PMYT$
- Clicking the “Find Vendors” button will hide the button and will show a confirmation screen with a message “We will be in touch soon with the best partners for you to install solar on your house and more detailed bids.” (refer to 05B3.Homeowner-HomeAnalysis-Confirm.jpg).
6. Financier
- Refer to 06A.Financier-YourInfo.jpg for reference.
- This page will have 3 tabs (Your Info, Customers, and Home Analysis).
6.1. Your Information
- At first visit, show this tab by default. On succeeding visits, make the Customers tab the default tab.
- User will have the ability to update their information.
- Show standard confirmation modal when updated.
- Show standard error message when validation error.
6.2. Customers
- Refer to 06B1.Financier-Customer.jpg
- This tab will list all the Financier’s customers.
- Each customer’s address has “View Analysis” button that when clicked will show the address particular analysis (please refer to 6.3. Home Analysis).
- Clicking the “Add New Customer” button will show a modal to add new customer information.
- Clicking the customer name or the pencil icon will open a modal to edit the customer information.
6.2.1. Add Customer modal
- Refer to 06B2.Financier-Customer-AddNew.jpg
- “Add House” button will dynamically add new house of interest field (less the label).
- Clicking the Update Information will close the modal and will show standard message confirmation modal.
- On error, hide the existing modal then show the error modal. After closing the error modal, show again the Add Customer modal.
6.2.2. Edit Customer modal
- Refer to 06B3.Financier-Customer-Edit.jpg
- “Add House” button will dynamically add new house of interest field (less the label).
- Clicking the Update Information will close the modal and will show standard message confirmation modal.
- On error, hide the existing modal then show the error modal. After closing the error modal, show again the Edit Customer modal.
6.3. Home Analysis
- Refer to 06C1.Financier-Analysis.jpg for reference.
- On this tab, user will have the option to change the address of what analysis to view by selecting from the dropdown field (similar to 5.2. Homeowner Analysis).
- “Earning From Solar VS Normal Utility” - use the same chart and data mentioned in 5.2. Homeowner Analysis
- Financing - change the bottom part, instead 3 text fields make them 2 groups, each with 3 slider fields.
-- 1st row will have Interest Rate #1, Loan Terms, and % Saving applied to loan fields
-- 2nd row will have Interest Rate #2, Loan Terms, and % Saving applied to loan fields
-- Interest rates will be between 0.00% and 10.00%.
-- Loan Terms fields will be between 0 to 100.
-- Saving applied to loan will be between 0 and 100%.
- Potential Payback of Loan
-- This is a chart with 2 line graphs, one for loan scenario 1 and one for loan scenario 2.
-- Use the provided data in the DummyData.pdf
--Y axis is Remaining value of loan ($)
--X axis is time since loan origination (months)
-- Compute the scenarios Time to Pay Back’s Duration and the amount in “25 Year Value of Installation”.
-- “Time to Pay Back” Duration is the value of X axis when Y axis = 0.
-- “25 Year Value of Installation” value is the difference in savings from solar panel costs less cost of financing.
- Export to PDF
-- When this button is clicked, show the modal message. Please refer to 06C2.Financier-Analysis-ExportPDF.jpg for reference.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- Tablet & Mobile 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.
- 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 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 AngularJS 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.
- Use separate retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.