Challenge Overview
Welcome to SunShot - Hot4Solar UI Prototype Challenge.
The main task of this project is to create the SunShot - Hot4Solar UI Prototype based on the provided PSD Storyboard design. For this challenge you just need focus on Desktop layout with responsive solution.
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Storyboard.zip - Storyboard Design
Important!
- For this UI Prototype submission we need your submission support responsive solution with focus on Desktop only!
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width).
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- We’re open to any framework suggestion like AngularJS, etc
- Also you can use open source library like jQuery.
- All datas as possible need loaded by JSON
UI Prototype Page Requirements
1) Homepage
screenshot: 1.1 Home.png
- This is homepage look for Hot4Solar application
- Header bar use transparent style
- Logo placed in the left side
- In the right there’s main navigation menu
- Set Home as active menu
- Dashboard, Privacy Policy and About can be dead links
- Login button need show up the modal window (screenshot: 1.2 Login.png)
- Overlay need covered all areas
- Show blur effect
- Modal window need always placed centered of browser screen
- Show text input for Email and Password
- Login button need hide the modal and take to Dashboard page
- Sign Up now link take user to Sign up page
- Welcome message placed below the header bar
- Sign up button need take user to another page explained below.
- For What We Do section show some text information
- There’s 3 columns layout with icon and quick description
- Footer area, Social icons can be dead links
- Copyright message placed below the social icons
2) Sign Up
screenshot: 6 Sign Up.png
- This is screen for user to Sign up
- Show text input for all fields
- Match all form information
- Sign Up and Cancel button need take user Homepage
3) Dashboard - Map View
screenshot: 2.1 Dashboard - Map View.png
- User see Map View by default when load Dashboard page
- Location search placed on top of map area
- Create autocomplete function when user typed on search input (screenshot: 2.2 Dashboard - Map View - Search Location.png)
- For now, please show data like storyboard look
- Click search result need auto center map to correct location
- Map need build with Google Map
- Zoom in/out can be standard style
- Map View/List View tab placed in center of page
- Map need show some red and white border marker in some random place
- There’s 3 toggle options in the right side for Heat Map, Installers and Timeline.
- Select “Heat Map”, need open the heatmap overlay (screenshot: 2.3 Dashboard - Map View - Show Heat Map.png)
- You can use Heatmap layer from Google map like this example: https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
- OR, you can create from Google Map Polygon shape like this example: https://developers.google.com/maps/documentation/javascript/examples/polygon-autoclose
- OR, come up with your own solution. But let us know for confirmation
- Select “Installer”, need show flyout (screenshot: 2.4 Dashboard - Map View - Show Filter.png)
- By default need select “First Solar”, “Principle Solar” and “Vivint Solar”
- Check All need activated all filter option and automatically show up hidden marker on map
- Click the Installer again, need hide the flyout
- Select Timeline need show playable timeline in the bottom of map (screenshot: 2.5 Dashboard - Map View - View History.png)
- User can change dropdown to “Past Week”, “Past Month”, “Past Quarter” and “Past Year” timeline
- User can play and pause
- Playing drag bar need show date information
- This some example of Google Map timeline:
https://www.youtube.com/watch?v=jt40eoevCVc
https://code.google.com/p/timemap/
http://timemap.googlecode.com/svn/tags/2.0.1/examples/polytween.html
http://www.wetellstories.co.uk/stories/week1/
http://mbostock.github.io/protovis/ex/napoleon.html
- Note: It should be possible to toggle the time slider on and off. So that it’s only visible if the user wants it. When it’s toggled off the display should default to showing all the data within the viewing geography.
- Another neat slider / map concept that gets at the same idea (Oakland Crime Statistics).
http://oakland.crimespotting.org/#lat=37.806&types=Mu,AA,Ro&lon=-122.270&dtstart=2013-09-02T10:58:46-07:00&zoom=14&hours=0-23&dtend=2013-09-28T23:59:59-07:00
- When timeline playing, need show differences of heatmaps, number of marker installers (screenshot: 2.6 Dashboard - Map View - Timeline Playing.png)
- When user click on map need show show the radius (screenshot: 2.7 Dashboard - Click on the Map.png)
- User can change radius by dragging Area radius (screenshot: 2.8 Dashboard - Change Area Radius.png)
- See this Google Map example about Radius implementation: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
- There’s also another information captured based on selected radius like Area Radius, Installation Count, Average Cost, and Projection
- Also, there’s Prediction chart.
- Click “x” button need hide the flyuot
- This is screen when user set bigger radius range (screenshot: 2.9 Dashboard - Map View - Zoom Out & Show Clusters.png)
- When user zoom out the map, need show cluster map
- See sample of Google Map Clusterer: https://googlemaps.github.io/js-marker-clusterer/docs/examples.html
Alpha Version:
This is the alpha version of the product. Only provided for additional context: http://maspring.webfactional.com
This alpha version is a simple D3 visualization of the Google Spreadsheet supplied above.
Sample Data!
This sample data should be sufficient to power both the map and list views: https://docs.google.com/spreadsheets/d/11REJKWbmttxdc4p03HfB6rrtFjUD4NRlumgP3rhzOyg/edit?usp=sharing
Critical fields are:
- FINALDATE (date that we will use in the timeline)
- GEOLONG / GEOLAT (where we will place the points)
- CONTRACTOR (How we will filter which installers we will show - Default = all - 2.4 Dashboard - Map View - Show Filter.png)
- We will be obscuring the address in this first version
If you need sample data for both the cost and installed you here’s a google spreadsheet with all of the solar deployments in the state of california broken out by year. It also includes the calculations on a yearly basis for cost / watt.
https://docs.google.com/spreadsheets/d/18zCtfeSoS-yfPg20lRjpDBgmQeMmDJVgxYJFgIrlUu4/edit?usp=sharing
Recommend using those zip codes associated with the city of San Jose California as they’ll like up with the lat / long file above.
4) Dashboard - List View Tab
screenshot: 3 Dashboard - List View.png
- This is List View look
- Location title placed on top of screen
- Important Statistics placed below the the title
-- Installation Amount (this is the total installed kilowatts in a given area). You can get sample data for this from the california solar initiative website. Link below.
-- Month Growth Rate (Match different color ) - installations sold in the last month. Sample data can come from the link below.
-- Average Cost/Watt - Must be calculated from the size of installation and the cost. Probably out of scope for this exercise.
-- Average Projection - An extrapolation based on the above. Probably out of scope for this exercise.
- Table data need loaded by JSON file
- The List view is sortable by each column.
- User can sort by All columns
- Show current active sort with orange colored.
- Zip code text need to be bold
- Installation column will be number based
- Growth % need show differences with red and green colored
- Cost / Watt column will be currency based
- Projection column will be currency based
- Hotness, there will be differences of color based on area Hotness
- Increments of Past 30 days, this column contains of bar chart for 30days.
- You need show hover state when user hover for each bar
- When tooltips show up need show date and number increment
- Show items per page use dropdown and placed in the left side
- Pagination placed in the bottom page
- All Pagination links can be dead link
- Export to CSV button can be dead link
5) About
screenshot: 4 About.png
- The About Page will feature a description of the Hot 4 Solar project as well as links to other resources.
- Set About as active menu
- Show background image below the header
- Make sure text always display centered of background image
- There’s Blog section in the bottom area
- Blog section use dark background.
- Match Blog text and images
- Footer placed in the bottom of page
6) My Accounts
screenshot: 5 My Accounts.png
- This is My Account Page
- User can access this page after logged in
- Set My Account as active menu
- Show text input for all fields
- Match checkboxes styling
- Match all form information
- Buy More button can be dead link
- Save and Cancel button take user to Dashboard page
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Google Map Interaction
CODE REQUIREMENTS:
HTML/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.
- 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.
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.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser