Challenge Overview

Welcome to the National Solar Tour Responsive UI Prototype Challenge

For this Challenge, the goal is to build the National Solar Tour UI Prototype based on the provided storyboard and with the features outlined below.

FYI: 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

Documentation Provided:
Storyboard.zip: Storyboard Screens and PSD file

Important!
- Your UI Prototype submission 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.
- Let us know if you face any problem related responsive layout on required platforms
- Required fonts need used in your UI Prototype:
-- Oswald : http://www.fontsquirrel.com/fonts/oswald
--  Swap “Helvetica Neue” with “Arial” font
-- Open Sans : http://www.fontsquirrel.com/fonts/open-sans
- Fonts need render smooth in your submission, ignore storyboard look
- If you plan to use any open source plugin to build some requirements below. Let us know for confirmation!

National Solar Tour Responsive UI Prototype Requirements
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: D01-A.jpg
- This is landing page look and feel before user logged in
- Background page need fluid as browser screen
- While main content area (960px) use fixed width in center of page
- On header part, Application logo need take user to Landing Page
- “Leading the Renewable Energy Revolution” text need editable
- Search input placed in the right side
- Main navigation menu placed below the header
- Use All Caps format as title
- Match font styling properties and margin/spacing between menu
- “Sign In” or “Register” buttons need clickable
- There’s 4 main buttons below the “Sign In” or “Register” buttons, they are:
-- “Map My Tour” take user to “2. Dashboard (Login as Tour Attendee)”
-- “Host My Name on a Tour” take user to “4. Dashboard (Login as Tour Host)”
-- “Volunteer” need show  the modal window (screenshot: D01-E.jpg)
-- “Sponsor a Tour” take user to “5. Dashboard (Tour Organizer)”
- All paragraph text need editable
- Map need build using Google Map Api
- Notice there’s transparent bar above the map.
- Show “National Solar Tour” in the left side
- In the right side of transparent header, you need create buttons.
- You can put dead link for now except share button
- Show custom pin marker in map
- Map need ability to zoom in/out
- Below the map there’s paragraph information
- In the right side match some box placeholder need displayed in page
- Make sure when we filled with more data, boxes height need auto expand
- Footer need placed along the page when user scrolling. No need floating in screen like storyboard look
- Set dead link for “Help Center” and “Support”
- Click Share Button on transparent map header need show “Share” modal window (screenshot: D02-B.jpg)
- Put dead link for social buttons
- “x” button need close the modal.
- Apply same modal for all “Share” button in your submission
- When user click “Sign in” button, you need show collapsible area (screenshot: D01-B.jpg)
- “Username” and “Password” are text input type
- There’s “Forgot Username” and “Forgot Password” links in the right side can be dead link
- “Register” button placed in the right side
- Click “Register” button need show modal window (D01-C.jpg)
- User can hide the modal by click “x” button
- Match all label and input field properties
- Click “Register” button need hide the modal
- Use blue icon color for hover state above the menu (screenshot: D01-D.jpg). Apply for all menu
- Click “Volunteer” menu need show the modal window (screenshot: D01-E.jpg)
- Match form field need displayed in modal window, there’s input, dropdown and textarea
- Click “Submit” button need hide modal window
- Show these options when user select modal window (screenshot: D01-F.jpg)

Mobile version
screenshot: M01-A.jpg
- For mobile version, background and all design elements need resized based on device screen width
- “Leading the Renewable Energy Revolution” and “Search” input hidden for mobile version
- “Sign in” and “Register” links placed below header side area
- Click Share Button in modal need show “Share” modal window (screenshot: M05-B.jpg)
- Put dead link for social buttons
- “x” button need close the modal.
- Apply same modal for all “Share” button in your submission
- User click “Sign In” modal window, need show flyout (screenshot: M01-B.jpg)
- When user click the menu button, need pushed down the options (screenshot: M01-C.jpg)
- Input field for mobile version placed on top of menu
- 4 menu buttons need follow fluid layout based on device width
- You can use All CAPS style for menu navigation
- Paragraph content displaying as screen width with stacked format, from top to bottom
- This is how Registration page should look on mobile version (screenshot: M01-D.jpg)
- Click “Volunteer” menu need show this page (screenshot: M01-E.jpg)

2. Dashboard (Login as Tour Attendee)
screenshot: D02-A.jpg
- This is Dashboard page after user click “Map My Tour” button in Landing page
- In the red bar below main navigation there’s “Welcome John Doe” message. This is just a plain text.
- In the right, there’s link for “Logout” button
- Show paragraph information like storyboard look
- “I want to help on the tour” and “Design My Tour” buttons displayed in the right side.
- Map need build using Google Map Api
- We need dynamic way to show marker in Map for desktop and tablet
- In the right side of map, user can change filter on dropdown and reflect thumbnails displayed
- Use dummy options for dropdown
- User can scrolling the thumbnails content
- When click each thumbnail, show pin marker in map and address information
- User can zoom In/out the map
- “Filter Your Site” button need show the “Filter Your Site” modal window (screenshot: D02-B.jpg)
- Match all form styling
- User can slide the Filters by click the dotted pagination in the bottom or swipe the page in Tablet device
- you can put dummy content for another tab
- Click “Filter” button need take user to “Filter Search” page

