Challenge Overview
Welcome to the SunShot - PVComplete Design UI Prototype Challenge! PVComplete is a web application that seeks to streamline the most time consuming tasks in commercial rooftop solar panel project design.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard design and requirements outlined in the Challenge Details section.
Final Submission Guidelines
The following are the pages and functionality needed for this challenge:
1. Homepage
- See 01_home.png for reference.
- The background in “The Next Level of Solar Design Application” is a video, you can use this video from youtube and make sure this can be easily updated.
- The “note” inside the video is not included in the design but the “pause” icon should be included and it should be functional.
- Clicking that “pause” icon should pause the video and the icon will toggle into “play”. Clicking the “play” icon will play again the video and will toggle back the icon to “pause”.
- The “Login” button will lead to Manage Projects page.
- Other links and buttons can be dead links.
2. Manage Projects
- See 02_manage_projects.png for reference.
- “Help” and “My Profile” in the main navigation can be dead links.
- The search icon when clicked will reveal the search box to its left (create a minimal design of the search box that complements the overall look of the storyboard).
2.1. All Projects
- This is the initial view of the page.
- There are 3 tabs in this page, the default tab is “All Projects” and the other 2 tabs are “My Projects” and “Client’s Projects” tabs. Their content will be similar to “All Projects” tab.
- Project name links to the Project Details page.
- Users link can be dead links.
- Edit icon links to New Project page (3.1 Creation of project details section).
- Delete icon should remove the particular project row when clicked.
- Clicking “More Filters” will slide the Filter pane from the right side.
- “+New Project” when clicked will reveal the new project form (see 3. Create Project below for more details).
2.2. Filter pane
- See 03_1_filters.png for reference.
- Once a filter pane is displayed, there will be a semi-transparent overlay layer that covers the main content to prevent user interaction from that part of the page.
- Keyword and Customer fields are free text field.
- Location is an auto complete text with the ability to add multiple value, see 03_2_filters.png and 03_3_filters.png for reference.
- Created Date fields should display a calendar picker once they are interacted.
- Reset will clear out all the values entered from the filter fields.
- Apply button will display the result.
2.3. Result
- See 03_4_filters.png for reference.
- Clicking the “x” in any of the filtered values will remove that value from the page.
3. Create Project
- See 04_create_new_project.png for reference.
- Clicking “Cancel” will hide this new project form.
- Clicking “Submit” button will lead to the creation of project details.
3.1. Creation of project details.
- see 05_1_new_project.png for reference.
- The big image is a placeholder and NOT a CSS background.
- “Menu” when clicked will pull down the main navigation items (see 05_10_new_project.png for reference).
- “Open” and “New” can be dead links.
- Clicking the “Save Version” button will reveal the “Version” details (see Save Version below for more info).
3.2. Project Info tab
- This is the initial tab displayed.
- Clicking the Submit button leads to the Project Details page.
3.3. Outline tab
- See 05_2_new_project.png for reference.
- Line, Rectangle, and Ellipse should be selectable and has the ability to change the active state.
- The actual drawing on the map is out of scope.
- The color box and the color picker is out of scope.
- Clicking the Submit button leads to the Project Details page.
3.4. Technical Info tab
- Each section in this tab has the ability to expand and collapse. By default only the Mechanical section is expanded.
- Clicking the Submit button leads to the Project Details page.
- See 05_7_new_project.png for the Mechanical tab content.
- See 05_8_new_project.png for the Inverter tab content.
- Combiner box tab content can be dummy content from now.
3.5. Save Version
- This is what the page looks like when the “Save Version” button has been clicked. The User should have the ability to select what version the project is.
- Clicking the “i” icon will display the version info, see 05_10_new_project.png for reference.
4. Project Details
- See 06_project_details.png for reference.
- There are 2 tabs for this page, the default tab is “Overview”.
- “Reports” tab can have dummy content for now.
- Each version sections in the right side pane should be expandable/collapsable.
- “Acme Project Name” link on the top left part and the “Edit Project” button links to New Project page (3.1 Creation of project details section).
5. Customers
- This page comes from the main navigation.
- See 07_1_customer.png for reference.
- “All Customers” is the default active tab.
- “My Customers” tab can have the same content as with “All Customers” tab.
- Clicking “More Filters” will slide the filter pane from the right side part.
- Clicking “+New Customer” will reveal the Add New Customer form (see the details below).
5.1. Filter pane
- See 07_2_customer.png for reference.
- Once the filter pane is displayed, there will be a semi-transparent overlay layer that covers the main content pane to prevent interaction while the filter is on.
- Number of Project is a slider field.
- Reset will set the fields to their default value or state.
- Apply button will hide the filter and show the filtered result in the content pane similar to the look and feel of Project filter result outlined in section “2.3 Result” above.
5.2. Add New Customer Form
- See 07_3_customer.png for reference.
- “Cancel” will hide this form.
- “Submit” will append the new customer info in the list of customers table.
General Rules:
1. All of the page layout should be responsive even though we don’t have specific storyboard for tablet view, the page should still look good and not messed up. Use your best judgement in this. Additional instructions:
- The header, “try PVComplete”, and footer should take up the whole width of the page, while the content inside of them should depend on the device screen. If you use bootstrap, we can set it to use the width of the "container" class. But if you are not using bootstrap, you can use the following sizes which are based on bootstrap:
-- Smartphones: less than 768px
-- Tablets: equal or more thank 768px
-- Small screen desktops: equal or more than 992px
-- Large screen desktops: equal or more than 1200px
- Filter pane should always take the right edge of the screen
- The map placeholder and the fly out windows are based on the screen's width
2. Cascade the font family to Arial if HelveticaNeue is not existing. I suggest to use this font stack: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
3. It is possible to click the overlay screen when the Filter pane is shown to close it.
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
- iPhone ( we just need to look good and not messed up )
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.
- You are allowed to use Bootstrap for this challenge.
- 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.
- You are allowed to AngularJS for this challenge.
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.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.