SunShot - EnerWise - Responsive Website UI Design Challenge

Welcome to Sunshot - EnerWise - Responsive Website UI Design Challenge. In this challenge, we are looking for you to come up with design concepts for a web application.

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.

We are looking for DESIGN CONCEPTS on what the user should see and experience when using the application
Good luck and we’re looking forward to your submissions!

NOTE: We are awarding $150 for all best submissions at checkpoint!

Round 1

Submit your initial designs for Checkpoint Feedback
1) Homepage (user not-logged in) - (Desktop + Mobile)
2) Create Account (Desktop + Mobile)
3) Sign In (Desktop + Mobile)

All Screens under these functionalities
A. Admin Functionality (Desktop)
B. Homeowner Functionality (Desktop)

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

1) Homepage (user not-logged in) - (Desktop + Mobile)
2) Create Account (Desktop + Mobile)
3) Sign In (Desktop + Mobile)

All Screens under these functionalities
A. Admin Functionality (Desktop)
B. Homeowner Functionality (Desktop + Mobile)
C. Financier Functionality (Desktop + Mobile)

The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Wireframes has been provided to help you get started with your designs (Please DO NOT COPY).

Design Ideas:
- Looking for modern, intuitive user interface
- Think Responsive Layouts
- Focus on the design being a great user experience, think simple but effective solutions.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
- What should the priority features be?
- How quickly could you find information?

Design Direction:
- We would like to have white / off-white / light gray background.
- Be consistent with your colors for layout / fonts / colors.

Color palette
- Think sunny day in a field (light corn-flower blue sky, Golden yellow of the sun, thick chlorophyll-rich grass)
- Main content text should be black, or near-black, not any of the above “design” colors

Design Size:
- Desktop 1280 px width and height as required
- Mobile: 750 x 1334 px

Required Pages:
We are looking for the below screens to be designed/considered in your concepts.

0) General:
Below information is common to all pages. How you show these is up to you.
- Logo: Come up with a logo (EnerWise) that would be apt for this application )In the wireframe, logo / name shown is bit out-dated, we want it to be called "EnerWise")
- Header: We need logo at the top and provide options for the user to “Sign In”.
- Footer: At the bottom, we need copyright information and provide links to “About, Terms, Privacy and Contact”

1) Homepage (user not-logged in):
Wireframe Reference: Homepage.png
- We need four big square buttons (could be house shaped with triangle on top) in the center
- These four button can be named as “Homeowner, Financier, Realtor, Energy Installer”
- Clicking on any of the four buttons will take the user to Create Account.

2) Create Account:
Wireframe Reference: 02 Create Account.png
- Based on the type of user chosen in the previous step, we show the type of account chosen in the “Account Type” drop-down. (Account Types are “Home Owner, Financier, Realtor, Energy Installer”
- In addition to account type, we need to display..”Name, Email, Password”
- We need a way to show instructions for certain fields like “Passwords”. For example: password field could have an instruction like “Passwords need to more than 8 Characters”.

3) Sign In:
Wireframe Reference: 03 Sign In.png
- Allow the user to sign in to the web application
- User will need to enter “Email and Password”
- We need option to retrieve password incase if the user forgets it, provide a link to reset their passwords
- What else need to be in this page?

Password Reset:
- New page or modal with email field and ‘reset password’ CTA. Submission results in reset password email being sent to user.

A. Admin Functionality (no mobile layouts needed for Admin functionalities):
User Flow:
- Admin logins into view list of pending house reports (these pending house reports are the addresses submitted by the Homeowners and/or financiers).
- Admin will be able to enter/input values for 14 text fields..if you have better ways to show, please feel free to show us your ideas (think responsive layouts)
- Admin will need to upload a picture of the home with solar panels (this will be shown in “Analysis Screens” - see below).
- Once Admin clicks “Done”, show some success message or counter for houses completed and that entry/row is removed from “Pending House Reports”

