Challenge Overview
Welcome to the AERS Managed Risk Reporting - UI Prototype Challenge! The AERS Managed Risk Reporting provides companies in the energy and resources sectors with a structured approach for addressing two fundamental issues associated with hedge programs and their interdependence: understanding the risk to financial goals that volatile commodities cause, and adopting a lucid hedge structure to protect the goals. The app will provide data and users can create their own reports, charts, and graphs to meet their reporting needs.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard designs, wireframe, and requirements/instructions outlined in the Challenge Details section.
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.
Final Submission Guidelines
The objective of this challenge is to build the HTML prototype of this app by using industry standard best practices.
General Requirements:
1. The storyboard uses Open Sans font, you can embed it directly from Google font.
2. Replace all Myriad Pro to Open Sans as it is not a web safe font.
3. Page width is fluid, set the content minimum width to 1240px. While the main tab section will always have 10px margin on both sides.
4. Do not use Angular, Bootstrap, and/or CSS preprocessors.
Requirements:
The following are the pages and functionalities needed for this challenge.
1. Dashboard
- By default, the screen will be 01A.Reporting-Dashboard.jpg
- Tab 2 and Tab 3 need to be functional, use dummy content for now.
- “New Report” button leads to Generate Report page.
- User image placeholders for the graphs.
- “Customize Fields” button will open a modal, please refer to 01C.Reporting-Dashboard-CustomizedKeyMetrics.jpg. All switch toggle should be functional.
- Implement each graphs popup menu, please refer to 01D.Reporting-Dashboard-ActionMenu.jpg
- Search can be static and there’s no need to have a functional code.
- Table columns should be sortable.
- “Refresh” icon is a dead link for now.
- Custom Reports:
-- links under the Title column should linked to Custom Report page.
-- Icons under the Action column are dead links.
- Table pagination and number per page should be functional.
-- For Custom Reports table, simulate 12 records but by default it will only show 4 items per page.
-- For Price Index Report table, simulate 30 records but show only 10 items per page by default.
-- Changing the number per page value should update the pagination accordingly.
-- Clicking the arrows left/right and the number item should update the table display.
2. Generate Report
- Please refer to 02A.Generate-Custom-Report.jpg storyboard.
- Search, Column sorting, Table pagination, and number per page will have the same functionality as described above.
- The tab “Trade Data” will get its content from the wireframe.
- The “Generate Report By Customization” is a wizard type page. All of the screens (Setup, Preview, and Schedule) should be done in only a single page.
-- Please refer to storyboards 02B.Generate-Custom-Report.jpg up to 02H.Generate-Custom-Report.jpg
-- User can go back to previous steps by clicking the Back button or by clicking the step number indication.
-- The “Next” button in 02H.Generate-Custom-Report.jpg will lead to the Preview step/screen, please refer to 02I.Generate-Custom-Report.jpg
-- The “Cancel” button from the Preview screen revert to the 1st step.
-- The “Generate Report” button from the Preview screen will move to the Schedule screen. Please refer to 02K.Generate-Custom-Report.jpg for the Schedule screen.
-- Start and End date fields from the Schedule screen should use datepicker.
-- The “Add Other Email Address” button will dynamically add an email address field.
-- Clicking the “Schedule” button leads to the Custom Report Detail page.
3. View Reports
- Please refer to 03.Custom-Report.jpg storyboard.
- Search, Column sorting, Table pagination, and number per page will have the same functionality as described above.
- Simulate 45 records for this page.
- Icons under the Action column are all dead links.
- Tab 2 and Tab 3 need to be functional, use dummy content for now.
- “New Report” button leads to Generate Report page.
- Links under the Title column should be linked to Custom Report page.
4. Custom Report Detail
- Please refer to 04A.Custom-Report-Detail.jpg storyboard.
- Tab 2 and Tab 3 need to be functional, use dummy content for now.
- Email, Print, Export icons, Add to Dashboard, Edit, and Save are dead links.
- Clicking the “x” in the Filter By section will remove that item.
- Clicking the “clear” link will remove all filter items.
- Clicking the Show Filter will expand the filter form. Please refer to 04B.Custom-Report-Detail.jpg storyboard. What is selected here should reflect back to the Filter By section and will hide this filter form section.
- Search, Column sorting, Table pagination, and number per page will have the same functionality as described above.
- Implement the Customize Chart section, please refer to 04A.Custom-Report-Detail.jpg up to 04G.Custom-Report-Detail.jpg storyboards.
- Cancel and Save buttons leads to the View Reports page.
5. Help
- This doesn’t have specific storyboard but please refer to the wireframe page for its content.
- No need to include breadcrumbs.
- Links can be dead links.
- Videos can be image placeholders.
- Search may not be functional.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
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 "-" 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.
CSS3
- 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.
- 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.
- You are allowed to 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.