Challenge Overview
Welcome to the SunShot - Sunmetrix - UI Prototype
The goal of this challenge is to create a Responsive HTML5 UI Prototype based on provided storyboard screen and challenge requirements. Main feature in Sunmetrix prototype is build 3D House Modelling using HTML5 and CSS3D with some interaction explains more details below
Important!: There are some small things need captured in your submission that not exists in Storyboard design. Pay attention to spec details and let us know if need clarifications
Final Submission Guidelines
IMPORTANT!
- UI Prototype need support responsive layout
- We provided storyboard design for Desktop and Mobile. Do your best adjustment for Tablet layout, as long all elements adapt fluid width/layout. No score down for Tablet implementation.
- This challenge need build “3D House Modelling” using CSS3D. Have fun learning CSS3D!
- Let us know if you face any problem related responsive layout on required platforms
Files Downloadable
Sunmetrix-Storyboard-Design-Images.zip - Storyboard Image Screens and PSD files
Sunmetrix-Storyboard-Design-PSD.zip - Storyboard PSD files
Challenge Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all required browsers.
UI Prototype Page Requirements
Each page is laid out in Desktop > Mobile view and should respond to standard window sizes.
FYI: Best practice for responsive layout build is to build the mobile layout first before creating another layout for tablet and desktop.
1. Landing Page
screenshot: 1_Landing Page.png
- All background color and need filled whole browser screen, while main content area width remain fixed and centered of browser screen
- Header bar need use fluid width
- “SunMetrix” Logo placed in the left side of header bar
- “Login” and “Create” account are text links and placed in the right side of header bar
- “Login” link take user to “Add Site” page
- Login takes you to the “Dashboard” IF you already have site; it takes you to “Add a site” page if you have not added one yet.
- “Create an Account” need scroll down to “Create an Account” form in the bottom of page.
- Below the white bar, placed main navigation of “Sunmetrix” application
- Set orange color for active state style of “Go” menu.
- All menu navigation can be dead link, use transparent style for menu navigation.
- Main image placed below main navigation
- There’s “Play button” that placed centered above the image. This can be dead link
- Show us “hover” state for play button.
- Place “Try Demo Version” and “Create an Account” buttons in the bottom of screen
- “Try Demo Version” button should updated into “Orange” color. Ignore storyboard look
- “Create an Account” need scroll down to “Create an Account” form in the bottom of page.
- Match quick information of “Sunmetrix GO” and place image in the right side
- Match quick information different color style properties
- “Sunmetrix GO” displayed in single line. When resized into tablet portrait layout, make sure all icons and text size still fits in single line
- Below the feature, user see 2 columns for “easy step video” and “create an account form”
- Show us “hover” state for play button.
- Match input styling for text placeholder
- When typing text color turn into green
- “Create an Account” for this font can be dead link
- Need to add new row with a Google recaptcha as seen here: http://sunmetrix.com/go-landing/
- Google recaptcha need added after email address field
- When adding Google recaptcha, need proper alignment with text boxes in form.
- As possible match style with existing Storyboard look and feel
- Footer divided by 2 columns
- In the left side, user see “Address”, “Phone Number” and “Email”
- In the right side, user see “Social” buttons, “copyright” and “footer links”
- Footer links can be dead link for now
Mobile version
screenshot: Mobile_1_Landing Page .png
- For mobile version, background and all design elements need resized based on device screen width
- “Play” button remain placed centered of page
- Text above background image need auto-wrap the device screen
- Quick information of “Sunmetrix GO” and image displayed as stacked layout
- “Sunmetrix GO” displayed as separate row instead of single line for mobile version
- “easy step video” and “create an account form” area also displayed as stacked layout
- “easy step video” can use image placeholder
- No need line separator between section, ignore storyboard look
- Footer content need displayed in separated line
- “Address”, “Phone Number” and “Email” placed on top
- “Social” buttons, “copyright” and “footer links” use center alignment and placed in the bottom
2. Add Site
screenshot: 2_add site.png
- User landed on this page after click “Login” button
- This is how “Add Site” page look after user logged in
- Background color need use fluid width while main content area width remain fixed in the center.
- “SunMetrix” Logo can be dead link and placed in the left side of header bar, notice the logo use orange theme.
- User information and Logout placed in the right side
- “Logout” link take user to “Landing Page”
- Main navigation use different color for Add Site
- “Go” is current active menu
- Put dead link for other menu navigation
- “Central Park, New” is input placeholder
- Build map using GoogleMap API
- No need create search function
- Create custom pin marker style
- “Continue to Site” button take user to “Site Detail” page
Mobile version
screenshot: Mobile_2_add site .png
- This is mobile version look and feel, background and all design elements need resized based on device screen width
- Map need use adapt browser screen width
3. Site Detail
screenshot: 3_sitedetail_01.png
- This is Site Detail page look and feel
- Site Detail page divided by 2 sections “Evolving House” and “Household Consumption”
- Each section need collapsible functions.
- “Back” and “Finish” buttons placed in the bottom of page
- “Back” button take user to “Add New Site” page
- “Finish” button take user to “Generating Site” page
Evolving House
- Evolving House section displayed as 2 columns format
- In the left Sidebar user can type on “Site Name” text input
- In the right side, there’s “3D House Modelling” with compass marker in the bottom of house
- Default graphic when the user first lands on this page should show a house with medium slope, no panels, orientation south and no shade. As the sliders are adjusted, the image evolves in front of their eyes. In other words, the 3D house is built with layers that turn on and off.
- You need build House as 3D graphic using CSS3D. Read details requirements below
- “3D House Modelling” should not draggable, point of view remain same like storyboard look
- Compass graphic rotate based on “Panel Orientation” slider
- “Sunmetrix” logo placed in the top right side
- “System” information placed in the top left side
- This is a calculated value: number of solar panels multiplied by 0.25. Fractional values should be displayed (e.g., 7.25 kW). No need to display .00 (so not 7.00 kW, but 7 kW)
- “Timezone” is a dropdown, put dummy content for now
- Add another input below “Timezone”, where the user can choose their "Utility Company" from a drop-down menu. This does not appear in the storyboard images - it is a new element.
- Change properties in the left side need interpret into “3D Modelling” in the right side
- User change the properties by move the slide bar
- “Roof Slope”, this slider is integer from 0 to 45. The 3D house will display “Flat roof” for value=0; “Medium Slope” for value<=22 and “High Slope” for 22>value=>45. For the back-end calculations, the values will be the exact integer that was selected.
- “Number of Solar Panels” property slider has integer values from 1 to 40. The blue “System” info circle will show the number of panels multiplied by 0.25. The 3d house will show 1 row of 4 panels for 1 to 10 panels; 2 rows of 4 panels for 11 to 20 panels; 3 rows of panels for 21 to 30 panels; 4 rows of 4 panels for 31 to 40 panels. For back-end calculations, we will pass the total system size (eg. 7.25). Please see http://sunmetrix.com/solar-panel-calculator/ for an example.
- “Panel Orientation” property, the options are: N, NE, E , SE, S, SW, W, NW
- The selected direction with the Panel Orientation slider is always displayed on the bottom left (such that the panels face that direction). The default position is South. The slider values for back-end calculations are degrees from 0 to 360. N=180; NE=225; E=270; SE=315; S=0; SW=45; W=90; NW=135; Please see http://sunmetrix.com/solar-panel-calculator/ (This is an example of what the slider looks like currently (there is no example compass here) - please look in the Advanced Options)
- “Shade” property, the options are: None, a little, more than a little, a lot
- For the shade on the 3D evolving house, none=none; A little= 1 tree; A little more= 2 trees; A lot= 2 trees and building. The slider values for back-end calculations are None=0; A little = 0.25; A little more = 0.5; Lots=0.75
- For all of the slider inputs, we would like tooltips to explain them in more detail.
- Change number of Solar Panels show different panel on top of House model (screenshot: 3_sitedetail_02.png)
- Notice the “2kW System” that placed in the top left of the diagram changed
- Also “message” show up after “Shade” option changed. Please move the “message” so its not overlap with top of the compass. You might need increase “Evolving House” section to make sure area fits after move “message” down
- Change “Number of Shade” to “a little” need show the tree graphic (screenshot: 3_sitedetail_03.png)
- Also show the tree shadow that dropped into the house
- Change “Number of Shade” to “more than a little” need show more trees (screenshot: 3_sitedetail_04.png)
- Change “Number of Shade” to “a lots” need show another building (screenshot: 3_sitedetail_05.png)
- Change “Roof Slope” need update “3D House” roof (screenshot: 3_sitedetail_06.png)
- Change “Roof Slope” into “0” degree will make the roof turn into flat roof (screenshot: 3_sitedetail_07.png)
CSS3D Site References:
Getting Started
http://rupl.github.io/unfold/
http://www.creativebloq.com/3d/how-create-impressive-3d-graphics-css3-21410672
Tutorial References:
http://www.adobe.com/inspire/2013/11/3d-css.html
http://www.freshdesignweb.com/html5-css3-3d-examples-demo.html
http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/index.html
http://www.addyosmani.com/resources/googlebox/
http://www.clicktorelease.com/code/css3dclouds/
http://css3playground.com
Household Consumption
Consumption Calculator Tab
- In the left Sidebar there’s tab functions that will change content in the right side
- “Consumption Calculator” show by default
- Show hover state for inactive and active tabs.
- User can increase the value by click “-” and “+”
- You can use 1 number increments for all values
- User can navigate tabs in the right side
- Current active tab indicate by “orange left border”
- Match icons for all sub tabs :
- Living Room tab (screenshot: 3_sitedetail_08.png)
- Kitchen Room tab (screenshot: 3_sitedetail_09.png)
- Bathroom tab (screenshot: 3_sitedetail_10.png)
- Garage/Utilities Room tab (screenshot: 3_sitedetail_11.png)
- Electronic tab (screenshot: 3_sitedetail_12.png)
Connect With Green Button Data Tab
screenshot: 3_sitedetail_GBD.png
- This tab divided by 2 sections for “Connect My Data” and “Upload My Data”
- Show some sample text for “Connect My Data”
- There’s blue bar contains text links.
- In “Upload My Data” section, this need build as upload form.
- No need upload functionality for now
Input Manually tab
screenshot: 3_sitedetail_Manual.png
- User can type in the input field
- Put dead link for “Confirm” button
Mobile version
screenshot: Mobile_3_Site detail .png
- For mobile version, 2 columns in “Evolving House” and “Household Consumption” need displayed as separated lines
- “Evolving House” show on top of screen
- “3D House Modelling” displayed in the bottom, and need adapt fluid width
- “2kW System” message placed on top of “3D House Modelling”
- The “message” when change the properties need show fluid width
- For mobile version, tabs on “Household Consumptions” displayed as horizontal layout
- Each content display as separated row
- “-” and “+” placed in the right side
- Connect With Green Button Data Tab look for mobile version (screenshot: Mobile_3_Site detail_GBD.png)
- Input Manually Tab look for mobile version (screenshot: Mobile_3_Site detail_Manual.png)
4. Generating Site
screenshot: 4_Generating Site.png
- User landed on this page after click “Finish” button on “Site Detail” page
- Generating Site icon placed below main navigation and use center alignment
- Text information place below it, match color style properties
- Show animation progress when from 0 to 100%
- In the bottom of progress bar, there’s placed video placeholder
- Create hover state for “play” button
- After animation progress complete, we need a message that says “Your site is ready.” and a big “GO” button.
Mobile version
screenshot: Mobile_4_generating site .png
- For mobile version, progress bar width need adapt browser device
- Also video placeholder need show fluid width
5. Dashboard
screenshot: 5_Dashboard.png
- This is Dashboard page look
- Dashboard icon placed on top
- “Boston” and “Yesterday” are dropdowns. Show some dummy content, create how dropdown works
- User can pick datepicker, you can use datepicker library
- When datepicker opened we need make sure style use white colored and match with overall prototype look
- Match different icons color for Dashboard information
- Please note that one of the icons, “Sunshine Index” needs to have dynamic content. It represents a value from 0 to 1, and we would like an orange highlight around the icon to change based on this value. For example if the value is 0, then full orange, if it’s 1, then no orange, at 0.5, half of the circle border is highlighted.
- We need dynamic chart to build in this page.
- You can use http://www.chartjs.org or other library that use dynamic solution.
- This is reference of Best JavaScript Data Visualization Libraries (http://codegeekz.com/best-javascript-data-visualization-libraries-developers/ )
- Match how storyboard design look for every chart elements, like chart type, background, X-Axis label, Y-Axis label
- There’s “Production vs Consumption (kWh)” title placed in the background. Possible to do
- We need animation effect when chart being loading
- “Prediction” information icons placed below chart
- “Download Data” button can be dead link
Mobile version
screenshot: Mobile_5_Dashboard .png
- For mobile version, “dropdown” displayed as single line
- “From” and “To” datepicker displayed as 1 group and placed in separated line
- Different icons color for Dashboard information need show as single line
- Your chart need support fluid width
- “Prediction” information need transform into slideshow, there’s dotted pagination in the bottom
- User can swipe to see another slide
- “Download Data” button placed in the bottom
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 Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
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.
Browser Requirements
Windows & Mac OS
- Firefox latest
- Chrome latest
Tablet/Mobile
- Chrome Browser on iPad (Landscape & Portrait)
- Chrome Browser on iPhone (Landscape & Portrait)