Mobile version
screenshot: screenshot: M02-A.jpg
- This is Dashboard page look and feel for “Login as Tour Attendee” option
- Header bar show red background
- Map displayed as device screen width
- no need display the right side for mobile version
- Show all marker in map, click marker need show tooltip information. H
- On Mobile version “Filter Your Site” displayed below the red bar (screenshot: M02-B.jpg)
- User can slide the Filters by click the dotted pagination in the bottom or swipe the page in Tablet device
- you can put dummy content for another tab

3. Filter Search
screenshot: D03.jpg
- This page show up after user click “Filter” button in “Filter Your Site” modal window
- Page divided by 2 columns: “Filter Search” list and Map in the right side
- “Build Custom Tour” and “Refine Search” buttons displayed in the right side of Filter search information
- User can scrolling the filter result while map remain in page
- In map, some pin marker displayed based on numbers of list in the left side
- Click pin need show tooltip with thumbnails
- User can toggle the star icon, match active and inactive style
- On map, there’s “menu” button and Zoom in/out buttons

Mobile version
screenshot: M03-A.jpg
- This is filter search look for mobile version
- Keep same title for this page, use “Filter Search” text and use same black color text
- Filter result information displayed below “Welcome user” bar
- For mobile version, list of search become hidden
- When click on pin marker need show tooltip (screenshot: M03-B.jpg)
- For mobile version, need show address instead of image thumbnails

4. Dashboard (Login as Tour Host)
screenshot: D04-A.jpg
- Basically this page use similar layout like “2. Dashboard (Login as Tour Attendee)”
- Make sure map function remain works like other pages (screenshot: D04-B.jpg)
- Click thumbnail need show tooltip information in map area
- Only need show “I want to help on the tour” button.
- Click this button need show “Tour Hosting Form” as explained more detail below
- Below the map, there’s paragraph content like in Landing page

Tour Hosting Form
- This “Tour Hosting Form” look and feel (screenshot: D04-C.jpg)
- Match each row content and fields
- “Upload Photos” need show icon in the right side
- “Edit Submission” can be dead link
- Next button take user to Next Step (screenshot: D04-D.jpg)
- This is continuation form, match all content fields for input and dropdown
- There’s checkbox in the bottom screen
- Next button take user to need show the “Status” message (screenshot: D04-E.jpg)
- Click submit button again need show Thank you message (screenshot: D04-F.jpg)
- Click “x” button need hide the modal window

Mobile version
screenshot: M04-A.jpg
- This is mobile version look Dashboard page
- Need move the button above the map, and “I want to help on the tour” button
- Need remain show the paragraph information below the map
- Click the “Tour Hosting Form” button need show up the form in page format  (screenshot: M04-B.jpg)
- Label displayed on top of input
- keep same form content for mobile version
- Next button take user to next step (screenshot: M04-C.jpg)
- Next button take user to need show the “Status” message (screenshot: M04-D.jpg)
- Click submit button again need show Thank you message (screenshot: M04-E.jpg)
- Done button take user to Dashboard page

5. Dashboard (Tour Organizer)
screenshot: D05-A.jpg
- This is Dashboard page after user select “Login as Tour Organizer” option
- On top of page there’s 2 buttons for “See Tour List” and “Approve New Host Registration”
- Click those buttons take to separate pages (See “6. Tour List”  and “7. List of Registration” informations below )
- Full width map display below the paragraph
- Show map title and buttons above transparent bar
- Need consistent tooltip styling on map
- “Filter Site” button placed below the map and need show completed Filter modal flow as completed above (screenshot: D02-B.jpg)

Mobile version
screenshot: M05-A.jpg
- Page display as stacked format in page
- Match button placement
- Map show fluid layout

6. Tour List
screenshot: D06.jpg
- This is “Tour List” page look and feel
- “Sort by” use dropdown
- Show table list format
- User can scrolling the content
- We need consistent styling for custom scrollbar
- User can toggle the favorite icon
- Rounded on Tour Host image need created use css properties
- Show alternative row in page
- You need create sort by function when change the dropdown

Mobile version
screenshot: M06.jpg
- Notice, table header hidden in mobile version
- Tour Host and Status merged in mobile version
- Make sure table adapt fluid layout

7. List of Registration
screenshot: D07.jpg
- This is use same layout like Tour List, but show different column and content
- “Give Approval” and “See Detail Profile” buttons placed in the last column
- There’s disable state for “Give approval” button in grey colored button for “Approved” state

Mobile version
screenshot: M07.jpg
- Notice, table header hidden in mobile version
- Need use same color for link
- Table need use fluid width

8. Create an Email
screenshot: D08.jpg
- This is Create an Email page, you can create this as stand alone page
- There’s a banner placed below “Welcome” message
- Match each field content
- There’s text placeholder for “To” and “Subject” field
- On user focus text become hidden
- User can write on textarea
- Attached file here, click this button need open upload field
- Send button can be dead link

Mobile version
M08.jpg
- This is Create an Email look in mobile version
- You need display as page format instead of modal
- Banner need filled whole screen width
- Text placeholder need consistent color with desktop version

Code Requirements:
1. HTML5

- Provide comments on the page elements to give clear explanation of 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
- Make sure all HTML files pass Validation without Error/Warning.

2. CSS
- The design should work with fluid/flexible nature, so the prototype supports both Portrait and Landscape orientation
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.

3. Javascript
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- Only use Open Source for Javascript Frameworks or Library

4. Images
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing.

Browsers Requirements:
- Safari latest version
- Firefox latest version
- Chrome latest version
- Safari Browsers on iPad (Landscape and Portrait Orientation)
- Safari Browsers on iPhone (Landscape and Portrait Orientation)

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30049352