4) Admin Homepage:
Wireframe Reference: 04 Admin Panel.png
- Admin homepage shows the “Pending” house reports
- Provide option to “Logout” in the header.

Queue of Addresses:
- Under Pending house reports, we show the queue of addresses.
- For each address, we need to show 14 text fields 
*** 12 text fields for for the months from January to December (each shows the Monthly solar production in kWh.
*** Sell Rate in $/kWh
*** Cost of System in $
*** Provide a button to “Upload Picture" 
*** Button to submit "Done"

4.1) Success Message:
- When the Admin clicks on “Done”, we would like you to come up with a simple indication of the Success Message indicating the Home analysis is complete or has been sent to the Homeowner/financier.
- I don’t think we need ‘this as a separate page - keep it simple.

B. Homeowner Functionality:
User Flow:
- Homeowner logins and should be able to see/input their information.
- Allow homeowners to share their utility information, share their current address and the addresses of house for which they are interested in installing solar.
- Once above information is entered, they save the information.
- User will able to see a “View Analysis” button against each address and they click on it to view the analysis for the house.
- Users will be able to export the analysis report as a PDF.
- Within the Analysis, user will have a button to “Find Vendors” and on click will show a confirmation screen.

5) Homeowner Homepage:
- We need to show two tabs “Home Information and Home Analysis” (if you think there are better ways to show below information than tabs, please feel free to shown them in your designs)
- Provide option to “Logout” in the header.

5.1) User Information:
Wireframe Reference: 05_1 Home Owner Information.png
- Homeowner will use this page to update their own information and the address details for the house they are looking to analyze.
- This will show list of fields..

Contact Information:
- First Name
- Last Name
- Email
- Password

Utility Information:
- Electricity (drop-down), allows user to choose their provider
- Username
- Password

Household Information:
Primary Home address:
- Radio buttons (Own, Rent)
- Address (house number & street)
- City
- State
- Zipcode

Residents in Home:
- # of adults
- # of children < 14

House of Interest:
These are addresses of houses that the user (either current homeowner or potential buyer) might be looking to purchase and first want to analyze what its utility bills might be and potential for solar power.
- We need to provide option to add/enter multiple address...looking for your thoughts on how this can done.
- Maybe provide a button like “Add New Address” to allow them to enter new address and each of the address will need to collect house address details (House Number & Street, City, State and Zipcode).
- Provide option to edit/remove addresses that were added.
- Also we need an option to change the address that was added as Primary (in case they move).

Call to Action buttons:
- Update Information button: We need a button that allows the user to update and save their information.
- View Analysis button: We need this button to be shown for each of the addresses that were entered by the user.

5.2) Home Analysis:
Wireframe Reference: 05_2 Homeowner Analysis.png
- A user can reach this page by clicking on “View Analysis” button shown for each address under “Home Information”. 
- Wondering if we need to show “View Analysis” as a separate tab as shown in the wireframe as we can allow users to view analysis for each address by clicking on the View Analysis button show against each address. If you have a better idea that helps improve user experience - feel free to show them.
- This page will show the analysis for the specific home (address).
- User will be able to select the address that were submitted by them (under 5.1 Home Information) from a drop-down.
- Users will have option to export the analysis report as a PDF.

Home Information:
- Name of the home owner
- House address (should be a drop-down) - note there could be many addresses in this drop-down (The number of addresses in the drop-down depends on the number of addresses that were submitted by the homeowner under “House of Interest”).

House Image:
- Picture of their house with solar panels (note: this is what an admin submits as mentioned under “House Reports” in admin homepage).

D3 Chart:
D3 Chart Reference: https://github.com/mbostock/d3/wiki/Gallery (We are planning to use D3 charts, so please make sure to refer these to design the charts).
- Electricity consumption 
- Solar production potential
- Show dollar value of solar production - electricity consumption (please see wireframe for reference).

