Challenge Overview
Welcome to the SunShot - BuiltSpectrum - NO GRAPHS Dashboard Prototype Challenge! Spectrum provides cloud-enabled building performance software for the architecture/engineering/construction industry. The software seamlessly integrates computer-aided-design (CAD), building performance analysis tools, and cloud-based intelligence. Architects receive real-time feedback on life cycle cost, energy use, and environmental impact during the early stages of the design process. Novel data visualization methods allow architects to easily create low-cost, energy efficient, code compliant designs.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section. The graphs will be image placeholders only for this challenge.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built. Use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the HTML prototype by using industry standard best practices.
Primary Requirements:
1. Build all the pages mentions in the page requirements outlined below.
2. Layout
- Background is fluid / 100% width as per storyboard.
- Content is also fluid, minimum content width is 940px.
- Maximum left and right margin of the content is 155px on each side.
- Minimum page width is 1280px.
- Sidebar is fixed width.
3. Sidebar
- Link the pages to their respective pages except for Baseline nav which will be dead link.
- Link the logo to Dashboard page.
- Menu icon will toggle the sidebar. Hiding the sidebar will also hide the logo but the menu icon will stay visible regardless if the menu is shown or hidden.
4. Header / Top part on all page
- Implement breadcrumbs and link to their respective pages.
- The arrow down on the far right will be dead link. Make sure that this link has correct padding and not just the arrow itself. Ideally, the whole link will have a size of 38px by 22px.
5. Footer
- Link the logo to Dashboard page.
- All other links will be dead link.
6. Forms
- All forms should have validation
- Show error message on top of the form in case there is an error.
- Use the Bootstrap alert-danger component to show error message.
7. All graphs are image placeholders only. We are going to replace them with actual graph markup but make sure you have container on each of them so that the layout will not be broken.
8. Scrollbar - use native/default browser scrollbar.
9. Fonts
- Lato fonts can be linked directly from Google Fonts.
Page Requirements:
The following are the pages and functionalities needed for this challenge.
1. Dashboard
- See 01 Dashboard.png for reference.
- “+ New Project” will open the Create New Project modal. See details below.
- “Set” button will open the Set Baseline modal. See details below.
1.1. Baseline blocks
- Mouse hover on the “blocks” under the Baseline section will open its Objective details. Refer to screenshots 02 Dashboard_EUI.png, 03 Dashboard_Total Cost.png, and 04 Dashboard_Environmental Impact.png for reference.
- The Objective details will have donut chart on the left (image placeholder).
- Hover out on the whole part including on the Objective details and not just the initial rectangle will hide the Objective details.
- “Water” block will not have an Objective details.
- “Daylighting” block also will not have an Objective details. The icon part on its left will be a graph. Make this “icon” part as image placeholder with container.
1.2. Set Baseline modal
- Refer to 05 Dashboard_Popup Set Baseline.png
- Clicking either “New Project” or “Existing Project” button will close the modal.
- Clicking outside the modal will also close the modal.
1.3. Create New Project modal
- Refer to 06 Popup_Full Page_Create New Project.png. Please note "Buidling Size" should be spelled "Building Size".
- Project title is a text input and there should be NO arrow down.
- Marker icon on the Address field will be a dead link.
- Parameter section will list the parameter fields by group.
- Instead of using the fields in the storyboard, use the values of A8 to A32 from this Spectrum_Dataset_100_Nov3.xlsx.
- All fields will in select dropdown fields instead of text input. Their options will be based from the minimum, maximum, and step size value. Example for the field Orientation it will have options of 0, 10, 20, 30, ... up to 360. This is because the minimum value is 0, maximum values is 360 and step size of 10.
- For fields that has no min, max, and step values, use the data in column B of the Materials tab.
- Each Parameter fields (B8 to B32) will have their units (I8 to I32) displayed on the right side.
- Save button will dynamically add the entered information into the Projects table.
1.4. Project Table
- The checkbox in the header will check/uncheck all the checkboxes in the table.
- Menu button will be dead link.
- Clicking a project name from the table shows project page.
2. Projects
- Refer to 07 Result_Hover.png for the default screen.
- Baseline section, New Project button, and Set button will have similar functionality as outlined above in Dashboard page.
- The map should be an embedded Google Map based on the address.
- “+ Add New Design” button will open the Create New Design modal, see details below.
- Make sure the checkbox styles within the dropdown options will work correctly with actual checkbox.
2.1. Building Components
- Change the label of this link to “Modify Design”.
- Clicking this link will show a pull down menu with dummy options (ex. Design 1, Design 2, Design 3, etc…). You can use Bootstrap’s Button dropdown component for the dropdown.
- Clicking any of the option will launch a modal similar to the Create New Project modal but with pre-filled data.
- Change the title of this modal into “Modify Design”.
2.2. Create New Design modal
- This will have similar content and layout as with the “Create New Project” modal.
- Title will be “Create New Design”.
- The button is only “Analysis”.
- Clicking the “Analysis” button will show a progress bar (see progress-modal.png). Note that the progress bar in the storyboard is not correct, it should be fro left to right. Simulate for about 5 seconds the analysing process. The progress bar should be animated.
- After about 5 seconds, close the modal.
2.3. Results - Graph View
- This will be the default view of this page.
- Implement focus state on the dropdowns as shown in 10 Analysis_Attribute _ Parameter.png
2.3.1. Energy
- Dropdown options are from cell B40 to B43 in the Excel file.
- Menu button is a button dropdown with menu Edit Parameter, Set as Baseline, and Export Data As.
- Edit Parameter menu will launch the Modify Design modal.
- Set as Baseline menu will do nothing.
- Export Data As menu will launch the Export Data modal (see details below).
2.3.2. Cost
- Dropdown options are from cell B46 to B48.
- Same menu button functionality.
2.3.3. Water Consumption
- Implement the same menu button functionality
2.3.4. Environmental Impact
- Dropdown options are from cell B54 to B65.
- Same menu button functionality.
2.3.5. Daylighting
- Implement the same menu button functionality
2.4. Results - Table View
- Clicking the “Table View” button will display the Table view and hide the Graph view. See table-view.png for reference.
- The “dots” at the bottom indicates a pagination that when clicked will slide to show the other “Design” column. This will work like a carousel but without auto move.
- Second page/view will have the same content but with 2 columns only instead of 3.
2.5. Export Data modal
- Refer to export-data-modal.png as the content of this modal.
- Apply overall modal look and feel as with the previous modal described above.
- Clicking Export button will close the modal.
3. Analysis
- Refer to 10 Analysis_Attribute _ Parameter.png
- Baseline section, New Project button, Set button, and Building Components (Modify Design) will have similar functionality as outlined above in Dashboard page.
- The map should be an embedded Google Map based on the address.
3.1. Influence
- First dropdown will have a label inside “Objectives” instead of “Attribute X”, this is not changeable. The “All” text should be updated to “Custom” when not all checkbox are checked.
- No need to have the check/uncheck all functionality.
- The 2nd dropdown options are from cell A8 to A32. This dropdown will not have checkbox.
- The 3rd dropdown will function as a toggle to display with graphs or table only. The options are icon graph and icon table (use the Table View button icon).
- When the selected option is table, the graph will be hidden and the table will occupy all the space.
3.2. Tradeoffs
- Both dropdowns will have options from cells B40 to B70.
- Both dropdowns will not have checkbox.
3.3. Sensitivity Analysis
- 1st dropdown options will come from cells B40 to B70.
- Implement accordion on the section, only expand 1 section at a time.
- No need to have the check/uncheck all functionality.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Mac OS)
- Latest Firefox (Windows & Mac OS)
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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.
CSS
- CSS code should be valid level 3.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
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.
- Use jQuery library 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.