Challenge Overview
Welcome to Sunshot - MySunBuddy UI Prototype Challenge Challenge.
The main task of this project is to create the Sunshot - MySunBuddy 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 - Download all Zip!
https://www.google.com/fonts/specimen/Bree+Serif - Use this font in your submission
Important!
- For this UI Prototype submission we need your submission support responsive solution with focus on Desktop screen
- 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.
- Match similar fonts in your submission. Use "Bree Serif” font in your UI Prototype Submission
- We’re open to any framework suggestion like AngularJS etc
- You can also use Bootstrap
- Also you can use open source library like jQuery.
- All datas as possible need loaded by JSON
UI Prototype Page Requirements
1. Homepage:
screenshot: 01-01_Homepage.png
- You need create fluid width for every elements and sections in homepage
- Make sure page look okay for minimum 992px width
Header section
- Application logo placed in the left side, and take user to homepage
- Main navigation in the right side of header bar
- About, Service and Contact need scrolling the correct section of Homepage
- Make sure page scrolling and stopped right on top of each sections.
- Sign in button need show up the modal windows (screenshot: 01-02_Homepage.png)
Sign In Modal Window
- When Sign In modal window show up, there’s overlay background behind the modal
- User can close the modal window by click the “x” button
- Need show error validation with red border text and message (screenshot: 01-03_Homepage.png)
- After that click Sign in button need close the modal
- Click Forgot Password link need show up another Modal Window (screenshot: 01-04_Homepage.png)
Forgot Password
- User need filled Username or Email Address in the input field
- Cancel and Send button need hide the modal
Welcome section
- Welcome message placed centered on this section
- Background image need to be fluid use image repetition
- Find Out More button placed below the title. This button can be dead link
Sign Up section
- This section show 2 columns for Seller and Buyer
- Click Sign Up button on separated section take user to Sign Up page based on User type explained below
About section
- This section divided by 2 columns
- Left side will be introductory text about MySunBuddy
- In the right side is place for photo
- Get Started button can be dead link
Services section
- Services section show up as 4 columns layout
- Icons placed on top of each columns
- Match font typography for each columns
Contact section
- Show grey background for Contact section
- Match column layout format
- Contact links for Twitter and Email need open correct url in separated windows
Footer
- Copyright message placed in the left side
- And footer menu in the right side
- Click menus need scrolling to correct section.
2. Sign Up Page Seller
- You need create fluid width for every elements and sections in homepage
- Make sure page look okay for minimum 992px
Header
- Logo use different color for Sign up page
- Logo placed in the left side and take user to homepage
- About, Service and Contact need scrolling the correct section of Homepage
- Sign in button need show up the modal windows
Footer
- Copyright message placed in the left side
- And footer menu in the right side
- Click menus need scrolling the correct section of Homepage
Sign Up Page Layout
- Progress Steps always placed on top of page
- Show different icons for all steps
- Active step indicated by green border
- Completed step indicated by green background and white colored icon
- Incompleted step indicated grey border and icon
- Notice, the line connections turn into green colored
- User can go back to completed step by click Previous button or via Progress step
Step 1: Seller Information
screenshot: 02a-01_Sign Up Page_Seller.png
- Username (text)
- Password (password). Create Password Strength Checker in the right side
- Confirm Password (password)
- Name, Email, Phone, Address are (text)
- State and City are dropdown. Match styling
- Zip Code is text input
- Receive communications display Email and Text options
- Agree to Terms of use is a checkbox
- Authorize access utility data via Green Button, click the button need load file window
- Select some file, need grab filename and then delete button in the right side (screenshot: 02a-02_Sign Up Page_Seller.png)
- Click the remove button need delete the file
- Next button take user to next step
Step 2: Solar Production
- Show selected tab design for Seller Information (screenshot: 02a-03_Sign Up Page_Seller.png)
- For Solar Production, content tab show 3 columns format
- User need fill Number of Panels and kw Capacity
- And select High Efficiency Panels options
- Upload Generation button placed in the bottom. This need open the file browser.
- Use same function like Step 1, that allow user to remove the selected file
Step 3: Utility Information Step
screenshot: 02a-04_Sign Up Page_Seller.png
- This is Utility Information screen
- User need select Utility Information checkboxes
- When user select Commercial account, need show up the Rate input field (screenshot: 02a-05_Sign Up Page_Seller.png)
- Utility Provider is text input
- Upload Utility Bill need allow user to browse file
- Upload button disable before user select the file
- Use same function like Step 1, that allow user to remove the selected file
- Next button take user to next step
Step 4: Billing Information Step
screenshot: 02a-06_Sign Up Page_Seller.png
- Checkbox placed on top of screen
- Once checkboxes checked, Data from Step 1, need auto filled in this step
- Select checkbox need filled same content like User information
- Match form for Billing Information
Step 5: Payment Method Step
screenshot: 02a-07_Sign Up Page_Seller.png
- Payment Method show 3 options for Credit Card, Paypal and WireTransfer
- All options need to be disabled by default
- No inputs can typed or selected
- Selected tab show green colored styling and input inside the tab become active. And other tabs input need remain disabled. (screenshot: 02a-08_Sign Up Page_Seller.png)
Credit Card option
- Card Number, user can type number only
- Expiration Date field is dropdown for Month and Year
- Security Code need to be number only
- Cardholder name, user can type name here
Paypal option
- When this tab selected, input need to be enable
WireTransfer option
- When this tab selected, all inputs need to be enable
Step 6: Finish Step
screenshot: 02a-09_Sign Up Page_Seller.png
- This is the Review screen, each row show filled values for every steps
- Show progress bar for User Type section
- Click each Edit button take user to related step
- Page section, User Type placed in the 1st row
- 2nd row, for User information
- 3rd row divided by 2 columns for Billing Information and Payment Method
- Percentage progress bar can random data
- Need animation on page load
- Sections shows 4 columns format
- Next button take user to Seller Page
3. Sign Up Page Buyer
- Basically Sign Up Page Buyer use the same layout, with some differences explained below
Step 1: Buyer Information
screenshot: 02b-01_Sign Up Page_Buyer.png
- Progress Step icon use different graphic
- Title need to updated to Buyer Information
- Upload selection will be same (screenshot: 02b-02_Sign Up Page_Buyer.png)
Step 2: Solar Percentage
screenshot: 02b-03_Sign Up Page_Buyer.png
- Progress Step icon use different graphic
- Title need to updated to Solar Percentage
- For Buyer Type, user can sliding the bar from range 0% to 100%
- There’s tooltips placed above drag bar indicated the selected value
Step 3: Utility Information Step
screenshot: 02b-04_Sign Up Page_Buyer.png
- Basically no differences with Sign Up Page for Seller
Step 4: Billing Information Step
screenshot: 02b-05_Sign Up Page_Buyer.png
- Basically no differences with Sign Up Page for Seller
Step 5: Payment Method Step
screenshot: 02b-06_Sign Up Page_Buyer.png
- Basically no differences with Sign Up Page for Seller
- Selected tab show green colored styling and input inside the tab become active. (screenshot: 02b-07_Sign Up Page_Buyer.png)
Step 6: Finish Step
screenshot: 02b-08_Sign Up Page_Buyer.png
- Basically no differences with Sign Up Page for Seller
- Percentage progress bar can random data
- Need animation on page load
- Sections shows 3 columns format
- Click Next button take user to Buyer Page
4. Seller Page:
screenshot: 03-01_Seller.png
- This is Seller Page look and feel
- User landed on this page from Sign Up page with Seller Type
- Header will be same like Sign up page
- In the right side of this page, there’s user thumbnails with dropdown button
- Click the button need show up additional button for Profile and Sign out buttons (screenshot: 03-02_Seller.png)
- Profile button can be dead link
- Sign out button take user to Homepage
- Page divided by 2 sections: Main Content area and Right Sidebar area
Main Content area
- This area can use fluid width
- This screen show “Summary” and “MySunBuddy Seller” tabs
Summary Tab
- Summary Tabs show by default, active state indicated by green bottom border
- Welcome message show up in the left side
- Edit Account button need load Modal Window (screenshot: 03-04_Seller.png)
- In the right side, there’s big progress bar of Percentage of Solar Production , click edit button need show the modal window (screenshot: 03-05_Seller.png)
- Show different arrow up/down with $ information
- Below it, there’s list of Matches Buyer and mil information.
- Sale button need show up the infobox in map (screenshot: 03-03_Seller.png)
- Map need build with Google Map
- User need able to zoom in/out the map
- Search and Setting button can be dead link
- Map legend placed on top left side of Map for “User”, “Host”, “Registered/In-Active” and “Link”
- User marker show up in map by default
- Show correct color for each elements
- Link need to use dotted format
- Show map marker for house shape (all colored icons)
- Click on each marker need show icon, circle and the infobox (screenshot: 03-03_Seller.png)
- Show different information for the infobox
- “!” button can be dead link
- User can hide the infobox by click the “x” button
MySunBuddy Seller tab
screenshot: 03-09_Seller.png
- This tab display HIstorical information of Buyer
- Show different status and row information
- There’s icon for how many days left
- Click each row need show the modal window, that will auto select the map marker (screenshot: 03-10_Seller.png)
Edit Account Modal Window
screenshot: 03-04_Seller.png
- This is Edit Account modal window
- Need show inputs with filled informations
- User can edit Account Info, Payment Method and Account Info
- “x”, Cancel and Save button need hide the modal
Percentage of Solar Production Modal Window
screenshot: 03-05_Seller.png
- This is Solar Production Modal Window
- User can drag the progress bar
- “x”, Cancel and Apply button need hide the modal
Right Sidebar area
- This area can use fixed width
- This area height need fulfill whole browser height
- Progress bar percentage show up on top
- Notifications section, need show Decline and Accept button. Put dead linnks for now
- Show different icons for notifications
- Also, there’s Sign utility document button
- Click this button need show up the modal window (screenshot: 03-06_Seller.png)
- For each row, user can navigate to see detail modal window (screenshot: 03-07_Seller.png)
- You need load some sample of PDF file
- Click upload button need open browser file
- After select the file, User need able to sign the area (screenshot: 03-08_Seller.png)
- Cancel and Apply button need hide the modal window
5. Buyer Page:
screenshot: 04-01_Buyer.png
- This is Buyer Page look and feel
- Basically need use same function like Seller Page with some differences explained below
- User landed on this page from Sign Up page with Buyer Type
- Page divided by 2 sections: Main Content area and Right Sidebar area
Main Content area
- This area can use fluid width
- This screen show “Summary” and “MySunBuddy Seller” tabs
Summary Tab
- Summary Tabs show by default, active state indicated by green bottom border
- Welcome message show up in the left side
- In the right side, there’s big progress bar of Current Percentage of your Bill , click edit button need show the modal window (screenshot: 04-04_Buyer.png)
- Also, there’s 2 mini progress bar below vertical progress bar
- Show different arrow up/down with $ information
- Below it, there’s list of Matches Buyer and mil information.
- Buy button need show up the infobox in map (screenshot: 04-02_Buyer.png)
- Map need build with Google Map
- User need able to zoom in/out the map
- Search and Setting button can be dead link
- Map legend placed on top left side of Map for “User”, “Host”, “Registered/In-Active” and “Link”
- User marker show up in map by default (green colored)
- Show correct color for each elements
- Link need to use dotted format
- Click on each marker need show icon, circle and the infobox (screenshot: 04-02_Buyer.png)
- Show different information for the infobox
- “!” button can be dead link
- User can hide the infobox by click the “x” button
MySunBuddy Buyer tab
screenshot: 04-05_Buyer.png
- This tab display HIstorical information of Buyer
- Show different status and row information
- There’s icon for how many days left
- There’s savings column with bulb icons
- Click each row need show the modal window, that will auto select the map marker (screenshot: 04-06_Buyer.png)
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.
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
- Android Browser