Call to Action Button:
- We need a Call to action button with text "Find me vendors and financing"

5.3) Confirmation Screen:
- After hitting “Find Vendors” button  in the previous step then we need to show a screen that says a thank you, and we’ll be in touch.
- Shows us your design ideas/concepts, looking forward to your thoughts.
- This screen is not shown in the wireframes but we would like you to design them

5.4) Notification:
- Once the homeowner adds a new address in step 5.1 Home Information, they immediately won’t have the option to view analysis. 
- This new address that was submitted will be shown to admin’s in “Pending House Reports”.
- Once admin “submits” house report for this address, we need a way to notify the user that their House Analysis is ready. 
- Looking for your thoughts on how we can notify user on this home analysis.

C. Financier Functionality:
User Flow:
- Fnancier logins and should be able to see/input their information.
- They will be able to see a list of customers..they will be able to view customer's energy consumption and potential savings using solar (Home analysis), and this will be used to increase mortgage loan or open a home equity/line of credit.
- They will have option to add / edit a customer
- User will able to see a “View Analysis” button against each address and they click on it to view the analysis for the house.
- Users will be able to export the analysis report as a PDF.

6) Financier Homepage:
- We need to show three tabs “Your Information, Customers  and Home Analysis” (if you think there are better ways to show below information than tabs, please feel free to shown them in your designs)

6.1) Your Information:
Wireframe Reference: 06_1_Financier_Information.png
We need below fields in this page:
- First Name
- Last Name
- Company
- Email Address
- Password
- Payment Information
- A button to update/save the information

6.2) Customers:
Wireframe Reference: 06_2_Financier_Customers.png
- This shows a queue of customer names and addresses,.
- Provide a button for the user to “Create a New Customer”

List of customers:
- Customers (This column shows the customer name)
- Home Address (Note: In the wireframe reference, it shows two address per customer which is wrong as there would be one primary
address and many “House of Interest” per customer - we need a way to show them in your designs - perhaps we can display multiple address under each customer, make sure to indicate which their primary address is).
- Provide option to edit/remove each address that was added to the customer (Note: Primary address cannot be removed).
- Also, we need an option to make any address that were added under “House of Interest” to Primary (this is in case, they move from
their original primary address to the newly indicated address).
- Status (For each address under a customer, we need to display the status)

Add New Customer:
We need below details with this new customer creation form:
- First Name
- Last Name
- Email
- Primary Home address (house number & street, city, state, zipcode)
- House of Interest (Provide option to add/enter multiple address - these addresses as mentioned earlier are houses that the customer is interested in, and currently not their primary address)

6.3) Home Analysis:
Wireframe Reference: 06_3_Financier_Analysis.png
- Users will have option to export this analysis report as a PDF

View Home Information at the top:
- Name of the Customer
- House address (should be a drop-down)
- Picture of the house with solar panels (note: this is what an admin submits as mentioned under “House Reports” in admin homepage)

D3 Charts:
D3 Chart #1
- Please follow D3 reference charts (see link above)
- Line chart in the financier analysis should have 2 lines (based on the 2 interest rates entered). 
- Electricity consumption
- Solar production potential
- Show dollar value of solar production - electricity consumption (please see wireframe for reference).

Financing Section:
- Cost of system from admin panel
- List of available incentives (Name, Agency, Dollar amount)
- Estimated cost after Incentives.
- "Percentage savings put towards loan" (text field)
- Interest rate 1 (text field)
- interest rate 2 (text field)

Potential Payback of Loan:
- D3 chart #2 Months (x) vs $ left on loan(y)
- Adjusted Loan value with interest rate 1
- Adjusted Loan value with interest rate 2
- loan payback under scenario 1 time
- loan payback under scenario 2 time

Target Audience:
- Homeowner/buyer, Financier, Realtor, Energy Installer

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- How easily your design can be built and make sense as an application
- Cleanliness of your graphics and design

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.