EMS Dashboard UI Prototype Challenge

Project Overview:

Welcome to the EMS Dashboard UI Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype for dashboard application based on provided storyboard designs using Bootstrap.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

We already finished the UI design concept challenge so the goal of this challenge is to create HTML prototype for the dashboards designed at the previous challenge. We have 1 screen for building visitors and 2 screens for building administrators. Both dashboards are independent and not linked each other.

The main task of this competition is to develop Responsive HTML5 Prototype based on provided dashboard storyboard designs. You need to simulate required animations to show different stages of dashboard. Your prototype must work properly in all the required browsers listed below.

Please ask questions in forum for any clarifications needed on the spec requirements.

Required Pages:

Below are the required pages for this prototype challenge. Client dashboard view does not required mobile version.

1. Client Dashboard View:

• -Refer screen - "A-01-1-Dashboard-Sunny.png".
• -The remaining electricity on the ‘Electricity Remain’ power gauge needs to be changeable (should not be a static image).
• -Birds fly around during the daytime - (You could show and hide pre-sets bird images to do that).
• -Warning could appear on all five elements on the center image, electric company, solar panel, inverter, power storage, electric appliance. Not just on power storage.
• -Lines on the center image need to express the flow of electricity with animation.
  • -The direction between electric company and inverter, inverter and power storage needs to change according to the weather and time. See A-01-1-Dashboard-Sunny.png, A-01-2-Dashboard-Cloudy.png, A-01-4-Dashboard-Night.png files.
  • -The line between solar panel and inverter needs to be grayed out in the night See A-01-4-Dashboard-Night.png.
• -Don't need to support mobile devices but need to support screens wider than 1280px with responsive design.

2. Admin Dashboard View:

• -Refer main screen - "B-01-Dashboard-admin.png".
• -Need to support mobile devices with responsive design. See C-01-Dashboard.png , C-02-Dashboard.png, C-03-Dashboard.png files.
• -Render charts using D3 JavaScript library.
• -Click on info icon, show info popup as shown on screen (B-02-Dashboard-admin-show-related-information.png).
• -Simulate alert message as shown screen (B-03-Dashboard-admin-alert.png) and show/hide after some interval.
• -Click on view details button, show admin details screen (B-04-View-Details-admin.png).
• -Use deadlinks for all other links or buttons.

3. Admin Details View:

• -Refer Detail screen: "B-04-View-Details-admin.png".
• -Need to support mobile devices with responsive design. See C-03-Dashboard-details.png, C-04-Dashboard-error.png files.
• -Render charts using D3 JavaScript library.
• -User can change view by selecting dropdown options (Day, Weekly, Monthly) as shown on screen (B-05-View-Details-admin-show-filter.png).
• -Render corresponding charts like daily, weekly, monthly charts on dropdown selection change - (we don't have all these charts, but refer provided daily chart on "B-04-View-Details-admin.png" screen).
• -Click on prev/next buttons on top of the chart, show prev/next dates on each click - (similarly for Weekly and Monthly, show corresponding data).
• -Simulate alert message as shown screen (B-06-View-Details-admin-error-warning.png) and show/hide after some interval.
• -Click on back button, navigate user back to admin dashboard screen.
• -Use deadlinks for all other links or buttons.

Specific HTML/CSS/JavaScript Requirements:

• -Your HTML code must be valid HTML5 and follow best practices.
• -Follow the coding style used in Bootstrap.
• -Structure your code nicely to allow for flexibility and maintainability  
• -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.
• -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.
• -No inline CSS styles - all styles must be placed in an external style-sheet.
• -Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• -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")
• -Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.

Font Requirements:

Use font - Arial.

Please note we will add Japanese fonts later to font-family.

JavaScript Requirements:

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. We would like to use following JavaScript libraries:

• Bootstrap 3 (Mandatory)
• jQuery and Plugins
• D3

Browsers Requirements:

• IE 11+ Browsers
• Latest Chrome Browsers
• Latest Safari Browsers
• iPhone 6 and iPad Safari Browsers

Documentation Provided:

Please register to see attached documents.