Challenge Overview
IMPORTANT!! This challenge has a very FAST Timeline for each phase (Submission, Review, Appeal, FinalFix, etc), make sure to be aware of the timeline before jump into the challenge.
Welcome to "FAST! 48HR HERCULES - P2 Training Portal UI Prototype Challenge". In this Fast UI Prototype Challenge, we need your help to create a responsive HTML5 prototype for our P2 Training Portal. We are planning to create this portal as a responsive website, but for now, we are going to focus on Desktop/Web version only. Read more details below and Join us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
"P2" is an enterprise-wide integrated workflow orchestration tool that tracks the progress of all construction job types – providing visibility into the status of milestones, accurate cost of each project, the data to build forecasts, and the ability to roll up those metrics to a national view. For this challenge, we are building a simple website that will be used by internal users to get information on the P2 program.
Primary Goal
- Create responsive UI Prototype (Desktop Only) for our P2 Training Portal platform.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop/Tablet/Mobile (Desktop only for this challenge)
Target Audience
- Internal employees or outside business partners with client approval
-- There will be employees ranging from field techs to employees that are essentially program managers for construction jobs.
-- Age range: most likely from late teens (folks who graduated high school) all the way up to retirement age.
-- Gender: all genders
Competition Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- There are 3 pages that need to be built. The screens for the pages are attached in forum.
- Replicate the design of the approved Storyboards (PSD Files) for all page.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
1) Homepage
Screen Reference "1.Homepage.png"
- Use this source for video section for now "https://www.youtube.com/watch?v=5anjHBgl5X8"
- Would love to see some animation to show the homepage content one at a time when user scrolling down
- P2 Launch Roadmap section needs to make the hide/expand feature works.
- Testimonial area needs to be carousel that runs automatically.
- Click "Learn More" button in any area of the homepage will redirect the user to Training Page.
- Global Search in the top right area needs to bring the user to Training Page.
- Needs to provide notification (no design for this) area
2) Training Page
Screen Reference "2.Training.png" and "3.-Categories.png"
- This screen will show all training materials available on the platform
- Since the training Materials list can be huge, the user will be able to shrink and find any training materials that they want using category (3.-Categories.png) or by using Sorting and Filters features in the platform.
- When user hovering any thumbnails list, it will either show short video preview (for video) or fast preview of image gallery (for other formats except video)
- Clicking "Load More" should loading more training data. Show us what will happen if we reach the end of Training List.
- All the Material list card needs to have a hover state, maybe adding shadow when the pointer hovering us.
- Clicking the card will bring user to Training Details page
- Clicking "My Training" button will show list of training materials that user followed and subscribed (Out of scope for now)
3) Training Details Page
Screen Reference "4.-Video.png" and "5.-Word.png"
- Training details can be divided into 2 content, Video (4.-Video.png) and Non-Video (5.-Word.png), we need both screens simulated.
- Ability to see the overall rating, tags, time needed to complete the course, how many users joined the training.
- Ability to Bookmark the training details.
- For video, show list of training videos
- For video, User will be able to check details of the training and not just the video (about, discussion, review).
- For video, User will be able to select the training level (beginner, medium, advanced)
- Training recommendation list
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5
- Provide comments on the page elements 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 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 on 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 creating 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
- Keep in mind that we will create Drupal Template from this prototype, so consider it for any JS framework that you will use for this prototype!
- Angular? AngularJS? Bootstrap? jquery? We are open for any suggestion as long the technology can be aligned with Drupal template!
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11 and Edge
Documentation Provided:
- Storyboards (You can find it in Challenge Forum -> UI Prototype Documents)
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool
Welcome to "FAST! 48HR HERCULES - P2 Training Portal UI Prototype Challenge". In this Fast UI Prototype Challenge, we need your help to create a responsive HTML5 prototype for our P2 Training Portal. We are planning to create this portal as a responsive website, but for now, we are going to focus on Desktop/Web version only. Read more details below and Join us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
"P2" is an enterprise-wide integrated workflow orchestration tool that tracks the progress of all construction job types – providing visibility into the status of milestones, accurate cost of each project, the data to build forecasts, and the ability to roll up those metrics to a national view. For this challenge, we are building a simple website that will be used by internal users to get information on the P2 program.
Primary Goal
- Create responsive UI Prototype (Desktop Only) for our P2 Training Portal platform.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop/Tablet/Mobile (Desktop only for this challenge)
Target Audience
- Internal employees or outside business partners with client approval
-- There will be employees ranging from field techs to employees that are essentially program managers for construction jobs.
-- Age range: most likely from late teens (folks who graduated high school) all the way up to retirement age.
-- Gender: all genders
Competition Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- There are 3 pages that need to be built. The screens for the pages are attached in forum.
- Replicate the design of the approved Storyboards (PSD Files) for all page.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
1) Homepage
Screen Reference "1.Homepage.png"
- Use this source for video section for now "https://www.youtube.com/watch?v=5anjHBgl5X8"
- Would love to see some animation to show the homepage content one at a time when user scrolling down
- P2 Launch Roadmap section needs to make the hide/expand feature works.
- Testimonial area needs to be carousel that runs automatically.
- Click "Learn More" button in any area of the homepage will redirect the user to Training Page.
- Global Search in the top right area needs to bring the user to Training Page.
- Needs to provide notification (no design for this) area
2) Training Page
Screen Reference "2.Training.png" and "3.-Categories.png"
- This screen will show all training materials available on the platform
- Since the training Materials list can be huge, the user will be able to shrink and find any training materials that they want using category (3.-Categories.png) or by using Sorting and Filters features in the platform.
- When user hovering any thumbnails list, it will either show short video preview (for video) or fast preview of image gallery (for other formats except video)
- Clicking "Load More" should loading more training data. Show us what will happen if we reach the end of Training List.
- All the Material list card needs to have a hover state, maybe adding shadow when the pointer hovering us.
- Clicking the card will bring user to Training Details page
- Clicking "My Training" button will show list of training materials that user followed and subscribed (Out of scope for now)
3) Training Details Page
Screen Reference "4.-Video.png" and "5.-Word.png"
- Training details can be divided into 2 content, Video (4.-Video.png) and Non-Video (5.-Word.png), we need both screens simulated.
- Ability to see the overall rating, tags, time needed to complete the course, how many users joined the training.
- Ability to Bookmark the training details.
- For video, show list of training videos
- For video, User will be able to check details of the training and not just the video (about, discussion, review).
- For video, User will be able to select the training level (beginner, medium, advanced)
- Training recommendation list
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5
- Provide comments on the page elements 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 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 on 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 creating 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
- Keep in mind that we will create Drupal Template from this prototype, so consider it for any JS framework that you will use for this prototype!
- Angular? AngularJS? Bootstrap? jquery? We are open for any suggestion as long the technology can be aligned with Drupal template!
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11 and Edge
Documentation Provided:
- Storyboards (You can find it in Challenge Forum -> UI Prototype Documents)
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool