Challenge Overview
Welcome to SunShot - Solar Land Solutions - Land Acquisition UI Prototype Challenge.
The main task of this project is to create the SunShot - Solar Land Solutions - Land Acquisition 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 - Use this 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)
- Your UI Prototype submission MUST support fluid layout for min-width is 992px for all pages
- 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:
-- Replace Avenir with Nunito > https://www.google.com/fonts/specimen/Nunito
-- Source Sans Pro > http://www.fontsquirrel.com/fonts/source-sans-pro
- Expected Technology like AngularJS, Bootstrap jQuery amd JSON
UI Prototype Page Requirements
1). Landing Page
screenshot: 00-Landingpage.jpg
- This is Landing page look
- On top of screen there’s background slideshow
- Use slide animation effect
- Show active state for dots pagination
- You can use same content for all slides
- Logo placed on top of slides
- Match title and description
- Sign Up button not part of slideshow, need always show up on top right of screen
- Click this button need show the modal window (screenshot: 03-Sign-In.jpg)
- Modal Window need always placed in center of browser screen
- Username and Password will be text input
- There’s checkbox for Remember Me button
- Forget Password can be dead link
- Cancel button need hide the modal
- Submit button need take user to Homepage
- For this challenge, you need to create different login credentials that will take the user to 2 separate flows only.
- Create README file that contains user credentials for these required user:
A) Developer Type User
B) Land Owner Type user
- Below slideshow, there’s welcome message
- And 3 solutions that created as 3 columns layout
- Thumbnail placed on top of screen
- Match title for each columns
- Join Now button need show up the Create Account modal window (screenshot: 01-Create-Account.jpg)
- Read More button can be dead link
- Match all Create Account form items
- Company Details is text area
- Promotional Material and Lease information, allow user to upload document by click the browse button
- Add new button need add new document row
- There’s checkbox for term and service
- Click terms of service link need show up the Term Service area (screenshot: 02-Create-Account-Term-of-Service.jpg)
- When Term Service show up, need hide the Company Details and Promotional Material Information
- User can scrolling the Term of Service area
- Click the terms of service link again need hide the Term of Service area and show up Company Details and Promotional Material Information
- Cancel and Submit need hide the modal
A) Developer Type Flow
2). Homepage
screenshot: 04-Homepage.jpg
- This is Homepage look and feel
- Application logo placed in the left side and click this need take user to homepage
- Welcome message placed in the right side
- There’s logout link below the user thumbnail. Logout link need take user to Landing page
- Main navigation placed below the header
- Only Help button that will be dead link, other buttons need link to correct pages
- On the right side, there’s search input
- Filter tool and Sort By button placed below the main navigation
- On the main content area, build map with Google Map APi’s
- There’s some different color marker in map
- Notice, there’s tooltips next to each marker
- Click different legend label need hide/show the marker
- There’s list of properties in 2 column layout
- Show per page and pagination placed on top and bottom of grid layout
- Properties title and Favorite icon with active and inactive state
- Properties title need take user to Detail page explained below
- Each properties need show up title on top then “$ 000 / acre /year” in green colored background
- Mini Google Map
- And in the right there’s Properties information
- Footer, place application logo and title in the left side
- And then, footer links in the right side
- When user click the Filter Tool button, need show up the flyout (screenshot: 05-Homepage-Filter.jpg)
- Match some type of form in the filter and like inputs dropdown
- “Site Suitability Grading” is progress slide
- Filter button and re-click the Filter menu button need hide the flyout
- Sort By button also need show up the flyout (screenshot: 06-Homepage-SortBy.jpg)
- Each menu is clickable
- Change to different menu need change checked mark to the selected row
3). Properties Detail Page
screenshot: 07-Detail-Page.jpg
- This is Properties Detail Page look and feel
- Back button take sure Properties List
- In the right side there’s Add Favorite and Send Interest button
- Click Add Favorite button need toggle star icon into yellow colored (screenshot: 09-Detail-Page-Favorited.jpg)
- Click Send Interest button need show up the modal window (screenshot: 08-Detail-Page-Send-Interest.jpg)
- Send Interest modal window contains of Notes textarea
- Then Documents section to upload files
- This is the look after user uploaded some files
- User can remove selected document by click “x” button
- User can add new document by click Add New button
- Make sure this function re-use in every related screen
- Cancel button need hide the modal
- Send button button need load up another message modal window (screenshot: 08_1-Detail-Page-Message.jpg)
- Cancel and OK button need hide the modal
- For the main content area, map placed in the left side
- You need build the map with ability to add some different shape with overlay function like this example: https://developers.google.com/maps/documentation/javascript/examples/overlay-hideshow
- Click on each shape need show up the tooltips
- Click the legend also need hide and show related shapes
- And Properties detail information in the right side
- Environment details and Additional show up some table information
- There’s checked on and checked off icon in every columns
- Match table content like storyboard look
4). Profile Page
screenshot: 10_1-My-Profile.jpg
- User landed on this screen from My Profile link
- Username and Password section placed on top.
- Put dead link for Reset Password button
- Company Details will be textarea input
- Edit button can be deadlink
- User can upload documents in Promotional Material and Lease Information
- Use consistent function to remove and add new document
5). My Favorites
screenshot: 10-Favorites.jpg
- User landed on this screen from My Favorites pages
- Basically this screen use same content and layout like Homepage
- You just need show Favorited properties in this screen
B) Land Owner Type Flow
8). My Sites Tab
screenshot: 11-My-Sites.jpg
- User landed on this page from Login screen with Land Owner Type User
- Show different username
- Main navigation only need show Home and Help button
- Only Help button that will be dead link, other buttons need link to correct pages
- Search input placed in the right side
- Sub menu navigation placed below the main menu navigation
- Show active state for My Sites
- There’s Add New Stie button that will take user to Add New Site flow
- Every properties list need displayed use fluid width
- There’s button for number of interest with the related properties
- Properties title need take user to My Site Details
- Mini Google Map placed in the left side
- And in the right there’s Properties information
9). My Sites Details
screenshot: 12-Listing-Details-Page.jpg
- This is My Site Details page
- Back button take user to My Details
- View Listing button take user to My Site Listing screen
- Match all information for Site Detail
- Interest section need show 2 row in table layout format
- Document link placed in the right side
10). My Sites Listing
screenshot: 13-My-Site-Listing.jpg
- This is My Site Listing page
- Back button need take user back to My Site Details page
- Basically this page use similar layout like “3). Properties Detail Page”
11). Draft Sites Tab
screenshot: 14-Draft-Sites.jpg
- User landed on this page from Home > Draft Sites menu
- Show active state for Draft Site
- Basically this page show same layout “8). My Sites Tab”
- But, we only need display Map, information, Land Owner and arrow button in the right side
- Click the arrow need take user to Details page explained below
12). Pending Sites
screenshot: 15-Pending-Sites.jpg
- User landed on this page from Home > Pending Sites menu
- Show active state for Pending Site
- Basically this page show same layout “8). My Sites Tab”
- But, we only need display Map, information, Status, Rejected Reason(If Any) and arrow button in the right side
- Click the arrow need take user to Details page explained below
13). Draft Sites Details - Draft
screenshot: 16-Site-Details-Draft.jpg
- This is details site with Draft status
- Back button take user to Draft Sites
- There’s Delete and and Submit Button
- Delete button can be dead link
- Click Submit button need show the modal
- Cancel and OK button need hide the modal (screenshot: 19-Site-Details-Submitted-Modal.jpg)
- Edit button placed in the right side of each sections. Put dead links for now
- Match all section information
14). Draft Sites Approval
screenshot: 17-Site-Details-Approval.jpg
- This is details site with Approval status
- Back button take user to Approval Sites
- There’s NO Delete and and Submit Button
- Edit button placed in the right side of each sections. Put dead links for now
- Match all section information
15). Draft Sites Rejected
screenshot: 18-Site-Details-Rejected.jpg
- This is details site with Rejected status
- Back button take user to Rejected Sites
- There’s Delete and and Submit Button
- Delete button can be dead link
- Click Submit button need show the modal
- Cancel and OK button need hide the modal (screenshot: 19-Site-Details-Submitted-Modal.jpg)
- Show up reason text in the top of section box
- Edit button placed in the right side of each sections. Put dead links for now
- Match all section information
16). Add Site
- Back button take user to My Sites page
- Progress Steps always placed on top of page
- Show different color for all steps type
- Active step indicated by green background
- Completed step indicated by grey background
- Incompleted step indicated grey background
- User can go back to completed step by click Previous button or via Progress step button
Step 1: Landowner Details
screenshot: 20-Add-Site-Step-1.jpg
- Match all form items like input, radio buttons and dropdown
- Cancel button need take user to My Sites page
- Save as Draft can be dead link
- Next button take user to Next Step
Step 2: Site / Parcel Details
screenshot: 21-Add-Site-Step-2.jpg
- Match all form items like input, radio buttons and dropdown
- There’s a map in the right side with marker and location information
- Delete button can be dead link
- User can drag the slider bar, there’s 2 drag bar to select the range
- There’s checkbox below the slider
Step 3: Additional Details
screenshot: 22-Add-Site-Step-3.jpg
- Match all form items like input, radio buttons, checkboxes, upload file and textarea
- Additional document need use same function
- Cancel button need take user to My Sites page
- Save as Draft can be dead link
- Next button take user to Next Step
Step 4: Review and Add Site
screenshot: 23-Add-Site-Step-4.jpg
- User see their completed step information
- Match all table and section content
- Click Submit button need load the modal window (screenshot: 24-Add-Site-Message.jpg)
- Ok and Cancel button need hide the modal
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