Challenge Summary
Welcome to SunShot - SolarActionNetwork - Tenant Engagement Application Design Challenge!
The hardest part of the clean energy solution is developing projects. Finding the right mix of willing partners, good sites, and strong project economics is a complex art.
The Solar Action Network finds the right balance of local knowledge, strong partners, and deep understanding to create beautiful projects - creating clean energy, good jobs, and happy customers.
The goal of this application is to make it easy for Tenants/Renters to sign a document that expresses their willingness and commitment to pay an additional amount on their monthly rent for the benefits of having the property owner install solar panels.
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. (Mobile + Desktop)
2. Get Solar on My Roof Page. (Mobile + Desktop)
6. Logo.
- 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. (Mobile + Desktop)
2. Get Solar on My Roof Page. (Mobile + Desktop)
3. Join Solar Page. (Mobile + Desktop)
4. Off Grid Projects Page. (Mobile + Desktop)
5. Invest In Solar Page. (Mobile + Desktop)
6. Logo.
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:
The goal of this challenge is to design the visuals for Tenant Engagement application based on the requirements below.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Supporting Documents:
- Wireframe (wireframe.zip).
- Logo (SAND-logo.png.zip), this is for reference only.
- Application requirements and flow (Solar Action Network- Presentation.pptx); this was provided for wireframe challenge, feel free to take a look at it to understand what we are truing to build.
- Style Tile Example (StyleTile.psd.zip).
Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- 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
- On opening this webpage, user will see this page with map pointing their exact location.
- User have ability to change to manual mode and change their location by precisely dragging the pointer from the map or enter location name in the search box.
- After location search user can select any one of the options below map:
-- Get solar on my roof.
-- Join a solar farm.
-- Off grid projects.
-- Invest in solar projects.
2. Get Solar on My Roof Page:
Please refer to get_solar_page.html
- The user will need to fill the information in the following sections:
-- Sign Up.
-- Electricity Info.
-- House Owner Info.
-- Rental Agreement.
-- Payment Page.
3. Join Solar Page:
Please refer to join_solar.html
- On left side user can see various benefits and details regarding joining solar farm.
- User can able to select options from Form E.
- On checking solar community agreement, user will shown agreement which needs to be digitally sign. After that he can press agree button.
- Please capture the pop up when user click I agree.
4. Off Grid Projects Page:
Please refer to off_grid_project.html
- User can see products and its details.
- User can buy multiple products.
- On clicking Cart on top or buy now, user will be shown payment process page:
-- Review Products.
-- Billing and Shipping Address.
-- Payment.
5. Invest In Solar Page:
Please refer to invest_in_solar.html
- User can see graphs, bar charts and benefits.
- On right side, user can see checkbox for invest.
- On clicking Invest, user will be populated with Credit card details.
6. Logos:
- This is a sample logo I liked from squarespace (SAND-logo.png.zip). Clean simple and has circles like the sun.
- Main logo including both graphical and textual components that capture the name “SAND”.
- The thing about SAND that I like is that solar panels are actually made out of sand. They are made of silicon, which is essentially super pure sand. So its like the idea of taking it full circle, from sand to sun.
- SAND stands for Solar Action Network Development.
- Alternate logo of just graphical component.
- Alternate logo of just textual component.
- Variants of the main and alternate logos for different scales. E.g., desktop website, mobile website/app, icon-sized/favicon, and powerpoint slides.
- Please place the logos on light and dark backgrounds for demonstration.
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:
- Renters and Tenants who would like to add solar to their buildings and help convince the property owner that going solar is a good idea.
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.