Challenge Overview
Welcome to SunShot - SolarActionNetwork - Tenant Engagement Application UI Prototype Challenge.
The main task of this project is to create the SunShot - SolarActionNetwork - Tenant Engagement Application UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive on Desktop, Tablet and Mobile layout. In the end of this challenge we need solid UI prototype result with best practice solutions
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 from Desktop, Tablet and Mobile screen
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width).
- Provided storyboard for Mobile version using iPhone 6 Retina Portrait display (750px x 1334px).
- Make sure your submission support Standard layout with 320px width screen size using best practices of Responsive Web solution.
- You might need adjust some element placement in 320px width screen size, if not possible within current timeline, we’ll fix at final fixes phase
- All pages need use fluid layout when transform into Landscape or Portrait view.
- Font Link: http://www.fontsquirrel.com/fonts/oswald
- For Tablet version, you can use Mobile layout with fluid width
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Required Technology: AngularJS, GoogleMap, Bootstrap and jQuery.
UI Prototype Page Requirements
1). Homepage
Desktop Version
screenshot: Desktop/00-1Home-Blue-Pin.jpg
screenshot: Desktop/00-2Home-Yellow-Pin.jpg
- This is homepage look and feel
- All page background need covered whole browser screen, but main content area need use min-width for 992px. This rule need apply to all prototype pages
- Header bar need use fixed placement on top of page
- Application logo placed in the left side and always take user to homepage
- In the right side there’s main navigation menu
- Put active and inactive state for menu navigation
- Main navigation menus are:
-- Home
-- Get Solar
-- Join Solar Farm
-- Off Grid Option
-- Invest
- In the the very right side, there’s $ number
- Below the header bar, Google map need use fluid width
- Show Google Map with “Satellite” map type and required action buttons like zoom in/out and street view icon
- Notice you need add Panel solar layer on top of a house with blue colored
- Location in information placed in the right side and can use fixed width
- Search input placed on top
- Select “Auto” button need get current user location and show up the address
- Match design for checkbox styling
- Reset button need reset the map
- Below the map, there’s 4 columns of Application functionalities
- Match icons and description for each boxes
- Video area need static image background by default
- Play button and Watch message placed above the image
- Play button need show playable video, show this video for demo: https://www.youtube.com/watch?v=rO5rUqeCFY4
- Contact Us use grey background and form placed centered, match input, dropdown and textarea styling
- Submit button can be dead link
Mobile Version
screenshot: Mobile/00-0Splash-Screen.jpg
- For mobile screen by default you need show splash screen
- Application logo placed centered
- Use Progress bar while loading the page
- After some seconds need load the homepage (screenshot: Mobile/00-1Home.jpg)
- Header bar need remain use fixed placement
- But for mobile, there’s only menu button in the left side and logo in center of header bar
- Click menu button need load the menu navigation (screenshot: Mobile/28-Side-Menu.jpg)
- When menu navigation show up, show app logo on top of navigation menu
- Show active and inactive style for menu navigation
- For mobile every sections need use fluid width and stacked layout
- Search location placed below the header. If not possible you can move the search below the map
- Then, the map view show up
- Location information display below the map
- Auto checkbox. Use consistent styling for both desktop and mobile.
- Reset button need placed below the location information instead in the right side
- Application features displayed in separated line (screenshot: Mobile/01-Home-Scroll.jpg)
- Icons placed in the left side, and description in the right side
- Video need use fluid width, and play button remain centered
- Contact Us form need use fluid width for all inputs, dropdown and textarea
2). Get Solar - Sign Up Step
Desktop Version
screenshot: Desktop/01-Sign-Up.jpg
- User landed on this screen from Get Solar menu
- Below the header bar, there’s Progress step navigation
- Sign up step active by default
- Active step need show blue colored icon and blue colored text, match hex number for the color
- Inactive step need show grey colored icon and black text
- User cannot click incomplete steps
- For desktop version, page need show 2 columns and divided equally.
- Content from each columns need to use center alignment
Left Column
- Use yellow background
- Page background need covered browser height
- Match text information
- On top there’s information for total Save each month
- Make sure rounded circle not break when filled with more numbers
- Create Chart bar. You need use open source library
- You need show animation when chart loaded
- Show dummy description below the chart
Right Column
- Use blue background, match hex number for the color
- Page background need covered browser height
- There’s image below the title
- Match all text and dropdown content
- By default there’s placeholder text
- On focus placeholder text need to be hidden
- Show sample content for dropdown
- Next button take user to next step
Mobile Version
screenshot: Mobile/02-Get-Solar.jpg
- For mobile version, progress steps placed directly below the header bar
- In sidemenu, make sure active menu is Get Solar
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Why Go Solar placed on top of screen
- Make sure title consistent like desktop version
- Scroll to the bottom of page user see Sign up area (screenshot: Mobile/03-Sign-Up.jpg)
- Show Sign up form (screenshot: Mobile/04-Sign-Up-Scroll.jpg)
- Next button take user to next step
3). Get Solar - House Owner Info Step
Desktop Version
screenshot: Desktop/02-House-Owner-Info.jpg
- This is 2nd Step of Get Solar flow
- Show complete state with blue background and checkmark icon for Step 1
- User can navigate back to completed step
Left Column
- Use yellow background
- Google Map placed on top of this column
- Google Map area need fluid width
- Location information place below it
- Show Step 2 text and image below it
- And specification description in the bottom
Right Column
- Match Form B fields
- “This House is a” section is set of radio buttons
- “The Roof/Property is How Sunny”, this works as rating function
- “The Property Owner” is set of radio buttons
- When select “Other” option input become enable. This input need disable before user can select the “Other” option
- “Property Owner Info” is form field with some text inputs and textarea
- “My Relationship with The Owner”, “Owner Willingness To Make Repairs &
Improvements” and “Building Efficiency” use rating function
- This toggle works like rating function
- Next button take user to next step
Mobile Version
screenshot: Mobile/05-House-owner-info.jpg
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Map location and information placed on top of screen
- Just Step 2 section placed on top (screenshot: Mobile/06-House-owner-info-Scroll.jpg)
- Scroll to the bottom of page user see Form B (screenshot: Mobile/07-House-owner-info-Form-B.jpg, screenshot: Mobile/08-House-owner-info-Form-B-Scroll-1.jpgm screenshot: Mobile/09-House-owner-info-Form-B-Scroll-2.jpg)
- Next button take user to next step
4). Get Solar - Electricity Info Step
Desktop Version
screenshot: Mobile/10-Electricity-info.jpg
- This is 3rd Step of Get Solar flow
- Show complete state with blue background and checkmark icon for Step 2
- User can navigate back to completed step
Left Column
- Use yellow background
- Show Step 2 information and text specifications message
Right Column
- Match Form C fields
- Match Fill Utility Login Information
- By default there’s placeholder text
- On focus placeholder text need to be hidden
- Authorized button need show up the modal window (screenshot: Desktop/03-2Electricity-Info-Popover.jpg)
- The modal window need contains some text with some area that user can type and signed
- For the Digital Signature, user can drawing the area by drag with mouse
- OR, click Upload button need open file browser.
- Selected file need capture the image inside the Digital Signature area
- Ok button take user to next step
Mobile Version
screenshot: Mobile/10-Electricity-Info.jpg
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Scroll to the bottom then Form C show up (screenshot: Mobile/11-1Electricity-Info-Form-C.jpg)
- Authorize button need show up the modal window (screenshot: Mobile/11-2Electricity-Info-Popover.jpg)
- OK button take user to next step
5). Get Solar - Rental Agreement Step
Desktop Version
screenshot: Desktop/04-1Rental-Agreement.jpg
- This is 3rd Step of Get Solar flow
- Show complete state with blue background and checkmark icon for Step 3
- User can navigate back to completed step
Left Column
- Use yellow background
- Show image on top of screen
- Key Features need display 3 circle shapes
- Match content for each circles
Right Column
- On top of Form D, user can select datepicker
- Create datepicker function when user click the month and date in the the right side
- “This is the Type of Lease i Have” is set of radio buttons
- Multi Year and other inputs need to be disabled before user select the options
- “I Plan on Staying” need works like Rating function
- Solar Rental Addendum is input field
- Agree button need show up the Modal Window (screenshot: Desktop/04-2Rental-Agreement-Popover.jpg)
- The modal window need contains some text with some area that user can type and signed
- For the Digital Signature, user can drawing the area by drag with mouse
- OR, click Upload button need open file browser.
- Selected file need capture the image inside the Digital Signature area
- Click Ok button need take user to Join Solar page
Mobile Version
screenshot: Mobile/12-Rental-Agreement.jpg
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Pay & Claim your free gift placed on top of screen
- Key Features remain displayed in 3 columns format
- User scrolling the page need see the Form D (screenshot: Mobile/13-Rental-Agreement-Form-D.jpg)
- User scrolling the page need see the another form section (screenshot: Mobile/14-1Rental-Agreement-Form-D-Scroll.jpg)
- Click Agree button need load the modal window (screenshot: Mobile/14-2Rental-Agreement-Form-Popover.jpg)
- Click Ok button need take user to Join Solar page
6). Join Solar
Desktop Version
screenshot: Desktop/05-1Join-Solar.jpg
- This is Join Solar page
- For desktop version, page need show 2 columns and divided equally.
- Content from each columns need to use center alignment
Left Column
- Benefits Membership placed in the left side
- Match Benefits Membership description
- Match content for each circles
Right Column
- User see Join & Get Solar information in this column
- User need pick option to join Community Solar Farm
- There’s checkbox for Agreement
- Agree button need load the modal window (screenshot: Desktop/05-2Join-Solar-Popover.jpg)
- OK button take user to Off Grid page
Mobile Version
screenshot: Mobile/17-Join-Solar.jpg
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Benefits Membership placed on top of screen
- Scrolling to the bottom user need see Join & Get Solar information (screenshot: Mobile/18-Join-Solar-Form-E.jpg)
- Scrolling the page use need see whole form content (screenshot: Mobile/19-Join-Solar-Form-E-Scroll.jpg)
- Agree button need load the modal window (screenshot: Mobile/20-Join-Solar-Pop-Up.jpg)
- OK button take user to Off Grid page
7). Off Grid Option
Desktop Version
screenshot: Desktop/06-Off-Grid.jpg
- This is Off Grid Option page
- Need add number indicator next to icon
- User see 3 columns layout for Off Grid option
- Match different image for every Off Grid Option
- There’s some buttons display below the image
- Also prices, discount and how much user can save in separated boxes
- Specification placed in the bottom of each image
- There’s Details button, put dead link for now
Mobile Version
screenshot: Mobile/21-Off-Grid-Project-1.jpg
- For mobile version Off Grid page content display as swipeable screen
- Cart button show up in the right side of header bar
- There’s dot pagination on top of screen
- User can navigate 3 slides by swipe the page screen (screenshot: Mobile/22-Off-Grid-Project-2.jpg, screenshot: Mobile/23-Off-Grid-Project-3.jpg)
- Specification placed in the bottom of slider
- Click cart button need show up the Review Product modal window (screenshot: Mobile/26-Off-Grid-Project_Pop-Up-1.jpg)
- For mobile version, we need change the click flow from tab in separated modal window
8). Invest
Desktop Version
screenshot: Desktop/07-Invest-In-Solar-Value.jpg
- This is Join Solar page
- For desktop version, page need show 2 columns and divided equally.
- Content from each columns need to use center alignment
Left Column
- Benefits in Investment circle placed in the left side
- Show chart bar for Avg members joined last year
- Key Benefits displays 3 circle shapes
- Match content for all circle shapes
Right Column
- Checkbox placed on top of this column
- I want to join Community Solar Farm
- Match Payment section.
- User can select some Card Type
- There’s dropdown for CVV and Card Expire
- Click Pay button need show up the modal message (screenshot: Desktop/08-Invest-In-Solar-Pop-Up.jpg)
- Ok button need hide the message
Mobile Version
screenshot: Mobile/24-Invest-In-Solar.jpg
- Page content use stacked layout for Mobile version
- Ignore storyboard look that show different pages, we need achieve best practice responsive solution by display all content in single page.
- Both sections need use same color for title and background like desktop version
- Make sure both section height not fixed for mobile screen
- Benefits in Investment placed on top of screen
- Bar Chart placed below it
- Key Benefits need use same color
- Scrolling to the bottom user need see Community Solar Farm form (screenshot: Mobile/25-Invest-In-Solar-Form-G.jpg)
- Invest button need show up Payment form (screenshot: Mobile/26-Invest-In-Solar-Form-G-Payment.jpg)
- You just need show the form below the button, no need in separated page
- Re-use form from Payment step in Off Grid page
- Click Pay button need show up the modal message (screenshot: Mobile/27-Invest-In-Solar-Pop-Up.jpg)
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.
- Responsive Web Design solution!
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
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Android Browser