Challenge Summary
Welcome to Sun Shot – You Save With Solar Design Challenge!!
The primary objective of this challenge is to provide the look and feel for You Save With Solar Home Page.
Previously we ran a wireframe challenge to build the screens needed for this tool and you will be provided with the wireframes we built.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Round 1
Submit your design for a Checkpoint feedback:
1. Homepage.
2. Self Identification Home Page.
6. HTML Email Design.
7. Style Tile.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:
1. Homepage.
2. Self Identification Home Page.
3. Self Identification Business Page.
4. Self Identification Non Profits Page.
5. Self Identification Community Page.
6. HTML Email Design.
7. Style Tile.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
YouSaveWithSolar.com is a site/app that will make it easier for consumers, businesses, non-profits, and communities to find trusted solar providers regardless of where they live nationwide.
The site aims to be the premiere destination for anyone looking to choose solar and will evolve based on feedback, technology improvements and continual evolution of the industry. This site also aims to provide a community with a growing network not only for consumers but for installers as well. The YSWS site will also provide education on the benefits of going solar i.e. purchase vs lease, long term benefits and savings, etc.
The goal of YouSaveWithSolar.com is to create an Amazon.com like experience for those shopping for solar in the marketplace. Understanding the marketplace should aid in creating a new aesthetically pleasing UI that incorporates best practices while setting a new standard for the industry.
Please review these sites as part of the creative process:
- www.energysage.com
- www.geostellar.com
- www.mysolarinstaller.com
- www.solarcity.com
- www.sunrun.com
- www.sunedison.com
I think it is important to understand how top performing solar installer portals are targeting customers in the marketplace today.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Supporting Documents:
- Wireframe (wireframe.zip).
- Client Logos (EPS YSWS Logo.eps & intern logo for hir.png).
- Style Tile Example (StyleTile.psd.zip).
Screen Sizes:
- Desktop Resolution: Design for 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.
Required Screens:
Please refer to wireframes before you start designing your solution.
1. Homepage:
- Please refer to home.html
- Please capture Login and Sign Up popups.
- On opening this webpage you will see 4 logos at the top:
-- Please make sure the “SunShot and SEIA” logos are centered in-between the YouSaveWithSolar logo and the DirectBuy logo.
- Remove battery back-up and storage & Home Automation from the main banner at the top of the page.
- Also make sure the rotating banner space gets removed as well.
- There should now only be 4 rotating banner:
-- Solar for Home.
-- Solar for Business.
-- Solar for Non-Profits.
-- Solar for Community
-- Please make sure banners are listed in that order i.e. move Non-Profit in front of Community in the rotation.
- Please make sure that with the removal of battery back and home automation from banner navigation, the remaining options get evenly distributed or that the this gets displayed in aesthetically pleasing format.
- While we wanted the partner with us widget smaller at the bottom of the page it should at least extend the full page. It now looks unbalanced at the bottom. So please fix this in your design.
- Make sure to capture all homepage widgets:
-- Why You Save With Solar?
-- Learn More About Solar.
-- Help Us Spread The Word.
-- Battery Backup & Home Automation.
-- Funding a Solar Project.
-- Visit The Store.
-- Partner With Us.
-- Sign Up For Our News Letter.
-- Social Media Icons.
-- Footer.
2. Self Identification Home Page:
- Please refer to self_identification_home.html
- Fix the 4 logos as described in homepage.
- User will have the ability to login from this page.
- User will fill his information for Locate your Property for Solar Installation:
-- First Name.
-- Last Name.
-- Email.
-- Address.
- User will fill his roofing details:
-- What type of roof do you have?
-- Select Roof Orientation.
-- How Old is Your roof?
- User will fill Help Us Understand Your Electric Usage by:
-- Uploading His Electric Bill.
-- Entering Average Monthly Bill.
- Final box is reference code box.
- Click to accept terms and conditions.
3. Self Identification Business Page:
- Please refer to self_identification_business.html
- Almost as self_identification_home.html
- User will enter his Business Information:
-- Business Name.
-- Ownership Information of the Property.
4. Self Identification Non Profits Page:
- Please refer to self_identification_non-profits.html
- Almost as self_identification_business.html
- User will enter his Non Profit Organization Information:
-- Non Profit Organization Name.
-- Ownership Information of the Property.
5. Self Identification Community Page:
- Please refer to self_identification_communities.html
- Almost as self_identification_business.html
- User will enter his Community Information:
-- Community Name.
-- Ownership Information of the Property.
6. HTML Email Design:
- Please refer to confrmation_page.html wireframe note link for email content.
Design Guidelines For Email Template:
- We need responsive email templates, as this will be coded using HTML5.
- Keep the email campaign designs of size desktop (width 650px or less and height as required) and a mobile version of size (width 320px and height as required).
Emails will include the following:
- Header (Simplify Solar Banner Image).
- Content.
- Social Media Icons / Footer.
7. Style Tile:
For this screen, we ask that you put together a one page style tile that clearly shows your concept for this design. Please search in google for “style tile template” to see common examples of this type of screen.
Required style tile content:
A) Color scheme, where you call out color for specific items such as:
- Clickable (non-active) link items.
- Color for active link items.
- Color for specific areas (backgrounds, header backgrounds, etc).
- Color-related scheme / rules.
B) Typography rules, where you call out typography for specific items such as:
- Headers.
- Sub-headers.
- Paragraphs.
- Lists.
- etc.
C) Navbar style (including both active and inactive styles).
D) Data visuals styles (your charts, graphs, etc).
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target Audience:
- Anyone that wants to join the solar movement like new customers, installers, communities etc.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- 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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.